作者：channingbreeze

日期：2017-03-12

Phaser实战系列教程第二课，以飞机大战为素材，讲述了Phaser中精灵的使用，定位技巧，逐帧动画和渐变动画的使用技巧，介绍了Phaser中的物理引擎，详细讲述了Arcade，最后介绍了Group的用法和技巧！

目录：

l  精灵、按钮、定位、拖动

l  逐帧动画和渐变动画

l  Arcade物理引擎

l  Group的用法

Phaser游戏中的精灵

Image：game.add.image，可以旋转，缩放，裁剪，响应输入，但是没有物理属性和动画效果。

Sprite：game.add.sprite，可以旋转，缩放，裁剪，有物理属性，可以响应输入，添加动画以及和相机之间交互。

TileSprite：game.add.tileSprite，纹理平铺，主要用来做背景，背景滚动等。

调用原型：game.add.tileSprite(x, y, width, height, key)

Button：game.add.button，按钮。

调用原型：game.add.button(x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame)

最后四个参数分别是，hover时，鼠标在button外时，鼠标按下button时，鼠标抬起时的帧索引，例如：

game.add.button(30, 300, 'replaybutton', this.onReplayClick, this, 0, 0, 1);

精灵定位，我们推荐尽量使用相对定位，比如：

game.add.image(12, game.height - 16, 'copyright');

位于游戏区域底部，我们用game.height – 16，是相对于整个游戏进行定位。

飞机的拖动处理，十分简单，只需要两句代码：

this.myplane.inputEnabled = true;

this.myplane.input.enableDrag(false);

逐帧动画和渐变动画

逐帧动画的使用示例：

this.myplane = game.add.sprite(100, 100, 'myplane');

this.myplane.animations.add('fly');

this.myplane.animations.play('fly', 12, true);

注意，这里我的飞机资源是下图

而且加载的时候，用的是spritesheet

game.load.spritesheet('myplane', 'assets/myplane.png', 40, 40, 4);

所以在制作逐帧动画的时候就非常简单。

如果要让精灵停在某一帧，只需要设置它的frame，player.frame = 4;

animations.add还有一些其他参数，可以参考文档

渐变动画的使用示例：

game.add.tween(this.myplane).to({y: game.height - 40}, 1000, Phaser.Easing.Sinusoidal.InOut, true);

tween动画的本质，其实是用某一个函数去改变一个数值，先看文档：

例子中，它改变的就是this.myplane.y的值，把它以一种渐变的方式变成了game.height – 40。

还可以在动画完成之后，去执行自己的回调，比如：

anim.onComplete.add(this.gotoOver, this);

物理引擎

Arcade：最简单，只能进行矩形碰撞，效率最高

Ninja：比Arcade好点，比P2差点

P2：可以实现复杂碰撞，功能全面

这次我们先介绍Arcade：

首先，开启物理系统，game.physics.startSystem(Phaser.Physics.ARCADE);

然后，开启一个精灵的物理属性，game.physics.arcade.enable(this.myplane);

或者开启一个组的物理属性：

this.mybullets = game.add.group();

this.mybullets.enableBody = true;

最后，我们在update中进行碰撞检测：

只检测不进行碰撞

game.physics.arcade.overlap(this.mybullets, this.enemy1.enemys, this.enemy1.hitEnemy, null, this.enemy1);

或者进行碰撞

game.physics.arcade.collide(stars, platforms);

可以精灵与精灵碰，可以精灵与组碰，可以组与组碰，还可以组内碰撞。

Group的使用

为什么要用组？在这个案例中，我们是为了方便我们的碰撞检测，更是为了使用对象池的思想进行资源的重复利用。

创建组，game.add.group();

批量设置组内元素属性：

this.mybullets.setAll('outOfBoundsKill', true);

this.mybullets.setAll('checkWorldBounds', true);

饿汉式：一次创建足够多的元素

this.mybullets.createMultiple(50, 'mybullet');

懒汉式：用的时候从group中取，如果取不到，再新建一个，放入group

var enemy = this.groups["enemy"].getFirstExists(false);
if(!enemy) {
  enemy = new GameTank.Enemy(this, position, 'enemy', 'enemy', {
    speed: (tankType == 1) ? 200 : 100,
    award: award,
    type: tankType
  });
} else {
  enemy.rebirth(position, {
    speed: (tankType == 1) ? 200 : 100,
    award: award,
    type: tankType
  });
}

转载请注明出处：http://www.phaser-china.com/tutorial-detail-11.html