Phaserjs基础教程第七节：Time和Timer对象

 大家都是程序员，Time和Timer之间的不同肯定是知道的，不过我还是要再重复一遍，在Phaserjs中，Time（Phaser.Time）是时间对象，而Timer（Phaser.Timer）则是定时器对象。

       在Phaserjs中，Time对象虽然都是用来表示时间，可是却可以细分为三类用途：

       游戏时间（Game time）：与现实时间运行速度相同的时间，和壁钟时间不同的是，当游戏停止时，时间也会停止。游戏时间被应用在定时器Phaser.Timer中；

       物理时间（Physics time）：代表了物理引擎计算的时间，比如使用慢镜头等操作时就是这类时间。物理时间经常被物理引擎计算和tween动画中。

       壁钟时间（Wall-clock time）：代表了两个事件在现实时间中持续时间，独立于游戏并且持续运行，无论游戏是否停止。

       我们这节主要讲的其实是第一类：游戏时间，也就是timer定时器，为什么要用到定时器，大家想象一下雷电这个游戏：游戏窗口上方一直在向下掉陨石等物体，那么它们的出现时间是怎么控制的？如果有了定时器，是不是就感觉简单多了，查看下面的代码：

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

function preload() {
    game.load.image('bisley', 'assets/pics/alex-bisleys_horsy_5.png');
}

var picture;
var counter = 0;
var text = 0;
function create() {
    game.stage.backgroundColor = '#6688ee';

    picture = game.add.sprite(100, 150, 'bisley');
    picture.scale.set(0.5);
    picture.anchor.setTo(0.5, 0.5);

	//延时执行
    game.time.events.add(Phaser.Timer.SECOND * 4, fadePicture, this);
    game.time.events.add(Phaser.Timer.SECOND * 8, fadePicture2, this);
    //重复运行（重复十次）
    game.time.events.repeat(Phaser.Timer.SECOND * 2, 10, createBall, this);
    
    //添加一行文字，显示和
    text = game.add.text(32, 360, 'Counter: 0', { font: "64px Arial", fill: "#ffffff", align: "center" });
    text.anchor.setTo(0, 0.5);
    //循环执行
    game.time.events.loop(Phaser.Timer.SECOND, updateCounter, this);
}
function createBall() {
    //随机位置添加新的对象
    var bisley2 = game.add.sprite(game.rnd.integerInRange(300, 800), game.world.randomY, 'bisley');
    bisley2.scale.set(0.2);
}
function fadePicture() {
    game.add.tween(picture).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);
}
function fadePicture2() {
    game.add.tween(picture).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true);
}
function updateCounter() {
    counter++;
    text.setText('Counter: ' + counter);
}
function render() {
    game.debug.text("Time until event: " + game.time.events.duration, 32, 32);
    game.debug.text("Time until event: " + game.time.events.duration.toFixed(0), 32, 432);
    game.debug.text("Next tick: " + game.time.events.next.toFixed(0), 32, 464);
}

       这个例子中，包含了定时器的三种方式：add（执行一次）、repeat（重复一定次数）、loop（循环执行），虽然三种方式的操作没有互相影响，但是game.time.events.duration这个对象确实以最后一次定义的一秒为单位的，而实际上，如果不加循环执行的话，它应该是以2秒为单位，如果也没有重复，那么单位就会变成4秒。也就是说，game.time.events.duration总是以最新的定时器为准。

       当我们用定时器定时了一个任务，在等待执行的过程中可能会碰到各种问题或需求要暂停执行或者销毁，这些，就需要相对应的其他方法了，查看代码：

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

function preload() {
    game.load.image('bisley', 'assets/pics/alex-bisleys_horsy_5.png');
}

var timer;
var counter = 0;
var text = 0;
function create() {
    game.stage.backgroundColor = '#6688ee';

    //添加一行文字，显示和
    text = game.add.text(32, 132, 'Counter: 0', { font: "64px Arial", fill: "#ffffff", align: "center" });
    text.anchor.setTo(0, 0.5);
    //创建一个定时器，循环执行
    timer = game.time.create(true);
    timer.loop(2000, updateCounter, this);
    timer.start();
    console.log(timer);
    
    //暂停/继续
    key_pause = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
    key_pause.onDown.add(funcPause, this);
	//停止
    keyStop = game.input.keyboard.addKey(Phaser.Keyboard.ESC);
    keyStop.onDown.add(funcStop, this);
    //开始
    keyStart = game.input.keyboard.addKey(Phaser.Keyboard.ENTER);
    keyStart.onDown.add(funcStart, this);
}
function updateCounter() {
    counter++;
    text.setText('Counter: ' + counter); 
    if(counter > 20){
    	timer.destroy();
    }
}
function funcPause(){
	if(timer.paused){
		timer.resume();
	}
	else{
		timer.pause();
	}
}
function funcStop(){
	timer.stop();
}
function funcStart(){
	timer.start();
}
function render() {
    game.debug.text("Time until event: " + timer.duration, 32, 32);
    game.debug.text("Next tick: " + timer.next.toFixed(0), 32, 64);
}

       这段代码中，实现了定时器的启动、暂停、继续、停止、销毁等操作，和之前的动画音频视频不一样，当timer停止之后，就不能再次启动了，也就是，start()方法就无效了，不信你可以试一下。

 怎么样？Phaserjs的定时器是不是很简单，这一节就先到这里，下一节我们来学习下Weapon对象的使用。