Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I'm new to game development and I want to know how to create a tile map. The map should be divided into squares, such that each square represents a location like x : 10, y : 10.

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

How can I do this? (I'm using MVC .NET.

share|improve this question

closed as off-topic by Byte56 Mar 11 at 2:12

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about "how to get started," "what to learn next," or "which technology to use" are discussion-oriented questions which involve answers that are either based on opinion, or which are all equally valid. Those kinds of questions are outside the scope of this site. Visit our help center for more information." – Byte56
If this question can be reworded to fit the rules in the help center, please edit the question.

    
Have a look on TileEd (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. –  AvrDragon Dec 10 '12 at 17:10
    
Where to get started questions are off topic for the site. Since the answer would be different for everyone depending on their goals, what their existing experience is and what technology is available to them when they start. See the FAQ to learn what kinds of questions to ask here. –  Byte56 Dec 10 '12 at 19:08
2  
Agree; how do I get started is off-topic. But isn't the question of how do I make a grid-based tile map a legitimate question despite its simplicity? –  Anko Dec 10 '12 at 23:32
    
@Anko It's a where to get started because where do you start explaining? Do you need to explain how to set up the build environment? How arrays work? How to render the tiles? The question doesn't give us anything to work with. It's actually only as simple as you think if you assume a large amount of basic understanding. Based on this question, we can't assume anything. –  Byte56 Dec 12 '12 at 2:32
2  
@Byte That the asker has posted here and not on StackOverflow implies their question is of a conceptual level above technical details. Can we not do it like Wikipedia and assume good intention? Unless, of course, they say otherwise. –  Anko Dec 12 '12 at 10:10

3 Answers 3

The general idea is to create a data structure that holds a list of grid columns, each of which holds a list of grid squares.

To draw or otherwise traverse the grid, you would iterate through the columns, and inside that iteration, through each of the squares in that column. Something like this:

for x in [0, map.length]
    for y in [0, map[0].length]
        local square_contents = map[x][y]
        -- Do something with square_contents

For example, to draw the map in your render calls, traverse the map as above and for each tile, draw a square of side length 10 at position x*11, y*11. That would draw a map much like on the left here:

different map styles

The other two images are differently sized maps drawn with different sizes of squares and spacing.


Just for reference, here's some heavily commented Love2D code that I used to generate the above image. You should be able to easily convert it to your favourite language or framework.

-- 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
share|improve this answer
    
-1 I think the OP is asking how to fish, and you're giving them a fish. –  Byte56 Dec 10 '12 at 19:07
1  
Byte: My idea was to give them a fish with the catching method written on it, hence the heavily commented code. How can I improve the answer? –  Anko Dec 10 '12 at 19:52
    
I'm not sure how to improve the answer. That's why I think questions like this are bad. Not only is there a hundred different ways to create a tile map, but each person is going to need a different approach because their skill set will be different or they have a different goal in mind. Perhaps you can improve by giving a more general overview of tile maps. –  Byte56 Dec 10 '12 at 22:00
    
The only other kind of tilemaps I can think of are isometric and hex-based ones. I don't know enough about either to explain how they work. Though my answer is incomplete, I think it can be useful to someone wanting to learn how to make a grid-based game. –  Anko Dec 10 '12 at 23:30

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]).

share|improve this answer

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

share|improve this answer
    
thanks. I will look into it :) –  Kaizer Dec 10 '12 at 12:33

Not the answer you're looking for? Browse other questions tagged or ask your own question.