feat: re-implement game loop in World and expose hooks as EE (#168)

Author: fraxken

.changeset/jolly-bushes-find.md

@@ -0,0 +1,6 @@
+---
+"@jolly-pixel/runtime": minor
+"@jolly-pixel/engine": minor
+---
+
+Re-implement part of the game loop into World and expose hooks as EE

packages/engine/README.md

@@ -66,7 +66,7 @@ import { Systems, Actor } from "@jolly-pixel/engine";
 
 const sceneManager = new Systems.SceneManager();
 const renderer = new Systems.ThreeRenderer(canvas, {
-  scene: sceneManager,
+  sceneManager,
   renderMode: "direct"
 });
 const game = new Systems.World(renderer, {

packages/engine/docs/systems/world.md

@@ -21,7 +21,7 @@ import {
 
 const canvas = document.querySelector("canvas")!;
 const sceneManager = new SceneManager();
-const renderer = new ThreeRenderer(canvas, { scene: sceneManager });
+const renderer = new ThreeRenderer(canvas, { sceneManager });
 
 const game = new World(renderer, { sceneManager });
 ```

packages/engine/src/systems/World.ts

@@ -1,5 +1,6 @@
 // Import Third-party Dependencies
 import * as THREE from "three";
+import { EventEmitter } from "@posva/event-emitter";
 
 // Import Internal Dependencies
 import {
@@ -18,6 +19,14 @@ import {
   type GlobalsAdapter,
   BrowserGlobalsAdapter
 } from "../adapters/global.ts";
+import { FixedTimeStep } from "./FixedTimeStep.ts";
+
+export type WorldEvents = {
+  beforeFixedUpdate: [number];
+  afterFixedUpdate: [number];
+  beforeUpdate: [number];
+  afterUpdate: [number];
+};
 
 export interface WorldOptions<
   TContext = WorldDefaultContext
@@ -39,18 +48,21 @@ export interface WorldDefaultContext {
 export class World<
   T = THREE.WebGLRenderer,
   TContext = WorldDefaultContext
-> {
+> extends EventEmitter<WorldEvents> {
   renderer: Renderer<T>;
   input: Input;
   loadingManager: THREE.LoadingManager = new THREE.LoadingManager();
   sceneManager: SceneContract;
   audio: GlobalAudio;
   context: TContext;
+  loop: FixedTimeStep;
 
   constructor(
     renderer: Renderer<T>,
     options: WorldOptions<TContext>
   ) {
+    super();
+
     const {
       sceneManager,
       input = new Input(renderer.canvas, { enableOnExit: options.enableOnExit ?? false }),
@@ -64,6 +76,7 @@ export class World<
     this.input = input;
     this.audio = audio;
     this.context = context;
+    this.loop = new FixedTimeStep();
 
     globalsAdapter.setGame(this);
   }
@@ -101,24 +114,54 @@ export class World<
     return this;
   }
 
-  beginFrame() {
-    this.input.update();
-    this.sceneManager.beginFrame();
+  start() {
+    this.loop.start();
+
+    return this;
   }
 
-  fixedUpdate(
-    deltaTime: number
-  ) {
-    this.sceneManager.fixedUpdate(deltaTime);
+  stop() {
+    this.loop.stop();
+
+    return this;
   }
 
-  update(
-    deltaTime: number
+  setFps(
+    fps: number,
+    fixedFps?: number
   ) {
-    this.sceneManager.update(deltaTime);
+    this.loop.setFps(fps, fixedFps);
+
+    return this;
+  }
+
+  tick() {
+    this.#beginFrame();
+    this.loop.tick({
+      fixedUpdate: (fixedDelta) => {
+        const dt = fixedDelta / 1000;
+        this.emit("beforeFixedUpdate", dt);
+        this.sceneManager.fixedUpdate(dt);
+        this.emit("afterFixedUpdate", dt);
+      },
+      update: (_interpolation, delta) => {
+        const dt = delta / 1000;
+        this.emit("beforeUpdate", dt);
+        this.sceneManager.update(dt);
+        this.renderer.draw();
+        this.emit("afterUpdate", dt);
+      }
+    });
+
+    return this.#endFrame();
   }
 
-  endFrame(): boolean {
+  #beginFrame() {
+    this.input.update();
+    this.sceneManager.beginFrame();
+  }
+
+  #endFrame(): boolean {
     this.sceneManager.endFrame();
 
     if (this.input.exited) {
@@ -129,8 +172,4 @@ export class World<
 
     return false;
   }
-
-  render() {
-    this.renderer.draw();
-  }
 }

packages/engine/src/systems/rendering/ThreeRenderer.ts

@@ -25,7 +25,7 @@ export interface ThreeRendererOptions {
    * @default "direct"
    */
   renderMode: RenderMode;
-  scene: SceneContract;
+  sceneManager: SceneContract;
 }
 
 export class ThreeRenderer extends EventEmitter<
@@ -35,7 +35,7 @@ export class ThreeRenderer extends EventEmitter<
   renderComponents: RenderComponent[] = [];
   renderStrategy: RenderStrategy;
   ratio: number | null = null;
-  scene: SceneContract;
+  sceneManager: SceneContract;
 
   #resizeObserver: ResizeObserver | null = null;
   #pendingResizeWidth = 0;
@@ -47,9 +47,9 @@ export class ThreeRenderer extends EventEmitter<
     options: ThreeRendererOptions
   ) {
     super();
-    const { scene, renderMode = "direct" } = options;
+    const { sceneManager, renderMode = "direct" } = options;
 
-    this.scene = scene;
+    this.sceneManager = sceneManager;
     this.webGLRenderer = createWebGLRenderer(canvas);
     this.setRenderMode(renderMode);
   }
@@ -67,7 +67,7 @@ export class ThreeRenderer extends EventEmitter<
   ): void {
     this.renderComponents.push(component);
     if (this.renderStrategy instanceof ComposerRenderStrategy) {
-      const renderPass = new RenderPass(this.scene.getSource(), component);
+      const renderPass = new RenderPass(this.sceneManager.getSource(), component);
       this.renderStrategy.addEffect(renderPass);
     }
   }
@@ -98,7 +98,7 @@ export class ThreeRenderer extends EventEmitter<
     else {
       const composer = new EffectComposer(this.webGLRenderer);
 
-      const scene = this.scene.getSource();
+      const scene = this.sceneManager.getSource();
       for (const renderComponent of this.renderComponents) {
         const renderPass = new RenderPass(scene, renderComponent);
         composer.addPass(renderPass);
@@ -213,7 +213,7 @@ export class ThreeRenderer extends EventEmitter<
     this.clear();
 
     this.renderStrategy.render(
-      this.scene.getSource(),
+      this.sceneManager.getSource(),
       this.renderComponents
     );
     this.emit("draw", { source: this.webGLRenderer });