Question

我正在制作带动画的HTML5游戏。但是，如图所示，我无法通过动画闪烁：

以下是我的一个动画功能的示例：

＆＃13;

function Player(bullets, missiles) {
  this.missiles = missiles;
  this.missileCount = 4;
  this.bullets = bullets;
  this.angle = 0;
  this.position = {x: 200, y: 200};
  this.velocity = {x: 0, y: 0};
  this.img = new Image()
  this.img.src = 'assets/player/flappy-cat/flying/frame-1.png';
  this.width = 64;
  this.height = 64;
  this.state = "flying";
  this.timer = 0;
  this.frame = 'frame-1';

  var self = this;
  self.animate = function(time)
  {
    self.timer += time;
    if(self.timer > MS_PER_FRAME)
    {
      self.timer = 0;
      if(self.state = "flying")
      {
        switch(self.frame)
        {
          case 'frame-1':
            self.frame = 'frame-2';
            self.img.src = img1;
            break;
          case 'frame-2':
            self.frame = 'frame-3';
            self.img.src = img2;
            break;
          case 'frame-3':
            self.frame = 'frame-4';
            self.img.src = img3;
            break;
          case 'frame-4':
            self.frame = 'frame-5';
            self.img.src = img4;
            break;
          case 'frame-5':
            self.frame = 'frame-6';
            self.img.src = img5;
            break;
          case 'frame-6':
            self.frame = 'frame-7';
            self.img.src = img6;
            break;
          case 'frame-7':
            self.frame = 'frame-8';
            self.img.src = img7;
            break;
          case 'frame-8':
            self.frame = 'frame-1';
            self.img.src = img8;
            break;
        }
      }
      else
      {
        switch(self.frame)
        {
          case 'frame-1':
            self.frame = 'frame-2';
            self.img.src = 'assets/enemies/flappy-cat/hit/frame-2.png';
            break;
          case 'frame-2':
            self.frame = 'frame-1';
            self.img.src = 'assets/enemies/flappy-cat/hit/frame-1.png';
            break;
        }
      }
    }
  }  
}

＆＃13;

我有一个更新函数，其中调用了动画函数：

＆＃13;

var self = this;
  setTimeout(function() {
    self.animate(elapsedTime);
  }, 1000
  );

＆＃13;

然后我渲染动画：

＆＃13;

Player.prototype.render = function(elapasedTime, ctx, camera) {
  //var offset = this.angle * 23;
  ctx.save();
  ctx.translate(this.position.x, this.position.y);
  //ctx.drawImage(this.img, 48+offset, 57, 23, 27, -12.5, -12, 23, 27);
  ctx.drawImage(this.img, 0, 0, this.width, this.height);
  ctx.restore();
}

＆＃13;

然后在我的app.js文件中渲染所有内容：

＆＃13;

function render(elapsedTime, ctx) {

  // TODO: Render background
  // Includes background repeats every 1000 pixels so the level lasts longer
  ctx.save();
  ctx.translate(-camera.position.x, 0);
  ctx.drawImage(backgrounds[2], 0, 0, canvas.width, canvas.height);
  ctx.restore();

  ctx.save();
  ctx.translate(-camera.position.x, 0);
  ctx.drawImage(backgrounds[1], 0, 0, canvas.width, canvas.height);
  ctx.restore();

  ctx.save();
  ctx.translate(-camera.position.x, 0);
  ctx.drawImage(backgrounds[0], 0, 0, canvas.width, canvas.height);
  ctx.restore();

  ctx.save();
  ctx.translate(-camera.position.x, -camera.position.y);
  renderWorld(elapsedTime, ctx, camera);
  ctx.restore();


  // Render the GUI without transforming the
  // coordinate system
  renderGUI(elapsedTime, ctx);
}

/**
  * @function renderWorld
  * Renders the entities in the game world
  * IN WORLD COORDINATES
  * @param {DOMHighResTimeStamp} elapsedTime
  * @param {CanvasRenderingContext2D} ctx the context to render to
  */
function renderWorld(elapsedTime, ctx, camera) {
    
    // Render the bullets
    bullets.render(elapsedTime, ctx);

    // Render the missiles
    //missiles.forEach(function(missile) {
    //  missile.render(elapsedTime, ctx);
    //});

    // Render the player
    player.render(elapsedTime, ctx, camera);

    // Render the flappy monsters
    flappyMonsters.forEach(function(FlappyMonster){
      FlappyMonster.onload
      FlappyMonster.render(elapsedTime, ctx);
    });

    // Render the flappy cats
    skulls.forEach(function(Skull){
      Skull.render(elapsedTime, ctx);
    });

    // Render the flappy dragons
    flappyDragons.forEach(function(FlappyDragon){
      FlappyDragon.render(elapsedTime, ctx);
    });

    // Render the flappy grumpys
    flappyGrumpys.forEach(function(FlappyGrumpy){
      FlappyGrumpy.render(elapsedTime, ctx);
    });

    // Render the flappy grumpys
    flappyBirds.forEach(function(FlappyBird){
      FlappyBird.render(elapsedTime, ctx);
    });
}

＆＃13;

我我使用window.requestAnimationFrame和backbuffer。所以这些都不是问题所在。

我也试过在绘制函数之前放入img.onload，但那些会导致我的精灵消失。

值得注意的是，当我将动画减慢到1/24时，你可以看到闪烁是由精灵暂时消失引起的，因为它正在切换到不同的帧。它不会发生在任何特定的帧上 - 每次发生这种情况的帧都不同。

我已经尝试了Google前三页的所有解决方案，所以任何帮助都会受到赞赏！

HTML5 Canvas动画闪烁

0 个答案: