Как анимировать определенную часть листа спрайта при нажатии клавиши - PullRequest
Новая
       46

Как анимировать определенную часть листа спрайта при нажатии клавиши

0 голосов
/ 15 июня 2019

Я создаю игру и наконец-то начинаю использовать спрайт. Я хочу, чтобы определенная часть листа спрайта была анимирована, когда я нажимаю, например, клавишу со стрелкой влево. Я хочу, чтобы, когда я нажимал стрелку влево, спрайты, обращенные и идущие влево, были зациклены и анимированы, а когда я перестал нажимать стрелку влево, пустой спрайт (тот, где персонаж стоит) стоит перед направлением стрелка, которую я нажал последней. Пока я получаю определенный кадр, но не могу анимировать, используя другие кадры.

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

Это сайт, с которого я получил код спрайт-листа: https://gamedevelopment.tutsplus.com/tutorials/an-introduction-to-spritesheet-animation--gamedev-13099

Это спрайт:

enter image description here

var img = new Image();

img.src = "Hero.png";

function SpriteSheet( frameWidth, frameHeight,frameSpeed, endFrame) {

    var framesPerRow;
    var currentFrame = 12;  // the current frame to draw
    var counter = 0;       // keep track of frame rate
    framesPerRow = Math.floor(img.width / frameWidth);
    // Update the animation
    this.update = function() {

            // update to the next frame if it is time
        if (counter == (frameSpeed - 1)) {
            currentFrame = (currentFrame + 1) % endFrame;

        // update the counter
        counter = (counter + 1) % frameSpeed;
            }
    }

      this.draw = function(x, y) {
          // get the row and col of the frame
          var row = Math.floor(currentFrame / framesPerRow);
          var col = Math.floor(currentFrame % framesPerRow);

         ctx.drawImage(
             img,
             col * frameWidth, row * frameHeight,
             frameWidth, frameHeight,
             x, y,
             25, 25);
      };
}

var player = new SpriteSheet(16, 16, 3, 14)

function movePlayer() {

    if(keys[65]) {
        player.x -= 5;
    }

    if(keys[68]) {
        player.x += 5;
    }
}

function render() {

    ctx.clearRect(0,0, cw, ch)
    player.update()
    player.draw(15,15)

}

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

...