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

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

我看到两种方法:

1. 粒子引擎 - 一段时间后淡出每个轨迹粒子
2. 在专用(屏幕外) 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 上绘制的所有内容都会保留。