Horizontal Scrolling
through Tileset Levels
Game Design Experience
Professor Jim Whitehead
March 4, 2008
Creative Commons Attribution 3.0
creativecommons.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 tiles
0, 1, 2, 3, …
0
20
40
…
… 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 under
Mappy
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);