Combat game systems, animation, and flipbook making workshop

Editor's Notes

• #4: I’m hoping that students understand from this workshop about frames and can think about animation and game systems frame-by-frame. Game development is an inccredible field to work in because it is a melding of the technical and the creative, the artistic.
• #5: You’ll find there’s a degree of repetition in this workshop because animation systems are the heart of any action game. I want you to have a sense of time at the faster-than-second-by-second pace, and how that affects the player’s experience of controlling his or her avatar, and therefore the sheer enjoyableness of the game. Show flipbooks.
• #6: These slides appear to prompt the tutor to ask, “Are there any questions?” They’re quite frequent.
• #8: A frame is a tiny amount of time. It’s the time it takes for the picture on your screen to update. On an old, boxy, cathode ray tube monitor, the picture was drawn by a beam racing across the screen, drawing each row of pixels as it scanned across. By the time it had reached all the way from the start of the top row to the end of the bottom row, that was one frame. It’s often 1/30th of a second, or, for smoother games, 1/60th second.
• #9: Traditional animation would involve hand-drawing each small movement—the movement that would happen from one of those split-second time intervals to the next—then translating that to the display technology (by photographic tranfer to film, for example). Beautiful, traditional 2D animation would most often use a technique called keyframing, where a skilled draftsperson would draw the most visually striking poses that the character being animated would move through. Then less-experienced, lower-salaried “inbetweener” animators would draw the frames in between the keyframes. Bear the idea of keyframes in mind as it’s a core idea throughout this workshop. A lot of other ideas will hang from this one!
• #10: 3D animation usually uses the keyframes technique, too, except that now you can get the computer to calculate the inbetween frames and so all the low-paid inbetweeners have been laid off. Is 3D computer animation less appealling? The debate is ongoing between animation industry veterans and critics alike…
• #11: Are there any questions?
• #12: Tom Bancroft’s book Character Mentor invited students to submit responses to challenges. This is one of the student responses printed in that book.
• #13: Drawing based on previous slide by Tom Bancroft. Here he’s demonstrating what makes a strong silhouette, re-working the student’s drawing and advising on ways to improve it. You can see one-two-three-four limbs; none of them are behind the body, or behind each other.
• #14: Tom Bancroft’s book features student artists invited to submit their artwork for various challenges, and Tom has published his re-workings of their ideas in response to the brief. This example shows a strong silhouette. The message is “this person is off balance” so the feet are completely off the ground. The head is clearly thrown back. Clear gaps between limbs; arms, legs, nothing overlapping each other.
• #15: Beautiful example of the principle of strong silhouette applied to a combat move pose. (Tom Bancroft again.) Could ask the audience if anybody practices a martial art? What can you tell us about principles of movement in your martial art? (Balance, each movement having an equal and opposite reaction, twisting, protecting your face, lower your centre of gravity, always keep your eye on your opponent, could be these sorts of things…)
• #16: This workshop will cover a few of Disney’s “The 12 Basic Principles of Animation” which were explained in this revered book by animators Frank Thomas and Ollie Johnston. We already mentioned one which is “keyframing”, tho’ it’s called “pose-to-pose” (which contrasts with “straight ahead action”) in the terminology in this book. There’s also a fantastic article online connecting these 12 Principles to Capcom’s Darkstalkers fighting game. I’ll provide references at the end for further investigation!
• #19: “Anticipation” is a name-check against one of the 12 Basic Principles of Animation. BUT and this is a big, BIG /BUT/!!! …with animation for games, specifically animation for the PLAYER’S AVATAR, anticipation is over /very/ quickly, as fast as a single frame for eg. a fast punch. Why do you think it might be, that for the player, the wind-up for the animation should be over in a blink?
• #20: The wind-up for the combat move is short because the sooner you get to business (throwing a punch, jumping over a hurdle, returning a volley in tennis, etc.) the more immediate the control feels for the player. We’ll look shortly at a tutorial mode in a combat game, and it’ll be clear that wind-up, for the player’s avatar, is very, very snappy!
• #21: Looping back in to the technical side somewhat, this is a game input loop that goes on many, many times a second in an action game. The strike in a combat move is very very important because at the point that the strike part of the animation occurs, the player learns if their punch (or kick, or hammering the enemy over the head) LANDED, if they hit and were BLOCKED, or if they MISSED. Think about playing any kind of action game and making a button-press where the outcome really matters. Hitting the opponent or missing. Jumping over a hurdle or failing. In a split-second, you find out whether you succeeded or failed, and a split-second later you’ve made a decision and executed a new command in reaction to that information. Beautiful! Great action games are about this tight, split-second loop being challenging and engaging!
• #22: You can see three strikes in this spinning kick move. There’s a miniscule wind-up to this move, it’s VERY fast that the first of the three kicks happens!
• #23: Here’s Ryu recovering from having thrown a Dragon Punch. You can tell that he’d be moving downwards at this point from his belt and his headband, they’re trailing behind the movement of his body, flapping upwards as his body moves downwards. (This demonstrates another of the 12 Basic Principles of Animation, “follow through and overlapping action”.) The recovery phase of an animation is often a time the character is VULNERABLE. It doesn’t have the same restriction that wind-up has (of needing to be very, very fast), so it can be more realistically animated, in terms of how long it lasts. Here you can see how animation and design are interwoven in combat games. If you have a longer recovery animation, it probably means that character is going to be vulnerable to attack during that time.
• #26: I mentioned we’ll keep revisiting the idea of keyframes throughout this workshop. One of the links is between those animation stages: wind-up / strike / recovery, keyframes, and silhouette. This is a great WIND-UP / ANTICIPATION silhouette of Bugs Bunny. When we get to making flipbooks, this would be a fantastic sort of wind-up keyframe. …and again, the Tom Bancroft kick illustration, a strong STRIKE keyframe silhouette.
• #27: I showed this animation before when discussing the strike phase of a combat animation. Now look instead at the RECOVERY. Just at the end of the third kick, Sean’s fingers flick outwards to create a distinctive silhouette, just before he starts falling back to earth from his gymnastic kick. See when he lands, he squashes for a moment, due to the impact of him landing. It gives him a sense of weight. (“Squash and stretch” is another one of the 12 Principles!) Sean also lands, after the move, a long distance from where he started. This is called Translation. Fighting game developers recommend having some translation on combat moves, as it means the player will need to spend less time walking or running toward the opponent, and there is more chance a move will hit, because the space the move covers is larger.
• #28: Example of some beautiful wind-up / anticipation and strike keyframe poses.
• #30: At this point the screen’ll be taken up with Bayonetta tutorial. (The 360 version was better, technically.) Downloadable demo has the tutorial in it as required; no need to have the disc, just be prepared w the installation. :) The demo can illustrate the principles of having very short wind-up to combat move animations for the player’s character, but very, very long anticipation for the AI enemy character. Bayonetta has some translation on all of her combat moves. More powerful moves have a slightly longer wind-up (kicks are slower than punches).
• #31: Compare Bayo’s punch and kick moves. The 1st kick in Bayo’s combo has a noticeable wind-up / anticipatory pose / keyframe. Kicks do more DAMAGE, so they have penalties of longer wind-up and recovery phases. This is an example of GAME BALANCE. Consider the strong SILHOUETTES in each and every combat move! Note the translation; this’ll be a feature to encourage students to adopt in their flipbooks. Using a Bayonetta demo affords an opportunity to discuss sexualisation of women as game characters.
• #33: You can watch this animation on YouTube: https://www.youtube.com/watch?v=aaHV1qTlyQg
• #34: Do some preparation before animating. This is NOT EASY and a very hard part of this is going to be to finish something… Because time is short. Because time is short, keep it really simple. Stick men are perfect especially if you can use your imagination to put a twist on it to make it awesomely engaging. I made like, a homage to Cool Spot, or maybe an M&M with a sword… Plan your KEYFRAMES.
• #35: There’s no “grading” of this exercise, but I’ll look for these points in your animation. At the end, be prepared to explain to a classmate what choices you made, what design features you went for, and WHY.
• #36: Start at the back and you can (hopefully) view the drawing you made last faintly through the next blank leaf of the flipbook. Remember that the BINDING end of the flipbook, it’s hard to see the drawings close to there. Best to keep the drawings nearest the flappiest bits of the page. :) THIS IS //HARD// BUT IT’S AMAZING TO SEE A FINISHED ANIMATION THAT YOU HAVE MADE!!!
• #39: Suggest that lecturer directs students to discuss these questions in pairs or small groups with the students either side of them.
• #40: Look back to the learning objectives. We’ve covered technical, artistic, and design aspects of animation. Now we’re going to look at states during the animation.
• #41: When a character does a move like throwing a punch, the game is checking to see if that punch hits anything important. Here’s Ryu winding-up for a punch, and throwing a straight punch. The blue boxes you see are Ryu’s HIT BOX. If anything dangerous touches those blue boxes, Ryu will be hurt and go into a REACTION animation. The red box is your example of something dangerous. The HURT BOX. If that red box touches someone else’s hit box, the Ryu player will score a hit.
• #42: This is a different combat move. But same principle of the punching arm having a hurt box over it. Of course, these boxes – areas of effect – are only active for the STRIKE FRAMES of the animation.
• #43: This is slightly different, this is a grab animation, so if any target is in the yellow box, Ryu will perform a grappling move and THROW them. Images thanks to @Tayl1r for superimposing the hit boxes. Artwork © Capcom, naturally.
• #44: For 3D games, the area of effect, naturally, is 3D, too. Hit boxes are 3D volumes that need to follow the arc or sweep of a sword, kick, or whatever.
• #45: The gameplay of a combat game emerges from: The area the animations cover What state characters, their hit boxes, hurt boxes, throw boxes and the like are in, frame by frame The interaction between players as they perform these moves
• #46: This is a timeline showing transitions in a second set of states. We have MegaMan here performing a jump. (The sprites aren’t as spread out vertically as they should be, the arc of his jump should be higher but they’re placed like this probably to save space with creating the graphic for the web… It would have been nice to have the impression of the arc of the jump clear, shown with the right height.) What can the player do on the ground that he or she can’t do in the air? What can happen to the player’s avatar in the air that happens differently on the ground? The game needs to keep track of whether the player avatar is in GROUND or AIR states. The state the character is in affects what next animations the player’s inputs will perform, and if the character is hit, whether he or she will recoil (on the GROUND) or play an aerial hit animation and often fall out of the jump or jumping move (AIR).
• #47: This is nearing the end of this workshop, and this is what we have covered.
• #49: We looked at animation – frame-by-frame thinking about animation. Keyframing as a technique for making animation.
• #50: We considered combat animation moves as divided up into Wind-up Strike Recovery
• #52: We just touched on this… But this is a model of the player’s interaction with the game system at the same pace as animation occurs – that pace FASTER than second-to-second – FRAME BY FRAME.
• #53: I hope it was a rewarding experience to make your own animation. …and we’ve tied that in to how the game works, with animations interacting with each other, by having areas of effect called HIT BOXES and HURT BOXES activating during STRIKE phases of the animation.
• #54: Any final questions? There is a LOT more to learn about combat design! Hope this was an engaging session for you all and thank you for participating!
• #55: References slide (not in original presentation, but for online.) :)