-
Notifications
You must be signed in to change notification settings - Fork 4
/
sprite.html
424 lines (397 loc) · 20.3 KB
/
sprite.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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sprite</title>
<style type="text/css">
/*just for the documentation, doesn’t concern the Sprite class*/
body
{
background-color:#FFF;
color:#000;
font-family:Helvetica, Arial;
font-size:12px;
padding:50px;
}
body > div
{
width:600px;
padding:20px 0;
margin-top:30px;
}
body > div, footer
{
border-top:1px solid #000;
}
footer
{
padding-top:20px;
}
/*end documentation css*/
#basic figure
{
width:220px;
height:138px;
background-image:url(img/elephant_sprite.jpg);
background-size:400% 800%;
}
#looping figure
{
width:220px;
height:138px;
background-image:url(img/elephant_sprite_loop.jpg);
background-size:400% 800%;
}
#forwardRewind figure
{
width:220px;
height:138px;
background-image:url(img/elephant_sprite.jpg);
background-size:400% 800%;
}
#forwardForward figure
{
width:220px;
height:138px;
background-image:url(img/elephant_sprite_forward.jpg);
background-size:400% 800%;
}
#super figure
{
width:220px;
height:138px;
position:relative;
}
#super figure div
{
background-size:400% 400%;
height:100%;
width:100%;
position:absolute;
}
#super #part1
{
background-image:url(img/elephant_super_sprite_1.jpg);
}
#super #part2
{
background-image:url(img/elephant_super_sprite_2.jpg);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
{
#basic figure
{
background-image:url(img/elephant_sprite@2x.jpg);
}
#looping figure
{
background-image:url(img/elephant_sprite_loop@2x.jpg);
}
#forwardRewind figure
{
background-image:url(img/elephant_sprite@2x.jpg);
}
#forwardForward figure
{
background-image:url(img/elephant_sprite_forward@2x.jpg);
}
#super #part1
{
background-image:url(img/elephant_super_sprite_1@2x.jpg);
}
#super #part2
{
background-image:url(img/elephant_super_sprite_2@2x.jpg);
}
}
</style>
</head>
<body>
<h1>Sprite</h1>
<p><strong>Package</strong> : com.danehansen.display <br />
<strong>Class</strong> : public class Sprite <br />
<strong>Inheritance</strong> : Sprite > EventDispatcher > Object <br />
<strong>Subclasses</strong> : ForwardForward, ForwardRewind, SuperSprite</p>
<p>A sprite class designed to easily create/manipulate animated sprite sheets. This class depends on TweenLite.js which is available at <a href="http://greensock.com/">http://greensock.com/</a> as well as EventDispatcher.js. It is assumed that the sprite sheet will be laid out left to right, top to bottom.</p>
<p>In addition to TweenLite, a certain amount of css styling will have to be applied to the elements to be animated. It is assumed that they will be provided with a <code>background-image</code>, and that the element will have a size applied as well. If the element will be resized or if a retina version of the image will be supplied, then the a <code>background-size</code> property will also have to be applied to the element. For example, if your sprite sheet has 4 columns and 8 rows, your element’s css will read something like this: .</p>
<pre><code>{
width:220px;
height:138px;
background-imgage:url(http://goo.gl/XDwsNz);
background-size:400% 800%;
}
</code></pre>
<h2>Public Properties</h2>
<ul>
<li><strong>ease</strong> : Function <br />
Easing method used to move playhead. Set to Linear.easeNone by default.</li>
<li><strong>element</strong> : Element <br />
[Read-only] DOM Element manipulated.</li>
<li><strong>frameRate</strong> : unit <br />
The rate per second at which the sprite will play through.</li>
<li><strong>loop</strong> : Boolean <br />
Whether or not the sprite instance is intended to play as a loop. If the beginning and end sprite frames are the same, then you want this set to true. Otherwise the sprite is confined to a finite timeline of 0 to 1.</li>
</ul>
<h2>Public Methods</h2>
<ul>
<li><strong>Sprite</strong>(element:Element, columns:uint, totalFrames:uint, loop:Boolean = false, frameRate:uint = 60) <br />
Creates a Sprite object, using a provided dom element, number of columns of the sprite sheet background image, the total number of frames, whether it will loop or not, and the frame rate.</li>
<li><strong>frame</strong>(value:int):* <br />
Gets or sets the sprite’s frame. In a typical forward/rewind sprite, this number is limited between 0 and the total number of frames. In a looping sprite, this number can wrap and even be negative.</li>
<li><strong>frameTo</strong>(value:Number) <br />
Similar to setting the frame, except that the sprite will play to that frame at the current frame rate.</li>
<li><strong>nextFrame</strong>() <br />
Increments the sprite by one frame.</li>
<li><strong>play</strong>(loop:Boolean = false) <br />
Causes the sprite to play at the current frame rate until the end frame is reached. If loop is set to true and is a looping type sprite, the sprite will play indefinitely.</li>
<li><strong>prevFrame</strong>() <br />
Decrements the sprite by one frame.</li>
<li><strong>progress</strong>(value:Number):* <br />
Gets or sets the sprite’s progress. In a typical forward/rewind sprite, this number is limited between 0 and 1. In a looping sprite, this number can wrap and even be negative.</li>
<li><strong>progressTo</strong>(value:Number) <br />
Similar to setting the progress, except that the sprite will play to that progress point at the current frame rate.</li>
<li><strong>resize</strong>() <br />
Causes the sprite to recalculate it’s size. Only needed if the element has dynamic css sizing or if the element has been manually sized using JavaScript.</li>
<li><strong>rewind</strong>(loop:Boolean = false) <br />
Causes the sprite to play backwards at the current frame rate until the first frame is reached. If loop is set to true and is a looping type sprite, the sprite will play indefinitely.</li>
<li><strong>stop</strong>() <br />
Causes the sprite to stop any playback.</li>
</ul>
<h2>Public Constants</h2>
<ul>
<li><strong>COMPLETE</strong> : String = "complete" <br />
[static] The Sprite.COMPLETE constant defines the value of the type property of a complete event object.</li>
<li><strong>ENTER_FRAME</strong> : String = "enterFrame" <br />
[static] The Sprite.ENTER_FRAME constant defines the value of the type property of a enterFrame event object.</li>
<li><strong>REVERSE_COMPLETE</strong> : String = "reverseComplete" <br />
[static] The Sprite.REVERSE_COMPLETE constant defines the value of the type property of a reverseComplete event object.</li>
</ul>
<h2>Events</h2>
<ul>
<li><strong>complete</strong> <br />
Dispatched when the progress has reached 1 on a linear sprite, or any whole number while playing forward in the case of a looping sprite.</li>
<li><strong>enterFrame</strong> <br />
Dispatched when the playhead is entering a new frame.</li>
<li><strong>reverseComplete</strong> <br />
Dispatched when the progress has reached 0 on a linear sprite, or any whole number while playing backward in the case of a looping sprite.</li>
</ul>
<h1>ForwardRewind</h1>
<p><strong>Package</strong> : com.danehansen.display <br />
<strong>Class</strong> : public class ForwardRewind <br />
<strong>Inheritance</strong> : ForwardRewind > Sprite > EventDispatcher > Object </p>
<p>A class designed to quickly make an animated sprite play forward on mouse over, and reverse on mouse out. Great for rollover states on buttons. This class depends on TweenLite.js which is available at <a href="http://greensock.com/">http://greensock.com/</a> as well as Sprite.js and EventDispatcher.js. Instantiating it is almost exactly like its parent class, Sprite, minus the loop argument in the constructor as a ForwardRewind instance is designed to play only forward and back between 0 and 1.</p>
<h2>Public Methods</h2>
<ul>
<li><strong>ForwardRewind</strong>(element:Element, columns:uint, totalFrames:uint, frameRate:uint = 60) <br />
Creates a ForwardRewind object, using a provided dom element, number of columns of the sprite sheet background image, the total number of frames, and the frame rate.</li>
<li><strong>activate</strong>() <br />
Adds the event listeners for mouseOver and mouseOut.</li>
<li><strong>deactivate</strong>() <br />
Removes the event listeners for mouseOver and mouseOut. Call this method if you no longer want to use the instance or wish to dispose of it.</li>
</ul>
<h1>ForwardForward</h1>
<p><strong>Package</strong> : com.danehansen.display <br />
<strong>Class</strong> : public class ForwardForward <br />
<strong>Inheritance</strong> : ForwardForward > Sprite > EventDispatcher > Object </p>
<p>A class designed to quickly make an animated sprite play forward to a given frame on mouse over, and then continue to the end and back to the first frame on mouse out. Great for rollover states on buttons. This class depends on TweenLite.js which is available at <a href="http://greensock.com/">http://greensock.com/</a> as well as Sprite.js and EventDispatcher.js. Instantiating it is almost exactly like its parent class, Sprite, minus the loop argument in the constructor as a ForwardForward instance is designed to utilize a looping sprite sheet.</p>
<h2>Public Methods</h2>
<ul>
<li><strong>ForwardForward</strong>(element:Element, columns:uint, totalFrames:uint, overFrame:uint, frameRate:uint = 60) <br />
Creates a ForwardForward object, using a provided dom element, number of columns of the sprite sheet background image, the total number of frames, the over frame number, and the frame rate.</li>
<li><strong>activate</strong>() <br />
Adds the event listeners for mouseOver and mouseOut.</li>
<li><strong>deactivate</strong>() <br />
Removes the event listeners for mouseOver and mouseOut. Call this method if you no longer want to use the instance or wish to dispose of it.</li>
<li><strong>overFrame</strong>(value:uint):* <br />
Gets or sets the sprite’s mouse over frame. This would be a uint somewhere in between your sprite’s first and last frames that the instance would settle on, until moused out.</li>
</ul>
<h1>SuperSprite</h1>
<p><strong>Package</strong> : com.danehansen.display <br />
<strong>Class</strong> : public class SuperSprite <br />
<strong>Inheritance</strong> : SuperSprite > Sprite > EventDispatcher > Object </p>
<p>A sprite class designed for when you need to divide your sprite into several separate images. One reason for doing this would be if your sprite exceeds a total of 5 million pixels. Browsers (especially mobile) tend to have unpredictable behavior when a background image exceeds 5 million pixels. This class depends on TweenLite.js which is available at <http://greensock.com/> as well as Sprite.js and EventDispatcher.js.</p>
<h2>Public Properties</h2>
<ul>
<li><strong>sprites</strong> : Array <br />
[Read-only] An array of the subsprites.</li>
</ul>
<h2>Public Methods</h2>
<ul>
<li><strong>SuperSprite</strong>(sprites:Array, loop:Boolean = false, frameRate:uint = 60) <br />
Creates a SuperSprite object, using an array of subsprites, whether it will loop or not, and the frame rate.</li>
<li><strong>resize</strong>() <br />
[override] Calls the resize method on all subsprites.</li>
</ul>
<div id="basic">
<h2>EXAMPLE 1: BASIC SPRITE</h2>
<figure id="basicSprite"></figure>
<pre><code>var sprite=new Sprite(document.getElementById("basicSprite"), 4, 30);</code></pre>
<button id="basicRewind">sprite.rewind();</button>
<button id="basicPrev">sprite.prevFrame();</button>
<button id="basicStop">sprite.stop();</button>
<button id="basicNext">sprite.nextFrame();</button>
<button id="basicPlay">sprite.play();</button>
<code><pre>sprite.progress(<span id="spriteProgress">0</span>);</pre></code>
<input id="basicProgress" type="range" max="1" step="0.01" value="0"/>
<code><pre>sprite.frame(<span id="spriteFrame">0</span>);</pre></code>
<input id="basicFrame" type="range" max="29" value="0"/>
<code><pre>sprite.progressTo(<span id="spriteProgressTo">0</span>);</pre></code>
<input id="basicProgressTo" type="range" max="1" step="0.01" value="0"/>
<code><pre>sprite.frameTo(<span id="spriteFrameTo">0</span>);</pre></code>
<input id="basicFrameTo" type="range" max="29" value="0"/>
</div>
<div id="looping">
<h2>EXAMPLE 2: LOOPING SPRITE</h2>
<figure id="loopingSprite"></figure>
<pre><code>var sprite=new Sprite(document.getElementById("loopingSprite"), 4, 30, true, 24);</code></pre>
<button id="loopingBackward">sprite.rewind(true);</button>
<button id="loopingRewind">sprite.rewind();</button>
<button id="loopingPrev">sprite.prevFrame();</button>
<button id="loopingStop">sprite.stop();</button>
<button id="loopingNext">sprite.nextFrame();</button>
<button id="loopingPlay">sprite.play();</button>
<button id="loopingForward">sprite.play(true);</button>
<form>
<code><pre>sprite.progress(<span id="loopingProgressVal">0</span>);</pre></code>
<input id="loopingProgress" type="range" step="0.01" value="0" max="1"/>
</form>
<form>
<code><pre>sprite.frame(<span id="loopingFrameVal">0</span>);</pre></code>
<input id="loopingFrame" type="range" value="0" max="29"/>
</form>
<form>
<code><pre>sprite.progressTo(<span id="loopingProgressToVal">0</span>);</pre></code>
<input id="loopingProgressTo" type="range" step="0.01" value="0" max="1"/>
</form>
<form>
<code><pre>sprite.frameTo(<span id="loopingFrameToVal">0</span>);</pre></code>
<input id="loopingFrameTo" type="range" value="0" max="29"/>
</form>
</div>
<div id="forwardRewind">
<h2>EXAMPLE 3: FORWARD/REWIND</h2>
<figure id="forwardRewindSprite"></figure>
<pre><code>var forwardRewind=new ForwardRewind(document.getElementById("forwardRewindSprite"), 4, 30);</code></pre>
</div>
<div id="forwardForward">
<h2>EXAMPLE 4: FORWARD/FORWARD</h2>
<figure id="forwardForwardSprite"></figure>
<pre><code>var forwardForward=new ForwardForward(document.getElementById("forwardForwardSprite"), 4, 30, 15);</code></pre>
</div>
<div id="super">
<h2>EXAMPLE 5: SUPER SPRITE</h2>
<figure>
<div id="part1"></div>
<div id="part2"></div>
</figure>
<pre><code>var superSprite=new SuperSprite(
[new Sprite(document.getElementById("part1"), 4, 16),
new Sprite(document.getElementById("part2"), 4, 14)], false);</code></pre>
<button id="superRewind">superSprite.rewind();</button>
<button id="superPrev">superSprite.prevFrame();</button>
<button id="superStop">superSprite.stop();</button>
<button id="superNext">superSprite.nextFrame();</button>
<button id="superPlay">superSprite.play();</button>
</div>
<footer>author: Dane Hansen, <a href="mailto:dane@danehansen.com">dane@danehansen.com</a></footer>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/TweenLite.min.js"></script>
<script src='js/danehansen/events/EventDispatcher.js'></script>
<script src='js/danehansen/display/Sprite.js'></script>
<script src='js/danehansen/display/ForwardRewind.js'></script>
<script src='js/danehansen/display/ForwardForward.js'></script>
<script src='js/danehansen/display/SuperSprite.js'></script>
<script>
(function() {
//basic sprite
var basic=new Sprite(document.getElementById("basicSprite"), 4, 30);
document.getElementById("basicRewind").addEventListener("click", basic.rewind);
document.getElementById("basicPrev").addEventListener("click", basic.prevFrame);
document.getElementById("basicStop").addEventListener("click", basic.stop);
document.getElementById("basicNext").addEventListener("click", basic.nextFrame);
document.getElementById("basicPlay").addEventListener("click", basic.play);
document.getElementById("basicProgress").addEventListener("input", function(evt){
var val=parseFloat(evt.target.value);
basic.progress(val);
document.getElementById("spriteProgress").innerHTML=val;
});
document.getElementById("basicFrame").addEventListener("input", function(evt){
var val=parseFloat(evt.target.value);
basic.frame(val);
document.getElementById("spriteFrame").innerHTML=val;
});
document.getElementById("basicProgressTo").addEventListener("input", function(evt){
var val=parseFloat(evt.target.value);
basic.progressTo(val);
document.getElementById("spriteProgressTo").innerHTML=val;
});
document.getElementById("basicFrameTo").addEventListener("input", function(evt){
var val=parseFloat(evt.target.value);
basic.frameTo(val);
document.getElementById("spriteFrameTo").innerHTML=val;
});
basic.addEventListener(Sprite.ENTER_FRAME, logEvent);
basic.addEventListener(Sprite.COMPLETE, logEvent);
basic.addEventListener(Sprite.REVERSE_COMPLETE, logEvent);
//looping sprite
var looping=new Sprite(document.getElementById("loopingSprite"), 4, 30, true, 24);
document.getElementById("loopingBackward").addEventListener("click", function(){
looping.rewind(true);
});
document.getElementById("loopingRewind").addEventListener("click", looping.rewind);
document.getElementById("loopingPrev").addEventListener("click", looping.prevFrame);
document.getElementById("loopingStop").addEventListener("click", looping.stop);
document.getElementById("loopingNext").addEventListener("click", looping.nextFrame);
document.getElementById("loopingPlay").addEventListener("click", looping.play);
document.getElementById("loopingForward").addEventListener("click", function(){
looping.play(true);
});
document.getElementById("loopingProgress").addEventListener("input", function(evt){
var val=parseFloat(evt.target.value);
looping.progress(val);
document.getElementById("loopingProgressVal").innerHTML=val;
});
document.getElementById("loopingFrame").addEventListener("input", function(evt){
var val=parseFloat(evt.target.value);
looping.frame(val);
document.getElementById("loopingFrameVal").innerHTML=val;
});
document.getElementById("loopingProgressTo").addEventListener("input", function(evt){
var val=parseFloat(evt.target.value);
looping.progressTo(val);
document.getElementById("loopingProgressToVal").innerHTML=val;
});
document.getElementById("loopingFrameTo").addEventListener("input", function(evt){
var val=parseFloat(evt.target.value);
looping.frameTo(val);
document.getElementById("loopingFrameToVal").innerHTML=val;
});
looping.addEventListener(Sprite.ENTER_FRAME, logEvent);
looping.addEventListener(Sprite.COMPLETE, logEvent);
looping.addEventListener(Sprite.REVERSE_COMPLETE, logEvent);
//forward/rewind
var forwardRewind=new ForwardRewind(document.getElementById("forwardRewindSprite"), 4, 30, 240);
forwardRewind.addEventListener(Sprite.ENTER_FRAME, logEvent);
forwardRewind.addEventListener(Sprite.COMPLETE, logEvent);
forwardRewind.addEventListener(Sprite.REVERSE_COMPLETE, logEvent);
//forward/forward
var forwardForward=new ForwardForward(document.getElementById("forwardForwardSprite"), 4, 30, 15);
forwardForward.addEventListener(Sprite.ENTER_FRAME, logEvent);
forwardForward.addEventListener(Sprite.COMPLETE, logEvent);
//super sprite
var superSprite=new SuperSprite([new Sprite(document.getElementById("part1"), 4, 16), new Sprite(document.getElementById("part2"), 4, 14)], false);
document.getElementById("superRewind").addEventListener("click", superSprite.rewind);
document.getElementById("superPrev").addEventListener("click", superSprite.prevFrame);
document.getElementById("superStop").addEventListener("click", superSprite.stop);
document.getElementById("superNext").addEventListener("click", superSprite.nextFrame);
document.getElementById("superPlay").addEventListener("click", superSprite.play);
superSprite.addEventListener(Sprite.ENTER_FRAME, logEvent);
superSprite.addEventListener(Sprite.COMPLETE, logEvent);
//logging events
function logEvent(evt)
{
console.log(evt.type, evt.type==Sprite.ENTER_FRAME?evt.target.frame():evt.target.progress(), evt.target);
}
})();
</script>
</body>
</html>