-
Notifications
You must be signed in to change notification settings - Fork 2k
/
Copy pathSpriteSheetBuilder.html
executable file
·114 lines (93 loc) · 4.51 KB
/
SpriteSheetBuilder.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EaselJS Example: SpriteSheetBuilder</title>
<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
<script src="../_assets/js/examples.js"></script>
<script src="../lib/easeljs-NEXT.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script id="editable">
var canvas;
var stage;
function init() {
//find canvas and load images, wait for last image to load
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
// set up a couple of display objects which will act as source material, and add them to the stage:
var circle = new createjs.Shape();
circle.graphics.beginFill("#F00").drawCircle(0, 0, 30).beginFill("#C00").drawCircle(0, 0, 10);
//By default swapping between Stage for StageGL will not allow for vector drawing operation such as BitmapFill, useless you cache your shape.
circle.cache(-30, -30, 60, 60);
circle.setTransform(100, 90);
var square = new createjs.Container();
var squareBg = square.addChild(new createjs.Shape());
squareBg.graphics.beginFill("#00F").drawRect(0, 0, 80, 80);
var squareFld = square.addChild(new createjs.Text("1", "bold 72px Arial", "#9BF"));
squareFld.textBaseline = "top";
squareFld.textAlign = "center";
squareFld.x = 40;
square.setTransform(150, 50);
// we'll define the bounds of this shape here, and it will be used when we addFrame:
square.bounds = new createjs.Rectangle(0, 0, 80, 80);
//By default swapping between Stage for StageGL will not allow for vector drawing operation such as BitmapFill, useless you cache your shape.
square.cache(-0, -0, 80, 80);
stage.addChild(circle, square);
// create the sprite sheet builder:
var builder = new createjs.SpriteSheetBuilder();
// add the circle as a frame, specify the bounds to draw, and grab the frame index:
var index = builder.addFrame(circle, new createjs.Rectangle(-30, -30, 60, 60));
// add a named animation using the frame index:
builder.addAnimation("circle", index);
// add the square as a sequence of frames, each with a different number in the text field:
var frames = [];
for (var i = 0; i < 5; i++) {
// we're defining a setup function that will update the text before each frame draw.
// the setup function will be called right before the draw, and passed the setup params "i":
index = builder.addFrame(square, null, 1, function (target, data) {
squareFld.text = data;
//By default swapping between Stage for StageGL will not allow for vector drawing operation such as BitmapFill, useless you cache your shape.
square.updateCache(-0, -0, 80, 80);
}, i);
// save off the index of each frame in order to use when defining the animation:
frames.push(index);
}
// create an animation named square that comprises all of the frames we just added:
// we're also telling it to loop the animation and setting a frequency so it updates every 8 ticks:
builder.addAnimation("square", frames, true, 8);
// run the build operation, and grab the resulting sprite sheet:
// we could also do this asynchronously with buildAsync(...)
var spriteSheet = builder.build();
// create our bitmap animations using the generated sprite sheet, and put them on stage:
var circle2 = new createjs.Sprite(spriteSheet, "circle");
circle2.setTransform(100, 90 + 200);
stage.addChild(circle2);
var square2 = new createjs.Sprite(spriteSheet, "square");
square2.setTransform(150, 50 + 200);
stage.addChild(square2);
// add in the generated spritesheet image for demo purposes:
stage.addChild(new createjs.Bitmap(spriteSheet._images[0])).set({x: 75, y: 150});
// we want to do some work before we update the canvas,
// otherwise we could use Ticker.addEventListener("tick", stage);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();">
<header class="EaselJS">
<h1>SpriteSheetBuilder Sample</h1>
<p>Using <code>SpriteSheetBuilder</code> to generate
<code>SpriteSheet</code> instances at run time. The top row are the
original vector "source" objects.
The middle row shows the spritesheet image that was generated.
The bottom row contains <code>Sprite</code> instances displaying frames
from the <code>SpriteSheet</code>.
</p>
</header>
<div>
<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>