combat game systems, animation, and flipbook making workshop
DESCRIPTION
Contains moving images and slides with various layers. Best downloaded and viewed locally. A workshop delivered for BA Games Cultures students at London South Bank University, 26/3/2014. Much of the content borrows from Street Fighter and Disney animators, bringing together The 12 Principles of Animation, silhouette, games systems, and considering how it feels for the player.TRANSCRIPT
![Page 1: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/1.jpg)
Animation in Combat Systems
Emmeline Dobson visiting workshop for BA Game Cultures
![Page 2: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/2.jpg)
SESSION OVERVIEW
![Page 3: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/3.jpg)
Learning objectives
• Understand combat or action systems through their animation component
– Animation
• Technical
• Artistic
• Design
– States in a combat move animation
![Page 4: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/4.jpg)
Session structure
• Technical / artistic / design overview
• Demonstration with Playstation 3
• Flipbooks workshop
– Guidance
– Making animations
– Review
– Intro’ to states in combat animations
– Revisit flipbooks
![Page 5: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/5.jpg)
![Page 6: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/6.jpg)
OVERVIEW: A COMBAT MOVE ANIMATION
![Page 7: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/7.jpg)
Frames
![Page 8: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/8.jpg)
Frames
![Page 9: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/9.jpg)
Frames
![Page 10: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/10.jpg)
![Page 11: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/11.jpg)
Silhouette
![Page 12: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/12.jpg)
Silhouette
![Page 13: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/13.jpg)
Silhouette
![Page 14: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/14.jpg)
Silhouette
![Page 15: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/15.jpg)
12 Basic Principles of Animation
![Page 16: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/16.jpg)
![Page 17: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/17.jpg)
Three stages of a combat animation
• Wind-up (or “pre-strike”, or “anticipation”)
• Strike (or “active”)
• Recovery
![Page 18: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/18.jpg)
Wind-up
![Page 19: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/19.jpg)
Strike
![Page 20: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/20.jpg)
Game input loop
![Page 21: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/21.jpg)
Strike
![Page 22: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/22.jpg)
Recovery
![Page 23: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/23.jpg)
Three stages of a combat animation
• Wind-up
• Strike
• Recovery
![Page 24: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/24.jpg)
Wind-up Strike Recovery
![Page 25: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/25.jpg)
Keyframes
![Page 26: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/26.jpg)
Keyframes
![Page 27: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/27.jpg)
![Page 28: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/28.jpg)
![Page 29: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/29.jpg)
COMBAT DEMO
![Page 30: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/30.jpg)
Wind-up
• Fast-wind-up for player avatar
• REALLY slow wind-up for enemy character / “READ”
• TRANSLATION on player avatar’s attack moves
![Page 31: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/31.jpg)
LET’S ANIMATE!!
![Page 32: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/32.jpg)
![Page 33: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/33.jpg)
Making your animation – design
![Page 34: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/34.jpg)
Making your animation – key points
• Choose to do a player avatar move OR an enemy character move
• Design your KEYFRAMES
– Wind-up (FAST for player, SLOW for enemy)
– Strike
– Recovery
• Strong SILHOUETTES
• TRANSLATION (player moves towards target)
![Page 35: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/35.jpg)
Making your animation – tips
• Plan which page of the flipbook has which keyframe. (Suggest marking these pages *.)
• Lightly pencil in the GROUND PLANE
• Plan how to use the space on the page
– Room for TRANSLATION (for player avatar)
– Leave room for, if you want to, drawing an enemy REACTION to being hit!
• Start at the BACK and work lightly at first
![Page 36: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/36.jpg)
![Page 37: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/37.jpg)
FLIPBOOKS – REVIEW!!
![Page 38: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/38.jpg)
Review
• What choices did your classmate make?
– In the design?
– In the animation?
• Did they make a slow or a fast wind-up? Why?
• How do you think this move would feel for the player to do?
• OR How do you think a player would react to this enemy move?
![Page 39: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/39.jpg)
Learning objectives
• Understand combat or action systems through their animation component
– Animation
• Technical
• Artistic
• Design
– States in a combat move animation
![Page 40: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/40.jpg)
![Page 41: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/41.jpg)
Hit boxes
![Page 42: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/42.jpg)
Throw / grab box
![Page 43: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/43.jpg)
![Page 45: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/45.jpg)
Aerial frames
Ground Air Ground
![Page 46: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/46.jpg)
Learning objectives
• Understand combat or action systems through their animation component
– Animation
• Technical
• Artistic
• Design
– States in a combat move animation
![Page 47: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/47.jpg)
RECAP
![Page 48: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/48.jpg)
![Page 49: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/49.jpg)
![Page 50: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/50.jpg)
Wind-up Strike Recovery
![Page 51: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/51.jpg)
Game input loop
![Page 52: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/52.jpg)
![Page 53: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/53.jpg)
![Page 54: Combat game systems, animation, and flipbook making workshop](https://reader036.vdocuments.site/reader036/viewer/2022081404/55972ed11a28ab5e518b4576/html5/thumbnails/54.jpg)
References
• http://art-eater.com/2010/07/test-1-darkstalkers/ -- 12 Principles of animation in Darkstalkers
• http://aztez.com/blog/2014/01/06/anatomy-of-a-successful-attack/ --interactive demo of combat impact effects.
• http://www.zweifuss.ca/ -- Street Fighter III: Third Strike interactive character animation library
• Book: The Illusion of Life -- Frank Thomas and Ollie Johnston -- the 12 Basic Principles of Animation
• Book: Character Mentor -- Tom Bancroft -- an excellent resource on character design
• http://www.liaf.org.uk/ -- The London International Animation Festival had a flipbook workshop and flipbook competition in 2013. See one of the animations here: https://vimeo.com/78173238
• http://aztez.com/blog/2012/12/26/links-to-great-articles-re-combat/ --Want more resources on combat animation? There's a long list in this article from the developers of Aztez.