4 Perspective, Scene Design, and Basic Animation

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Storyboards A plan to tell the game story Sketch important frames Describe important action

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Image Properties Digital images Measured in pixelspixels Clarity Resolution

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Clarity Pixel density Dots per inch (dpi) High resolution vs. low resolution

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Resizing and Resolution Enlarging low-resolution images Pixilation Blurry Interpolation Color blending Native poles Dithering

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Resizing and Resolution The computer may blend colors when interpolating pixels

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Game Map Game map often is larger than screen size Map must scroll into the visible screenscroll Images can blur if movement is too fast Game can lag if image resolution is too high

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Digital Color Model RGB Red, green, and blue Colors blended to create all other colors

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Digital Color Model Creating an RGB color in Microsoft Office

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Digital Color Model HSL Hue, saturation, and luminescence The values for these properties create all colors

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Digital Color Model Creating an HSL color in Microsoft Office

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Two-Dimensional Games Length and width only; no depth Game frame Includes all items needed to complete a level May not be all visible to player at once

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Two-Dimensional Games Visible play area Part of the game frame seen by the player Scrolling if needed 2D assets are called sprites Sprite character set (sprite sheet)Sprite character set Movement direction animations Stopped animation images

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Two-Dimensional Games A sprite character set from RPG Maker XP

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Two-Dimensional Games Game frame coordinates Cartesian coordinate system has +Y up The Games Factory 2 has +Y down

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Two and One-Half–Dimensional Games Hybrid 2D game map with 3D objects 3D game map with 2D objects Isometric board games

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Two and One-Half–Dimensional Games

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Three-Dimensional Games Length, width, and depth Coordinates in X, Y, and Z directions 3D assets are called models

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Three-Dimensional Games Perspective Visual perspective Vanishing point

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Displaying 3D Objects Pixel shading Light from light source Results in light and dark areas on the model Vertex Point on a 3D object Faces are between verticesFaces Wireframe view shows hidden edges and verticesWireframe

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Displaying 3D Objects Models are composed of vertices, edges, and faces

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Scaling 3D Objects Rendering Resizing Proportional (A) Nonproportional (B)

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Moving a 3D Object Resizes in line with visual perspective Distance between vertices is scaled Reading edge programmingReading edge Bounding box programmingBounding box

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Round Objects UV sphere U = X V = Y

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Round Objects Geodesic sphere Faces may be any regular polygon Icosphere most common type

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. What Is a Mesh? Mesh is polygonal shapes (polys) “glued” togetherMesh Provides the shape for the object Texture External color or image on the object Tessellates over the meshTessellates Stretched on the surface of each poly

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. What Is a Mesh? Texture is an image stretched over a mesh (Model courtesy of Autodesk)

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. What Is a Mesh? Poly count Increased poly count = smoother Increased poly count = longer render time

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Basic Animation Stop-motion frame animation Flip book style Static animation No articulation Active animation Articulated movement

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Static Animation In static animation, the object retains its original posestatic animation

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Active Animation In active animation, objects change posesactive animation

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Active animation An object changes poses while moving on the screen. Active objects Objects in the game frame with which the player can interact; can be programmed. Backdrop objects Objects in a game frame that the player can touch or walk behind, but do not damage or reward the player. Background objects Objects in the game frame with which the player cannot interact.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Bounding box Invisible cube inside of which a 3D object completely fits; used as a reference to rescale the 3D object. Camera Displays the visual play area of the game and follows the player wherever the character goes. Clarity How clearly images are displayed with either line or pixel density.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Color palette Set of colors used throughout a scene to maintain mood and continuity. Dithering Computer process of scattering pixels of different colors to approximate a true color. Dots per inch (dpi) Number of pixels per square inch; the higher the dpi, the clearer the picture. Faces Flat surfaces on a 3D model.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. First-person perspective Gameplay view where the players sees through the eyes of the character. Game frame All items programmed for a complete scene or level of a game. Hybrid Created by combining features from two different items.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Interpolation When resizing an image, the computer makes a decision to create a blended-color pixel where original pixels are moved. Mesh A 3D shape created with interconnecting polygons stuck together along their edges. Native poles Original pixels of an object before it was resized.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Pixels Picture elements; the smallest point or dot of color a computer screen can generate. Pixel shading Applying the principle of visual perspective such that as you move farther from the light source, things get darker. Pixilation Condition resulting in a blurry image; created by improper resizing.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Reading edge Line between two vertices on a 3D object that is used as a reference to rescale the object. Rendering Adding color and shading to represent a solid object. Scrolling Game frame is moved so the player is always in the visible play area. Second-person perspective Player sees the game as if the player were an opponent or intermediary; rarely used in video games.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Sprite character set Collection of poses for a single 2D asset. Static animation Object retains its original pose while moving. Tessellate Stretching of a color and texture map to apply a piece of the overall texture to each polygon of a 3D mesh. Third-person perspective Gameplay is viewed by a person who is not the player’s character or opponent, rather a neutral third person; spectator view.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Vanishing point Point in the background where the edges of all assets will meet at a single point if extended; the faraway point where an object seems to disappear as it becomes smaller. Visible play area The part of the game frame that is displayed on the video screen. Visual perspective Sense of depth using shading and narrowing to represent the third dimension of depth on a two- dimensional screen.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only. Wireframe View showing objects as if they are built with wire with visible edges and invisible faces.