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

2. “Here comes the greatest creative beast
Let’s tame it, my brave warriors!!!”

4. Anime studio 9
“A precious 2D animation charm
we’ve mastered thousand years ago
In combat, it generates
frame-based animation”

5. Train, team needs to train
Here, my warriors,
practice with these
cute monsters
You gotta be
Kidding me

6. 1st game: Gasboy

7. Gasboy Animations
• 1 character
• 1 animation
• 15 frames
• Size on disk: 90KB

8. 2nd Game: God’s Rage

9. God’s Rage Animations
• 1 character
• 17 animations
• 402 frames
• Size on disk: 1.3MB
Happy with frame-based animation

11. Dozen of characters, smooth
animations

12. BOSSes EAT Too much disk & RAM!

13. “One boss and we’re starving already.
Frame-based animation
won’t make it”
Bosses EAT Too much disk & RAM!

14. 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 :(

15. “Spine, We’ve 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”

16. 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

17. Animators love it!
Interpolation curveBone-level key-framing
Great key-framing
system
Clean, elegant
UI

18. JSO
N
1
2
3
4
5
6
workflow

19. but,
does it solve the
proble
m
of storage & memory usage

20. 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

21. Oh,
it’s also
FLEXIBLE
&
PROGRAM
MABLE

22. FLEXIBLE: Run-time auto-generated animation
transition
Without transition With transition

23. Programmable: animation procedural
Captured from project http://github.com/EsotericSoftware/spine-workshop

24. Programmable: Combine with physic engine

25. Cool!
But here comes the
trade off

26. 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

27. 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

28. Doesn’t 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

29. 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

31. Thank you
It’s Q/A time ;)
info@vinova.sg

32. 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)