Game Programming (2D Game Programming)

36
Game Programming Game Programming (2D Game Programming) (2D Game Programming) 2011. Spring

description

Game Programming (2D Game Programming). 2011. Spring. 2D Game Programming. On Older Hardware Computers were limited by slow CPUs and small memory sizes Ex) 8-bit processor, 48KB RAM Many systems did not have “secondary storage” Ex) program loader (tapes, cartridges) No floating point unit - PowerPoint PPT Presentation

Transcript of Game Programming (2D Game Programming)

Page 1: Game Programming (2D Game Programming)

Game ProgrammingGame Programming(2D Game Programming)(2D Game Programming)

2011. Spring

Page 2: Game Programming (2D Game Programming)

2D Game Programming

■ On Older Hardware Computers were limited by slow CPUs and small memory

sizes• Ex) 8-bit processor, 48KB RAM

Many systems did not have “secondary storage”• Ex) program loader (tapes, cartridges)

No floating point unit■ 2D technologies

Still remain today• Ex) Handhelds, game-capable telephones, interactive

television

Page 3: Game Programming (2D Game Programming)

Data Structures for 2D Games

■ Three key elements of classic 2D games A way to encode the character graphics A way to encode background images A way to store the game map

Page 4: Game Programming (2D Game Programming)

Sprite-Based Characters

■ Cel animation Each frame of each character was painted on cellophane

sheets with transparent area■ 2D games

Sprite• Store each character in a rectangular, bitmapped graphic

Detect transparent areas The characters blend seamlessly with the BGs

How to encode the character graphics

Page 5: Game Programming (2D Game Programming)

Sprites■ Games that we know and love

Small graphics that are copied into memory to put on screen■ Xevious, Time Pilot

Page 6: Game Programming (2D Game Programming)

Sprite-Based Characters black and white

• Store the sprites in black and white (or any two given colors)

• Ex) 8x8 sprites(8 Bytes), The FG and BG colors are selected from a 16 color palette (1Byte: 4 bits+extra) 9 Bytes per sprite

The frame buffer: 256x176 pixels 32 x 22 Sprites approximately 6 KB (32x22x9 6,336 Byte)

16 colors• Each pixel can be coded to 4 bits• Around 4 times more space, represent much richer scenes• Ex) 8x8 sprites 32 Bytes per sprite (=8x8x4 bits) The frame buffer: 256x176 pixels take up 23 KB

(32x22x32 22,528 Byte)

Page 7: Game Programming (2D Game Programming)

Sprite-Based Characters 256 color per pixel

• These colors usually come from A fixed palette or a palette freely defined by the user

• Ex) 8x8 sprites 64 Bytes per sprite (=8x8x8 bits) The frame buffer: 256x176 pixels take up 46 KB the palette table: 256 colors of 24bits(RGB) each 3Byte(RGB:24bits) x 256 color = 768 Byte

High-color sprites (16 bits per pixel)• Two option

Encode using 5-5-5-1 − 5 bytes red, green, blue 1 byte alpha

Encode using 6-5-5− Encode the transparency color as one of the color

combinations (a chroma key approach) True-color sprites (24 or 32 bits)

• Each pixel: one double word(32 bits) R(8), G(8), B(8), A(8)

Page 8: Game Programming (2D Game Programming)

Sprite-Based Characters■ Transparency

Masking approach• Use a separate 1-bit mask to encode transparent zones• Simple to code, but take a significant amount of memory

Ex) a 32x32, 256 color sprite 1 KB (32x32x8 bits) the mask 128 extra bytes (32x32x1 bits 1024 bits)

Alternative technique• Reserve one color in our palette as the “transparent color” • Lower-color platform the loss of the one color might be

unacceptable■ Blitting

Layering sprites onscreen (25 screen updates per second) “blit” “block image transfer”

Page 9: Game Programming (2D Game Programming)

Color Key

■ Color to represent transparency when a tile or sprite is drawn, pixels with the color key are

ignored Why?

• because those pixels should not be drawn

Specify this precise shade of blue as color key when:

• reading file

• drawing object

Page 10: Game Programming (2D Game Programming)

Mapping Matrices■ Mapping

Compression technique to make data fit on the very small memory chips

• divide our game world into a set of tiles Each tile represent a rectangular pattern

• no mapping) level: 5x5 screens, screen: 256x200 pixels, palletized to 16 colors take up 1.25MB

• Mapping) 256 different tiles, tile: 8x8 pixels each tile 8x8 = 64 = 32 B (using 16 colors) tile list 32x256 = 8 KB the size of mapping matrix 160x125 (256x5/8, 200x5/8) whole table 160x125 = 20000 B (256 possible tiles) total tile list + whole table 27.5KB

( 매핑하지 않은 방법에 비해 50 배 차이 )

Ex) Mario Bros, Zelda, 1942…

1 2 22 222

323334

4 4 4 4

Page 11: Game Programming (2D Game Programming)

Mapping Matrices

■ Tile Tables A list of background images that can be tiled and combined

using a mapping matrix to create a complete game map Format of Tiles

• Tile size Used to be powers of 2 Increased efficiency

− blitting routines using words (32bits value) Whether all tiles will be the same size or not

− Classic games: equal-size tiles for easier screen rendering

− RTS using isometric view: different tile sizes• The color format of the tiles

More colors the better, but more memory, more bus usage, less performance

How to encode background images

Page 12: Game Programming (2D Game Programming)

Mapping Matrices Memory size of a single tile

Size = bits per pixel * wide * tall Number of Tiles

• More tiles means nicer graphics, more memory• Ex) 256 tiles unsigned, 8 bit number 300 tiles

Using 9 bit 512 values, but hard to access Using a 16-bit value take up double the memory, give

simple access

Page 13: Game Programming (2D Game Programming)

What is a tile (generally speaking)?

■ A building block of a game board

■ Piece together tiles to create a world

■ Why use tiles? to conserve memory graphics reuse dynamic content

Page 14: Game Programming (2D Game Programming)

Why else is graphics reuse important?

■ Because artist time is expensive■ Level designers can layout a map

Page 15: Game Programming (2D Game Programming)

How can tiles be dynamic?

■ Random map generator adds to game re-playability a different game each time you play it

Page 16: Game Programming (2D Game Programming)

Identify tiles needed

■ Terrain grass, dirt, sand, snow, water, mountains, etc.

■ Walls■ Roads■ Buildings■ etc.

■ And don’t forget terrain borders. What’s that?

Page 17: Game Programming (2D Game Programming)

2D Game Algorithms

■ 2D Game Algorithms Screen-Based Games Scrolling Game Multilayered Engines Semi-3D approach

• Parallax Scrollers• Isometric Engines

Page-Swap Scroller

Page 18: Game Programming (2D Game Programming)

2D Game Algorithms

■ Screen-Based Games The player confronts a series of screens

• screen == gameworld No continuity or transition between screens

• Ex) 320x240 screen using 32x32 tiles#define tile_wide 32#define tile_high 32#define screen_wide 320#define screen_high 240

int xtiles=screen_wide/tile_wide;int ytiles=screen_high/tile_high;

for (yi=0;yi<ytiles;yi++) { for (xi=0;xi<xtiles;xi++) { int screenx = xi * tile_wide; int screeny = yi * tile_high; int tileid = mapping_matrix [yi][xi]; blit(tile_table[tileid], screenx, screeny); }}

Hold whole game map:Mapping matrix [roomid] [yi] [xi]

Page 19: Game Programming (2D Game Programming)

2D Game Algorithms

■ Two- and Four-way Scrollers (= Scrolling Game) Create a larger than-screen gameworld that we can

continually explore from a sliding camera A continuum, with no screen swapping at all More complex than screen-based game Ex) 1942(2-way top-down), Super Mario Bros(2-way side-

scrolling), Zelda(4-way top-down scrolling)

Page 20: Game Programming (2D Game Programming)

2D Game Algorithms

■ Scrolling Game (Complete rendering loop)#define tile_wide 32#define tile_high 32#define screen_wide 320#define screen_high 240

tileplayerx= playerx/tile_widetileplayery= playery/tile_high

int xtiles=screen_wide/tile_wide;int ytiles=screen_high/tile_high;

int beginx= tileplayerx – xtiles/2;int beginy= tileplayery – ytiles/2;int endx= tileplayerx + xtiles/2;int endy= tileplayery + ytiles/2;

for (yi=beginy;yi<endy;yi++){ for (xi=beginx;xi<endx;xi++) { int screenx=xi*tile_wide int screeny=yi*tile_high int tileid=mapping_matrix [yi][xi]; blit(tile_table[tileid],screenx,screeny); }}

Gameworld

player

-playerx-playery

+screenplayerx;+screenplayery;

Page 21: Game Programming (2D Game Programming)

2D Game Algorithms

■ Multilayered Engines Use several mapping matrices to encode the game map

• Need to combine tiles• Need to move objects over the BG• Want to give the illusion of depth• Ex) BG: terrains, another: trees

for (yi=beginy; yi<endy; yi++){ for (xi=beginx; xi<endx; xi++) { int screenx=xi*tile_wide-playerx+screenplayerx; int screeny=yi*tile_high-playery+screenplayery; for (layeri=0;layeri<numlayers;layeri++) { int tileid=mapping_matrix [layeri][yi][xi]; if (tileid>0) blit(tile_table[tileid],screenx,screeny); } }}

Page 22: Game Programming (2D Game Programming)

Ex: 1x4 Bitmap Template

Cell (0,0) Cell (0,3)

64 pixels

256 pixels

Page 23: Game Programming (2D Game Programming)

Multi-layering Tiles

■ Most worlds require layering. Ex: place grass place flowers on grass place cloud over flowers

■ Other common objects: trees rocks treasure

■ To edit: use multiple tiles, one for each layer map file may join & order tiles

Page 24: Game Programming (2D Game Programming)

2D Game Algorithms

■ Semi-3D approach Parallax Scrollers

• The illusion of a third dimension by simulating depth Storing depth-layered tiles Moving them at different speeds to convey a sense of depth

if (pressed the right cursor) for (layeri=0;layeri<numlayers;layeri++) playerx[layeri]+=1*(layeri+1);

for (layeri=0;layeri<numlayers;layeri++) { for (yi=beginy; yi<endy; yi++){ for (xi=beginx; xi<endx; xi++) { int screenx=xi*tile_wide-playerx[layeri]-screenplayerx; int screeny=yi*tile_high-playery[layeri]-screenplayery; int tileid=mapping_matrix [layeri][yi][xi]; if (tileid>0) blit(tile_table[tileid],screenx,screeny); } }}

Page 25: Game Programming (2D Game Programming)

2D Game Algorithms Isometric Engines

• Representing an object from raised viewpoint (rotate 45) Parallel projection do not suffer from distortion

• Tiles for an isometric( 같은크기 ) are rhomboids (평행사변형 )

Tend to be wider than they are high

• Ex) Diablo

Page 26: Game Programming (2D Game Programming)

2D Game Algorithms

■ Page-Swap Scroller Without being restricted to a closed set of tiles

• Sector should be loaded into main memory• The rest are stored secondary media

Will be swapped into MM as needed The mapper resembles a cache memory Improve performance

• The velocity of the player ??

Page 27: Game Programming (2D Game Programming)

Special Effects

■ Palette Effects■ Stippling Effects■ Glenzing■ Fire

Page 28: Game Programming (2D Game Programming)

Palette Effects■ Palette Effects

Implemented by manipulating, not the screen itself, but the hardware color palette

• Altering the palette was much faster than having to write to the frame buffer (not depend on the screen resolution)

■ fade in/outvoid FadeOut(){

unsigned char r,g,b; for (int isteps=0;isteps<64;isteps++) { WaitVSync(); for (int ipal=0;ipal<256;ipal++) { GetPaletteEntry(ipal,r,g,b); if (r>0) r--; if (g>0) g--; if (b>0) b--; SetPaletteEntry(ipal,r,g,b); } }

}

void FadeIn(){

unsigned char r, g, b; for (int isteps=0;isteps<64;isteps++) { WaitVSync(); for (int ipal=0;ipal<256;ipal++) { GetPaletteEntry(ipal,r,g,b); if (r<palette[ipal].r) r++; if (g<palette[ipal].g) g++; if (b<palette[ipal].b) b++; SetPaletteEntry(ipal, r, g, b); } }

}

Page 29: Game Programming (2D Game Programming)

palette rotation

■ if we change some palette entries, we can produce color changes in sprites that look like real animation. Ex) water, lava, fire, neon glows

• Semaphore( 신호등 ) four palette entries 1: Yellow 2: Black 3: Green walking char. 4: Red stop sign

• Animated water( 물결 ) Reserve six palettes store different hue of water color (Deep blue light blue)

Page 30: Game Programming (2D Game Programming)

Stippling Effects■ Stipple

A simple patterned texture that combines one color (generally black or grey) with the transparency index

■ Illusion of shadow( 그림자 표현 )1. Render the background2. Using the transparency index, render the stipple3. Render the character

■ Fog( 안개 )1. Render the background.2. Render the character.3. Using the transparency index, render the stipple.

■ illuminate parts of the scene Stippling pattern must be colored as the light source (yellow,

orange)■ fog-of-war techniques

Where only the part of the map where the player has actually explored is shown, and the rest is covered in fog

• The closer the area, the less dense the fog

Page 31: Game Programming (2D Game Programming)

Glenzing

■ Stippling Nothing but a poor man’s transparency

■ Glenzing Really mix colors as if we were painting a partially

transparent object Convert a color interpolation into a palette value interpolation Better than those achieved by simple stippling

Color = Color_transparent*opacity + Color_opaque*(1-opacity)

Page 32: Game Programming (2D Game Programming)

Fire Effect

■ Fire Effect Can be an animated sprite Using 2D particle system Using a cellular automata on the frame buffer

• Automata consisting of a number of cells running in parallel whose behavior is governed by neighboring cells

• Ex) simulate life, create fire Fire emitter

− pure white fire color yellow, orange, red, black

color(x,y) = (color(x,y+1) + color(x+1,y+1) + color(x-1,y+1))/3

Expensive effect: need the whole screen to be recalculated at each frame Confine to a specific area

Page 33: Game Programming (2D Game Programming)

Fire Effect

// generate new sparksfor (int i=0;i<SCREENX/2;i++) { int x=rand()%SCREENX; int col=rand()%25; PutPixel(x,SCREENY-1,col); // emitted by the bottom of the screen}

// recompute firefor (int ix=0;ix<SCREENX;ix++) { for (int iy=0;iy<SCREENY;iy++){ unsigned char col; col = (GetPixel(ix-1,iy+1) + GetPixel(ix,iy+1) + GetPixel(ix+1,iy+1)) / 3; PutPixel (ix,iy,col); }}

Page 34: Game Programming (2D Game Programming)

Animating Sprites

■ As a sprite moves, we must display it using different “frames of animation” this means slightly different images

■ Works just like traditional cartoon animation■ Animation must be:

tied to timer tied to movement (for main character)

Page 35: Game Programming (2D Game Programming)

Sprite Data

■ Suppose we wanted to draw an animated Mario, what data might we need? position z-order (huh?) speed direction Texture(s)

• array of Textures if using individual images• each index represents a frame of animation

possible states of sprite current state of sprite (standing, running, jumping, dying, etc.) animation sequences for different states. Huh? current frame being displayed (an index) animation speed

Page 36: Game Programming (2D Game Programming)

Animation Sequence Example

■ Condor Frames indices 0-5

■ Condor Living [0,1,0,2]

■ Condor Dying [3,4,5]

■ Easy way of doing this: 2D data structure state X frame sequences

0

1

2

3

4

5