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!