topical media & game development
mobile-graphic-easel-examples-SpriteSheetFlip.htm / htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Flipping a sprite sheet</title>
<link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-UID.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Matrix2D.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-EventDispatcher.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-DisplayObject.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Container.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Stage.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-MouseEvent.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-SpriteSheet.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Rectangle.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-SpriteSheetUtils.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script>
var imgSeq = new Image(); //bmp of the sprite sheet
var results; //frame data to be displayed
var imageSrc = "mobile-graphic-easel-examples-assets-runningGrantSmall.png";
function init() {
document.getElementById('origImage').src = imageSrc;
//wait for the image to load
imgSeq.onload = handleImageLoad;
imgSeq.src = imageSrc;
}
function handleImageLoad() {
// create a new sprite sheet from the loaded image, and define the animation sequences in it.
// for example, {walkUpRight:[0,19]} defines an animation sequence called "walkUpRight" that
// will play back frames 0 to 19 inclusive.
var spriteSheet = new createjs.SpriteSheet(
{"animations":
{
"run": [0, 15]},
"images": ["mobile-graphic-easel-examples-assets-runningGrantSmall.png"],
"frames":
{
"regX": 0,
"regY": 0,
"width": 51,
"height": 90,
"count": 16
}
}
);
// append flipped frames to the sprite sheet. The 2nd, 3rd, and 4th params indicate whether
// to add horizontal, vertical, and both horizontally & vertically flipped frames.
createjs.SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false);
// add the newly created sprite sheet to the bottom of this document. We're accessing a private property "_images"
// for demonstration purposes only.
document.getElementById("content").appendChild(spriteSheet._images[1]);
}
</script>
</head>
<body onload="init();" bgcolor="#FFFFFF">
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> SpriteSheet Flip Sample</h1>
<p>Tests using the <strong>SpriteSheetUtils.flip()</strong> method to extend a loaded sprite sheet with horizontally flipped frames.
The top row of frames is from the original sprite sheet, the bottom is the generated frames.
</p>
</header>
<div class="content">
<div id="content" style="margin-top: 90px; margin-left: 70px; font-weight: bold;">
Original sprite sheet<br/><br/>
<img id="origImage"><br/><br/><br/>
Appended sprites<br/><br/>
</div>
</div>
</body>
</html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
