-
Notifications
You must be signed in to change notification settings - Fork 759
/
Copy pathSpriteSheet.html
155 lines (130 loc) · 4.45 KB
/
SpriteSheet.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
<head>
<title>EaselJS: Sprite Sheet Example</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>
</head>
<body onload="init();">
<header class="EaselJS">
<h1>Sprite Sheets</h1>
<p>An example of the <code>SpriteSheetLoader</code>, which automatically parses loaded JSON, and will internally preload
associated images and instantiate a <code>SpriteSheet</code> instance before the <code>complete</code> event is fired.</p>
<p>Some browsers can not load images or access pixel data when running local files, and may throw a security
error or not work unless the content is running on a server.</p>
</header>
<div>
<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
<script src="../_assets/libs/easeljs-NEXT.min.js"></script>
<script type="text/javascript" src="../lib/preloadjs-NEXT.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script type="text/javascript" id="editable">
var assets;
var stage;
var w, h;
var sky, grant, ground, hill, hill2;
var runningRate, isInWarp, isStationary;
var stationaryPosition, isPassed, spriteSheet;
function init() {
examples.showDistractor();
var canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
runningRate = 2.5;
isInWarp = false;
isStationary = false;
stationaryPosition = 300;
isPassed = false;
// grab canvas width and height for later calculations:
w = canvas.width;
h = canvas.height;
assets = [];
manifest = [
{src: "art/sky.png", id: "sky"},
{src: "art/ground.png", id: "ground"},
{src: "art/hill2.png", id: "hill2"},
{src: "art/hill1.png", id: "hill"},
{src: "static/grant.json", id:"grant", type:"spritesheet", crossOrigin:true}
];
var loader = new createjs.LoadQueue(true, "../_assets/");
loader.on("fileload", handleFileLoad);
loader.on("complete", handleComplete);
loader.loadManifest(manifest);
stage.autoClear = false;
}
function handleFileLoad(event) {
assets.push(event);
}
function handleComplete() {
for (var i = 0; i < assets.length; i++) {
var event = assets[i];
var id = event.item.id;
var result = event.result;
switch (id) {
case "sky":
sky = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0, 0, w, h));
break;
case "ground":
ground = new createjs.Shape();
var g = ground.graphics;
g.f("#f00");
g.beginBitmapFill(result);
g.drawRect(0, 0, w + 330, 79);
ground.y = h - 79;
break;
case "hill":
// Vertically offset the pattern fill by 1 to solve a Chrome bug on BitmapFills
hill = new createjs.Shape(new createjs.Graphics().f("#f00").beginBitmapFill(result).drawRect(0, 1, 282, 60));
hill.x = Math.random() * w | 0;
hill.scaleX = hill.scaleY = 3;
hill.y = 144;
break;
case "hill2":
hill2 = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0, 1, 212, 51));
hill2.x = Math.random() * w | 0;
hill2.scaleX = hill2.scaleY = 3;
hill2.y = 171;
break;
case "grant":
var spriteSheet = result;
spriteSheet.getAnimation("run").next = "run";
spriteSheet.getAnimation("jump").next = "run";
grant = new createjs.Sprite(spriteSheet, "run")
.set({x: -200, y:40, scaleX:0.8, scaleY:0.8});
}
}
examples.hideDistractor();
if (grant == null) {
console.error("Can not play. Grant sprite was not loaded.");
return;
}
stage.addChild(sky, hill, hill2, ground, grant);
stage.on("mousedown", handleJumpStart);
createjs.Ticker.framerate = 40;
createjs.Ticker.on("tick", tick);
}
function handleJumpStart() {
grant.gotoAndPlay("jump");
}
function tick() {
var outside = w + 20;
var position = grant.x + runningRate;
grant.x = (position >= outside) ? -200 : position;
ground.x = (ground.x - 15) % 330;
hill.x = (hill.x - 0.8);
if (hill.x + 838 <= 0) {
hill.x = outside;
}
hill2.x = (hill2.x - 1.2);
if (hill2.x + 633 <= 0) {
hill2.x = outside;
}
stage.update();
}
</script>
</body>
</html>