How do I create a 2D tile map?

Question

I'm new to game development and I want to try it out, like many others amongst us :)

I need to create a gridmap. The map needs to be divided in squares. Each square represents a location. For example: x:10 - y:10

The width and height of the squares, as well as the number of squares, should be settable.

I will develop in MVC .NET

Can someone show me the right direction to start with this?

Answer 1

Look up the concept of tile maps. Essentially these are just 2 dimensional arrays of ID's that relate to tiles in a sheet. If a tile is 40 x 40 pixels you can draw the tiles out and get a 2d top down map. In addition you can then make maps with an editor. Good starting point is here:

http://en.wikipedia.org/wiki/Tile_engine

Answer 2

Have a look on TileEd (http://www.mapeditor.org/). Loading a TMX file can be a little difficult for beginner, but if you beat it, you will have a great editor as reward.

Answer 3

It's hard to explain exactly, so I wrote some example code. The parameters give you different styles of map, like this:

Here's the code. I've added lots of comments, so it should be fairly readable. You can run it with Love2D if you want to play with it. Or translate it to your favourite framework instead.

-- Parameters for map
MAP_WIDTH  = 10
MAP_HEIGHT = 10

-- Parameters for drawing tiles
TILE_WIDTH  = 20
TILE_HEIGHT = 20
SPACING     = 2

-- Just so that the background is white
love.graphics.setBackgroundColor(255,255,255)

-- {{{ CODE FOR MAP SETUP

-- Just a function to make a new tile object
function newTile(whatKind)
    return { kind = whatKind }
end

-- Storage for map data
map = {}

-- Go through values of x from 1 to MAP_WIDTH
for x=1,MAP_WIDTH do

    -- Storage for one column of the map
    map[x] = {}

    -- Go through values of y from 1 to MAP_HEIGHT
    for y=1,MAP_HEIGHT do

        -- With a 25% chance...
        if math.random() > 0.25 then
            -- ... make a new water tile
            map[x][y] = newTile("water")
        else
            -- ... else make it grass
            map[x][y] = newTile("grass")
        end
    end
end

-- }}} END OF MAP SETUP CODE

-- {{{ CODE FOR DRAWING A MAP

function love.draw()

    -- Go through all x values
    for x,column in ipairs(map) do

        -- Go through all y values
        for y, tile in ipairs(column) do

            -- Set colour depending on tile type
            if tile.kind == "grass" then
                love.graphics.setColor(24,255,24)
            elseif tile.kind == "water" then
                love.graphics.setColor(24,24,255)
            end

            -- Draw a rectangle in the correct position
            love.graphics.rectangle("fill",
                x*(TILE_WIDTH + SPACING),
                y*(TILE_HEIGHT + SPACING),
                TILE_WIDTH,
                TILE_HEIGHT
            )
        end
    end
end
-- }}} END OF MAP DRAWING CODE

Answer 4

The tile map may be simply a two dimensional array with the indexes/ids o each unique tile. Also, have a class (for example called TileIndex) to manage your unique tiles may be useful. The tiles indexes may be unload and load when you change room/scenario/level, because you probably want different unique tiles for different rooms, tiles needed to represent ground of a cave don't need to be loaded when exploring a scenario with grass in the ground. Have all unique tiles of the game loaded at all times may not be optimal, except all your game use the same tiles all the time.

The array contains only the ids of the tiles, because you build your scenario repeating tiles as smart as possible so the player won't get tired looking at the same patterns all the time.

Optimization tip:

For most games you probably will need some kind of scene organization, to quickly find objects in the screen rectangle and for efficient collision detection. If you already have payed the cost of a tile map floating around in RAM why have a separate structure like a quad tree or a grid to organize your scene. You can make the map contain in each element of the 2D array more than a tile id, in addition to the tile id you can have a pointer/reference to the entity/character/game_object occupying the tile, or if your game need more than a single entity in the same tile at the same time, then a dynamic list rather than a single pointer.

For simplicity you can consider only objects centers to consider them occupying a tile. But consider their rectangle is not so hard as it sounds, but then a given entity can occupy more than one tile at the same time because its rectangle won't be always aligned to the tile rectangle.

You can force all characters to always stop at tiles centers (like some old 16 bit JRPG games), or allow single pixel movement, but again, in this last case you probably need to allow a character to occupy more than one tile at a given time.

The width and height of the squares, as well as the number of squares, should be settable.

Ok, but consider the cost of constantly modifying the tile map dimensions. A Tip: don't even include set methods for the size in your tile map class, but have them in the constructor, you can plan your design so you never need to recreate a tile map except when entering a new room. When entering a new room destroy the tile map and create a new one. You probably want to unload the tile index and load a new one at this time too.

Also, for tiles width and height, you want to set them in the tile index. Usually you will have the same size for all the tiles of the index, so remember w and h for each tile is not optimal, best is have a single w and h members variables in the tile index class.

I need to create a gridmap. The map needs to be divided in squares. Each square represents a location. For example: x:10 - y:10

If you decided to do as I say and create a class to represent the tile map then you can add some kind of get(x, y) method, a set one may be needed too if you plan to change the tiles values based on some game events (boss killed, a door opens). If you use a crude array for the map and have the logic somewhere else then simply do as with any multidimensional array to access individual elements. ([x, y], [x][y]).