1.Awesome 2D game animations with Spine ALVISS HA Lead Designer, VINOVA Pte. Ltd alviss@vinova.sg

2. Here comes the greatest creative beast Lets tame it, my brave warriors!!! 3. Anime studio 9 A precious 2D animation charm weve mastered thousand years ago In combat, it generates frame-based animation 4. Train, team needs to train Here, my warriors, practice with these cute monsters You gotta be Kidding me 5. 1st game: Gasboy 6. Gasboy Animations 1 character 1 animation 15 frames Size on disk: 90KB 7. 2nd Game: Gods Rage 8. Gods Rage Animations 1 character 17 animations 402 frames Size on disk: 1.3MB Happy with frame-based animation 9. Dozen of characters, smooth animations 10. BOSSes EAT Too much disk & RAM! 11. One boss and were starving already. Frame-based animation wont make it Bosses EAT Too much disk & RAM! 12. Frame-based animation vs Modular animation Old-time technique Easy to produce Inflexible Changes require recompile Take more space as animation gets more complex Expensive trick used in 2D games with bigger budgets Flexible Animations compiled as plain text Smooth animation with little disk usage No public tool for 2D games yet :( 13. Spine, Weve been watching you Your Majesty, the charm named Spine by Nathan Sweet got ready to produce 2D skeletal animations for game which is modular animation bonus programmable ability 14. Spine does one thing and does it perfectly Feature Spine Anime Studio Flash Easy to master v Separate Rotate, Translate, Scale v v Key-framing at bone level v Interpolation curve v v Import PSD layers v v Work with Vector image v v Inverse Kinematics (planed ) v v 15. Animators love it! Interpolation curveBone-level key-framing Great key-framing system Clean, elegant UI 16. JSO N 1 2 3 4 5 6 workflow 17. but, does it solve the proble m of storage & memory usage 18. Yes, it does! FRAME-BASED animation SPINE animation Smoother animation with half storage & memory usage! 700KB on disk 2.5MB on RAM 300KB on disk 1.2MB on RAM 19. Oh, its also FLEXIBLE & PROGRAM MABLE 20. FLEXIBLE: Run-time auto-generated animation transition Without transition With transition 21. Programmable: animation procedural Captured from project http://github.com/EsotericSoftware/spine-workshop 22. Programmable: Combine with physic engine 23. Cool! But here comes the trade off 24. Need more computation at run-time Benchmark: display a walking character multiple times on screen Environment: XCode 4.5, cocos2d-x 2.1.2 Device: iPhone 4S running iOS 6 25. Need more computation at run-time 0 50 100 150 200 250 300 25 50 75 100 125 150 175 200 Framepersecond(FPS) Number of characters on screen Frame-based animation Skeletal-based animation 60FPS 26. Doesnt replace frame-based animation Spine is great 2D skeletal animation tool Flexible, programmable, smooth & small But need more computation at run-time Should use both animation methods in game 27. Should use both animation methods in game Frame-based animation for small characters Skeletal-based animation for huge characters and/or those need detailed, complex animations 28. Thank you Its Q/A time ;) info@vinova.sg 29. Why choose spine over spriter? Right tool: Slicker & friendlier GUI Export format: JSON (Spine) vs XML (Spriter) Interpolation curve Right time: Spine app works great when we try it out (March 2013) Usable cocos2d-x runtime right when we needed it (April 2013) Right team: Nathan Sweet is also the author of libGDX Fast development: Spine started 1 year later (early 2013 vs early 2012) But ecome usable sooner, support more platforms faster: cocos2d-x, cocos2d-iPhone, Unity, libGDX, Starling, XNA, Flash Open to the community: very fast pull-request merging cycle (within hours)