Adding new images to the map

[ricardokb]

I was really thinking on a better Subject, but it just didn't came to my mind.

Ok, lets say it is a "building" game.
You are logged in, and you have your map in the screen... at the center of the page, you can see a green field with some trees and a lake.

The player builds... lets say... a house.
From now to on, there will be displayed the house building in the map.

(Something like Ikariam's building system)

Greetings

[Sagefire135]

i dont know what Ikariam's system is but one possible solution would be to make an array of arrays. each space in the array would be grass, house, tree, lake, office, ... whatever.

then each space in the array would correspond to a place on the map. so on the map's side display whatever.com/images/array[ ][ ].jpg

[Sunchaser]

A possible solution can be the following:

The location on the map should have a status (empty)/built and depending on the status and on the structure built on it you should construct the image name and display it.

i.e.:


not_built -> terrain_empty.jpg
built       -> look which type of structure the user built (for example, a palace ) -> terrain_palace.jpg

[Bryan]

I would give the tile map an overlay layer or several, depending.  Have the base terrain tiles and then plop some building/resource/unit transparencies on top to allow the terrain to be reused.

[Sunchaser]

is it possible to have this overlay technique explained? we are currently making different images...

[JGadrow]

I would give the tile map an overlay layer or several, depending.  Have the base terrain tiles and then plop some building/resource/unit transparencies on top to allow the terrain to be reused.

lol This was going to be my post! I've only seen 2 posts from Bryan but they're both solid posts so far. Keep it up!

Basically, for a 2-dimensional map, you would have 2 distinct values for a map location: X coordinate and Y coordinate. To include layering, you need to add a 3rd value but not to the map itself.

Whenever you have an item you want to place on the map, you apply an X and Y coordinate to it so you know where in the map it appears. However, you also need to add a layer to the object to determine where it appears if multiple objects occupy the same map position.

For instance if you have a 5x5 map with:

Code: (text) [Select]

[0,4][1,4][2,4][3,4][4,4]
[0,3][1,3][2,3][3,3][4,3]
[0,2][1,2][2,2][3,2][4,2]
[0,1][1,1][2,1][3,1][4,1]
[0,0][1,0][2,0][3,0][4,0]
Perhaps you have all of the following at 2,2:
grass.jpg
house.jpg
player.jpg

Now, for each object, you'd need to determine the placement of these items at 2,2. That's where layer comes into play (which translates into z-index for CSS).

Code: (php) [Select]

function drawObject ($file, $x, $y, $z)
{
    $map [$x][$y][$z][] = $file;
}
If you notice, I leave the 4th array blank. This means that if you assign multiple images to the same layer, they will be placed into the array in the order that you set them. So, for our example:

Code: (php) [Select]

drawObject ('grass.jpg', 2, 2, 0);
drawObject ('house.png', 2, 2, 1);
drawObject ('player.png', 2, 2, 2);
Would result in the following array:

Code: (php) [Select]

$map = array
(
    2    => array
    (
        2 => array
        (
            0 => array ('grass.jpg'),
            1 => array ('house.png'),
            2 => array ('player.png'),
        ),
    ),
);
I hope that clears the matter of layering up.

*edit - removed a couple of erroneous spaces in coord map.

[Bryan]

I think this works for either regular tiles or those isometric ones too, btw.  Nice explanation, JGadrow.

[jannesiera]

Yes, layering is the way to go . I have been working on a game map demo with the canvas element (the link to the demo is here: http://www.bbgamedesign.com/generals-map/canvas-game-map ).

If you are doing it with canvas or just the 'regular' way the technique stays the same though. It's also the same for isometric maps, although there is a tiny bit more math involved (but really nothing to hold you back). There are some nice explanations on GDwiki http://wiki.gamedev.net/ . I have quite a few pages bookmarked about the subject but I'm at my dad's place so if you want them I can get to them in a week .

Perhaps I'm going to do a *tutorial* (more like a summary of techniques) for my blog but I doubt I'll have time for that.