Horizontal Scrolling through Tileset Levels

Game Design ExperienceProfessor Jim Whitehead

March 4, 2008

Creative Commons Attribution 3.0creativecommons.org/licenses/by/3.0

Announcements

• Weekly help session for CS 20 (C# and XNA Game Studio Express)

► Thursday, 4:30-7pm► Engineering 2, room 399 (third floor, by elevators)► Exchange ideas, tips, pointers► Get assistance from TAs

Final Project• Due Monday, March 10

► In-class• What to turn in

► First, build your project• Build … Build Solution in Visual C# 2005 (or hit F6)• Must not have compile errors

► Put code and executable on a CD-ROM or USB Drive• Put entire file hierarchy for your project• Go to Visual Studio 2005\Projects folder• Copy over the entire tree for your project from this point• Label it with game name, team name, team member names

► Create a simple manual• Game name, team name, team member names• 1-2 paragraphs of backstory• Goal of the game• Control scheme• Cheat codes (if any)• Screen shot would be nice• Print this out, and also put on disk

Project status check

• Quick poll of the room to see how your projects are doing

• Would like to know► What is currently working► What more needs to get done before due date► Any problems blocking your progress

Scrolling gameworlds

• Many games have a gameworld larger than the visible area on screen

► Permits level design• Level design

► Pacing of challenge► Creation of environment where gameplay takes place

• Usually convenient to use a level design tool► Time consuming to write one of these

• One approach► Use tiles to construct gameworld

Tile based gameworld

• A small number of tiles• Combine to create game levels

Representing Tile Levels

• A bitmap image represents the tiles0, 1, 2, 3, …

02040…

… 18, 19

Array Represents Which Tile Goes Where• A two dimensional array

► Represents an entire game level► worldInTiles[y, x] contains the number of a tile► Look up tile in bitmap array

• Can use a tile editor to create a level► Mappy editor► Demonstration of mappy

{ {5, 6, 7},

{ 25, 26, 27},

{ 45, 46, 47} }+

Export Tileset Bitmap from Mappy• Once your level has been created• Export bitmap

► In Mappy, File … Export► Select “Graphic blocks as picture (?.BMP)”► Can select number of blocks per row

• For XNA, only affects how you perform lookup into bitmap► Save, then move from Mappy’s “MAPS” folder into Visual Studio

Project folder containing source files► In Visual C# Express: in Solution View (right hand column)

• Right click project name• Choose Add … Existing Item • Select bitmap you just created

► Consider converting to PNG or JPG first• Appears to work faster under Windows• GIMP can do this

Export Game Level Array from Mappy• In Mappy: File … Export as Text

► Enter filename► Unselect “Colour map”► Select “Map array(s)”► Clear “Prefix with” field► Select “2D format: a[y][x]”► Resulting file stored

in MAPS directory underMappy

Drawing one tile in XNA

• Texture2D holds tileset bitmap• 2D integer array holds game level array• Find tile for position

► Tile = game_level_array[y, x];• Draw tile

► Create source and destination rectangles• Source is tile in tileset bitmap• Destination is on-screen location for the tile• Draw current tile into spritebatch• batch.Draw(tileset_bitmap, dest, source, Color.White);