Day14. 时光时光慢些吧，让世界慢下来 - TimeScale

昨天看到运镜这词，大家是不是会想到拍电影呢？今天的主题也是跟电影有关的(?)，大家看电影的时候，遇到紧要关头的时候，有时候会有种整个世界时间都慢下来的特效，又称作子弹时间，或是当我们在遇到回忆场景的时候，可能会带到加速的手法来闪过几个重要段落 ─ 这些手法，就像操控了时间的流动，没错，我们今天就要来看，怎麽操控 Matter.js 世界中的时间。

今天的Demo
今天的Demo原始码

其实说难不难，这个属性就藏在 engine的模组里。

engine 模组里有一个 timing 的属性，timimg 属性主要记录整个世界中跟时间相关的变数，如最後更新的时间、拿取时间戳记等等。

总共有下列这些属性

• engine.timing.lastDelta
• engine.timing.lastElapsed
• engine.timing.timestamp
• engine.timing.timeScale

没错，聪明如各位读者，上面列表中的最後一个就是我们的重点属性了： timeScale。

其他几个属性我们一样在画面上列印给各位读者看，按下 Update Time Display 按钮时就会把画面上显示这几个属性的资料更新。

我们准备一个按钮让大家 reset 形状的位置，如果试验 timeScale 的时候可以反覆地让形状坠落观察变化。

我们实际操纵 timeScale 会像下面这段代码：

engine.timing.timeScale = 1.5;
engine.timing.timeScale = 0.5;

基准时间是 1 。

大於 1 表示让加速时间流逝，小於 1 表示减慢时间流逝。

今天的 Input field 跟昨天一样，是输入後就会呼叫 onchange 来改变对应的数值。

读者可以改动这个数值，减慢的会比较明显。

除了 TimeScale 之外，我们稍微看一下我们 Reset的实作

function resetTheRect()
{
    BodyM.setPosition(boxA,{x:400,y:200});
    BodyM.setPosition(boxB,{x:450,y:50});
    BodyM.setVelocity(boxA,{x:0,y:0});
    BodyM.setVelocity(boxB,{x:0,y:0});
    BodyM.setAngularVelocity(boxA, 0);
    BodyM.setAngularVelocity(boxB, 0);
}

我们一共针对三个属性做了操作：位置、速度、角速度。

要注意重置位置的时候其实施加在物体本身的力量其实还在，所以当物体速度没有归零，那你重置的其实并不完全，会看到物体咻一下的就往下喷去，这是一个有时候会被遗忘的小眉角，跟大家提一下。

最後稍微提下我们这次作画面显示更新的逻辑，我们用的事件是这个：

Events.on(engine, "afterUpdate", frameUpdated);

他会在每次engine资讯更新时触发这个事件，所以可以发现如果 timeScale 被调整了，LastDelta 也会有影响，因为engine每次更新的间段就被改变了。

同时，为了避免画面更新太频繁会眼花撩乱，我们有做一个 frameCount，累计每次 10 个 frame 才会做一次更新。

今天的内容带大家看了一下 engine 模组中几个 timing 相关属性，重置物体的逻辑实作还有 frame update的事件使用，明天，我们会用这两天的内容，来帮我们的弹珠台，更近一步。