62

4 Perspective, Scene Design, and Basic Animation

Embed Size (px)

Citation preview

4

Perspective, Scene Design,

and Basic Animation

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

• Explain game perspectives• Describe the elements of a scene.• Identify elements used to convey mood and

theme.• Explain issues of clarity for scaled computer-

generated images.• Describe how to construct 3D models.• Contrast static and active animation.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

• Define terminology used in artistic creations and computer-generated images.

• Create artistic assets for a video game.• Summarize how pixel and vertex shading are

used to create the illusion of depth.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Perspective

• How gameplay is displayed• Position of player on screen• First person• Second person• Third person

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

First-Person Perspective

• First-person perspective is seen through the eyes of the character

• Like a head-mounted camera

(www.freeonlinegames.com)

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Second-Person Perspective

• Second-person perspective is seen through the eyes of the opponent

• Very rarely used

(www.kongregate.com)

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Second-Person Perspective

• In this game, the player is the batter and the computer is the pitcher

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Third-Person Perspective

• Third-person perspective is seen through the eyes of a spectator• Overhead• Behind• Profile or platform view• Many other viewing angles

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Third-Person Perspective

• These games have a classic platform view

(www.kewlbox.com; www.freeonlinegames.com)

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Third-Person Perspective

• This game has an overhead view

(www.freeonlinegames.com)

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Changeable Perspective

• “Switch view” button (player selects)• Switch view due to game action (game

determines); for example:• Third person while running• First person while in targeting mode

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Changeable Perspective

• This game features a “switch view” button

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Scenes

• Placement of game objects• Attractive layout• Obstacles• Objectives• Conveys story• Conveys mood

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Object Placement

• Foreground• Background• Active objects• Background objects• Backdrop objects• Text objects or buttons

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Scene Feature

• Examine the objects in this scene.• Identify and discuss the scene elements that

do not match.• Why do these elements not match?

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Design Objects

• Active objects• Interactive• Can move

• Background objects• Not interactive, like the sky

• Backdrop objects• Scene elements, like platforms and walls

• Player avatar• The character

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Design Objects

• Note the various types of objects in a game

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Mood

• Through color palette• Red = passion• Yellow = cheerful• Blue = peaceful• Gray = gloomy

• Through object shape• Sharp edges = scary• Soft edges = calming

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Theme

• Through traditional or historic objects• Cultural themes• Historic periods• Mythology• Religion• Holidays

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Mood and Theme Feature

• Examine both scenes• Similar objects appear in both• How does color palette set the mood in each?• How is theme established by use of traditional

objects in each?

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Scene Design Feature

• Consider the scene on the next slide:• List five background objects• List one foreground object• List the active objects in the scene• What is the mood of the scene?• How does color palette help set that mood?

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Scene Design Feature

© 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 pixels• 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 screen

• 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)

• 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 vertices• Wireframe view shows hidden edges and vertices

© 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 programming• Bounding box programming

© 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” together

• Provides the shape for the object• Texture

• External color or image on the object• Tessellates over the mesh• 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 pose

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Active Animation

• In active animation, objects change poses

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

What are the three types of perspectives used in video games?

First person, second person, and third person

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

List four elements found in a scene.

Background, backdrop objects, active objects, and player character or avatar

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

How is mood conveyed through the use of color?

Bright colors set a cheerful mood, while dark colors set a gloomy or scary mood.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

What happens to the resolution of an image as the image is scaled up?

As the image is scaled up, the resolution decreases, which may result in the image becoming blurry.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

What two dimensions define a sprite and what three dimensions define a model?

A sprite is defined by X and Y (or length and width) dimensions. A model is defined by X, Y, and Z (or length, width, and depth) dimensions.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

What is the basic difference between a static animation and an active animation?

In a static animation, the object’s original pose does not change, while in an active animation, the original pose changes.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

What is a pixel?

A picture element, which is the smallest point or dot a computer screen can display.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

Explain dpi.

Dots per inch; it is a measure of image resolution. The higher the dpi, the higher the resolution.

© Goodheart-Willcox Co., Inc. Permission granted to reproduce for educational use only.

How do pixel and vertex shading create the illusion of depth?

Pixel shading creates darker colors farther from the viewer and lighter colors closer to the viewer. Vertex shading moves vertices closer together in the distance and farther apart in the foreground.