The enchant.jsAnimation Engine  in 5 Minutes
IntroductionsRyohei Fushimi (@sidestepism)Ubiquitous Entertainment, Inc. (UEI)Akihabara Research Center (ARC)9leap Project...
If we want to make the bear move...
bear.addEventListener(“enterframe”, function(){    bear.x ++;});// moves the bear to the right by one pixel every frame
He moves!
But he doesn’t stop...
bear.addEventListener(“enterframe”, function(){    if(bear.x < 100)bear.x ++;});// moves the bear to the right by one pixe...
This time...
He stopped!
But...
But...
But...
What about movement like this?
We useanimation.enchant.js
kind of wordy...          We useanimation.enchant.js
We useanimation.enchant.js
We use               tl.enchant.jsNote: As of version v0.6, tl.enchant.js is now part of  the enchant.js main library, and...
tl : abbreviation for TimeLine     We’ll explain this later.
// To move the bear to (120,120) over 30 frames (1second by the default 30 fps)bear.tl.moveTo(120, 120, 30);
// First move the bear to (120, 120) over 30 frames,// then move the bear to (60,180) over 30 frames.bear.tl.moveTo(120, 1...
// Move the bear to (120, 120) over 30 frames,// then move the bear to (60, 180) over 30 frames,// then move the bear to (...
Order of processing          moveTo(120, 120, 30)                                  Representation of          moveTo(180, ...
Movement    Feature #0               moveTo/moveBybear.tl.moveTo(120, 120, 30);// absolute movement to (120, 120)bear.tl.m...
Feature #1        Fade in                      fadeInbear.tl.fadeIn(30);// fade in over 30 frames
Feature #2     Changing size                   scaleTo/scaleBybear.tl.scaleTo(3, 30);// scale the bear by a factor of 3 (3...
Feature #3     Specified time delay                   delaybear.tl.delay(30).fadeIn(30);// wait 30 frames, then fade the b...
Feature #4     Run a function                   thenbear.tl.delay(30).then(function(){    scene.removeChild(bear);});// wa...
Feature #5      Run multiple functions                     cuebear.tl.cue({    10: function(){ ... },    20: function(){ ....
Feature #6     Tweening                   tweenbear.tl.tween({    x: 120,    y: 120,    scaleX: 3,    scaleY: 3,    time: ...
Feature #7   Parallel Execution                 andbear.tl.fadeIn(30).moveTo(120, 120, 30)// fade in over 30 frames, and t...
Feature #8   loops                 loopbear.tl.fadeIn(30).fadeOut(30).loop();// loop an animation of fading in over 30 fra...
Feature #9   Fast-forward                 skipbear.tl.skip(100);// fast-forward by 100 frames
Feature#10 Execute a function repeatedly             repeatFeature#11   Pause/resume the queue             pause / resumeF...
Execute a function, wait for it to complete,Feature#13   and then move on             waitUntilFeature#14 Define an action...
Feature#16    Time-based animation                  setTimeBasedbear.tl.setTimeBased();bear.tl.fadeIn(3000)// make all tl ...
You must remember  EASING
If the rate at which a sprite moves        changes over time...
this is called EASING!       If this is confusing, please see the first part ofhttp://bit.ly/109CYbP for an explanation of...
// Easingbear.tl.moveTo(120, 120, 30, enchant.Easing.QUAD_EASEINOUT);bear.tl.tween({   x: 120,                            ...
Several preset easing functions can be chosen                    from.                       QUAD_                       Q...
The Tweener Transition Cheat Sheet        http://bit.ly/3u7B6    explains these movements
As you can see, many different functions and features exist for animation and timelines in     the animation engine of enc...
Check it out on github if you haven’t already!
The enchant.jsanimation engine
Upcoming SlideShare
Loading in …5
×

The Enchant.js Animation Engine in 5 Minutes

6,401 views

Published on

4 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
6,401
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
54
Comments
4
Likes
4
Embeds 0
No embeds

No notes for slide

The Enchant.js Animation Engine in 5 Minutes

  1. 1. The enchant.jsAnimation Engine in 5 Minutes
  2. 2. IntroductionsRyohei Fushimi (@sidestepism)Ubiquitous Entertainment, Inc. (UEI)Akihabara Research Center (ARC)9leap Project LeaderEnglish Translation:Brandon McInnis (@BrandonUnfathom)enchant.js Technical Evangelist
  3. 3. If we want to make the bear move...
  4. 4. bear.addEventListener(“enterframe”, function(){ bear.x ++;});// moves the bear to the right by one pixel every frame
  5. 5. He moves!
  6. 6. But he doesn’t stop...
  7. 7. bear.addEventListener(“enterframe”, function(){ if(bear.x < 100)bear.x ++;});// moves the bear to the right by one pixel every frame IF the bear’s positionon the x-axis is less than 100//(x,y coordinates always start at (0,0) in the upper left-hand corner)
  8. 8. This time...
  9. 9. He stopped!
  10. 10. But...
  11. 11. But...
  12. 12. But...
  13. 13. What about movement like this?
  14. 14. We useanimation.enchant.js
  15. 15. kind of wordy... We useanimation.enchant.js
  16. 16. We useanimation.enchant.js
  17. 17. We use tl.enchant.jsNote: As of version v0.6, tl.enchant.js is now part of the enchant.js main library, and not a separateplugin. The following examples still work the same way, however.
  18. 18. tl : abbreviation for TimeLine We’ll explain this later.
  19. 19. // To move the bear to (120,120) over 30 frames (1second by the default 30 fps)bear.tl.moveTo(120, 120, 30);
  20. 20. // First move the bear to (120, 120) over 30 frames,// then move the bear to (60,180) over 30 frames.bear.tl.moveTo(120, 120, 30).moveTo(60, 180, 30);
  21. 21. // Move the bear to (120, 120) over 30 frames,// then move the bear to (60, 180) over 30 frames,// then move the bear to (180, 90) over 30 frames.bear.tl.moveTo(120, 120, 30) .moveTo(60, 180, 30) .moveTo(180, 90, 30);
  22. 22. Order of processing moveTo(120, 120, 30) Representation of moveTo(180, 90, 30) how timeline commands are stacked in a queue. moveTo(160, 30, 30)
  23. 23. Movement Feature #0 moveTo/moveBybear.tl.moveTo(120, 120, 30);// absolute movement to (120, 120)bear.tl.moveBy(40, 40, 30);// relative movement by (+40, +40)
  24. 24. Feature #1 Fade in fadeInbear.tl.fadeIn(30);// fade in over 30 frames
  25. 25. Feature #2 Changing size scaleTo/scaleBybear.tl.scaleTo(3, 30);// scale the bear by a factor of 3 (3x normal size) over 30 frames
  26. 26. Feature #3 Specified time delay delaybear.tl.delay(30).fadeIn(30);// wait 30 frames, then fade the bear in over 30 frames
  27. 27. Feature #4 Run a function thenbear.tl.delay(30).then(function(){ scene.removeChild(bear);});// wait 30 frames, then remove the bear from the screen
  28. 28. Feature #5 Run multiple functions cuebear.tl.cue({ 10: function(){ ... }, 20: function(){ ... }, 30: function(){ ... }, 50: function(){ ... }});// execute functions at specified frames (i.e. at 10 frames afterexecution, run first function; 20 frames after execution, run secondfunction; etc.)
  29. 29. Feature #6 Tweening tweenbear.tl.tween({ x: 120, y: 120, scaleX: 3, scaleY: 3, time: 100});// perform multiple tl operations simultaneously over 100 frames// Did you know? The word “tween” comes from the word“inbetweening,” meaning to create animation frames between twokeyframes. http://en.wikipedia.org/wiki/Inbetweening
  30. 30. Feature #7 Parallel Execution andbear.tl.fadeIn(30).moveTo(120, 120, 30)// fade in over 30 frames, and then move to (120,120) over30 framesbear.tl.fadeIn(30).and().moveTo(120, 120, 30)// fade in over 30 frames and move to (120,120) over 30frames simultaneously!
  31. 31. Feature #8 loops loopbear.tl.fadeIn(30).fadeOut(30).loop();// loop an animation of fading in over 30 frames, and thenfading out over 30 frames
  32. 32. Feature #9 Fast-forward skipbear.tl.skip(100);// fast-forward by 100 frames
  33. 33. Feature#10 Execute a function repeatedly repeatFeature#11 Pause/resume the queue pause / resumeFeature#12 Erase the entire queue clear
  34. 34. Execute a function, wait for it to complete,Feature#13 and then move on waitUntilFeature#14 Define an action actionFeature#15 Erase from a scene removeFromScene
  35. 35. Feature#16 Time-based animation setTimeBasedbear.tl.setTimeBased();bear.tl.fadeIn(3000)// make all tl animation functions accept duration valuesin milliseconds instead of frames, then fade in the bearover 3000 ms (3 seconds)// this can be reversed with setFrameBased();// for more information on time-based animation withenchant.js, see Kevin Kratzer’s tutorial athttp://bit.ly/XcLHDC
  36. 36. You must remember EASING
  37. 37. If the rate at which a sprite moves changes over time...
  38. 38. this is called EASING! If this is confusing, please see the first part ofhttp://bit.ly/109CYbP for an explanation of the concept of easing, using Lego animation.
  39. 39. // Easingbear.tl.moveTo(120, 120, 30, enchant.Easing.QUAD_EASEINOUT);bear.tl.tween({ x: 120, Specify via a y: 120, function scaleX: 3, scaleY: 3, time: 100, easing: enchant.Easing.QUAD_EASEINOUT}));
  40. 40. Several preset easing functions can be chosen from. QUAD_ QUBIC_ QUINT_ SIN_ EASEIN enchant.Easing. BACK_ + EASEOUT CIRC_ ELASTIC_ EASEINOUT BOUNCE_ EXPO_
  41. 41. The Tweener Transition Cheat Sheet http://bit.ly/3u7B6 explains these movements
  42. 42. As you can see, many different functions and features exist for animation and timelines in the animation engine of enchant.js.
  43. 43. Check it out on github if you haven’t already!
  44. 44. The enchant.jsanimation engine

×