Game Programming Lecture Notes PDF

Game Programming Dr.Eman Abdellatif Lecture 11 ---- 3D Game 1 2 Agenda 1.Animation 3D Game programming Concept Revision Last session 12 Law of Animation PAGE 4 The 12 Laws of Animation Squash and...

Game Programming Dr.Eman Abdellatif Lecture 11 ---- 3D Game 1 2 Agenda 1.Animation 3D Game programming Concept Revision Last session 12 Law of Animation PAGE 4 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 The 12 Laws of Animation 7- Arcs What is an arc? The visual path of an object or action is called an “arc”. This could be the projectile of a bouncing ball, the path of a moving arm, and even the movements of mouth corners during a dialogue scene. Here are some examples of arc in action: The 12 Laws of Animation PAG The 12 Laws of Animation 7- Arcs The principle that smooths animation and moves action in a realistic way. When working in animation, it's best to stick with the laws of physics. Most objects follow an arc or a path when they're moving, and your animations should reflect that arc. For example, when you toss a ball into the air, it follows a natural arc as the effects of the Earth's gravity act upon it. Motions of all living beings (people, animals, birds, fish, etc.) and many other objects do not happen in straight lines, but in arcs. Imagine a pendulum, its motion reflects an exact arc. The same applies to hands, legs, head and body as a whole The 12 Laws of Animation PAG PAGE 7 The 12 Laws of Animation 7- Arcs This technique is based on the natural trajectory almost every action follows, arcs. It can be applied to the human figure and animals or simply to thrown objects. Arcs make animation look more natural and have a better flow. Objects that move out of their natural arc will appear erratic. To prevent that, animators tend to draw the arc on the paper for reference and erase it later.  The 12 Laws of Animation 7- Arcs Why is Arc important? The arc is one of the most important tools to make movements realistic and pleasing to the eye. Due to the moving object’s inertia, its path should be smooth unless it’s being interrupted by an external force (e.g. impact). A smooth arc, like a dancer’s movement, is always eye pleasing. On the other hand, an unintended broken arc can reduce the believability of the movement. The 12 Laws of Animation PAG PAGE 9 The 12 Laws of Animation 7- Arcs 3. Linear Arc vs. Circular Arc Arcs are usually circular. Circular arc makes the movement organic. On the other hand, linear or angular arcs can be used for mechanical movement. It really depends on the desired effect. A straight arc gives the movement more power. PAGE 10 The 12 Laws of Animation 7- Arcs The visual signatures of objects Objects with different builds and weights travel in their “signature” arcs. As mentioned, a robot arm travels on an angular path while a dancer’s arm moves in circular fashion. When lifting an object, the path of a lighter object tends to be outward but the heavy one moves closer to the lifter’s body. The audience gets a sense of the object/action simply by recognizing its arc. PAGE 11 The 12 Laws of Animation 7- Arcs Arc in Action Here’s an example of arc application in one of my scenes. There was a conscious effort to make Mater’s tow hook travel in a circular continuous arc. PAGE 12 The 12 Laws of Animation 7- Arcs Tracking the arc and tip Most CG animation packages have tools, like motion tracker in Maya, that show the arc of a moving object. Some animators use an on-screen drawing tool to help find the desired shape of the arc. A smooth, linear, circular, polished arc—for example, the next image shape arc—makes the movement especially pleasing on a big movie screen. Ex:When a movement feels stiff, sometimes offsetting the object’s curves can create a more organic arc, here is a demo of such situation.  The 12 Laws of Animation 7- Arcs A perfect example is walking. Pay attention to how you move your feet. You simultaneously start to raise and move the foot and end up with lowering and a full stop. Your foot made an arc motion. Your pelvis moved in arcs as well. You may try moving your feet in a straight line for that you just need to drag them without lifting from the ground. Your pelvis most probably will further continue to move in arcs. When throwing a ball your arm will move along in an arc and flying ball will also make the same arc motion. In animation arc motion will appear more natural and appealing Video-1 The 12 Laws of Animation PAG PAGE 14 The 12 Laws of Animation 7- Arcs This is a short film called Thought of You by Ryan Woodward. The dancers’ movements are so graceful because of the well-polished and continuous arcs Video-2 PAGE 15 The 12 Laws of Animation 8- Secondary Action Adding secondary actions to the main movement gives a scene more life and makes it look more natural. The important thing about secondary actions is that they should emphasize the main action. They should be planned wisely, because it they conflicts with or becomes more interesting or dominating than the main action, the entire animation will suffer. Secondary Action should work with characters’ or objects’ features, so the expression is actually emphasized and the scene looks outstanding. The best solution is to start from animating the main action and then slowly add other movements and secondary actions. Used correctly, Secondary Action will add richness to the scene, naturalness to the movement, and will support staging. (secondary actions must support and not muddy the look of the primary action) PAGE 16 The 12 Laws of Animation 8- Secondary Action The actions that emphasize or support the main action of the animation Secondary actions are intended to complement and intensify the main action or with intent to distract or direct spectator's attention to other actions so enriching the animation and making it more appealing and solid. Imagine a student reaching for a test paper during examination, he is viewing them with uncertainty, shifting from foot to foot in doubt, his eyes wondering - this is the main action. Now imagine the same scene when a schoolboy is fidgeting with a pen, what is a secondary action. This makes the whole scene deeper and more attractive. Other examples: pushing a car (main action) and at the same time whisking off a fly from the nose (secondary action), preparing a meal and at the same time watching TV, talking to each other and at the same time scratching your head. Secondary actions may become main actions. In an example with a schoolboy we can switch spectator's attention from the main action. For instance if the schoolboy unintentionally bends the pen and breaks it, so our secondary action becomes the main action because the spectator switches his attention from test-papers to reaction to a broken pen. So secondary action becomes the main action. PAGE 17 The 12 Laws of Animation 8- Secondary Action Avoid generic Secondary Action Secondary action should be specific to that particular character, in that particular context. It’s hard to design good secondary action into your shots if you’re vague about who your character is, or what situation and context they’re in, and how they’re feeling about what is happening around them. Dig a little deeper than the first or second ideas that pop into your head. Act your scene out, imagining you’re different actors playing the role. Even if the action is a bit of a cliche, but your spin on the cliche. If you watch the mermaid, we can obviously make out that she is blushing but what are some secondary actions that add to it? Notice the way her eyes, hair and shoulder are animated to bring out a more-than-alive-blushing aspect, your question will be answered. PAGE 18 The 12 Laws of Animation 8- Secondary Action Video-1 PAGE 19 The 12 Laws of Animation 9- Timing This principle also aims to use the laws of physics observed within the wildlife to animation. If you progress an object too quickly or too slowly, in fact, this action won’t be credible. Instead, by using the days correctly and consistently, it’s possible to speak certain characteristics or reactions of our objects or characters: for instance, something that moves more slowly is going to be perceived as heavier. In a true animation, timing is an important aspect of animation. Timing also helps in establishing the personality of characters and emotions they need to precise. They used timing because of the main tool for communicating the personality through flat shapes that are representative of body parts. PAGE 20 The 12 Laws of Animation 9- Timing PAGE 21 The 12 Laws of Animation 9- Timing Timing is the centerpiece of the “feel” of an animation and is generally invoked to convey the weight of a character or object. Intrinsically linked to speed, the time it takes for an object or individual limb to move or rotate a distance or angle will give the viewer an impression of how weighted or powerful that motion is. In 3D animation, this is best explained in basic mathematics: time = distance/speed, therefore, speed = distance/time That is why every animation curve editor available shows the axes of both distance and time as the main input for animators to visualize the speed of the manipulations they are performing. If we move an object 10 m over 2 seconds, that is faster than doing so over 5 seconds. Similarly, posing a character with arm recoiled then outstretched gives a faster punch over 2 frames than it does over 5. PAGE 22 The 12 Laws of Animation 9- Timing The number frames between each main action exercises great power over the personality as well as the nature of the animation. If we insert more frames, we can create the illusion of a slow action and if we use less frames it will give the impression of a fast action. Below, Aladdin is animated with just few frames here to add speed to this shot as it is required to show that he must act fast to escape the arrow attacks. PAGE 23 The 12 Laws of Animation 9- Timing The number of frames used in any movement determines the amount of time that action will take. 1st frame - a foot is lifted up Timing is about the speed of the action. On a 5th frame - the foot strikes a ball physical level, correct timing makes objects look like they follow the laws of physics. Timing is critical 2nd, 3rd and 4th frames are in between frames, for establishing a character's mood, emotion, where the foot goes all the way from a swing to reaction, and staging. It is also a great way to striking a ball. communicate a character's personality. Timing helps to show that character is relaxed, excited, nervous or lethargic. Now let us consider the same animation but with different timing: 1st frame - a foot is lifted up  With a speed of 25 frames per second 50th frame - the foot strikes a ball the first version will take 1/5 (one fifth) of In frames from the 2nd to 49th the foot goes all the a second while duration of the second way from the swing to striking a ball. version will be 2 seconds. Correspondingly the action in the second version will be much slower and smoother. PAGE 24 The 12 Laws of Animation 9- Timing Video-1 PAGE 25 The 12 Laws of Animation 10- Exaggeration Exaggeration is used to push movements further, adding more appeal to an action, and should always be implemented to some degree. Exaggeration can be used to create extremely cartoony movements including physical alterations or supernatural elements. Or, exaggeration can be incorporated with a little more restraint for more realistic actions. But, even then you can still use exaggeration to make a more readable or fun movement while still staying true to reality. So, if a character is preparing to jump off a diving board, you can push them down just a little bit further before they leap off. Alternatively, you can use exaggeration in the timing to enhance different movements or help sell the weight of a character or object. A nice “subtle” reaction to a loud stereo. PAGE 26 The 12 Laws of Animation 10- Exaggeration One thing to note about animation is that it is completely possible to perfectly mimic motion in the real world, but this is often a little static and “boring” in practice. That’s why animators exaggerate the motion in their work. Exaggerating movement adds much-needed interest and appeal to nearly any scene. For Disney, they wanted to keep the exaggeration true to reality, just “wilder” and “more extreme.” However, if you take the work of John K. for example (see Ren & Stimpy), the motion and poses go beyond anything you can find in nature, becoming a true caricature of real life. In the example we’ve chosen here, the sound from the speakers is physically blowing the baby’s hair and head back, her little hands clinging to the walker for dear life. It communicates that the music is loud. PAGE 27 The 12 Laws of Animation 10- Exaggeration Animation is limitless and allows showing things as we want them to show different from reality. By means of exaggeration we can achieve greater expression, precision, more dynamic poses and motions. Not only primary lines of a character can be exaggerated, but also his personal traits, his behavior, condition, his motions, etc. Let us compare two boxing punches. First example is a realistic one when during the swing the character makes a slight turn taking his body into a "charge". In animation this motion will not be dynamic enough and appealing. Another example is animation with exaggeration when during a swing our character turns his body to 3/4 of a circle - what is a powerful charge, dynamic and appealing pose. PAGE 28 The 12 Laws of Animation 10- Exaggeration Video-1 PAGE 29 The 12 Laws of Animation 11- Solid Drawing The principle of solid drawing is about drawing single scenes in three-dimensional space and giving them volume and weight. The animator needs to be a skilled artist and has to understand how can create shapes, its anatomy, realistic or cartoon weight, balance with its environment , light and shadow work. The book’s authors write a lot about avoiding “twins” - characters with arms or other parts looking the same. No one draws like this on purpose, but sometimes “twins” appear in animations anyway. They look lifeless and boring. The shape should be a plastic, living, ready-to-move form PAGE 30 The 12 Laws of Animation 11- Solid Drawing Never forget the primary principles of 3D design: shape, anatomy, weight, volume, lights, and shadows. Even during this case, we will push beyond the bounds of realism, but we must remain consistent: if in our animated world the doors wobble or the attitude is deformed, this example will remain for the whole animation, otherwise the sense of continuity. It means animators should have skills for understanding the 3-dimensional shapes in terms of weight, balance, light, and shadow. It means drawing your image in such a fashion in order that it’s alive PAGE 31 The 12 Laws of Animation 11- Solid Drawing In 2D animation, solid drawing is about creating an accurate drawing in terms of volume and weight, balance, shadow, and the anatomy in a pose. With 3D animation, animators need to think about how to pose out your 3D character rig to ensure there is correct balance and weight, as well as a clear silhouette. Avoid “twinning,” which is creating a mirrored pose across to the other side (both arms on hips or both hands in pockets) because this creates a rather boring and unappealing pose. Your character poses shall be clear and expressive, the silhouette easily read. Stick to clear shapes, watch the center of gravity, weight should be evenly distributed. Poses shall clearly express thoughts, intentions, condition, wishes and feelings of a character. PAGE 32 The 12 Laws of Animation 11- Solid Drawing PAGE 33 The 12 Laws of Animation 11- Solid Drawing Video-1 PAGE 34 The 12 Laws of Animation 12- Appeal Here we do not deal with cover girls or a fluffy kitten with a pink ribbon. All characters may and shall to a greater or lesser degree be appealing whether they are heroes, villains, mammoths, dinosaurs or an object. This refers to their type, nature, background and behavior. Even villain-like characters shall be charismatic and might be liked by spectators. Spectators more easily accept and understand appealing characters, they show them empathy. Even a little mouse may be so appealing that became a legend - a Mickey Mouse. Appeal means when you really like it. For better understanding of these laws and principles they shall be read and put in practice. All laws and principles mentioned above will be studied in details and put into practice in our courses. Knowledge gained on these courses will be useful and applicable regardless of software package you use PAGE 35 The 12 Laws of Animation 12- Appeal This principle says a figure should be pleasing to look at. It doesn’t have to mean that they should be good looking, just that they should be interesting. A dynamic design can boost the appeal of a character. For an artist, it is his/her freedom to play with proportions to bring out the point of appeal. For example, we wouldn’t agree that beast is a treat to our eyes but yeah it brings out the ethos of the character and his personality. He is very interesting as an antagonist and the way his graphics are tweaked does jell well with what he is. Appeal should be the goal of every animator when bringing a character to life, but is ineffable enough to make it hard to describe. It is the difference between an animated face that can portray real emotion and one that looks terrifying and creepy. It is the sum of an animator’s skill in selling the force of a combat action versus a movement that comes across as weak. It is the believability in a character’s performance compared to one that appears robotic and unnatural. PAGE 36 The 12 Laws of Animation 12- Appeal The characters, objects, and also the world during which they live must attract the eye of the audience: therefore their design must be easy to read and pleasant to see, and their personality interesting. There’s no single scientific formula to understand this principle, but here lies the art of the animator. In motion design, an appeal is often established before anything moves by choosing a stimulating typeface, creating a visible translation, or transforming images. A character with an appeal isn’t always attractive. He can have an unsightly character with a particular level of charisma in order that it is sensible within the story. "Appeal is the magic element that causes players to believe in the character they are interacting with regardless of where they lie on the stylized vs realistic spectrum..." PAGE 37 The 12 Laws of Animation 12- Appeal Video-1 PAGE 38 Lights 01 Lighting Workflow Study well your screens, light source or darkness area, testing your light system , add light source which is compatible with your scene and test it well 02 Three point lighting What we want form light ? Design light, model light object, intensity od light , key light , ration light in the scene , backlight and which light we want direct light or indirect. 03 Shadows Relationship between light and shadow, which light is compatible with out shadow style, adding contract , subdivision light and filters , know about shadow brightness, speed, types of shadow, examples of faking shadow or 3d model 04 Quality of light Agenda Light softness, intensity, multiplayer, light color, light shape and can we animate light ?. Light patterns adding effects for light Style 05 Color Light point color, color depth , color balance , black and white color light, calculate light with color temperature , color RGB, CMYK 06 Exposure Render Rendering exposure problems, create perfect scene, motion scene, gamma correction for lights and its effects, camera light , simulation real-life camera scene. 07 Composition & staging Types of shots, shots size ,camera types and angle, framing and its features, rendering types 08 Rendering strategy Agenda Rendering material textures or maps ,shading surfaces, lights cameras and final steps to get perfect shot. Printing or screens and how to match light with environment Style  Lighting Workflow Consider Adjust your camera flash Modeling help scene light light Get perfect Shot Flash light had its In some programs to Present that is lights which may we can use light, beautifully damage your bright material in Understand designed Program light scene Assign light model to help our Testing workflow concept type scene Test light process , Adjust your system Every program Choose from point isolate main object , your zone, have its own light light or sport or to see light effect , darkness points until you add direct or sun arrange cameras sequence in render 0 1 2 3 4 5 6  Types Of Light Point Spotlights Directional Area light Sun and sky (OmniDirectional) Standard or IES light Global light Spherical, flat, linear, light Natural day light mesh (object) Its shining like point its basic stable od Its nearby point Light and shadow This light must with out target in graphics computer light , with it we effects depended on contain sky , the space like bulbs light with target can light a lot of its size if it very small environment or EX: Chandel Ex: cars lights object with target light will be like omni HDRI image or any point but if large shadow background act like will be more soft natural sky.  1- Point light Examples You will test it through your scene and get 3 different shots. T y p e s o f l i g h t 2- Spot lights (Normal+IES) Examples You will test it through your scene and get 3 different shots. T y p e s o f l i g h t 3- Directional light Examples You will test it through your scene and get 3 different shots. T y p e s o f l i g h t  3- Area light Examples You will test it through your scene and get 3 different shots. T y p e s o f l i g h t Area size  3- Sun light Examples You will test it through your scene and get 3 different shots. T y p e s o f l i g h t P r a c t i c e Color light Natural light Environment Three point lighting Modeling with light The three points Light ratio Color light Three point lighting The goal in the visualization process is to generate visually understandable images, movies from abstract data. Several steps must be done during the generation process. These steps are arranged in the so called Visualization Pipeline  The Importance of the Three-Point Lighting Not Photographers only know that light is very important in photography because light influences the way we look at our subjects. Three-point lighting is a lighting method used as a standard format that has been a basis for almost any type of lighting system. So It is used not only in photography, but also in different forms of visual artistry including 3d graphics, film-making, theatre and television. Whether you are a novice or an experienced photographer, understanding three-point lighting is essential as it is foundation knowledge for most types of photography. It is not merely a lighting technique as some would like to think. It is very useful in still life, portraiture, fashion, product, lifestyle, food, and almost any form of photography where there are specific subjects as main elements.  Three point lighting usage What we want form light ? Design light, model light object, intensity od light , key light , ration light in the scene , backlight and which light we want direct light or indirect. Computer Generated imagery Photography Computer Graphics Theatre &Videos Infographics Movies & Films Theatre &Videos & Films Theatre &Videos & Films Photography Computer Graphics Infographics Movies Reality Visualization  Computer Generated imagery (CGI) Its kind of computer applications like: Video games VFX movies Simulators TV show Computer animation  Three Point lighting Types Key light primary and brightest light source Fill light Mirroring the key light on the opposite side of the camera Back light rim light” or “hair light  Three Point Lighting steps Destinatio Relation n from with camera object 1 2 3 4 5 Key light Position Light Background Intensity light  Key light Light Directions primary and brightest light source The key light is your principal or main light source. In most cases, the key light is the strongest and brightest light source. It is the one that illuminates the subject. If you have only one light source to light up your subject, that is your key light. This light point source is the basis of all your other point sources. If we’re shooting an object or a person, we almost always want the front to be illuminated. That is why most of the time the main light source is located in front of your subject, more specifically on the front side around 45 degrees or so. However, this is not always the case. With more knowledge of lighting, you may effectively use key light from any direction you prefer. Take a look at the diagrams in next slides. This uses a basic studio lighting setup for key light. It’s a one light setup with no other light source. On the other hand, light from the sun is an example of key light in the natural environment. Another is window light. At night, it can be anything from car lights, light from lamp posts, building lights, etc. Just remember that the key light is the main source of illumination for your subject. Light Directions Key light primary and brightest light source  Key light primary and brightest light source Here is an example of key light on an apple. Notice that the left side of the apple is well light while the right side, towards the back, has shadows. You can also see dark shadows on the top curve of the apple where the stem is located as well as A Shooting Exercise Find a dark place where there is only one light source available. It may be a room, basement, or garage with a single window or door light. Alternatively, you can use a portable light source if you want - a hot shoe flash, an emergency lamp, or flashlight. You can also do this in a studio. Don’t use your on-cam flash since it becomes an added light point source. Setup your subject where light hits it at a 45 degree angle, similar to the apple photo and diagram on the previous page. Observe the light and the shadows. Take your best shot. Try moving your subject from side to side. See what that does.  Fill light Light Directions Mirroring the key light on the opposite side of the camera The second type of light point source is the fill light. The fill light does what it’s called to do – fill with light. When do you use fill light? Remember that where there is light, a shadow exists close by. Sometimes there are instances where the key light casts a shadow in a portion where you feel you would want to have more light than shade. This is where fill light comes in. What you do is have another light point positioned to “fill in the shadows”. It is therefore Here’sused to add another more apple lightbut photo, to lighten or with this time soften fill the light available. Notice shadow in an area of your subject. the light on the right side of the apple. That’s your fill light. It lessened the strength of the shadow. Compare this with the first apple photo that only had a key light. Light Directions 2-fillLight Light Directions 2-fillLight Here’s another example used in a portrait. There are 2 point sources - a key light and fill light. The subject is lit by the key light mostly the left side. The shadows on the right are softer due to fill light used on the opposite side of the key.  Light Directions 2-fillLight Take a look at the images on the left. Key light is illuminating the left side of the mannequin head. Fill light on the other hand is illuminating the other side using reflected light from a gold reflector. Some of the incident light from the key point source (a hot shoe flash with a shoot-through umbrella) hits the gold reflector creating the fill light. Take a look at the diagram above for reference.  Light Directions 3-BackLight / Edge light Edge light is a point source where light directly illuminates the subject from the back. The light intensity varies on the desired effect. It can be less than, equal to, or stronger than the key light. The position of this point source creates an outline of the subject made of light. Originally, edge light is called backlight because it is light coming from the back of a subject. Other terms include rim light and hair light because it was commonly used to create highlights on the edges of a person’s hair, and also because the light it creates is thin and hair-like in nature. To emphasize the effect rather than the position of the point source, we will be using the term edge light or hair light more often. Edge light has several purposes. The hair-like effect created by this point source creates a three-dimensional lighting illusion to a photograph. Since photography is a two-dimensional art, effects in lighting can help create that 3D visual experience. This photo would look flat without the highlights on the edges of the petals and stem. Light Directions 3-BackLight / Edge light  A Shooting Exercise 3-BackLight/ Edge light Another purpose of edge lighting is that it helps define the shape of an object or a person. This is helpful in separating elements whose tone and/or color tends to blend together. The hair-light effect gives that distinction. With the absence of a key light, silhouettes can be created using this point source because it is positioned behind the subject EXTRA CHALLENGE: Try creating the hairlike effect of edge light without creating a silhouette. You can do this outdoors during the day. Reflectors Three Point Lighting samples  SOURCES OF LIGHT POINTS EXAMPLE SOURCES OF KEY LIGHT 1. hot shoe flash 2. Sunlight from an overcast sky EXAMPLE SOURCES OF EDGE 3. Direct sunlight softened by a diffuser or skylight LIGHT 4. Window light 1. hot shoe flash without diffuser 5. Light from a lamp post 2. Direct Sunlight 3. Skylight 4. Light from a lamp post 5. Car headlights or spotlights EXAMPLE SOURCES OF FILL LIGHT 1. hot shoe flash 2. A portable reflector 3. A white or light-colored wall 4. White or light-colored floor 5. Window light diffused by a thin white curtain Light Effects-EX Sun Light Light Effects-EX Multiple Windows Exercise Light Effects-EX Mixed Lighting Exercise Light Effects-EX Wall Light Exercise Large white or light-colored walls are great reflectors. They bounce a lot of light since they cover a huge space. Find a wall that is positioned directly against the sun that you can use as a reflector. Light Effects-EX Practise Theatre scene Use environment scene and add different lights. Park - Game You can use games and add different lights types. Street or tour, mosque scene Interior scene Practices E x e r c i s e Next : Working with 3D Light Thank YOU Yallaaaa Game *_^