自上而下的汽车游戏中的漂移痕迹

Question

我正在使用 phaserJS 制作一个简单的自上而下汽车游戏示例。我认为这会很好，在加速时给汽车添加一些漂移痕迹。所以我想到添加两个 graphics 元素，然后更新它们在每一帧上的位置。

像这样：

var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game');
 var mainState = { 
  preload:function(){
   game.load.image('car', 'notfound');

  },
   create: function() {
    game.stage.backgroundColor = '#ffffff'
   game.physics.startSystem(Phaser.Physics.P2JS);

   car = game.add.sprite(window.innerWidth/2, window.innerHeight/2, 'car');


   game.physics.p2.enable(car, false);
   car.anchor.setTo(0.5, 0.8);

   this.graphics = game.add.graphics(0,0);
   this.graphics2 = game.add.graphics(0,0);
   this.graphics.moveTo(car.body.x+(Math.cos(this.math.degToRad(car.body.angle))*5),car.body.y+(Math.sin(this.math.degToRad(car.body.angle))*5));
      this.graphics2.moveTo(car.body.x+(Math.cos(this.math.degToRad(car.body.angle))*(-5)),car.body.y+(Math.sin(this.math.degToRad(car.body.angle))*(-5)));
      this.trololo;
  }, 
  update: function() {
   car.body.damping = 0.9;
      car.body.setZeroRotation();
      
          
      if (game.input.keyboard.isDown(Phaser.Keyboard.UP)){
       
       this.graphics.lineStyle(2, 0x111111, 1);
       this.graphics2.lineStyle(2, 0x111111, 1);
       
       this.graphics.lineTo(car.body.x+(Math.cos(this.math.degToRad(car.body.angle))*5),car.body.y+(Math.sin(this.math.degToRad(car.body.angle))*5));
       this.graphics2.lineTo(car.body.x+(Math.cos(this.math.degToRad(car.body.angle))*(-5)),car.body.y+(Math.sin(this.math.degToRad(car.body.angle))*(-5)));

       
       if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
     car.body.rotateLeft(100);
    }
       else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)){
        car.body.rotateRight(100);
       }
       car.body.thrust(400);
      }
      else{
       this.graphics.moveTo(car.body.x+(Math.cos(this.math.degToRad(car.body.angle))*5),car.body.y+(Math.sin(this.math.degToRad(car.body.angle))*5));
       this.graphics2.moveTo(car.body.x+(Math.cos(this.math.degToRad(car.body.angle))*(-5)),car.body.y+(Math.sin(this.math.degToRad(car.body.angle))*(-5)));
       if(Math.abs(car.body.velocity.x) > 6 || Math.abs(car.body.velocity.y) > 6){
        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
      car.body.rotateLeft(10);
     } 
        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)){
         car.body.rotateRight(10);
        }
       }
      } 
       
  }


 };
 game.state.add('main', mainState);  
 game.state.start('main');

<div id="game"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.8/phaser.min.js"></script>

现在，我希望这个标记逐渐消失...关于如何实现它的任何线索？

Answer 1

我看到两种方法：

粒子引擎 - 一段时间后淡出每个轨道粒子
在专用（屏幕外）上绘制轨迹canvas 并应用模糊滤镜/递减 alpha 值

纯 JS 方法 2 的演示：

var bgCanvas = document.getElementById('bg-canvas'),
    bgContext = bgCanvas.getContext('2d'),
    fgCanvas = document.getElementById('fg-canvas'),
    fgContext = fgCanvas.getContext('2d');

function bgFade() {
  var imageData = bgContext.getImageData(0, 0, bgCanvas.width, bgCanvas.height);
  var data = imageData.data;
  for (var i = 3; i < data.length; i += 4) {
    data[i] -= 5;
  }
  bgContext.putImageData(imageData, 0, 0);
}

function update() {
  bgFade();

  bgContext.beginPath();
  bgContext.arc(Math.random() * bgCanvas.width, Math.random() * bgCanvas.height, 4, 0, Math.PI * 2);
  bgContext.fillStyle = '#000000';
  bgContext.fill();

  fgContext.beginPath();
  fgContext.arc(Math.random() * fgCanvas.width, Math.random() * fgCanvas.height, 4, 0, Math.PI * 2);
  fgContext.fillStyle = '#ff0000';
  fgContext.fill();

  requestAnimationFrame(update);
}

requestAnimationFrame(update);

#stage canvas {
  position: absolute;
  left: 0;
  top: 0;
}

<div id="stage">
  <canvas id="bg-canvas"></canvas>
  <canvas id="fg-canvas"></canvas>
</div>

请注意，在背景 canvas 上绘制的所有内容都会淡出，而在前景 canvas 上绘制的所有内容都会保留。

自上而下的汽车游戏中的漂移痕迹

Drift marks in a top down car game

javascript

game-physics

phaser-framework