Mastering Animation Techniques for Game Development

1. MTA Exam 98-374 Gaming Development Fundamentals

2. 98-374: OBJECTIVE 4 Understand Animation

3. Animate basic characters LESSON 4.1

4. overviewLesson 4.1 In this lesson, you will review the following: • Movement • Lighting • Projections • Frames per second (FPS) • Shaders • Apply filter to text • Sprite animation • Indexed primitives • Matrices • Key frames • Motion between key frames

5. Lecture Lesson 4.1 Movement • Consider the graphics device used to display the animation (monitor, television screen, game handheld device). • Every graphic (sprite) is placed on the screen using a bounding rectangle in a 2-D animation, and then a texture is applied to this shape. • The program uses the upper-left vertex of the rectangle as the starting point for placement of the sprite. This value is stored in a Vector. • Each (X,Y) point represents a pixel on the display. • When applying motion to a sprite, the program can move the sprite forward, backward, up, and down, and zoom in and zoom out. • All movement is based on the speed and direction. • When resizing an image, it is critical to keep the same aspect ratio as the original image.

6. Movement Continued • When applying movement by changing the (x,y) coordinate, consider the frames per second (FPS) to keep the animation seamless. • Remember, XNA updates the display 60 times per second. • The coordinate planes for a 2-D animation and 3-D animation:

7. Lecture Lesson 4.1 Lighting • Types of lighting: • Light sources • Directional light (i.e., the sun) • Point light (i.e., a light bulb) • Reflective lighting • Ambient light • Diffuse light • Specular light • Reflective normals • XNA uses BasicEffect shaders.

8. lecture Lesson 4.1 Projections • The projection matrix defines the camera’s field of view. • In a 3-D game animation, this is used to map all points from 3-D space into your 2-D window (or plane on your graphics device). • To create the projection matrix, you must call the Matrix.CreatePerspectiveFieldOfView(viewAngle, aspectRatio, nearPlane, farPlane);

9. Lecture Lesson 4.1 FPS • Represents the number of frames drawn each second. • The animation FPS must be consistent across platforms; therefore, you must have a way to control the speed of your animation. • Here is one example of generating a Vector that changes the object position using the time between frames for this device: Vector3 Position += IncrementXYZ * TimeBetweenFrames/ConstantScale;

10. Lecture Lesson 4.1 Shaders • XNA uses shader-based rendering to convert vertex data into pixels. • There are two types of shaders used in game animation: • Vertex shaders are executed once for every vertex of an object. • Pixel shaders are run on every visible pixel in all visible objects drawn in the scene. • The process of using the shadersto render the objects is as follows: • Create our vertex information. • Apply texture to the vertex. • Pass the vertex data to the graphics card. • GPU processes the data to get it to appear on the screen. • The updated vertex information is rasterized and sent to the pixel shader. • The pixel shader applies the appropriate color.

11. Shaders CONTINUED

12. lecture Lesson 4.1 Applying Filters to Textures • A filter allows textures to be applied to a primitive surface. • XNA uses a texture coordinate to map a coordinate on a texture to a vertex of a primitive. • The texture coordinates are matched to the image coordinates using a two-dimensional (U,V) coordinate, where U is horizontal and V is vertical . • Think of U and V as percentages. • It allows for a multi-texturing technique to apply a filter on an existing texture.

13. lecture Lesson 4.1 Indexed Primitives • A primitive is a point, line, or triangle. • Each indexed primitive contains an array of primitives to be drawn. • 3-D images are generated using indexed primitives defined by vertices. • Vertices can contain position, color, or texture for the object, among other characteristics. • To render a triangle, do the following: • Define the coordinates and color of the three vertices of the triangle, and then store them in an array. • Set up the effect that you want to use to render the image. • Tell the graphics card what type of data your vertices contain. • Finally, tell the graphics card to render the image.

14. Lecture Lesson 4.1 Matrices • A matrix is a rectangular group of numbers that comes in many sizes. • Matrix math is essential for scaling, rotating, and translating objects in 3-D space. • They are also used by the shader code to perform transformations. • To set up your camera in a 3-D world, you need two matrices: • viewMatrix - provides the camera with position and direction. • projectionMatrix – The part of the 3-D world that maps your 3-D space to your 2-D window.

15. lecture Lesson 4.1 Keyframes • Helpful when creating an object that follows a path, such as a race car around a track. • Combine a timer and interpolation to determine the location of objects. • Use a timeline to control the speed of animations. • Use interpolation to move objects on a linear and/or curved path and the time it should take to travel this path. • To use interpolation, specify the start, stop, time, and path for the object. • For curved paths, many programmers use Bézier curves.

16. REVIEW Lesson 4.1 • How do characters (sprites) move across the screen? • How does the frames per second (FPS) rate affect the animation? • What is a sprite sheet? Can you answer these?

17. ADDITIONAL RESOURCES Lesson 4.1