【Phaser游戏开发】动画效果-飞来飞去的炫酷蜻蜓
Phaser是用的Phaser CE，版本为v2.20.0， 下载地址https://github.com/photonstorm/phaser-ce
一、准备资源
这个动画资源是用TexturePackerGUI创建生成
dragonfly.png
dragonfly.json
{
"frames": {
"dragonfly_body": {
"frame": {
"x": 0,
"y": 0,
"w": 18,
"h": 107
},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {
"x": 0,
"y": 0,
"w": 18,
"h": 107
},
"sourceSize": {
"w": 18,
"h": 107
}
},
"dragonfly_shadow": {
"frame": {
"x": 18,
"y": 0,
"w": 136,
"h": 107
},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {
"x": 0,
"y": 0,
"w": 136,
"h": 107
},
"sourceSize": {
"w": 136,
"h": 107
}
},
"dragonfly_wingLeft": {
"frame": {
"x": 154,
"y": 0,
"w": 67,
"h": 46
},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {
"x": 0,
"y": 0,
"w": 67,
"h": 46
},
"sourceSize": {
"w": 67,
"h": 46
}
},
"dragonfly_wingRight": {
"frame": {
"x": 221,
"y": 0,
"w": 67,
"h": 46
},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {
"x": 0,
"y": 0,
"w": 67,
"h": 46
},
"sourceSize": {
"w": 67,
"h": 46
}
}
},
"meta": {
"app": "https://www.codeandweb.com/texturepacker",
"version": "1.0",
"image": "dragonfly",
"format": "RGBA8888",
"size": {
"w": 288,
"h": 107
},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:b8cc0e3faad3029a16a69e1338dcc5eb:c5b232854dbeebf63d083a6038aee440:86a92428b290b0e4e339cee64f385c33$"
}
}二、编写代码实现效果
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Phaser-ce动画测试</title>
<!-- <link rel="stylesheet" href="css/main.css"> -->
<script src="phaser/phaser.js"></script>
<script>
var testGame = testGame || {}
</script>
<script src="js/Dragonfly.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 butterGame = new Phaser.Game(800, 600, Phaser.AUTO, '', null, true, false);
butterGame.state.add('game', testGame.Game);
butterGame.state.start('game');
};
</script>
</body>
</html>Dragonfly.js
testGame = testGame || {};
//Dragonfly构造方法
testGame.Dragonfly = function(state) {
this.state = state;
this.game = state.game;
//继承重载于Phaser.Group
Phaser.Group.call(this, this.game);
//初始位置
this.x = 150;
this.y = 150;
this.angle = 3;
this.rotation = 0;
this.position = new Phaser.Point(this.x, this.y);
//创建身体部分body
this.body = this.game.add.sprite(0, 0, 'dragonfly', "dragonfly_body");
this.body.anchor.setTo(0.5);
//添加到当前组对象中
this.add(this.body);
//创建左边翅膀
this.wingL = this.game.add.sprite(0, -28, 'dragonfly', "dragonfly_wingLeft");
this.wingL.angle = 3;
this.wingL.anchor.setTo(1, 0.5);
//右边翅膀添加到当前组对象中
this.add(this.wingL);
//创建左边翅膀
this.wingR = this.game.add.sprite(0, -28, 'dragonfly', "dragonfly_wingRight");
this.wingR.angle = -3;
this.wingR.anchor.setTo(0, 0.5);
//右边翅膀添加到当前组对象中
this.add(this.wingR);
//翅膀线性动画
this.game.add.tween(this.wingL).to({
angle: -3
}, 3, Phaser.Easing.Linear.None, true, 0, -1, true);
this.game.add.tween(this.wingR).to({
angle: 3
}, 3, Phaser.Easing.Linear.None, true, 0, -1, true);
//创建影子
//this.shadow = this.game.add.sprite(100, 100, 'dragonfly', "dragonfly_shadow");
this.shadow = this.game.add.sprite(0, 0, 'dragonfly', "dragonfly_shadow");
this.shadow.angle = 0;
this.myGroupShadow = this.game.add.group();
this.myGroupShadow.add(this.shadow); //使用类内部的分组
this.myGroupShadow.x = this.x;
this.myGroupShadow.y = this.y;
// this.myGroupShadow.y = this.y + 50;
this.flying = false;//标记飞行状态
this.visible = true;
this.shadow.visible = true; //影子是否显示
this.flyAwaySpeed = 8; //飞行速度
//创建下一次飞到达目的地
this.game.time.events.add(this.game.rnd.between(1000, 2000), this.makeFlight, this);
// this.game.time.events.add(this.game.rnd.between(1500, 3000), this.makeFlight, this);
};
testGame.Dragonfly.prototype = Object.create(Phaser.Group.prototype);
testGame.Dragonfly.prototype.update = function() {
if (this.flying) {
// this.shadow.visible = true;
this.x += this.lengthDirX(this.rotation - 1.5708, this.flyAwaySpeed, true); //只有这个参数 左右飞
this.y += this.lengthDirY(this.rotation - 1.5708, this.flyAwaySpeed, true); //只有这个参数 上下飞
//计算距离
var q = this.game.math.distance(this.x, this.y, this.targetPoint.x, this.targetPoint.y);
this.myGroupShadow.x = this.x;
this.myGroupShadow.y = this.y;
//this.myGroupShadow.y = this.y + 50;
if (q < 10) {
this.flying = false;
//创建下一次飞到达目的地
this.game.time.events.add(this.game.rnd.between(2000, 3000), this.makeFlight, this);
}
if (q > 2000) {
this.flying = false;
//创建下一次飞到达目的地
this.game.time.events.add(this.game.rnd.between(2000, 3000), this.makeFlight, this);
}
} else {
// this.shadow.visible = false;
}
};
testGame.Dragonfly.prototype.makeFlight = function() {
var x1 = Phaser.Math.between(30, this.game.world.width - 30);
var y1 = Phaser.Math.between(30, this.game.world.height - 30);
if (Math.random() < 0.5) {
this.targetPoint = new Phaser.Point(x1, y1);
} else {
this.targetPoint = new Phaser.Point(x1, y1);
}
this.position = new Phaser.Point(this.x, this.y);
this.rotation = this.game.math.angleBetweenPoints(this.position, this.targetPoint) + 1.5708;
this.myGroupShadow.rotation = this.rotation;
this.myGroupShadow.x = this.x;
this.myGroupShadow.y = this.y;
//this.myGroupShadow.y = this.y + 50;
this.flying = true;
this.visible = true;
this.shadow.visible = true;
};
testGame.Dragonfly.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.Dragonfly.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);
}
}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.atlas('dragonfly', 'assets/dragonfly.png', 'assets/dragonfly.json');
},
create: function() {
//场景里添加个背景
var bg = this.game.add.tileSprite(0, 0, this.game.world.width, this.game.world.height, 'bg');
// 添加文字
this.showMsg = this.add.text(8, 8, 'Phaser-ce动画测试', {
fontSize: '32px',
fill: '#0000ff'
});
//this.dragonfly = new window['butter'].Dragonfly(this);
//创建蜻蜓动画对象
this.dragonfly = new testGame.Dragonfly(this);
},
update: function() {},
render: function() {}
};查看效果
这里可以看到用phaser能实现出比较酷的动画效果
