Question

I’m looking for advice more than direct help.

I am working on an 8 bit platformer game in XNA. I’ve probably sunk 160 hours into it already, and I’m starting to get into issues with the engine I have. It is basically an adapted/modified version of the XNA platformer demo. All or most of my tiles are 32×32, but some are 64 wide and 32 px tall, like a desk. Some are 32 wide and 64 tall, like a plant.

I am shipping them to the gpu just one .png at a time similar to the way that the XNA tutorial’s author does tile mapping. For animated sprites I do use a tile map of different frames of the character. For the tile map data, I read in a text file just like the XNA tutorial.

How should I accommodate for the wide and tall tiles? Should I make a two layered tile system (I figured I should abide by the keep-it-simple-stupid rule)?

Right now I’m using transparent tiles to extend the wide tiles.

Desk with chair:

chair http://dl.dropbox.com/u/8446900/game_screen_desk.png

.....
...h.
..d".
#####

Plant and chair:

desk http://dl.dropbox.com/u/8446900/game_screen_plant.png

..p...h.
..,...,.
########

The chair is ‘h’, ‘d’ is for desk, ‘p’ is plant, and ‘,’ is for a transparent background tile (no interaction with the user). ‘”‘ is for a transparent tile that the user can stand on (extending the desk). The problem is, as you can see, the background appears to have a hole in it.

Should I make an actual tile map and combine everything into one large png? Another option I could take is to actually cut each wide or tall tile into two different tiles. How would a pro do this? I’m not looking for a quick and dirty fix, just how a modern day platformer would run.

UPDATE: After reviewing the answer, I found a very useful tool that packs sprites into a sheet.

http://spritesheetpacker.codeplex.com/

UPDATE: My newly upgraded tile engine is much faster and almost just as simple. The advice below was great. Strongly recommended.

Answer 1

First off – don’t introduce special-width/height tiles. Make the artist slice up large objects into single tiles (and hence re-compose them on the map editor). Every tile should be a PNG with an alpha channel so they can be correctly composed.

Keeping that in mind, my recommendations are:

1. Your tiles should comprise of only single tiles that have pre-composed parts of different objects, for example the left part of the desk is a single tile, the right part without a chair is another and one more with the chair behind it. (tilevalue = “dc”, perhaps?)

2. You can define multiple layers of single tiles and render them back-to-front. You can also define a parallax factor for multiple layers and thus get a nice parallax effect between two layers quite easily. Of course, the player must “exist” in one layer at a time or you won’t know what collision geometry to use for his/her current position.

You should also not create one texture per tile – but a compiled tilesheet (exactly like a spritesheet) so that the number of renderstate changes you make are minimized. Making many changes per draw call is bad because each time you make a change (current texture, drawing color or something else that affects that draw call) the API, the driver and possibly the GPU itself has to do work to update its state – this adds up quick.

Note that this doesn’t mean you should put characters and levels into a HUGE spritesheet – this is bad for other reasons. You could, for example: put all level-related tiles in one tilesheet, the hero’s animation tiles on another and all enemies on one (together) or something similar.

Hope that helps, otherwise I’d be glad to explain things further.