typescript Matter.js将www.example.com更改为其他世界后无冲突Engine.world

ddrv8njm  于 2023-03-04  发布在  TypeScript
关注(0)|答案(1)|浏览(133)

所以我在做一个游戏,决定做一个可切换的游戏场景。我有一个Matter. Engine的例子,我在这里切换世界参数到当前场景的世界参数。
在类"App"中,它看起来像这样。

constructor() {
  App.Engine = Matter.Engine.create();
  Matter.Runner.run(App.Engine);
}
public static switchScene(sceneId: string): void {
        this._currentScene = this._scenes.find((scene) => scene.name == sceneId);
        App.Engine.world = this._currentScene.world;
}

在Scene类中

this.world = Matter.World.create({} as IWorldDefinition);

CodePen example

uqcuzwp8

uqcuzwp81#

engine.world = scenes[sceneIndex].world;是一个很好的尝试,但即使这是一个公共属性,我还没有见过直接设置它之前。它似乎是绕过API和破坏引擎的状态。请随时纠正我,如果我发现更多的确定性信息,我会更新这一点。
与此同时,如果您的设计支持它,我建议使用类似MJS demo page的方法,并为每个场景提供自己的引擎,还可能提供渲染器和画布(渲染器和运行器是用于演示的,所以你可能有一个uses MJS headlessly的自定义渲染解决方案)。每当你改变到一个不同的场景时,演示会重置每个场景的状态,但是您可以使用runner.enabled暂停场景并重新启动它,如下所示,或者如果您正在无头运行,则可以在Matter.Engine.update(engine);调用中特定于场景的不同engine对象之间切换(或者使用其自己的update调用和engine暂停/恢复单独的动画循环)。

const sceneEl = document.querySelector("#scenes");
const makeScene = () => {
  const engine = Matter.Engine.create();
  const el = document.createElement("div");
  el.style.display = "none";
  sceneEl.appendChild(el);
  const runner = Matter.Runner.create();
  const render = Matter.Render.create({
    element: el,
    engine,
    options: {height: 180, width: 400, wireframes: false}
  });
  Matter.Runner.start(runner, engine);
  runner.enabled = false;
  const run = () => {
    el.style.display = "block";
    runner.enabled = true;
    Matter.Render.run(render);
  };
  const stop = () => {
    el.style.display = "none";
    runner.enabled = false;
    Matter.Render.stop(render);
  };
  const clearBodies = () =>
    Matter.Composite.clear(engine.world)
  ;
  const addBodies = () => {
    const fillStyle = `hsl(${Math.random() * 360}, 80%, 30%)`;
    Matter.Composite.add(engine.world, [
      Matter.Bodies.rectangle(
        200, 200, 400, 60, {
          isStatic: true,
          angle: 0,
        }, 
      ),
      ...Array(50).fill().map(() =>
        Matter.Bodies.rectangle(
          Math.random() * 400, 0,
          Math.random() * 30 + 10,
          Math.random() * 30 + 10, {
            frictionAir: 0.7,
            render: {
              fillStyle,
              strokeStyle: "white",
              lineWidth: 3
            },
          }
        )
      ),
    ]);
  };
  addBodies();
  return {addBodies, clearBodies, run, stop};
};
const scenes = [...Array(3)].map(makeScene);
document.querySelector("#current-scene")
  .textContent = `Scene 1 of ${scenes.length}`
;
let currentScene = 0;
scenes[currentScene].run();
document
  .querySelector("#randomize-scene")
  .addEventListener("click", () => {
    scenes[currentScene].clearBodies();
    scenes[currentScene].addBodies();
  })
;
document
  .querySelector("#next-scene")
  .addEventListener("click", () => {
    scenes[currentScene].stop();
    currentScene = (currentScene + 1) % scenes.length;
    scenes[currentScene].run();
    document.querySelector("#current-scene")
      .textContent = `Scene ${1 + currentScene} of ${scenes.length}`
    ;
  })
;
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
<div>
  <span id="current-scene">loading...</span>
  <button id="next-scene">Next scene</button>
  <button id="randomize-scene">Randomize scene</button>
</div>
<div id="scenes"></div>

相关问题