【Phaser-ce游戏开发】动画效果-飞舞的荧火虫

原创

MrReady 2024-06-06 23:47:18 博主文章分类：JavaScript ©著作权

文章标签 Game Math html Phaser firefly 文章分类 游戏开发

©著作权归作者所有：来自51CTO博客作者MrReady的原创作品，请联系作者获取转载授权，否则将追究法律责任

Phaser-ce游戏开发动画效果-飞舞的荧火虫,为天空加点亮光

【Phaser-ce游戏开发】动画效果-飞舞的荧火虫_Math

一、准备资源

这个动画资源是用TexturePackerGUI创建生成

firefly.png

【Phaser-ce游戏开发】动画效果-飞舞的荧火虫_Phaser_02

firefly.json

{"frames": {

	"firefly_body":
	{
		"frame": {"x":0,"y":0,"w":60,"h":37},
		"rotated": false,
		"trimmed": false,
		"spriteSourceSize": {"x":0,"y":0,"w":60,"h":37},
		"sourceSize": {"w":60,"h":37}
	},
	"firefly_light":
	{
		"frame": {"x":62,"y":0,"w":60,"h":60},
		"rotated": false,
		"trimmed": false,
		"spriteSourceSize": {"x":0,"y":0,"w":60,"h":60},
		"sourceSize": {"w":60,"h":60}
	},
	"firefly_shadow":
	{
		"frame": {"x":124,"y":0,"w":62,"h":37},
		"rotated": false,
		"trimmed": false,
		"spriteSourceSize": {"x":0,"y":0,"w":62,"h":37},
		"sourceSize": {"w":62,"h":37}
	},
	"firefly_wingLeft":
	{
		"frame": {"x":186,"y":0,"w":29,"h":19},
		"rotated": false,
		"trimmed": false,
		"spriteSourceSize": {"x":0,"y":0,"w":29,"h":19},
		"sourceSize": {"w":29,"h":19}
	},
	"firefly_wingRight":
	{
		"frame": {"x":248,"y":0,"w":29,"h":19},
		"rotated": false,
		"trimmed": false,
		"spriteSourceSize": {"x":0,"y":0,"w":29,"h":19},
		"sourceSize": {"w":29,"h":19}
	}},
	"meta": {
		"app": "https://www.codeandweb.com/texturepacker",
		"version": "1.0",
		"image": "firefly",
		"format": "RGBA8888",
		"size": {"w":310,"h":60},
		"scale": "1",
		"smartupdate": "$TexturePacker:SmartUpdate:ed21cf2cf731f0917d9a8fe8ae95d4ce:836a7b176a25cc9b634eab42857e67db:60d3275844f6a92aa0fb39af5d32ce4f$"
	}
}

二、实现代码

index.html

<html>
	<head>
		<meta charset="utf-8">
		<title>Phaser-ce动画测试</title>	 
		<script src="phaser/phaser.js"></script>
		<script>
			var testGame = testGame || {}
		</script>		 
		<script src="js/Firefly.js"></script>
		<script src="js/FireflyMM.js"></script>
		<script src="js/game.js"></script>
	</head>
	<body style="background-color: #000000;">
		<div id="myGame" class="game"></div>
		<script>
			window.onload = function() {
				var  Game1 = new Phaser.Game(800, 600, Phaser.AUTO, '', null, true, false);
				Game1.state.add('game', testGame.Game);
				Game1.state.start('game');
			};
		</script>
	</body>
</html>

game.js

testGame = testGame || {};

testGame.Game = function() {}
testGame.Game.prototype = {
	init: function() {
		this.game.scale.pageAlignHorizontally = true; //水平居中
		this.game.scale.pageAlignVertically = true; //垂直居中	
	},
	preload: function() {
		//加载资源
		this.load.image('bg', 'assets/bg001.png');
		this.load.image('spookysky', 'assets/spookysky.png');
		this.load.atlas('firefly', 'assets/bf/firefly.png', 'assets/bf/firefly.json');
		this.load.image('blue', 'assets/blue.png');
	},
	create: function() {
		//背景颜色
		// this.stage.backgroundColor="#f0f";
		//场景里添加个背景				 
		var bg = this.game.add.tileSprite(0, 0, this.game.world.width, this.game.world.height,
			'spookysky');
		//创建荧火虫
		this.firefly = new testGame.Firefly(this);
		//创建100小小荧火虫
		for (var q = 0; q < 100; q++) {
			new testGame.FireflyMM(this);
		}
	},
	update: function() {},
	render: function() {},
};

Firefly.js

testGame = testGame || {};
testGame.Firefly = function(state) {
	this.state = state;
	this.game = state.game;
	Phaser.Group.call(this, this.game);
  this.x = 0;
	this.y = 300;	
	this.graphicsLine = this.game.add.graphics(0, 0);
	this.graphicsLine.lineStyle(0, 0x0000ff, 1);
	this.graphicsLine.lineTo(this.x, this.y);


	this.wingL = this.game.add.sprite(0, -10, 'firefly', "firefly_wingLeft");
	this.wingL.angle = 20;
	this.wingL.anchor.setTo(1, 0);
	this.add(this.wingL);

	this.wingR = this.game.add.sprite(0, -10, 'firefly', "firefly_wingRight");
	this.wingR.angle = -20;
	this.wingR.anchor.setTo(0);
	this.add(this.wingR);

	this.game.add.tween(this.wingL).to({
		angle: -20
	}, 20, Phaser.Easing.Linear.None, true, 0, -1, true);
	this.game.add.tween(this.wingR).to({
		angle: 20
	}, 20, Phaser.Easing.Linear.None, true, 0, -1, true);

	this.body = this.game.add.sprite(0, 0, 'firefly', "firefly_body");
	this.body.anchor.setTo(0.5); ////设置中心点
	this.add(this.body);

	this.light = this.game.add.sprite(0, 15, 'firefly', "firefly_light");
	this.light.blendMode = 1;
	this.light.anchor.setTo(0.5);

	this.light.scale.setTo(this.game.rnd.realInRange(1.5, 1.7));
	this.light.alpha = this.game.rnd.realInRange(0.2, 0.5);
	this.add(this.light);

	this.emitter = this.game.add.emitter(0, 0, 1);

	this.emitter.makeParticles('blue');
	this.emitter.setRotation(0, 0);
	this.emitter.setAlpha(0.3, 0.8);
	this.emitter.setScale(0.5, 1);
	this.emitter.gravity = -100;
	//this.add(this.emitter);
	this.emitter.x = this.x;
	this.emitter.y = this.y;

	this.emitter.start(false, 5000, 100);

	this.visible = true;

	this.shadow = this.game.add.sprite(0, 15, 'firefly', "firefly_shadow");
	this.shadow.x = this.x;
	this.shadow.y = this.y + 70;

	this.flying = false;
	this.targetPoints = [];

	this.rotation = 0;
	this.flyAwaySpeed = 5;
	//this.flyAwayRotationLerp = 0.01;
	this.flyAwayRotationLerp = 0.05;

	this.game.time.events.add(this.game.rnd.between(1000, 3000), this.makeFlight, this);

};
testGame.Firefly.prototype = Object.create(Phaser.Group.prototype);
testGame.Firefly.prototype.constructor = testGame.Firefly;
testGame.Firefly.prototype.update = function() {

	this.emitter.emitX = this.x + 15;
	this.emitter.emitY = this.y;
	this.light.scale.setTo(this.game.rnd.realInRange(1.5, 1.7));
	this.light.alpha = this.game.rnd.realInRange(0.2, 0.5);
	if (this.flying) {
		this.targetPoint = this.targetPoints[0];
		//this.targetPoint = this.targetPoints[(targetPoints.size-1)];

		this.x += this.lengthDirX(this.rotation - 1.5708, this.flyAwaySpeed, true);
		this.y += this.lengthDirY(this.rotation - 1.5708, this.flyAwaySpeed, true);

		this.graphicsLine.lineStyle(2, 0x0000ff, 1);
		this.graphicsLine.lineTo(this.x, this.y);
		this.position = new Phaser.Point(this.x, this.y);


		var q = this.game.math.angleBetweenPoints(this.position, this.targetPoint);
		//console.log(Math.trunc(q) + '	' + Math.trunc(this.x) + '	' + Math.trunc(this.y) +
		//	'	目标' + Math.trunc(this.targetPoint.x) + '	' + Math.trunc(this.targetPoint.y));

		this.rotation = this.game.math.rotateToAngle(this.rotation, q + 1.5708, this.flyAwayRotationLerp);

		var n = this.game.math.distance(this.x, this.y, this.targetPoint.x, this.targetPoint.y);
		if ((n < 10) || ((this.dir == 1) && (this.x > this.targetPoint.x)) || (this.dir == -1 && (this.x < this
				.targetPoint.x))) {
			this.targetPoints.shift();
			if (this.targetPoints.length == 0) {
				this.flying = false;
				// this.visible = false;
				// this.shadow.visible = false;
				//this.game.time.events.add(this.game.rnd.between(5000, 10000), this.makeFlight, this);
				this.game.time.events.add(this.game.rnd.between(2000, 5000), this.makeFlight, this);
			}
		}
		if (n > 5000) {
			//console.log(" 超过2000了 飞远了");
			this.flying = false;
			//  this.visible = false;
			this.game.time.events.add(this.game.rnd.between(5000, 10000), this.makeFlight, this);
		}
		this.shadow.x = this.x;
		this.shadow.y = this.y + 70;
		this.shadow.angle = this.angle;
		//this.shadow.visible = true;
	} else {
		// this.shadow.visible = false;
	}
}

testGame.Firefly.prototype.makeFlight = function() {
	this.position = new Phaser.Point(this.x, this.y);
	this.startPoint = this.position;
	this.makeHorFlyPoints(this.startPoint);

	this.angle = this.game.math.angleBetweenPoints(this.position, this.targetPoints[0]) + 1.5708;
	this.flying = true;
	this.visible = true;
	// this.shadow.visible = true;
}

testGame.Firefly.prototype.makeHorFlyPoints = function(q) {
	var n = 50,
		m = 50,
		u = q.y;
	this.targetPoints.clear;
	this.targetPoints = [];
	this.targetPoints.push(q);

	if (this.x < 600) {
		//if (Math.random() < 0.5) {	 
		//  for (var k = -200; (k<= this.game.width + 400); k += Math.floor( (n* this.game.rnd.realInRange(0.8, 1.2)) )) {		
		for (var k = 200;
			(k <= this.game.width - 200); k += Math.floor((n * this.game.rnd.realInRange(0.8, 1.2)))) {
			var j = new Phaser.Point(k, u + this.game.rnd.realInRange(-m, m));

			this.targetPoints.push(j);


			u = j.y;
			this.dir = 1;
		}
	} else {
		// for (var k = this.game.width + 200; k >= -400; k -= Math.floor( (n * this.game.rnd.realInRange(0.8, 1.2)))) {
		for (var k = this.game.width - 200; k >= 200; k -= Math.floor((n * this.game.rnd.realInRange(0.8, 1.2)))) {
			var j = new Phaser.Point(k, u + this.game.rnd.realInRange(-m, m));

			this.targetPoints.push(j);

			u = j.y;
			this.dir = -1;
		}
	}
}

testGame.Firefly.prototype.lengthDirX = function(q, n, m) {
	var m = m || false;
	if (m) {
		return (Math.cos(q) * n);
	} else {
		return (Math.cos(this.game.math.degToRad(q)) * n);
	}
}
testGame.Firefly.prototype.lengthDirY = function(q, n, m) {
	var m = m || false;
	if (m) {
		return (Math.sin(q) * n);
	} else {
		return (Math.sin(this.game.math.degToRad(q)) * n);
	}
}

FireflyMM.js

testGame = testGame || {};
testGame.FireflyMM = function(state) {
	this.state = state;
	this.game = state.game;

	Phaser.Sprite.call(this, this.game, 0, 0, 'firefly', 'firefly_light');

	this.game.add.existing(this); //添加到场景中， 不然不显示
	var q = this.game.rnd.pick(this.goToTargets),
		n = q[0] + Math.random() * q[2],
		m = q[1] + Math.random() * q[3];

	//this.scale.setTo(0.15);//缩小
	this.scale.setTo(0.2);
	this.blendMode = 1;
	this.spherePos = new Phaser.Point(n, m);
	this.sphereOffset = new Phaser.Point(-10, -10);
	this.sphereOffset2 = new Phaser.Point(-10, 5);
	this.onMoveComplete = new Phaser.Signal();
	this.sphereTweens = [];
	var u = this.game.add.tween(this.sphereOffset).to({
		x: 10
	}, 1333 + this.game.rnd.between(-200, 1000), Phaser.Easing.Sinusoidal.InOut, true, 0, -1, true);
	u.timeline[0].dt = this.game.rnd.between(0, 500);
	var k = this.game.add.tween(this.sphereOffset).to({
		y: 10
	}, 777 + this.game.rnd.between(-200, 1000), Phaser.Easing.Sinusoidal.InOut, true, 0, -1, true);
	k.timeline[0].dt = this.game.rnd.between(0, 400);
	var j = this.game.add.tween(this.sphereOffset2).to({
		x: 10
	}, 1000 + this.game.rnd.between(-200, 1000), Phaser.Easing.Sinusoidal.InOut, true, 0, -1, true);
	j.timeline[0].dt = this.game.rnd.between(0, 500);
	var o = this.game.add.tween(this.sphereOffset2).to({
		x: -5
	}, 1500 + this.game.rnd.between(-200, 1000), Phaser.Easing.Sinusoidal.InOut, true, 0, -1, true);
	o.timeline[0].dt = this.game.rnd.between(0, 500);
	this.alphaTween = this.game.add.tween(this).to({
		alpha: 0.4
	}, 1000 + this.game.rnd.between(-200, 200), Phaser.Easing.Sinusoidal.InOut, true, 0, -1, true);
	this.alphaTween.timeline[0].dt = this.game.rnd.between(0, 300);
	this.onMoveComplete.add(function() {
		this.game.time.events.add(this.game.rnd.between(100, 1000), this.goToRandom, this);
	}, this);
	this.game.time.events.add(this.game.rnd.between(100, 1000), this.goToRandom, this);
};

testGame.FireflyMM.prototype = Object.create(Phaser.Sprite.prototype);

testGame.FireflyMM.prototype.goToTargets = [
	[10, 20, 800, 600]
];
testGame.FireflyMM.prototype.update = function() {
	this.x = this.spherePos.x + this.sphereOffset.x + this.sphereOffset2.x;
	this.y = this.spherePos.y + this.sphereOffset.y + this.sphereOffset2.y;
};
testGame.FireflyMM.prototype.goTo = function(q, n) {
	var m = Phaser.Point.distance(this.spherePos, {
		x: q,
		y: n
	});
	this.game.add.tween(this.spherePos).to({
		x: q,
		y: n

	}, (m * 50), Phaser.Easing.Sinusoidal.InOut, true).onComplete.add(this.onMoveComplete.dispatch, this
		.onMoveComplete);
};
testGame.FireflyMM.prototype.goToRandom = function() {
	var q = this.game.rnd.pick(this.goToTargets),
		n = q[0] + (Math.random() * q[2]),
		m = q[1] + (Math.random() * q[3]);
	this.goTo(n, m);
}