Perspective, Scene Design, and Basic Animation

Slides:



Advertisements
Similar presentations
**Develops the understanding of the Visual Elements: Shape and Form
Advertisements

Adobe Photoshop CS5 – Illustrated Unit G: Creating Special Effects
Without these building blocks the principles are meaningless.
Objectives To identify elements and principles of design.
ILLUSION OF DEPTH.
CS 4363/6353 INTRODUCTION TO COMPUTER GRAPHICS. WHAT YOU’LL SEE Interactive 3D computer graphics Real-time 2D, but mostly 3D OpenGL C/C++ (if you don’t.
Elements of Design.
The Principles and Elements of Design an interactive quiz
Vector vs. Bitmap SciVis V
Perspective, Scene Design, and Basic Animation
What is your favorite color? Castle Game-Part One February 7, 2013.
Art Elements Technology.
V Obtained from a summer workshop in Guildford County July, 2014
Composition (The elements). What is Composition Composition is the arrangement of shapes (forms) in an image – their position, relationship to one another.
Elements and Principles of Graphic Design Communications Technology 11.
MULTIMEDIA TECHNOLOGY SMM 3001 MEDIA - GRAPHICS. In this chapter how the computer creates, stores, and displays graphic images how the computer creates,
2D Techniques to Represent 3D
Visual Representation of Information
Elements of Art.
The Elements of Design.
DIGITAL GRAPHICS & ANIMATION Complete LESSON 5 CREATING SPECIAL EFFECTS.
The Elements of Art The elements of art are utilized by all artists, and a greater understanding of the principles which are used leads to a greater understanding.
ELEMENTS OF ART Building Blocks.
Kinds of Graphics and Composition Vector Graphics Vs Bitmapped Graphics.
and how they impact our lives.
Chapter 10 Creating 3D Objects. Extruding Objects The Extrude & Bevel effect makes two- dimensional objects three-dimensional. A two-dimensional object.
4 Perspective, Scene Design, and Basic Animation.
Elements of Art (pages 32-36)
I-1 Steps of Image Generation –Create a model of the objects –Create a model for the illumination of the objects –Create an image (render) the result I.
Vector vs. Bitmap
Introduction to Textures and Skins Chapter 8 & 9 3D Game Programming All-in-One By Ken Finney.
Chapter 3 Space. Three Kinds of Space Space as format: size, scale, and presentation. Space as the relationships among objects and the areas surrounding.
Composition: The Graphics Unit of Study. What is a camera angle? This is the angle from which the camera photographs a subject or scene. There are a great.
4 Perspective, Scene Design, and Basic Animation.
Core Ideas 2 Art terminology. Line A line is a basic element of art, referring to a continuous mark, made on a surface, by a moving point. A line is long.
Composition: The Graphics Unit of Study. What is a camera angle? This is the angle from which the camera photographs a subject or scene. There are a great.
INT 840E Computer graphics Introduction & Graphic’s Architecture.
Elements of Art Line Shape Value Form ColorSpace Texture.
Elements of Art -&- Principles of Design. Elements of Art Line Shape Form Space Texture Value Color.
Autodesk VIZ Fundamentals Chapters 1-2 Ethier and Ethier PART ONE: Introduction To Computer Animation Chapters 1&2: Introduction to Three- Dimensional.
The Elements of Art.
The Seven Elements of Art Ms. Hanson/ART 1. Definition of The Elements of Art The elements of art are a commonly used group of aspects of a work of art.
PART 1 Elements of Art what artists use to create art.
Anaglyph overview stereoscopic viewing technology.
Elements And Principles of Design. Line Direction of lines Direction of lines Horizontal Horizontal Vertical Vertical Diagonal Diagonal Structural Lines.
Elements of Design Value and Color.
© ExplorNet’s Centers for Quality Teaching and Learning 1 Objective % Understand concepts used to create digital graphics.
Guilford County SciVis V104.03
Chapter 3 The Visual Elements. The Elements of Art The basic components or tools of visual communication. What we use to “make” art.
Graphics Basic Concepts 1.  A graphic is an image or visual representation of an object.  A visual representation such as a photo, illustration or diagram.
Composition & Elements of Art and Principles of Design A artists toolbox.
The Principles of Design Learn how to create and introduce graphic designs in terms of graphic design principles.
Classic Graphic Design TheoryClassic Graphic Design Theory* * “classic theory” because it forms the basis for many decisions in design.
The Elements of Art …. and how they impact our lives.
BITMAPPED IMAGES & VECTOR DRAWN GRAPHICS
Introduction to Computer Graphics
Objective % Explain design concepts used to create digital graphics.
Three-Dimensional Art Composition
Elements of Art.
Static picture effects for PowerPoint slides
Vector vs. Bitmap.
Dimensional Trivia Clark, Savon White, James Simpson, Sabrina
DESIGN PRODUCTION ELEMENT OF DESIGN IN VECTOR GRAPHIC
Perspective, Scene Design, and Basic Animation
Perspective & Scene Design Part 1 January 18, 2017
Adobe Visual Design 2.00 Identifying design elements when preparing images (10%) 7.00 Identifying design elements when preparing illustrations (1%)
Static picture effects for PowerPoint slides
Elements and Principals of Design
Classic Graphic Design Theory*
Objective % Explain design concepts used to create digital graphics.
Presentation transcript:

Perspective, Scene Design, and Basic Animation 4 Perspective, Scene Design, and Basic Animation

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.

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.

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

First-Person Perspective First-person perspective is seen through the eyes of the character Like a head-mounted camera (www.freeonlinegames.com)

Second-Person Perspective Second-person perspective is seen through the eyes of the opponent Very rarely used (www.kongregate.com)

Second-Person Perspective In this game, the player is the batter and the computer is the pitcher

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

Third-Person Perspective These games have a classic platform view (www.kewlbox.com; www.freeonlinegames.com)

Third-Person Perspective This game has an overhead view (www.freeonlinegames.com)

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

Changeable Perspective This game features a “switch view” button

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

Object Placement Foreground Background Active objects Background objects Backdrop objects Text objects or buttons

Scene Feature Examine the objects in this scene. Identify and discuss the scene elements that do not match. Why do these elements not match?

Design Objects Active objects Background objects Backdrop objects Interactive Can move Background objects Not interactive, like the sky Backdrop objects Scene elements, like platforms and walls Player avatar The character

Design Objects Note the various types of objects in a game

Mood Through color palette Through object shape Red = passion Yellow = cheerful Blue = peaceful Gray = gloomy Through object shape Sharp edges = scary Soft edges = calming

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

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?

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?

Scene Design Feature

Storyboards A plan to tell the game story Sketch important frames Describe important action

Image Properties Digital images Measured in pixels Clarity Resolution

Clarity Pixel density Dots per inch (dpi) High resolution vs. low resolution

Resizing and Resolution Enlarging low-resolution images Pixilation Blurry Interpolation Color blending Native poles Dithering

Resizing and Resolution The computer may blend colors when interpolating pixels

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

Digital Color Model RGB Red, green, and blue Colors blended to create all other colors

Digital Color Model Creating an RGB color in Microsoft Office

Digital Color Model HSL Hue, saturation, and luminescence The values for these properties create all colors

Digital Color Model Creating an HSL color in Microsoft Office

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

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

Two-Dimensional Games A sprite character set from RPG Maker XP

Two-Dimensional Games Game frame coordinates Cartesian coordinate system has +Y up The Games Factory 2 has +Y down

Two and One-Half–Dimensional Games Hybrid 2D game map with 3D objects 3D game map with 2D objects Isometric board games

Two and One-Half–Dimensional Games

Three-Dimensional Games Length, width, and depth Coordinates in X, Y, and Z directions 3D assets are called models

Three-Dimensional Games Perspective Visual perspective Vanishing point

Displaying 3D Objects Pixel shading Vertex 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

Displaying 3D Objects Models are composed of vertices, edges, and faces

Scaling 3D Objects Rendering Resizing Proportional (A) Nonproportional (B)

Moving a 3D Object Resizes in line with visual perspective Distance between vertices is scaled Reading edge programming Bounding box programming

Round Objects UV sphere U = X V = Y

Round Objects Geodesic sphere Faces may be any regular polygon Icosphere most common type

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

What Is a Mesh? Texture is an image stretched over a mesh (Model courtesy of Autodesk)

What Is a Mesh? Poly count Increased poly count = smoother Increased poly count = longer render time

Basic Animation Stop-motion frame animation Static animation Flip book style Static animation No articulation Active animation Articulated movement

Static Animation In static animation, the object retains its original pose

Active Animation In active animation, objects change poses

What are the three types of perspectives used in video games? First person, second person, and third person

List four elements found in a scene. Background, backdrop objects, active objects, and player character or avatar

How is mood conveyed through the use of color? Bright colors set a cheerful mood, while dark colors set a gloomy or scary mood.

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.

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.

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.

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

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

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.

Active animation Active objects Backdrop objects Background objects 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.

Bounding box Camera Clarity 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.

Color palette Dithering Dots per inch (dpi) Faces 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.

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.

Interpolation Mesh Native poles 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.

Pixels Pixel shading Pixilation 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.

Second-person perspective 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.

Third-person perspective 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.

Vanishing point Visible play area Visual perspective 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.

Wireframe View showing objects as if they are built with wire with visible edges and invisible faces.