Game Programming Lecture 10 (MidExam)

Game Programming Dr.Eman Abdellatif Lecture 10 (8 MidExam) ---- 3D Game 1 2 Agenda 1.Animation 3D Game programming Concept Revision Last session Scene Graph  1.Scene Graphs...

Game Programming Dr.Eman Abdellatif Lecture 10 (8 MidExam) ---- 3D Game 1 2 Agenda 1.Animation 3D Game programming Concept Revision Last session Scene Graph  1.Scene Graphs Revision In addition to knowing how to construct and render 3D objects, 3D engines need to know how the objects are laid out in the virtual world and how to keep track of changes in status of the models, their orientation, and other dynamic information. This is done using a mechanism called a scene graph, a specialized form of a directed graph. The scene graph maintains information about all entities in the virtual world in structures called nodes. The 3D engine traverses this graph, examining each node one at a time to determine how to render each entity in the world. next slide image shows a simple seaside scene with its scene graph. The nodes marked by ovals are group nodes, which contain information about themselves and point to other nodes. The nodes that use rectangles are leaf nodes. These nodes contain only information about themselves. Note that in the seaside scene graph, not all of the nodes contain all of the information that the other nodes have about themselves. Many of the entities in a scene don't even need to be rendered. In a scene graph, a node can be anything. The most common entity types are 3D shapes, sounds, lights (or lighting information), fog and other environmental effects, viewpoints, and event triggers. 1.Scene Graphs Basic elements of any game animation Aesthetics Mechanics Story Technology  Basic elements of any Mechanics game animation the procedures and rules Story the sequence of events that unfolds in game Aesthetics how game looks, sounds, tastes, animation and feels. Technology any materials and interactions that make game possible  Types of animation 2D Animation 3D Animation  2D Animation Animation  produces the illusion of movement Display a series of frames with small differences between them Done in rapid succession, eye blends to get motion Unit is Frames Per Second (fps) 24-30 fps: full-motion (Game Maker does 30) 15 fps: full-motion approximation 7 fps: choppy 3 fps: very choppy Less than 3 fps: slide show Popular forms of animation  2d animation ( classical ) Flash animation 3d animation Claymation (Stop-Motion)  2d animation ( classical , TRADITIONAL ANIMATION ) The drawings could be shot on film one drawing at a time with a movie camera and played back using a cinema projector. They could be shot on a video camera and played back with a video player. They could be shot with a video camera attached to a computer In the form of a ‘flipbook’ (basically and played back on the a pile of drawings in sequence, same computer using an animation bound together and program. flipped with the thumb). Or they can be scanned into the computer and played back. Motion Line Each frame is a photograph, drawing, or computer generated image Each frame differs slightly from the one before it Viewing the frames in rapid succession implies “motion” Invisible line created by object as moves Locate in center of gravity Straight if flying Ex: bullet Up and down if bounces Ex: rubber ball Depends upon speed and desire for exaggeration Ex: Human sprinting versus walking Key Frames Need to stay cost efficient Advanced artists model a set of key poses or key frames for the characters Beginner artists filled in the motion in between these key poses Images at extremes in movement Most noticeable to observer Ex: for flight wings up and wings down Ex: for walking, right leg forward, leg together The more the better? Smoother, yes But more time to develop (tradeoffs) And more prone to errors, “bugs” that interfere with the animation In-Between Frames Key Frames Generated to get smooth motion between key-frames Can be tedious and time consuming to make Most software allows duplication Key number 1 – He looks at the glass. Key number 2 – He grasps the glass in his hand. Key number 3 – He raises the glass to his lips. Key number 4 – He tips the contents of the glass into his mouth Frame Animation Guidelines  Steps in Creating Animation Sequences (1 of 3) Concept of your animation – -have vision (in mind or on paper) of what animation will look like Decide on object behavior 1. Animated once (no looping) 2. Animated continuously (using cycles) Choose a grid size – will contain and constrain object  Steps in Creating Animation Sequences (2 of 3) Estimate the in-betweens – think of how many you will need to complete the sequence smoothly Be conservative. Easier to add additional transition frames than remove them  Steps in Creating Animation Sequences (3 of 3) Test each movement Can be done with ‘copy’ and ‘undo’ in tool Others have animation rendering (ex- Game Maker) Look for flaws (movement, discolored pixels …) Repeat - Repeat for all animations  Sprite Animation Sprite Animations are animation clips that are created for 2D assets. There are various ways to create Sprite Animations. One way is to create them from a Sprite Sheet, a collection of Sprites arranged in a grid. The Sprites are then compiled into an Animation Clip that will play each Sprite in order to create the animation, much like a flipbook. Sprite Animations can also be created by using keyframe animation in Unity, via the Animation window.  What is a ‘sprite’? It’s a small graphics pixmap image It’s normally stored in off-screen VRAM (video random access memory) It’s ready to be copied to on-screen VRAM The copying operation is called a ‘BitBlt’ Several sprites can support an animation Let’s see how to create a sprite array, then synchronize BitBlts with Vertical Retrace Creating Sprite Animations Using Sprite Sheets Sprite Sheets are images containing sequential Sprites typically used for animation, much like a flipbook, while Sprite Atlases are images containing a collection of non-sequential Sprites. Sprite Atlases are created to pack as many Sprites together in a single image in order to optimize 2D games. Sprites within a Sprite Atlas can be animated as well, but they are typically animated using keyframe animation. Because Sprite Sheets and Sprite Atlases are made up of multiple Sprites, it’s necessary to set the Sprite Mode to ‘Multiple’ to use the Sprite Editor and Slicing Tool to extract individual Sprites from the Sprite Sheet. Creating Sprite Animations In UNITY Sprite Animation Sample 1 1- Import setting 2-Sprit Editior 1. Click the Sprite Editor button to open a new window with the Sprite Editor  3-Slice Sprite Sheet The slice tool allows users to slice Sprite Sheets into individual Sprites that can be used in Sprite Animations. Sprites that are meant to be used in animations are sometimes arranged in a grid-like manner and are better suited to be sliced using one of the manual slice operations. It is also worth noting that the artist will purposefully space Sprites evenly in a Sprite Sheet to allow the animation to playback smoothly. If Sprites are not spaced evenly, it could result in a wobbly animation.  Creating Sprite Animations from Selected Sprites These newly sliced Sprites can now be used individually within the project by dragging and dropping them into the Scene. Multiple Sprites can also be selected from the Project window and then dropped into the Scene at the same time. By doing so, Unity will automatically begin the process of adding an Animator to the asset in the Scene and also create an Animation Clip from the selected Sprites. Creating Keyframes Animation after select element folder Create New clip Unity uses Automatic Keyframing, meaning that once in Animation Mode, any movement applied to the GameObject in the Scene view will be recorded in the animation. In the Animation window, press the Record button to begin creating keyframes Blending your Animationwith Animator  Sprite Animation Sample 2 The ‘Pac Man’ sprite 1. Fill a circle with the foreground color 2. Fill a triangle in the background color The ‘Pac Man’ sprite-array Create an array of sprites, arranged in a sequence that matches the order in which they will be drawn to VRAM Multiple sprite-arrays RIGHT DOWN UP 38 2D Sprite System Bit-Mapped Images Sprites A set of image sequences to describe a 2D object Playback the image (animation) to simulate the motion of the 2D object Clips A look of a sprite at some time Clip Sprite PAGE 39 The 12 Laws of Animation Squash and Stretch Anticipation Staging Straight Ahead and Pose-to-Pose Follow Through and Overlapping Action Slow-Out and Slow-In Arcs Secondary Action Timing Exaggeration Solid Drawing Appeal The 12 Laws of Animation PAGE 40 The 12 Laws of Animation Squash and Stretch What is Squash and Stretch? Squash and Stretch (S&S for short) is the principle of applying a contrasting change of shape—from a squash pose to a stretch pose or vice versa—to give a feeling of fleshiness, flexibility, and life in animation. The absence of squash and stretch gives a rigidity or stiffness to the motion. The transition between a proper Squash pose to a Stretch pose, or the other way around, breaks the perfect solidity that CG animation in particular inherently gives to everything. Squash and Stretch In Action Here (below link) the principle of S&S is boiled down to it’s essence on the classic Bouncing Ball. There is a Squash pose on the drawing where the ball is in contact with the ground, and Stretch poses just before and after it to provide the necessary contrast. Why do animators need Squash and Stretch? Squash and Stretch can make characters and inanimate objects have a feeling of life by introducing a flexible quality. S&S can be applied to a single body part, say an eyeball, or the entire character’s pose. The latter is particularly useful when making rigid objects come to life, like the classic Disney Flour Sack, which is a beginning traditional animator’s test case. The 12 Laws of Animation PAGE 41 The 12 Laws of Animation Squash and Stretch Note: that even without the overall head S&S, the principle has been applied within the poses to increase contrast and flexibility. The eyes and brows squash down. The mouth closes and disappears, then stretches into a smile again. Almost every unit or shape on the character can have S&S applied, so it’s something animators think about constantly as they pose. It’s not just added as a pass or layer later. The SQUASH Pose and it’s components The STRETCH Pose and it’s components. Disney Four Sack Model Sheet, Note: Squash and Stretch Poses The 12 Laws of Animation PAGE 42 The 12 Laws of Animation Squash and Stretch How to master Squash and Stretch Overdoing S&S is probably one of the biggest errors of a beginning animator. It’s a fun toy in the box, so everyone wants to play with it and show off. Be careful not to overdo it so your character looks broken/off-model or starts losing believability. A common saying for a lot of animation studios is to treat S&S with a ‘feel it, but don’t see it’ guideline. The idea being, you feel the S&S when the animation plays back at 24fps, but can’t really see it. Only by stepping through the frames you would see the S&S. If the S&S is too obvious when playing back it is a sign that you are either using too much or the timing for it is too long. A thing to remember when using broad S&S but want to achieve ‘feel it, not see it’, is to recover out of the extreme S&S poses quickly (transition back to the neutral shape). This gives a nice snappiness to the S&S and keeps the audience from picking up on it and getting distracted. Maintaining/Preserving Volume It’s also important to “maintain volume,” that is, the object should not appear to squash or stretch so much that it actually starts to look like it is growing or gaining size and mass. CG rigs can mathematically preserve the volume correctly (as in the case of the Animation Mentor Advanced Ball), but this may not always look “visually correct” to our eye and possibly need to be cheated based on taste and style. The 12 Laws of Animation PAGE 43 The 12 Laws of Animation Squash and Stretch Video-1 The 12 Laws of Animation PAGE 44 The 12 Laws of Animation Squash and Stretch Video-2 The 12 Laws of Animation PAGE 45 The 12 Laws of Animation Anticipation What is Anticipation? In 2D animation, the anticipation of a movement is just as important as the movement itself. The moment of anticipation informs the audience that an object or character is about to take action and directs their attention appropriately. Much like squash and stretch apply to object, anticipation applies to movements, giving them a sense of authenticity. A boy kicking a ball must first wind up his kick, creating a moment of anticipation for the kick and implying a cause for the next action. Some gags omit anticipation altogether for an anticlimactic comedic effect, but there are few other reasons not to express anticipation. we can say that Anticipation is the energy or driving force behind any action. Isaac Newton said it best, stating that “every object will remain at rest or in motion unless compelled by an external force.” Here’s in the next slides example of anticipation using a simple shape: a bouncing ball. The ball anticipates down by squashing, building up energy before it is able to jump off the ground. That build up of energy is the force that brings this object to motion from its stagnant state. With anticipation, the ball feels motivated to jump, which makes it feel alive. The 12 Laws of Animation PAGE 46 The 12 Laws of Animation Anticipation fact, anticipation can actually help a surprise moment by helping build the suspense that something is about to happen (like in our Daffy Duck example below). The audience is then prepared to look for it instead of missing it. The 12 Laws of Animation PAGE 47 The 12 Laws of Animation Anticipation How to master anticipation In terms of physics, anticipation can help sell the build-up and storage of energy before initiating a new physical action, like the crouch pose in the Richard Williams example above. An important aspect to master is to make sure the timing, velocity, and broadness of the anticipation pose work in sync with the ensuing action. It’s almost like a math problem, the anticipation and the following action need to add up or it won’t look believable. This mistake can crop up anywhere, but superhero animation is a common place. In order to make a superhero look superhuman often the direction is to “make it faster”. This in itself is ok. Where it breaks down is where the storing up of the energy in the anticipation is not sufficient to sell the subsequent faster-than-possible movement. Usually the anticipation is too small and/or too short in timing. A superhuman move is easier to accept if there is a proper anticipation before doing the hidden work of selling it. 1-Anticipatory 2-Anticipatory 3-Final animation Pose Motion Results The 12 Laws of Animation PAGE 48 The 12 Laws of Animation Anticipation The 12 Laws of Animation PAGE 49 The 12 Laws of Animation Anticipation The 12 Laws of Animation PAGE 50 The 12 Laws of Animation Anticipation Video-1 The 12 Laws of Animation PAGE 55 The 12 Laws of Animation Staging Just like in theater, staging is the layout of objects and characters in a scene that draw the audience’s attention to the subject of the scene. A proper use of staging will make the audience absolutely certain what is going on in a given scene. Wide, medium and close up shots, camera angles, colors, and the amount of movement should all be taken into consideration when contemplating the staging of a scene. Too much motion makes a scene look cluttered, but a wider camera shot can alleviate that issue without much hassle. Hayao Miyazaki, one of the most prolific and influential animators of our time, is said to be a master of staging, his films often incorporating vast and expansive settings that give his movies the grand sense of adventure that makes them so notorious YOU SHOULD avoid unnecessary details – one clear action at a time, instead of many simultaneous actions. relates to the timing of action. the background should not distract the viewer’s attention with a lot of details. The 12 Laws of Animation PAGE 56 The 12 Laws of Animation Staging This technique is also used in theatre and film. The idea of staging is finding the effective use of different camera angles, light and shadow, the placement of a character in the frame, etc. to help in telling the story and developing its plot. The 12 Laws of Animation PAGE 57 The 12 Laws of Animation Straight Ahead and Pose-to-Pose Animators use the expression “straight ahead action” when they draw out a scene frame by frame from beginning to end. This technique is very useful to create fluid and dynamic illusion of movement but the animation can lose size, volume and proportions. It is used in fast, wild action scenes because it provides spontaneity and freshness to the final result. Pose to pose is very a little bit different. First of all, animators plan out the scenes they have to develop and do key drawings at intervals that, later on, will be handed to their assistants who will fill the intervals and finish the animation. Size, volumes and proportions are controlled better this way. This method works better for dramatic or emotional scenes, where composition and relation to the surroundings are of greater importance. The 12 Laws of Animation PAGE 58 The 12 Laws of Animation Straight Ahead and Pose-to-Pose Technique The technique for ‘Pose-to-Pose Animation’ method is as follows: Draw your thumbnails for planning the action Drawing the key poses, breakdowns and then the in-betweens. Check the line test and comeback to the animation if more frames are needed. The 12 Laws of Animation PAGE 59 The 12 Laws of Animation Straight Ahead and Pose-to-Pose Video-1 The 12 Laws of Animation PAGE 60 The 12 Laws of Animation Straight Ahead and Pose-to-Pose Video-2 The 12 Laws of Animation PAGE 61 The 12 Laws of Animation Straight Ahead and Pose-to-Pose PAGE 62 The 12 Laws of Animation Straight Ahead and Pose-to-Pose PAGE 63 The 12 Laws of Animation Straight Ahead and Pose-to-Pose PAGE 64 The 12 Laws of Animation Straight Ahead and Pose-to-Pose PAGE 65 The 12 Laws of Animation Follow Through and Overlapping Action Overlapping Action is another of the cornerstones of animation. By overlapping the actions of a characters' body, hair, tail, clothing, etc. your animation will feel more fluid and life-like. In life, everything moves at different speeds and at different times. OVERLAPPING ACTION is a tool used by animators to emphasize the action and mood of the character. When a character moves across the screen some parts of the body move before or at different rates than others. Some parts of the body will LEAD the action and some parts will FOLLOW the main action. HINT: each part of the body involved in the action has its own arc (in this example we mean the shoulder, the elbow. the wrist and the fingertips all have arcs). The 12 Laws of Animation PAGE 66 The 12 Laws of Animation Follow Through and Overlapping Action The main purpose of the overlapping technique is to avoid any “robotic effect” and give more fluidity to the character’s movement. It is used by animators to emphasize the action and mood of the character by moving the different parts of the character’s body at different speed and at different times. When it moves, some parts of the body lead the action and the others follow the main action. Normally, arms and legs follow the movement of the torso. “Drag” is another popular technique where the “following parts” of the body take a few more frames to catch up with its “leading parts”. For example, if a character starts running, his head, ears, upper body and clothes may not keep up with its legs. That way, it would look as if the character was running as fast as he could. This example we can use is the famous dance scene from Snow White and the Seven Dwarfs. In it, she starts dancing but her dress doesn’t begin to move with her until some frames later. The 12 Laws of Animation PAGE 67 The 12 Laws of Animation Follow Through and Overlapping Action IMAGINE difference Here is a “jump” action. The main action begins with the legs. They are the motivational force of the action. InThe other words, 12 Laws the legs make the action of the character stop and start. The legs motivate the of Animation PAGE 68 The 12 Laws of Animation Follow Through and Overlapping Action Next we have a “head turn” movement - again with the same floppy hair. Notice the “S” curves in drawings 3,6 and 8. The 12 Laws of Animation PAGE 69 The 12 Laws of Animation Follow Through and Overlapping Action When a person comes to a stop after running, they do not simply stop. The laws of physics dictate that all the rest of the body will still have momentum and therefore will still be moving. Incorporating this idea into animation is known as follow through. Overlapping action occurs when a character changes direction, but the clothes or any other limp parts of the body keep following the original path of action. Basically it means when individual parts of the body have to catch up with the main body. Overlapping actions give your animation a natural feel. If you want your characters to move believably and feel like they live on earth with gravity, weight, and real world mechanics the principles of overlapping action are vital. The 12 Laws of Animation PAGE 70 The 12 Laws of Animation Follow Through and Overlapping Action Video-1 If the driver slams on the breaks your body wants to keep going, hopefully your seat belt catches you from overlapping right into the windshield. The 12 Laws of Animation PAGE 71 The 12 Laws of Animation Follow Through and Overlapping Action Video-2 The 12 Laws of Animation PAGE 72 The 12 Laws of Animation Slow-Out and Slow-In The slow-out and slow-in technique consists in drawing more frames near the beginning and the end of an action and fewer in the middle. This way, the parts where there are more frames will look slower and the action itself faster. It will give the character time to accelerate and slow down and make the animation more realistic. The terms “Slow In” and “Slow Out” are part of the 12 principles of animation. Acceleration and deceleration of movements are widely used in any type of animation. For example, in video games animation. The 12 Laws of Animation PAGE 73 The 12 Laws of Animation Slow-Out and Slow-In The slow-out and slow-in technique consists in drawing more frames near the beginning and the end of an action and fewer in the middle. This way, the parts where there are more frames will look slower and the action itself faster. It will give the character time to accelerate and slow down and make the animation more realistic. The 12 Laws of Animation PAGE 74 The 12 Laws of Animation Slow-Out and Slow-In Video-1 The 12 Laws of Animation PAGE 75 The 12 Laws of Animation Arcs To Be Continued The 12 Laws of Animation Next : Working with 3D Light Thank YOU Yallaaaa Game *_^