Day5. 在没有运转前，世界就是静止的 - Runner

昨天谈了Render，那今天要开始针对我们的需求实作了吗？

我只能说，没错我们快要来谈需求实作了，但是不是今天，今天我们要来谈谈Runner。

Runner是提供一个类似处理回圈的模组，会持续更新 Engine中的内容，你如果有自己写好的控管回圈，那你也可以使用你自己的，笔者这边还是会稍微介绍，预设模组还是有它的方便性。

今天的Demo

今天的Demo原始码

我们一样先看到启动的指令，会透过这行来做为回圈的触发：

Runner.run(runner, engine);

大家可以看一下下面这行(第三个按钮)，会比较能理解实际上Runner做的事。

function TriggerEngineUpdate()
{
    var delta = 1000/60;
    Engine.update(engine, delta);
}

这边是官方说如果你要自行管理回圈运行的话可以用的方式，可以看到这段里面呼叫了 Engine 的更新，指定更新的 engine对象，以及更新往前的时间，这边单位是ms，以我的参数带入 1000/60 就相当於 60FPS的一帧。

可以到画面上按按看第一个跟第三个按钮体会一下这两者更新方式的差异，在於 Runner 他会直接做为一个持续的回圈(固定特定频率)持续呼叫 engine 对象的更新，另一个则是每次只让 engine 对象流逝固定的时间。

第四个按钮的 Trigger runner with tick 的原始码是这样：

function TriggerRunnerWithTick()
{
    var delta = 1000/60;
    Runner.tick(runner, engine, delta);
}

其实跟第三个的方式大同小异，但官方文件有注明这个方式会触发对象 engine 的 beofreTick 、 tick 和 afterTick的相关事件，这边大家可以依需求作使用。

既然提到了事件，我们稍微来看一下跟 Runner 相关的五个事件的触发顺序与时机

Events.on(runner, "beforeTick", function(){ alert("Before tick triggered");})
Events.on(runner, "tick", function(){ alert("Tick triggered now");})
Events.on(runner, "beforeUpdate", function(){ alert("Before canvas update");})
Events.on(runner, "afterUpdate", function(){ alert("After canvas update");})     
Events.on(runner, "afterTick", function(){ alert("After tick triggered");})

上面五行程序其实就是了我们 Runner 相关的五个事件，上到下为执行顺序。

可以发现如果 Tick 做为一个行为，After tick 的 signal 会是在最後才被发出，如果我们在画面更新前後有一些要做的逻辑操作，可以透这个方式做监听，也要清楚顺序，才不会搞错逻辑先後。

要实验的话可以透过把 50 - 54 行的注解解掉，按下正常 Run 的钮或是 Tick 钮，就会看到这些 Alert一直跳出来了。

上面提到要使用这些事件的话要采用 Tick的方式这边可以观察到对应行为，因为这时候如果按第三个按键，你会发现画面有更新，但上面的一个事件都没有触发。

最後是 Runner 的停止方式：

Runner.stop(runner, engine);

运行这行指令就会让 Runner 的回圈停止，因为是回圈停止，实际上 Engine 只是没有被触发更新而已，所以当你再次跑 Runner.run 的时候，会发现画面一样是从停止的位置开始更新，而不是重置画面，因为实际的画面里面的状态是 Engine 在管的， Runner 负责的是时间的流动而已。

恭喜你，我们一起走到了第五天，我们已经认识了这个世界的显示与运行，我们差不多可以进入我们的正题了 ─ 建构世界了。