Examples. Pac-Man, Frogger, Tempest, Joust,



Similar documents
INTRODUCTION TO RENDERING TECHNIQUES

A Short Introduction to Computer Graphics

Blender Notes. Introduction to Digital Modelling and Animation in Design Blender Tutorial - week 9 The Game Engine

Image Processing and Computer Graphics. Rendering Pipeline. Matthias Teschner. Computer Science Department University of Freiburg

Comp 410/510. Computer Graphics Spring Introduction to Graphics Systems

Lecture Notes, CEng 477

Silverlight for Windows Embedded Graphics and Rendering Pipeline 1

Graphical displays are generally of two types: vector displays and raster displays. Vector displays

Introduction to Computer Graphics

Monash University Clayton s School of Information Technology CSE3313 Computer Graphics Sample Exam Questions 2007

Introduction Computer stuff Pixels Line Drawing. Video Game World 2D 3D Puzzle Characters Camera Time steps

Beginning Android 4. Games Development. Mario Zechner. Robert Green

Scan-Line Fill. Scan-Line Algorithm. Sort by scan line Fill each span vertex order generated by vertex list

Cabri Geometry Application User Guide

B2.53-R3: COMPUTER GRAPHICS. NOTE: 1. There are TWO PARTS in this Module/Paper. PART ONE contains FOUR questions and PART TWO contains FIVE questions.

Tutorial: Creating Platform Games

2: Introducing image synthesis. Some orientation how did we get here? Graphics system architecture Overview of OpenGL / GLU / GLUT

Lezione 4: Grafica 3D*(II)

Computer Graphics Hardware An Overview

COMP175: Computer Graphics. Lecture 1 Introduction and Display Technologies

Visualization of 2D Domains

CS130 - Intro to computer graphics. Dr. Victor B. Zordan vbz@cs.ucr.edu Objectives

Recent Advances and Future Trends in Graphics Hardware. Michael Doggett Architect November 23, 2005

Use fireworks and Bonfire night as a stimulus for programming

2.3 WINDOW-TO-VIEWPORT COORDINATE TRANSFORMATION

The 3D rendering pipeline (our version for this class)

MMGD0203 Multimedia Design MMGD0203 MULTIMEDIA DESIGN. Chapter 3 Graphics and Animations

Blender 3D: Noob to Pro/Die Another Way

Outline. srgb DX9, DX10, XBox 360. Tone Mapping. Motion Blur

Working With Animation: Introduction to Flash

Touchstone -A Fresh Approach to Multimedia for the PC

Adobe Illustrator CS5 Part 1: Introduction to Illustrator

Lecture 9: Geometric map transformations. Cartographic Transformations

MassArt Studio Foundation: Visual Language Digital Media Cookbook, Fall 2013

Homeschool Programming, Inc.

Maya 2014 Basic Animation & The Graph Editor

Make your own Temple Run game

ART 269 3D Animation Fundamental Animation Principles and Procedures in Cinema 4D

3D Interactive Information Visualization: Guidelines from experience and analysis of applications

animation animation shape specification as a function of time

Flash Tutorial Part I

Index. 2D arrays, 210

How To Teach Computer Graphics

How to Build a Simple Pac-Man Game

Designing Games with Game Maker

Anime Studio Debut vs. Pro

COMPUTER GRAPHICS IMPORTANT QUESTION AND ANSWERS. Computer graphics

Computer Applications in Textile Engineering. Computer Applications in Textile Engineering

Introduction to Computer Graphics. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2012

Graphic Design. Background: The part of an artwork that appears to be farthest from the viewer, or in the distance of the scene.

BCC Multi Stripe Wipe

Shader Model 3.0. Ashu Rege. NVIDIA Developer Technology Group

CHAPTER 6 TEXTURE ANIMATION

Intro to 3D Animation Using Blender

GPU(Graphics Processing Unit) with a Focus on Nvidia GeForce 6 Series. By: Binesh Tuladhar Clay Smith

2D Art and Animation. [ COGS Meeting 02/18/2015 ] [ Andrew ]

ClarisWorks 5.0. Graphics

Computer Graphics. Anders Hast

Game Programming with DXFramework

Computer Graphics. Introduction. Computer graphics. What is computer graphics? Yung-Yu Chuang

IMGD 1001: The Game Art Pipeline

TRIGONOMETRY FOR ANIMATION

CS 378: Computer Game Technology

The Car Tutorial Part 1 Creating a Racing Game for Unity

Adding Animation With Cinema 4D XL

CATIA V5 Tutorials. Mechanism Design & Animation. Release 18. Nader G. Zamani. University of Windsor. Jonathan M. Weaver. University of Detroit Mercy

Creating Your Own 3D Models

An introduction to 3D draughting & solid modelling using AutoCAD

Game Development in Android Disgruntled Rats LLC. Sean Godinez Brian Morgan Michael Boldischar

Games Development Education to Industry. Dr. Catherine French Academic Group Leader Games Programming, Software Engineering and Mobile Systems

CREATE A 3D MOVIE IN DIRECTOR

IE Class Web Design Curriculum

Unit 4 Practice Test: Rotational Motion

3D Drawing. Single Point Perspective with Diminishing Spaces

Realtime 3D Computer Graphics Virtual Reality

Pro/ENGINEER Wildfire 4.0 Basic Design

REFERENCE GUIDE 1. INTRODUCTION

VIRTUAL TRIAL ROOM USING AUGMENTED REALITY

Displays. Cathode Ray Tube. Semiconductor Elements. Basic applications. Oscilloscope TV Old monitors. 2009, Associate Professor PhD. T.

1.0-Scratch Interface 1.1. Valuable Information

GPU Architecture. Michael Doggett ATI

Blender 3D Animation

Introduction to GPGPU. Tiziano Diamanti

Visualization and Feature Extraction, FLOW Spring School 2016 Prof. Dr. Tino Weinkauf. Flow Visualization. Image-Based Methods (integration-based)

Data Visualization Using Hardware Accelerated Spline Interpolation

GPU Shading and Rendering: Introduction & Graphics Hardware

Intermediate Tutorials Modeling - Trees. 3d studio max. 3d studio max. Tree Modeling Matthew D'Onofrio Page 1 of 12

SkillsUSA 2014 Contest Projects 3-D Visualization and Animation

Introduction to 2D and 3D Computer Graphics Mastering 2D & 3D Computer Graphics Pipelines

How to resize, rotate, and crop images

Important Question with Answer

Triangulation by Ear Clipping

IT 386: 3D Modeling and Animation. Review Sheet. Notes from Professor Nersesian s IT 386: 3D Modeling and Animation course

Cortona3D Viewer. User's Guide. Copyright ParallelGraphics

Test Specification. Introduction

The Evolution of Computer Graphics. SVP, Content & Technology, NVIDIA

RADEON 9700 SERIES. User s Guide. Copyright 2002, ATI Technologies Inc. All rights reserved.

1 One Dimensional Horizontal Motion Position vs. time Velocity vs. time

Transcription:

Examples Arcade Games Missile il Command, Space Invaders, Breakout, Centipede, Pac-Man, Frogger, Tempest, Joust, Important Traits: Easy-to-learn simple controls Move objects around the screen Single-screen or simple scrolling Infinite Play Multiple Lives Scoring highest score Little to no story

Game Engine = World Simulation Discrete simulation: each cycle computes a ``snapshot'' of the world Difference between a technical simulation and a game: Continual behavior Not just run a program and get an answer Real-time and highly interactive Update at around 30 times/second Rendered dtime always lags behind real lti time/game time by at tleast t1 frame Necessary to avoid clunky action or missed player input Consistency is important (to both) Simple physics: velocity, elastic collisions i Usually no mass, accelerations, momentum Easier in fixed time simulation than variable time simulation

Game Loop Initialization Overall Game Game Session Control Control Exit Player Input Main Logic Physics Game AI Collision Processing 1 cycle/frame Render scene to buffer Copy buffer to display Time sync wait

Simulation Types Fixed Discrete (tied to real time) Update world model each time step Each time step is same size Detect interactions by examination Wait if done too early Pros: Simpler physics Smoother graphics Cons: Computation must fit into time step Time step limits max frame rate Game events User inputs

Simulation Types Variable Discrete Time steps are variable - dictated d by amount of computation, but fast as can be Pros: No busy wait Smoother interaction at higher frame rate Cons Requires a bit more work on physics calculation Jerky motion if frame rate too low Game events User inputs

Vector Graphics Directly control electronic gun of CRT D i d fi d li Drawings defined as lines Lines stored as endpoints Look like wireframes No curved lines Limited variation in color or intensity.

History of 2D graphics: Vector Example: Asteroids, Battlezone http://www.squadron13.com/games/asteroids/asteroids.htm htm Advantages: Control o the electronic ect c gun directly so can be fast Only draw what is on the screen No jagged lines (aliasing). Only store endpoints of lines Problems: Best for wireframes. Must draw everything as lines: text, circles, surfaces,... $$ s: Can t use commercial TV technology Example Displays: s: Textronics, GDP

Advantages: Raster Graphics Cheaper Can easily draw solid surfaces Maps screen onto 2D memory Can move blocks of fimage around, control lidiid individual pixels Problems: Memory intensive Aliasing problems

Raster Graphics Screen is made up of picture elements = pixels. Color defined by Color defined by mixture of 3-guns: Red, Green, Blue

Current Approach Use Raster Graphics as underlying technology Memory is cheap Get access is every point on the screen Create drawing primitives similar to those in vector graphics Drawing lines Support surfaces, textures, sprites, fonts, etc. directly

2D Graphics Most 2D games use sprite instead, but basic primitives applicable in 3D graphics Points x,y Lines Two points Draw by drawing all points in between Low-level support for this in hardware or software -2,-1 4,4

Coordinate System (0,0) +x (120,120) +y

Polygons Defined by vertices Closed: all lines connected Draw one line at a time Can be concave or convex Basis for many games Basis for 3D graphics (triangle) 100,100 Required data: Position: x, y Number of vertices List of vertices Color (shading) moveto(100,100) lineto(100,300) lineto(500,300) lineto(500,100) lineto(100,100)

Operations on Polygon Translation: moving Scaling: changing size Rotation: turning Clipping and scrolling

Translation: Moving an Object To move an object, just add in changes to position: x = x 0 + dx y = y 0 + dy If have motion, the dx and dy are the x and y components of the velocity vector. dy = sin v Velocity Vector: V x0, y0 dx = cos v

Positioning an object Problem: If we move an object, do we need to change the values of every vertex? Solution: change frame of reference World coordinate system for object positions i coordinates relative to screen Local coordinate system for points in object coordinates relative to the position of the object (frame of reference) P2 P1 P3 Triangle location: 4,0 P1: 0, 1 P2: -1, -1 P3: 1, -1

Scaling: Changing Size Multiply the coordinates of each vertex by the scaling factor. Everything just expands from the center. object[v1].x *= scale object[v1].y *= scale

Rotation: Turning an Object Spin object around its center in the z-axis. Rotate each point the same angle Positive angles are clockwise Negative angles are counterclockwise x = x 0 * cos(angle) - y 0 * sin(angle) y = y 0 * cos(angle) + x 0 * sin(angle) Note: angle measured in radians not degrees!

Matrix Operations Translation, rotation, scaling can all be collapsed into matrix operations: Translation: 1 0 0 x y 1 * 0 1 0 dx dy 1 Scaling: sx 0 0 x y 1 * Rotation: x y 1 * 0 sy 0 0 0 1 cos -sin 0 sin cos 0 0 0 1 sx, sy = scaling values

Putting it all together sx*cos -sx*sin 0 x y 1 * sy*sin sin sy*cos 0 dx dy 1 Using Standard Trig functions Use table look-up Prestore all rotations you are going to need

Common Problems: Flicker and Tearing Video update slower than display Change video buffer during updating Solution: Frame 1 Frame 2 Displayed Double buffering -- write to a virtual screen that isn t being displayed. Either BLT buffer all at once, or switch pointer. Video Pointer Video Buffer Backup Buffer

Clipping Display the parts of the objects on the screen Can get array out of fbound errors if not careful Easy for sprites done in DirectX Approaches: Approaches: Border vs. image space or object space

Image Space vs. Object Space Image space: What is going to be displayed d Primitives are pixels Operations related to number of pixels Bad when must do in software Good if can do in parallel in hardware have one processor /pixel Object space: Objects being simulated in games Primitives are objects or polygons Operations related to number of objects

Border Clipping Create a border that is as wide as widest object Only render image, not border Restricted to screen/rectangle clipping Still have to detect when object is outside border Requires significantly more memory

Image Space Clipping Image Space: The pixel-level l lrepresentation of the complete image. Clipping For each pixel, test t if it is inside id the visible ibl region If buffer is 320x200, test 0-319 in x, 0-199 in y. Evaluation Easy to implement Works for all objects: lines, pixels, squares, bit maps Works for subregions Expensive! Requires overhead for every point rendered if done in software Cheap if done in hardware (well the hardware cost something)

Object Space Clipping Object space: Analytical representation of lines, polygons, etc. Clipping Change object to one that doesn t need to be clipped (e.g., shorten the line) New object is passed to render engine without any testing for clipping Evaluation Usually more efficient than image space software But hardware support of image space is fast Need different algorithm for different types of objects Lines are easy. Concave objects are problematic Usually just worry about bitmaps

Line Clipping Cases 2 3 4 1

Sprites: Object that moves around, displayed as a bit map j, p y p NxM pixels:12 x 12 = 144. 100 x 100 = 10,000. Displayed on a background

Sprite Data Static Size Image sets Weapons, shields, worth,... Dynamic Position Velocity Pose Current image Strength, health,... Saved background

Creating Sprites Create Sprite in 2D or 3D drawing package 2D 3D Gimp Photoshop h Paint 3D Studio Max Maya Blender 3D Milkshape 3D Save as file

Drawing the Sprite Some parts of the sprite are transparent Use a special code (255) to be transparent (or alpha channel) When drawing the pixels, don t copy that code Is expensive if done in software because done for every ypixel Today s computers have hardware support Some sprites have no transparencies Can have separate draw function Avoid test for transparency

Sprite Scaling Used to show change in depth (distance) Options: Dynamic computation Can lead to very blocky pictures when they get big Pre-store different sizes Hard to get large numbers of intermediate sizes Pre-store different sizes for major size changes: x2 Dynamically compute intermediate sizes Supported in Direct-X (in hardware and software)

Depth Can fake depth by scaling but what if overlap? Want closer objects to cover distant objects Associate depth with each Sprite - usually small number Image space solution Maintain shallowest depth rendered Add pixel if closer than previous Lots of work at each pixel if in software Hardware Z-buffer to rescue - standard for game machines Object space solution Sort objects by depth O(#_of_objects * log(#_of_objects)) Draw back to front

Sprite Rotation Store each orientation as a separate bit map 16 different pictures is reasonable start Pick the closest one to the current orientation Cl Calculating lti from scratch thusually too slow Sometimes supported by hardware

Sprite Animation Changes in the display as state of object changes Example: standing, sitting, i jumping, singing, i shooting Choose the current bit-map based on object state Might require separate timer for animation changes Storage if including rotation #_of_bitmaps = #_of_angles * #_of_states

Scrolling - simple Horizontal scrolling: usually side view of world screen

Scrolling - simple Vertical scrolling: usually top view of world

Scrolling Tile Based Tile map screen

Object-based Scrolling Sparse Keep list of objects with their positions Each time render those objects in current view Go through list of object linear in # of objects Grid-based Overlay grid with each cell having a list of objects Only consider objects in cells that t are in view

Collision Detection Image Space: Pixel by pixel basis. Expensive. Object Space: Hard for complex and concave cave spaces: Standard Approach: Cheat! Create a bounding box or circle test each vertex to see in another object Hide this by making your objects boxy or round Don t have objects like:

Sprite Collisions Easiest: Use the bounding box (or circle) that includes all the pixels Test if vertex of one in bounding box of other Tricky: Use something a little smaller to avoid some fake collisions If things happen fast enough, people e can t tell Almost right but expensive: Test if non-transparent pixels overlap Can still miss some cases...