Multilayer game HTML5 canvas

Question

I've have a problem with HTML5 canvas and using multiple layers.

I'm using 3 layers. The first layer is where the player and the collision base objects are. And the second and the third layer have the rest of that objects, and that are suppose to cover the character if is behind them. But I have this problem:

The tile in the upper layer than the character cover him, even if he is in front of that object.

And I have other problem:

When is a the back of the element, there's a part of the character that appears in the middle of the poster.

How can I resolve this? I don't know how exactly do this, and I think that use layers is not very convenient.

Here's how I render the map:

function drawMap () {

for (var rowCtr = 0; rowCtr < map.tileMap[0].length; rowCtr++) {

    for (var colCtr = 0; colCtr < map.tileMap[0][0].length; colCtr++){

        var tileId  = map.tileMap[0][rowCtr][colCtr] - 1;
        var sourceX = Math.floor(tileId % 8) * 32;
        var sourceY = Math.floor(tileId / 8) * 32;

        ctx.drawImage(map.sprite.img, sourceX, sourceY, 32, 32, colCtr * 32, rowCtr * 32, 32, 32);

    }

}

finn.movement(this.ctx, this.world);

if (map.tileMap.length > 1) {

    for (var capa = 1; capa < map.tileMap.length; capa++) {

        for (var rowCtr = 0; rowCtr < map.tileMap[0].length; rowCtr++) {

            for (var colCtr = 0; colCtr < map.tileMap[0][0].length; colCtr++){

                var tileId  = map.tileMap[capa][rowCtr][colCtr] - 1;
                var sourceX = Math.floor(tileId % 8) * 32;
                var sourceY = Math.floor(tileId / 8) * 32;

                ctx.drawImage(map.sprite.img, sourceX, sourceY, 32, 32, colCtr * 32, rowCtr * 32, 32, 32);

            }

        }

    }

  }

}

And here's an example of the map:

  `[
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 1, 1, 0]
   ],
   [
    [0, 0, 0, 0],
    [0, 1, 1, 0],
    [0, 1, 1, 0],
    [0, 0, 0, 0]
   ]`

That's the array of the layers. The first is the first layer, where the character moves, and the second element is the layer where the part of the objects which cover are drew.

Is there any solution for this without using any external Engine, only using canvas and javascript?

Thanks advance!

Answer 1

Issue 1: Headless avatar

This issue is caused by the draw order of the layers. From your pasted code, the draw order is:

1. Draw the background and objects in the collision grid (ie: the bottom half of the sign)
2. Call finn.movement() which I assume is when the character is drawn
3. Draw the remaining object layers, in this case the top half of the sign.

I have added this jsfiddle to attempt to illustrate the draw order and how the issue occurs. http://jsfiddle.net/WxmpG/

To fix this problem I suggest that you loop each row and draw all layers per row from base to highest floating instead of looping layers in rising order and drawing the rows.

Issue 2: Toes in the sign.

I believe that this is an issue with your collision detection or avatar rendering. I think that your avatar is a pixel or two too low and is drawn over the top of the bottom of the sign. Here is another jsfiddle to hopefully exaggerate the point. http://jsfiddle.net/c7sS7/

When I first started looking at tilemaps I found a resource that helped me understand the core concepts of rendering tilemaps. Among the articles is #10 Javascript tile engine: speed, tile size & floating tiles. Although his engine only works when the avatar is the same size as the tiles.

• nielsgrootobbink.com/wokflok/jte/
• nielsgrootobbink.com/wokflok/jte/jte_article_10.html

Sorry that the last links are incomplete, I do not have enough rep to post more than 2 links.