Phaserjs基础教程第六节：Physics.ARCHDE物理引擎

 物理引擎，听起来很高大上，其实说白了，就是解决物理现象的一些算法：比如速度、加速度、重力等等，我们这一节就来学习一下Phaserjs中物理引擎的简单使用。

 Phaserjs中的物理引擎有三个，Arcade、Ninja和P2，三个物理引擎都提供了关于碰撞、重叠、移动等的处理方法，也都包含了重力、加速度、移动等方面的属性，不过也有不同，Arcade属于Phaserjs的内置引擎，它对Phaserjs中的weapon类提供了很好的支持（weapon类以后会讲到），Ninja引擎不是Phaserjs默认捆绑的物理引擎，使用的话需要先注册，P2物理引擎则是一个单独的物理引擎，很强大，不仅支持Phaserjs，也支持其他的一些框架。不过这一节，我们先通过速度、引力、碰撞等操作来学习下Archde物理引擎的使用。

 要使用Physics.ARCHDE引擎，首先就要开启Physics.ARCHDE引擎，有两种方式，一种就是之前提到过的模式定义，另一种手动开启，查看下面的代码：

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

function preload() {
    game.load.image('arrow', 'assets/sprites/longarrow.png');
    game.load.image('ball', 'assets/sprites/pangball.png');
}

var arrow;
var target;
function create() {
//  game.physics.startSystem(Phaser.Physics.ARCADE);
    game.stage.backgroundColor = '#0072bc';
	//添加箭头
    arrow = game.add.sprite(200, 250, 'arrow');
    arrow.anchor.setTo(0.1, 0.5);
	//添加一个可拖动的球
    target = game.add.sprite(600, 400, 'ball');
    target.anchor.setTo(0.5, 0.5);
    target.inputEnabled = true;
    target.input.enableDrag(true);
}

function update() {
	//将箭头的弧度设置为两个对象之间的弧度，有顺序，第一个参数为当前对象，不要弄反了
    arrow.rotation = game.physics.arcade.angleBetween(arrow, target);
}
function render() {
    game.debug.text("Drag the ball", 32, 32);
    game.debug.spriteInfo(arrow, 32, 100);
}

 上面的代码中，显示了两种使用Phaser.ARCADE引擎的方法，同时也提到了angleBetween方法，这个方法很简单，就是计算两个对象之间的夹角，各位可以通过拖动蓝球来查看箭头角度的变换。

 下面再来看一下重力对游戏对象的影响，下面的代码中创建了四个sprite对象，分别赋值了不同的重力和弹力，运行查看效果：

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

function preload() {
    game.load.image('ilkke', 'assets/sprites/ilkke.png');
}

var sprite1;
var sprite2;
var sprite3;
var sprite4;
function create() {
    game.stage.backgroundColor = '#2d2d2d';
    game.physics.startSystem(Phaser.Physics.ARCADE);

    //设置游戏标准重力为100
    game.physics.arcade.gravity.y = 100;

    //添加四个对象
    sprite1 = game.add.sprite(100, 96, 'ilkke');
    sprite2 = game.add.sprite(300, 96, 'ilkke');
    sprite3 = game.add.sprite(500, 96, 'ilkke');
    sprite4 = game.add.sprite(700, 96, 'ilkke');

    //允许四个对象使用Physics.ARCADE物理引擎
    game.physics.enable( [ sprite1, sprite2, sprite3, sprite4 ], Phaser.Physics.ARCADE);
	//开启边界限制，并设置弹力为1
    sprite1.body.collideWorldBounds = true;
    sprite1.body.bounce.y = 1;
    //开启边界限制，设置弹力为0.8，重力修改为200
    sprite2.body.collideWorldBounds = true;
    sprite2.body.bounce.y = 0.8;
    sprite2.body.gravity.y = 200;
    //开启边界限制，修改弹力为0.5，重力为50
    sprite3.body.collideWorldBounds = true;
    sprite3.body.bounce.y = 0.5;
    sprite3.body.gravity.y = 50;
	//禁止使用重力
    sprite4.body.allowGravity = false;
}

function render() {
    game.debug.text('world gravity', sprite1.x - 32, 64);
    game.debug.text('local gravity', sprite2.x - 32, 64);
    game.debug.text('local / 2', sprite3.x - 32, 64);
    game.debug.text('no gravity', sprite4.x - 32, 64);
}

 物理学告诉我们，苹果会从树上落下来是因为重力的影响，如果没有重力，它就会静止不动，重力越大，加速度就越大，下落的速度就会越快，上面的代码很好的模拟了这一情况。而且在实际使用中，物理引擎可以省略我们对很多对象的移动操作，减少代码的使用量，整齐快捷。

 另外，无论在什么游戏中，碰撞检测都是很重要的模块，我们下面这段代码再来看下Arcade引擎怎么使用碰撞检测功能的：

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

function preload() {
    game.load.image('wizball', 'assets/sprites/wizball.png');
}

var ball1;
var ball2;
function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);

    ball1 = game.add.sprite(100, 240, 'wizball');
    ball2 = game.add.sprite(700, 240, 'wizball');
    game.physics.arcade.enable([ball1, ball2]);

    ball1.body.setCircle(45);
    ball2.body.setCircle(45);
    ball1.body.collideWorldBounds = true;
    ball2.body.collideWorldBounds = true;
    ball1.body.bounce.set(1);
    ball2.body.bounce.set(1);
    ball1.body.gravity.y = 100;
    ball2.body.gravity.y = 100;
    ball1.body.velocity.set(150);
    ball2.body.velocity.set(-200, 100);
	//自定义属性：碰撞次数
	ball1.collide_time = 0;
	ball2.collide_time = 0;
}

//碰撞检测回调函数
function coll(obj1, obj2){
	ball1.collide_time++;
	ball2.collide_time++;
	
	//如果两个球碰撞次数超过三次，销毁
	if(obj1.collide_time > 3){
		obj1.destroy();
		obj2.destroy();
	}
}

function update () {
	//每次刷新都进行检测
    game.physics.arcade.collide(ball1, ball2, function(){ coll(ball1, ball2); });
}

function render () {
    game.debug.bodyInfo(ball1, 20, 20);
    game.debug.bodyInfo(ball2, 20, 120);
}

 这个demo中，我添加了两个绿球在页面中，除了重力、弹力、碰撞系数等这些基础属性外，还自定义了一个碰撞次数的属性，并且定义如果碰撞次数超过三次（如果你感觉两颗球的碰撞并没有达到三次就已经消失了，那么就说明你的碰撞检测设定的有问题，在碰撞的时候执行了两次或两次以上的update方法……），那么就销毁这两个sprite。

 上面的代码中我们就用到了碰撞检测函数collide，我们来仔细看下它的参数设置：

var res = collide(object1,object2, collideCallback, processCallback, callbackContext);

 object1、object2：要判断是否碰撞的对象，不仅支持sprite，也支持Phaser.Group | Phaser.Particles.Emitter

| Phaser.TilemapLayer |array这几种对象；

 collideCallback：碰撞时的回调函数，碰撞时触发；

 processCallback：重叠时的回调函数，两个对象重叠时触发；

 callbackContext：触发事件的上下文，默认为当前游戏对象

 res：函数返回值，boolean类型，如果碰撞或重叠，返回true，否则返回false。最后要注意的是，我们要检测碰撞，

 那么就需要实时触发这个函数，这个函数只能定义到update（一般都在这里）或者render中，但是也因为这样，一定要

注意效率问题。

 基础教程讲到这里，我感觉基本的流程和功能也讲得差不多了，甚至都可以动手实战了，不过我还是觉得有两个对象需要

特别介绍下，后面会用两节的时间来单独介绍下timer和weapon两个对象，这一节就先到这里。