I have two tilesheet images and I have successfully rendered them, but I am struggling to figure out how to place the character in front of the map.
https://i.stack.imgur.com/n1a3Q.png
I have placed these images in two different JavaScript files.
This is the character JavaScript file:
function drawFrame(frameX, frameY, canvasX, canvasY) {
ctx.drawImage(img,
frameX * WIDTH, frameY * HEIGHT, WIDTH, HEIGHT,
canvasX, canvasY, SCALED_WIDTH, SCALED_HEIGHT);
}
loadImage();This is the map JavaScript file:
function drawMap() {
for (var r = 0; r < rowTileCount; r++) {
for (var c = 0; c < colTileCount; c++) {
var tile = ground[ r ][ c ];
var tileRow = (tile / imageNumTiles) | 0;
var tileCol = (tile % imageNumTiles) | 0;
ctx.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize);
}
}window.requestAnimationFrame(drawMap);
}