Your SlideShare is downloading. ×
0
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
The Enchant.js Animation Engine in 5 Minutes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Enchant.js Animation Engine in 5 Minutes

5,208

Published on

4 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,208
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
44
Comments
4
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The enchant.jsAnimation Engine in 5 Minutes
  • 2. IntroductionsRyohei Fushimi (@sidestepism)Ubiquitous Entertainment, Inc. (UEI)Akihabara Research Center (ARC)9leap Project LeaderEnglish Translation:Brandon McInnis (@BrandonUnfathom)enchant.js Technical Evangelist
  • 3. If we want to make the bear move...
  • 4. bear.addEventListener(“enterframe”, function(){ bear.x ++;});// moves the bear to the right by one pixel every frame
  • 5. He moves!
  • 6. But he doesn’t stop...
  • 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. This time...
  • 9. He stopped!
  • 10. But...
  • 11. But...
  • 12. But...
  • 13. What about movement like this?
  • 14. We useanimation.enchant.js
  • 15. kind of wordy... We useanimation.enchant.js
  • 16. We useanimation.enchant.js
  • 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. tl : abbreviation for TimeLine We’ll explain this later.
  • 19. // To move the bear to (120,120) over 30 frames (1second by the default 30 fps)bear.tl.moveTo(120, 120, 30);
  • 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. // 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. 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. 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. Feature #1 Fade in fadeInbear.tl.fadeIn(30);// fade in over 30 frames
  • 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. Feature #3 Specified time delay delaybear.tl.delay(30).fadeIn(30);// wait 30 frames, then fade the bear in over 30 frames
  • 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. 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. 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. 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. 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. Feature #9 Fast-forward skipbear.tl.skip(100);// fast-forward by 100 frames
  • 33. Feature#10 Execute a function repeatedly repeatFeature#11 Pause/resume the queue pause / resumeFeature#12 Erase the entire queue clear
  • 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. 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. You must remember EASING
  • 37. If the rate at which a sprite moves changes over time...
  • 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. // 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. Several preset easing functions can be chosen from. QUAD_ QUBIC_ QUINT_ SIN_ EASEIN enchant.Easing. BACK_ + EASEOUT CIRC_ ELASTIC_ EASEINOUT BOUNCE_ EXPO_
  • 41. The Tweener Transition Cheat Sheet http://bit.ly/3u7B6 explains these movements
  • 42. As you can see, many different functions and features exist for animation and timelines in the animation engine of enchant.js.
  • 43. Check it out on github if you haven’t already!
  • 44. The enchant.jsanimation engine

×