Как сделать спрайт бег / анимация спринта в HTML 5 холст - PullRequest
Новая
       13

Как сделать спрайт бег / анимация спринта в HTML 5 холст

0 голосов
/ 06 октября 2019

Я создаю 2D платформерную игру на холсте html5. Я пытаюсь анимировать спрайт, чтобы он переключался на работающее изображение и изображение бланка, чтобы создать иллюзию запуска спрайта. Я попытался изменить изображения спрайтов на основе номера кадра, но он показывает, что спрайт работает менее секунды. Это не мой полный код. Только те части, которые имеют отношение к запущенной анимации.

index.html: 

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Game</title>
    <style media="screen">
      #canvas {
        background-color: #87cefa;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="800" height="600"></canvas>
  </body>
  <script type="text/javascript" src="index.js">

  </script>
</html>

index.js: 

var canvas, ctx, player, playerPng, key, frameNo;
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
player = {
   w: 100,
   h: 200,
   x: 40,
   y: canvas.height - 20
}
playerPng = new Image();
frameNo = 0;
key = false;
function loop() {
   frameNo += 1;
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.imageSmoothingEnabled = false;
   ctx.drawImage(playerPng, player.x, player.y, player.w, player.h);
   if(key === 39) {
      if(frameNo % 100 === 0){
         playerPng.src = "Running.png";
      } else {
         playerPng.src = "normal.png";
      }
   }
   if(key === false){
      playerPng.src = "normal.png";
   }
   window.requestAnimationFrame(loop);
}
window.addEventListener('keydown', function(e){
   key = e.keyCode;
});
window.addEventListener('keyup', function(e){
   key = false;
});
loop();

1 Ответ

0 голосов
/ 06 октября 2019

Загрузка изображений один раз

Во-первых, не загружайте изображение каждый раз, когда вы его визуализируете. image.src = "filenameORUrl" загружает изображение.

Загрузите изображения один раз, затем выберите, какое вы хотите визуализировать.

Пример создания загрузочного изображения 

const running = new Image;   // create
const normal = new Image;
running.src = "Running.png"; //load
normal.src = "normal.png";

Анимируйте

Для анимации изображения добавьте анимационные изображения в массив. Установите переменную, которая определяет, сколько кадров должно появиться каждое изображение, а затем разделите frameNum на это значение и напишите его, чтобы получить индекс изображения.

Пример анимации изображения

Примечание что в (frameNo / runAnimFrames | 0) | 0 (побитовое ИЛИ 0) обрезает результат. Так же, как Math.floor(frameNo / runAnimFrames). Следует использовать ИЛИ ноль только для положительных чисел, меньших 31 ** 2 - 1

. Пример добавляет последовательность анимации в массив runAnim и внутри основного цикла рендеринга отображает анимацию с отображением каждого кадра анимации для 30 кадров runAnimFrames(полсекунды). Уменьшите число, чтобы ускорить анимацию, увеличьте, чтобы замедлить.

Вы можете добавить столько кадров, сколько вам нужно, в массив анимации 

const runAnim = [running, normal]; // add animation sequence to arr
const runAnimFrames = 30;   // number of frames to display each image in animation

// Inside main render loop
   if(key === 39) {
      const plyImg = runAnim[(frameNo / runAnimFrames | 0) % runAnim.length];
      ctx.drawImage(plyImg, player.x, player.y, player.w, player.h);
   } else {
      ctx.drawImage(normal, player.x, player.y, player.w, player.h);
   }
...