Matter.js中的Runner详细解析

本文最后更新于:2 个月前

Matter.Runner模块是一个可选的游戏循环,它在浏览器中给你一个可以自动更新Matter.Engine的工具。它是为了开发和调试而设计的,也可以用于简单的游戏。如果你使用自己的游戏循环,那么你不需要Matter.Runner模块。直接在你的循环中调用**Engine.update(engine, delta)**即可。

查看使用例程

使用方法

一个自写的基础Runner例程

1
2
3
4
(function run() {
window.requestAnimationFrame(run);
Engine.update(engine, 1000 / 60);
})();

当使用node时,可以使用setInterval代替window.requestAnimationFrame

1
2
3
setInterval(function() {
Engine.update(engine, 1000 / 60);
}, 1000 / 60);

使用系统提供的Matter.Runner

Matter.js已经提供了一个默认的Runner,可以直接使用,他就是Matter.Runner。它是一个可选的游戏循环,在浏览器中给你一个可以自动更新Matter.Engine的工具。它是为了开发和调试而设计的,也可以用于简单的游戏。
查看文档

用法

最简单的用法

1
2
var engine = Engine.create();
Runner.run(engine);

同样你也可以用下面的方式写,将Runner申明在最前面

1
2
3
var engine = Engine.create();
var runner = Runner.create();
Runner.run(runner, engine);

create的选项有很多参数,那些将在后面说明。

方法

create

Matter.Runner.create(options)

创建一个新的Runner。options参数是一个对象,它指定你想重写默认值的任何属性。

参数

名称 类型
options Object

run

Matter.Runner.run(engine)

通过requestAnimationFrame递归调用render函数,连续不断的调用Matter.Runner.tick,更新Matter.Engine,。

参数

名称 类型
engine Engine

start

Matter.Runner.start(runner, engine)

Runner.run起一个别名,可用一个变量来接收这个返回值,例如,

1
var runner = Runner.start(runner,engine);

参数

名称 类型
runner Runner
engine Engine

stop

Matter.Runner.stop(runner)

通过取消动画帧请求事件循环,结束Runner.run的执行。如果你只想暂停一段时间,可以使用engine.enabled代替。

参数

名称 类型
runner Runner

tick

Matter.Runner.tick(runner, engine, time)

一个游戏循环工具,它更新引擎和渲染器一步(一个“tick”)。功能包括平滑的时间差调整,时间校正和固定或动态时间。如果你使用的是自己的循环,直接调用Engine.update(engine, delta)

参数

名称 类型
runner Runner
engine Engine
time Number

属性/选项

下面的属性/选项是由Matter.Runner.create创建的对象指定的,可以作为参数传递给它。

options

1
2
3
4
5
6
7
8
9
10
11
12
13
var options = {
fps: 60,
correction: 1,
deltaSampleSize: 60,
counterTimestamp: 0,
frameCounter: 0,
deltaHistory: [],
timePrev: null,
timeScalePrev: 1,
frameRequestId: null,
isFixed: false,
enabled: true
};

delta

runner.delta Number

指定每次更新的时间间隔(以毫秒为单位)。如果engine.timing.isFixed设置为true,那么delta是固定的。如果它是false,那么delta可以动态地改变以保持正确的显示模拟速度。
默认值: 1000 / 60


enabled

runner.enabled Boolean

指定runner是否正在运行的标志


isFixed

runner.isFixed Boolean

一个布尔值,指定是否使用固定的时间间隔(否则是可变的)。如果时间是固定的,那么显示模拟速度会受到帧率的影响(但行为将是确定的)。如果时间是可变的,那么显示模拟速度将是稳定的(大约,但是仍然有确定性)。
默认值: false

事件

下面的事件是由Matter.Runner.create创建的对象触发的,并且由订阅了Matter.Events.on的对象接收。

afterTick

Events.on(runner, “afterTick”, callback)

在engine更新和渲染之后触发,即每一次tick的结尾执行。

回调参数[callback]

名称 类型
event Object

event

一个事件对象

名称 类型 说明
timestamp Number 事件触发的时间戳
source Object 事件源对象
name String 事件的名称

afterUpdate

Events.on(runner, “afterUpdate”, callback)

在update之后触发

回调参数[callback]

名称 类型
event Object

event

一个事件对象

名称 类型 说明
timestamp Number 事件触发的时间戳
source Object 事件源对象
name String 事件的名称

beforeTick

Events.on(runner, “beforeTick”, callback)

在一个tick的开始触发,在任何updates引擎或timing之前

回调参数[callback]

名称 类型
event Object

event

一个事件对象

名称 类型 说明
timestamp Number 事件触发的时间戳
source Object 事件源对象
name String 事件的名称

beforeUpdate

Events.on(runner, “beforeUpdate”, callback)

在update之前触发

回调参数[callback]

名称 类型
event Object

event

一个事件对象

名称 类型 说明
timestamp Number 事件触发的时间戳
source Object 事件源对象
name String 事件的名称

tick

Events.on(runner, “tick”, callback)

在engine更新之后触发,但是在update之前

回调参数[callback]

名称 类型
event Object

event

一个事件对象

名称 类型 说明
timestamp Number 事件触发的时间戳
source Object 事件源对象
name String 事件的名称


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!