Phaserjs基础教程第八节：Weapon对象

       首先，我们先来了解一下Weapon对象：Weapon对象也可以称为Weapon插件，它提供了快速创建和管理子弹池的能力。

       武器（Weapons）射击出子弹（Phaser.Bullet对象），这些子弹实际上是有一些额外属性的sprite对象，并且这些子弹还支持Arcade物理引擎，不过暂时不支持P2引擎。

       所有的子弹都被创建在一个叫Weapon.bullets的组（group）中，所以组对象支持的属性和方法，子弹组也都支持。

       子弹还可以有自己的纹理和动画，你也可以控制它的射击频率、移动速度、射击角度等等属性，甚至你还可以给它们添加重力。

       上面的内容几乎都是官网的翻译，下面我们先来看下面的代码，如果快速地创建一个会射击的小飞机：

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {
	//加载素材：子弹和飞机
    game.load.image('bullet', 'assets/sprites/bullet.png');
    game.load.image('ship', 'assets/sprites/shmup-ship.png');
}

var sprite;
var weapon;
var cursors;
var fireButton;
function create() {
    // 创建一颗子弹，使用bullet皮肤
    weapon = game.add.weapon(1, 'bullet');

    //当子弹超出窗口时自动销毁
    weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS;

    //因为子弹的图片是横着的，所以要旋转一下角度
    weapon.bulletAngleOffset = 90;

    //子弹的速度/每秒钟位移的像素值
    weapon.bulletSpeed = 400;
	
    sprite = this.add.sprite(320, 500, 'ship');
    game.physics.arcade.enable(sprite);
    //告诉Weapon子弹的轨迹：横向14px（小飞机宽28px），纵向0px
    weapon.trackSprite(sprite, 14, 0);
	
	//启用方向键
    cursors = this.input.keyboard.createCursorKeys();
    //定义空格键为射击按键
    fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR);
}

function update() {
	//初始化速度为0
    sprite.body.velocity.x = 0;
	//按下左方向键时速度为-200（左移），按下右方向键时速度为200（右移）
    if (cursors.left.isDown)
    {
        sprite.body.velocity.x = -200;
    }
    else if (cursors.right.isDown)
    {
        sprite.body.velocity.x = 200;
    }
	
	//按下空格键时，开火
    if (fireButton.isDown)
    {
        weapon.fire();
    }
}

function render() {
    weapon.debug();
}

       这个例子中，我们创建了一个会射击的小飞机，它只能左右移动，并且它每次只能发射一颗子弹，如果你担心它的子弹数量太少，那么修改下weapon = game.add.weapon(1, 'bullet');的数量即可，这个数量其实是子弹池的数量，同时也意味着同一时间屏幕上最多有这个数量的子弹数。

       上面的例子中，窗口中只有一颗子弹未免太单调了，不仅如此，子弹的颜色也太单一了，下面我们就再来看一个例子来熟悉weapon的各种属性：

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {
    game.load.image('ship', 'assets/sprites/thrust_ship.png');
    //这张图片长宽为320*4px，截取为4x4px一共有80个画面
    game.load.spritesheet('bullet', 'assets/sprites/rgblaser.png', 4, 4);
}

var sprite;
var weapon;
var cursors;
var fireButton;
function create() {
    //创建40颗子弹
    weapon = game.add.weapon(40, 'bullet');

    //加载时已经说过，截取图片中4x4像素为一个画面
    //第三个参数true告诉weapon类每次优先使用下一个画面，如果是false只会使用第一个画面
    //子弹发射时，80个画面全面使用完后从0开始
    weapon.setBulletFrames(0, 80, true);
    //下面这个参数相当于setBulletFrames函数的第三个参数
	//weapon.bulletFrameCycle = true;
	
	//子弹销毁方式
    weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS;
    //weapon.bulletKillType = Phaser.Weapon.KILL_NEVER;

    //子弹速度
    weapon.bulletSpeed = 400;

    //射击频率（多少毫秒射击一次）
    weapon.fireRate = 50;

    //子弹超出边界时，会从边界的另一侧出现
    //weapon.bulletWorldWrap = true;

    sprite = this.add.sprite(400, 300, 'ship');
    sprite.anchor.set(0.5);
    game.physics.arcade.enable(sprite);
	//最大速度和减速设定
    sprite.body.drag.set(70);
    sprite.body.maxVelocity.set(200);

    //设置子弹轨迹，因为sprite.anchor已经设置为0.5，所以x方向不用位移了
    weapon.trackSprite(sprite, 0, 0, true);

    cursors = this.input.keyboard.createCursorKeys();
    fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR);

	//自动射击
//  weapon.autofire = true;
}

function update() {
    if (cursors.up.isDown)
    {
    	//旋转加速度（先这么翻译吧，有点复杂）
        game.physics.arcade.accelerationFromRotation(sprite.rotation, 300, sprite.body.acceleration);
    }
    else
    {
    	//加速度设置为0
        sprite.body.acceleration.set(0);
    }

    if (cursors.left.isDown)
    {
    	//角速度=-300（旋转速度）
        sprite.body.angularVelocity = -300;
    }
    else if (cursors.right.isDown)
    {
        sprite.body.angularVelocity = 300;
    }
    else
    {
        sprite.body.angularVelocity = 0;
    }

    if (fireButton.isDown)
    {
        weapon.fire();
    }
	
	//是否换向显示
    game.world.wrap(sprite, 16);
}

function render() {
    weapon.debug();
}

       看过了两个例子，我们大概就知道了其中几个属性的含义了，不过还是要强调一下：

       bulletSpeed：子弹初速度（移动速度）。

       fireRate：射击频率（子弹出现的频率，单位毫秒，即多少毫秒出现一颗子弹）。

       trackSprite：上面已经说过，子弹的偏移量。

       autofire：这个简单，是否自动发射子弹。

       sprite.body.drag.set(70)：API的翻译太过绕口，你直接理解成刹车速度就行，也就是停止时的速度减小量（每秒），这是一个{Phaser.Point}对象（和scale、anchor等一样），方法接收两个参数，比如这里只写了一个，其实也等于sprite.body.drag.set(70,70)，之前没有讲到这个，这里补充下。

       sprite.body.maxVelocity.set(200)：（小飞机）最大速度设定。

       angularVelocity：角速度，每秒旋转的角度。

       上面的代码只是发射一颗子弹，如果你想一次发射多颗子弹，也是可以的，只不过这些子弹还是直线弹道，虽然单个子弹可以设置便宜角度，但是没有办法像散弹枪一样，发射扇形的子弹（我研究了两个小时，在不修改源码的情况下没有办法实现，希望以后有这个功能吧），发射多颗子弹的代码也很简单，看下面的代码：

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
    game.load.image('bullet', 'assets/bullets/bullet198.png');
    game.load.image('ship', 'assets/sprites/shmup-ship.png');
}

var sprite;
var weapon;
var cursors;
var fireButton;
var bulletPositions;
function create() {
    //定义48颗子弹
    weapon = game.add.weapon(6*8, 'bullet');

    weapon.bulletKillType = Phaser.Weapon.KILL_LIFESPAN;
    //子弹寿命，和上一条设定的Phaser.Weapon.KILL_LIFESPAN配合使用
    weapon.bulletLifespan = 2000;

    //子弹速度及角度（因为子弹会被横着绘制，所以需要设置角度便宜）
    weapon.bulletAngleOffset = 90;
    weapon.bulletSpeed = 400;
	
	//子弹随机角度
    // weapon.bulletAngleVariance = 20;
    sprite = this.add.sprite(320, 500, 'ship');
    game.physics.arcade.enable(sprite);
    //偏移量设置
    weapon.trackSprite(sprite, 14, 0);
    weapon.fireRate = 250;

    //开启多发
    weapon.multiFire = true;

    cursors = this.input.keyboard.createCursorKeys();
    fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR);
    bulletPositions = [
        { x: 0, y: -32 },
        { x: -16, y: -16 },
        { x: 16, y: -16 },
        { x: -32, y: 0 },
        { x: 0, y: 0 },
        { x: 32, y: 0 }
    ];
}

function update() {
    sprite.body.velocity.x = 0;
    if (cursors.left.isDown)
    {
        sprite.body.velocity.x = -200;
    }
    else if (cursors.right.isDown)
    {
        sprite.body.velocity.x = 200;
    }
    if (fireButton.isDown)
    {
        //每次射击发射6颗子弹
        weapon.fireMany(bulletPositions);
    }
}

function render() {
    weapon.debug();
}

       步骤其实很简单，创建多颗子弹，开启多发，设定各个子弹的偏移量，然后就OK了，是不是很简单？

       还有一个属性需要了解下，就是weapon的bulletAngleVariance属性，我在上面的代码中也注释过了，它给所有的子弹提供了一个随机的发射角度，而且每次刷新都是相对于当前的位置随机的，所以会出现一条随机的弹道，只是很遗憾，我还是没有找到在不修改源代码的情况下发射扇形子弹的方法。

       好吧，这一节就这样了，教程阅读到这里，游戏页面的制作流程和方法大家也都熟悉了，那么下一节让我们进入实战吧，也是这个教程系列的最后一节，模拟经典游戏：雷电。