Lesson 3

Exam Objective Matrix
Skills/Concepts MTA Exam Objectives
Creating the Visual Design Draw objects (3.3)
Deciding the Output
Parameters
Design the user interface (1.4)
Understand rendering engines (3.1)

Creating the Visual Design
• Creating the visual design involves selecting the type of graphics for the game, the design components and deciding on the UI layout.
• The primary steps to creating the visual design for your game are:
– Selecting the type of graphics—2D or 3D
– Creating the design components
– Selecting the UI of the game

Selecting the Graphics Type
• 2D graphics are a blend of images and/or text created in a two-dimensional medium.
– A game created with 2D graphics shows only the height and width but not the depth of the game objects.
• 3D graphics are created in three-dimensions: height, width, and depth.
– All real-world objects are three-dimensional.
– You can use the 3D graphics medium in your game to provide the player with a real-world gaming experience.

Choosing a Graphics Type
• Consider the following factors while choosing the 2D or 3D graphics type for your game:
– Target audience (age, skills, reason for playing games, etc.)
– Game output device
– Game platform

Visual Design Elements
• Bitmaps
• Vector graphics
• Sprites
• Text
• Sprite font
• Textures
• Lighting
• Blending
• 3D geometry
• Parallax mapping

Bitmaps and Vector Graphics
Bitmaps
• Also referred to as raster images.
• Made up of pixels that contains rows and columns of little squares.
• File sizes are typically very large due to storing information about each individual pixel.
• Device dependent or device independent.
• Not scalable.
Vector Graphics
• Use geometric shapes such as points, lines and curves defined by mathematical calculations.
• May contain many individual objects, each with its own properties.
• File sizes are typically smaller due to improved storage structure.
• Scalable.

Scaling Bitmaps and Vector Graphics
Bitmap (Raster) Vector Graphics

Sprites
• A sprite is a two-dimensional plane on which an image is applied.
• When included in a larger scene, these objects appear to be part of the scene.
• You use sprites to include small unrelated bitmaps into a single bitmap on the screen.
• Sprites can also help keep the game light.
– A dense forest can be created by combining some closeup tree models (3D) with sprites (2D pictures of trees).
The rendering of a sprite is faster compared to the rendering of all the facets of a 3D model at a cost of detail.

Using Sprites on Master Chief's Armor

Billboarding Sprites
• A technique in which 2D objects are applied to a rectangular primitive, or a polygon, that is kept perpendicular to the line of sight of the player or the camera.

Sprite Fonts
• In general, vector graphics are used to display fonts.
• This adds mathematical calculations.
• The XNA Framework provides sprite fonts.
• Converts vector based font to a bitmapped font.
• Can be rendered quickly.
• Sprite fonts used below for status.

Textures and Lighting
• Texture is a 2D image that is applied on a game object or character to define its surface.
– You can use textures to create the look of the object.
– For example, to show a brick wall, you can create the required texture and apply it on the wall.
• Lighting helps to enhance the aesthetics of your game.
– By properly using the lighting component of your game, you can enhance the game visuals and make your game objects resemble real-world objects.

Good Usage of Lighting to Create Shadow

Lighting Decay
Light with decay Light without decay

Blending
• Blending is the mixing of a new color with an already existing color to create a different resulting color.
• Alpha blending, most commonly used:
– Combines a foreground translucent color with a background color
– Creates a transparency effect such that the destination color appears through the source color

Parallax Mapping
• Parallax mapping is a 3D technique that is an enhancement of the “normal mapping” technique applied to textures.
– Normal mapping is a technique to fake the lighting of bumps and dents on game objects and characters.
– Parallax mapping displaces the individual pixel height of a surface, making the high coordinates hide the low coordinates behind them. This gives the illusion of depth on the surface when looked at an angle.

The Effect of Parallax Mapping
Without With

Considerations for Good Visual Design
• The game design components just covered can help design a game that looks more real and engrosses the audience.
• Key these considerations in mind while performing your visual design:
– Simplicity
– Compatibility
– Clarity
– Use of colors

The UI Layout
• The UI layout constitutes all the UI elements, including the interactive elements and the noninteractive elements.
– Interactive UI elements include buttons, text fields, and menus, and even the game characters through which the audience interacts with the game.
– Noninteractive elements include game objects such as trees, forests, and islands, which provide the environment for the game.

Selecting the UI Layout
• Ensure you have a good understanding of your UI concept before starting.
• Select UI elements that complement the UI concept.
• Build the UI so that it helps the player to understand and interact with the game.
• A good UI leads to higher player satisfaction.
• A bad UI can ruin a good game for the player.

UI Component Types: Diegetic and Nondiegetic
• Diegetic components
– Can exist within the game story and the game space.
– Assist the player by providing indication and information about the game world.
• Nondiegetic components
– Are not part of the game story or the game space.
– Use these components to enable the player to choose the game setting or customize their gameplay.

Diegetic and Nondiegetic Components
Diegetic Nondiegetic

UI Component Types: Spatial and Meta
• Spatial components are part of the game space but not part of the game story.
– Provide extra information on a game object or character to the player, eliminating the need for the player to jump to menu screens.
• A meta component exists as part of the game story alone.
– Usually used with diegetic components to recreate a real-world experience.
– Use to express effects such as a blood spatter or cracked glass.

Spatial and Meta Components
Spatial Meta

UI Component Comparison
UI Component
Diegetic
Nondiegetic
Spatial
Pros
• Player to can connect with the game world
• Weaves the storyline along with the game
• UI elements can have special visual style
• Removes imitations of other UI components
• No need to change screens
Cons
• May not provide the proper information
• Does not immerse player into gameplay
• Can seem forced if the elements are not required
Meta • Presents information clearly
• Can create confusion or distraction the

UI Elements: Menus
• You can use menus in your game to provide the player with a list of options.
– The player can choose from the list as desired.
– You can also place a menu as a nondiegetic component on a welcome or opening screen.
• Menu guidelines:
– Keep menu code light (short)
– Keep menus well organized
– Keep menu scrolling to a minimum

Menus
Simple menu Scrolling menu

UI Elements: HUD
• A heads-up display (HUD) UI provides game-specific information to the player through visual representations.
– Character’s health/life status
– Weapons
– Menus
– Game-specific visual items (e.g. speedometer, compass)
– Time (remaining, elapsed, time of day)
– Game status (score, level, etc.)

HUD Best Practices
• Provide information using HUDs that will best motivate the player to continue playing the game.
• Decide whether the information displayed through the HUD remains on the screen at all times.
• Keep your HUD transparent.
• Keep only the most relevant information in the HUD.

HUD Example

UI Elements: Buttons
• Buttons allow the player to perform specified actions when the player clicks the buttons.
– Keep consistency in form and design of the buttons across the game.
– Design buttons so that they clearly stand out from the rest of the visual elements.
– Use fonts that provide a smooth display and are easy to read even in small font sizes.
– Use filters such as Drop Shadow, Glow, and so on, but only if it is an absolute necessity.

Deciding the Output Parameters
• The outputs of a game that a gamer finally views are not only influenced by the type of input/output devices, but also depend on different factors.
– The medium used to render or deliver the visual output or the graphics of the game
– The different resolutions at which the game might run
– The techniques used to compress the video and audio output

Rendering Engines
• A rendering engine abstracts the communication between the graphics hardware, such as the graphics-processing unit (GPU) or video card, and the respective device drivers through a set of APIs.
• Examples of 3D rendering engines include Crystal
Space, OGRE, Truevision3D, and Vision Engine.
One of the commonly used 3D rendering engine is
Microsoft’s XNA Game Engine.
• The XNA Game Engine wraps around the functionality of the DirectX Software.

DirectX APIs
• Direct 3D is a set of 3D graphics API within
DirectX that you can use to develop games.
• Direct2D contains the 2D graphics API that provides high performance and high quality rendering of 2D images.
• DirectSound is a set of APIs that provide communication between multimedia applications, including your game applications and the sound card driver.

DirectX APIs
• DirectPlay provides a set of APIs that provides an interface between your game applications and communication services, such as the Internet or local networks.
• DirectInput is a set of APIs that help your game application to collect input from the players through the input devices.
– The input devices can be of any type, such as a mouse, keyboard, and other game controllers, and even a force feedback.

The DirectX APIs

Resolution
• Resolution is the number of pixels that can be displayed on a display device, such as a monitor or a television.
– The output quality of a game is good or bad depending on the resolution and size of the display device.
– Resolution is cited as “width x height.”
“1024 × 768” means that the width is 1024 pixels and the height is 768 pixels.

Display Modes
• In the full screen mode, the game is displayed on the full screen.
• In the Windowed mode, the game is displayed in a single window on the screen.

Video and Audio Compression
• Compression is the reduction of the data to fewer bits by following certain techniques.
• The compressed file occupies less space and is transferable quickly through the available communication channel.
• A compressed file can have no or very negligible modification in its quality with reference to the original file.

Compression Techniques
• Lossless compression
– Accounts for data reduction without any data loss after compression.
– The original data can be reconstructed from the compressed data without losing any information.
• Lossy compression
– Involves some loss of data during reduction.
– The original information cannot be reconstructed when the file is decompressed.

Video Compression Types Used in Games
• M-JPEG involves intraframe coding only. The absence of interframe coding restricts its performance.
• H.261 compression is well adapted for video telecommunication applications, such as video conferencing.
• MPEG compression is used currently in a variety of applications.

Lossy Audio Compression Used in Games
• The silence compression method involves analyzing to determine the silence periods.
• ADPCM involves conversion of analog sound data into a string of digital binary code.
• Linear predictive coding encodes audio signal at a low bit rate.
• The Code Excited Linear method follows the process of the LPC method and transmits the parameters of the models at the rate 4.8 kbits/sec along with errors.

Audio and Video Formats
Audio
• WAV
• WMA
• MP3
• Real
Video
• DVD
• Flash
• QuickTime
• RealMedia
• WMV

Recap
• Creating the Visual Design
• Selecting the Graphics Type
• Choosing a Graphics Type
• Visual Design Elements
• Considerations for Good Visual
Design
• The UI Layout
• Selecting the UI Layout
• UI Component Types
• UI Elements
• Deciding the Output Parameters
• Rendering Engines
• DirectX APIs
• Resolution
• Display Modes
• Video and Audio Compression
• Audio and Video Formats