позиционирование javascript изображения

Question

Я получил 2 изображения листа, и я полностью выполнил рендеринг, но я не могу понять, как поместить персонажа перед картой.

Я помещаю эти изображения в 2 разных файла js.

Это символ js file: '

function drawFrame(frameX, frameY, canvasX, canvasY) {
  ctx.drawImage(img,
  frameX * WIDTH, frameY * HEIGHT, WIDTH, HEIGHT,
  canvasX, canvasY, SCALED_WIDTH, SCALED_HEIGHT);
}

loadImage();

`Это карта js 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);
}

Answer 1

requestAnimationFrame продолжает вызывать drawMap() снова и снова после каждого вызова функции. Это означает, что если первое изображение было нарисовано один раз, то на этом втором кадре анимации (и каждом последующем кадре) будет нарисована карта.

Чтобы упростить процесс, создайте одну функцию, которая вызывает все ваши методы рисования, чтобы вы могли контролировать порядок, в котором элементы отображаются. Затем используйте requestAnimationFrame в этой функции вместо текущей drawFrame, чтобы каждый элемент перерисовывался в каждом кадре в нужном вам порядке.

function drawEverything() {

    drawMap();
    drawFrame();

    window.requestAnimationFrame(drawEverything);
}

Теперь вызывайте drawEverything(), когда вы готов к запуску анимации.

Еще одна вещь: если элементы будут перемещаться в любом месте анимации холста, вы должны очищать холст при каждом новом рисовании. В противном случае холст очень быстро превратится в беспорядок цветов.

function drawEverything() {

    // Erase the current frame
    // (Note: replace 400 here with your canvas width, and 300 with its height)
    ctx.clearRect(0, 0, 400, 300);

    drawMap();
    drawFrame();

    window.requestAnimationFrame(drawEverything);
}