Horizontal Scrolling through Tileset Levels

1. Horizontal Scrolling through Tileset Levels Game Design Experience Professor Jim Whitehead March 4, 2008 Creative Commons Attribution 3.0creativecommons.org/licenses/by/3.0

2. 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

3. 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

4. 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

5. 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

6. Tile based gameworld • A small number of tiles • Combine to create game levels

7. Representing Tile Levels • A bitmap image represents the tiles 0, 1, 2, 3, … … 18, 19 0 20 40 …

8. 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} } +

9. 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

10. 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 storedin MAPS directory underMappy

11. 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);