【Phaser游戏开发】动画效果-舞动的蝴蝶环

【Phaser游戏开发】动画效果实现-舞动的蝴蝶圆环,蝴蝶群飞舞

这里想看看蝴蝶群飞舞的效果

效果图

蝴蝶资源

这里的图片资源取自这里4399上“蝴蝶翩翩连”https://www.4399.com/flash/220808_4.htm

这里有五种风格形态的蝴蝶图资源

代码实现

mainGame.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/bg.png');


		this.load.atlas('wings', 'assets/wings-3.png', 'assets/wings-3.json');


	},

	create: function() {
		//背景颜色
		// this.stage.backgroundColor="#f0f";
		//场景里添加个背景			 
		var bg = this.game.add.tileSprite(0, 0, this.game.world.width, this.game.world.height, 'bg');


		// 使用示例
		const centerX = Math.trunc(this.game.width / 2); // 100;
		const centerY = Math.trunc(this.game.height / 2);
		const radius = 330; //半径

		this.graphics = this.game.add.graphics(0, 0);
		this.graphics.beginFill(0x0000FF);
		//this.graphics.drawCircle(centerX, centerY, 30);
		this.graphics.endFill();

		//取得圆环点
		const circlePoints = this.getCirclePoints(centerX, centerY, radius, 0.09);
		//画出圆环点
		for (var i = 0; i <= circlePoints.length - 1; i++) {
			this.graphics.beginFill(0x0000FF);
			//显示点
			//this.graphics.drawCircle(circlePoints[i].x,circlePoints[i].y, 30);
			this.graphics.endFill();

		}
		//创建200只蝴蝶
		for (var x = 0; x < 200; x++) {
			//取得随机点
			let i1 = this.game.rnd.between(0, circlePoints.length - 1);
			//创建蝴蝶飞向点
			new testGame.Butter(this, circlePoints[i1].x, circlePoints[i1].y);
		}


	},
	update: function() {},
	render: function() {},

	getCirclePoints(centerX, centerY, radius, step) {
		const points = [];
		for (let t = 0; t < 2 * Math.PI; t += step) {
			const x = centerX + radius * Math.cos(t);
			const y = centerY + radius * Math.sin(t);
			points.push({
				x,
				y
			});
		}
		return points;
	}
};

Butter.js

testGame = testGame || {};

testGame.Butter = function(state, x, y) {
	this.state = state;
	this.game = state.game;
	Phaser.Group.call(this, this.game);
	this.flying = true;
	//62种形态的蝴蝶翅膀
	let index = this.game.rnd.between(0, 62);

	this.x = this.game.rnd.between(100, this.game.width - 100);
	this.y = this.game.rnd.between(100, this.game.height - 100);

	this.angle = 0;
	this.toAngle = 0;

	this.moveToX = 0;
	this.moveToY = 0;

	this.moveToX = this.game.rnd.between(x - 50, x + 50);
	this.moveToY = this.game.rnd.between(y - 50, y + 50);



	this.position = new Phaser.Point(this.x, this.y);
	this.targetPoint = new Phaser.Point(this.moveToX, this.moveToY);
	//弧度值
	this.toAngleTemp = this.game.math.angleBetweenPoints(this.position, this.targetPoint) + 1.5708;
	// console.log('toAngle=' + this.toAngle); 
	//	角度转为弧度公式 	角度（度）×π/180
	//	弧度转为角度公式 	角度（度）*180/π

	this.toAngle = this.toAngleTemp * 180 / Math.PI; // 


	//转身朝向指定终点
	var tweenAngle = this.game.add.tween(this).to({
		angle: this.toAngle
	}, 1500, Phaser.Easing.Linear.None, !0, 0, 0);

	//移动的线性动画 移动到指定终点
	var tweenXY = this.game.add.tween(this).to({
		x: this.moveToX,
		y: this.moveToY
	}, 5000, Phaser.Easing.Linear.None, !0, 0, 0);

	 
	var wingWidth = 100;
	var wingHeight = 100;
	this.body = this.game.add.sprite(0, 0, 'wings', "body.png");

	this.body.anchor.setTo(.5);
	this.add(this.body);

	//要用左边来生成的
	this.wingRight = this.game.add.sprite(0, 0, 'wings', "wingL" + index + ".png");
	this.wingRight.anchor.setTo(1, .5); //设置中心点
	this.wingRight.scale.x *= -1; //这里就是控翅方向  反转了 
	this.add(this.wingRight);
	var tweenRight = this.game.add.tween(this.wingRight.scale).to({
		x: -.1 //是否控翅运动 动画的控制
	}, 140, Phaser.Easing.Linear.None, !0, 0, 1e3, !0);


	this.wingLeft = this.game.add.sprite(0, 0, 'wings', "wingL" + index + ".png");
	this.wingLeft.anchor.setTo(1, .5); //设置中心点 
	this.wingLeft.x = -3;
	this.add(this.wingLeft);
	var tweenLeft = this.game.add.tween(this.wingLeft.scale).to({
		x: .1
	}, 140, Phaser.Easing.Linear.None, !0, 0, 1e3, !0);

	//当前蝴蝶整体缩小
	this.scale.setTo(0.5);


};
testGame.Butter.prototype = Object.create(Phaser.Group.prototype);
testGame.Butter.prototype.constructor = testGame.Butter;


testGame.Butter.prototype.update = function() {
	//到达终点修正方向
	//var n = this.game.math.distance(this.x, this.y, this.targetPoint.x, this.targetPoint.y);
	var n = this.game.math.distance(this.x, this.y, this.moveToX, this.moveToY);
	if (n < 10) {
		//随机左转身还是右转身
		if (Math.random() > 0.5) {
			var tweenAngle0 = this.game.add.tween(this).to({
				angle: 0
			}, 500, Phaser.Easing.Linear.None, !0, 0, 0);
		} else {
			var tweenAngle0 = this.game.add.tween(this).to({
				angle: -0
			}, 500, Phaser.Easing.Linear.None, !0, 0, 0);
		}

		this.flying = false;
	}

}

index.html

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8">
		<title>Phaser动画测试</title>
		<!-- <link rel="stylesheet" href="css/main.css"> -->
		<script src="phaser/phaser.js"></script>
		<script>
			var testGame = testGame || {}
		</script>	 
		<script src="js/Butter.js"></script>
		<script src="js/mainGame.js"></script>
	</head>
	<body style="background-color: #000000;">		 
		<script>
			window.onload = function() {
				var bGame = new Phaser.Game(1000, 800, Phaser.AUTO, '', null, true, false);
				bGame.state.add('game', testGame.Game);
				bGame.state.start('game');
			};
		</script>
	</body>
</html>

效果欣赏