extra-game-loop 0.3.5 → 0.3.6

package/README.md

@@ -53,3 +53,27 @@ class GameLoop<FixedDeltaTime extends number = number> {
   nextFrame(deltaTime: number): void
 }
 ```
+
+### GameLoopLite
+```ts
+class GameLoopLite {
+  constructor(options: {
+    update?: (deltaTime: number /* ms */) => void
+    render?: () => void
+  })
+
+  start(): void
+  stop(): void
+  getFramesOfSecond(): number
+
+  /**
+   * This method allows you to manually advance to the next frame.
+   */
+  nextFrame(deltaTime: number): void
+}
+```
+
+The lite version of `GameLoop` for situations where the physics system is not needed.
+
+Basically, it can be seen as an OOP wrapper for `requestAnimationFrame`,
+so it can be used for non-game projects as well.

package/lib/game-loop-lite.d.ts

@@ -0,0 +1,19 @@
+interface IGameLoopLiteOptions {
+    update?: (deltaTime: number) => void;
+    render?: () => void;
+}
+export declare class GameLoopLite {
+    private readonly fsm;
+    private readonly update?;
+    private readonly render?;
+    private requstId?;
+    private lastTimestamp?;
+    private lastDeltaTime;
+    constructor(options: IGameLoopLiteOptions);
+    start(): void;
+    stop(): void;
+    getFramesOfSecond(): number;
+    private loop;
+    nextFrame(deltaTime: number): void;
+}
+export {};

package/lib/game-loop-lite.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GameLoopLite = void 0;
+const extra_fsm_1 = require("extra-fsm");
+var State;
+(function (State) {
+    State["Stopped"] = "stopped";
+    State["Running"] = "running";
+})(State || (State = {}));
+const schema = {
+    [State.Stopped]: { start: State.Running },
+    [State.Running]: { stop: State.Stopped }
+};
+class GameLoopLite {
+    constructor(options) {
+        this.fsm = new extra_fsm_1.FiniteStateMachine(schema, State.Stopped);
+        this.lastDeltaTime = 0;
+        this.loop = () => {
+            const timestamp = performance.now();
+            const deltaTime = timestamp - this.lastTimestamp;
+            this.lastDeltaTime = deltaTime;
+            this.lastTimestamp = timestamp;
+            this.nextFrame(deltaTime);
+            this.requstId = requestAnimationFrame(this.loop);
+        };
+        this.update = options.update;
+        this.render = options.render;
+    }
+    start() {
+        this.fsm.send('start');
+        this.lastTimestamp = performance.now();
+        this.loop();
+    }
+    stop() {
+        this.fsm.send('stop');
+        cancelAnimationFrame(this.requstId);
+        delete this.requstId;
+        delete this.lastTimestamp;
+        this.lastDeltaTime = 0;
+    }
+    getFramesOfSecond() {
+        if (this.fsm.matches(State.Running)) {
+            return this.lastDeltaTime !== 0
+                ? 1000 / this.lastDeltaTime
+                : 0;
+        }
+        else {
+            return 0;
+        }
+    }
+    nextFrame(deltaTime) {
+        var _a, _b;
+        (_a = this.update) === null || _a === void 0 ? void 0 : _a.call(this, deltaTime);
+        (_b = this.render) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
+}
+exports.GameLoopLite = GameLoopLite;
+//# sourceMappingURL=game-loop-lite.js.map

package/lib/game-loop-lite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"game-loop-lite.js","sourceRoot":"","sources":["../src/game-loop-lite.ts"],"names":[],"mappings":";;;AAAA,yCAAyE;AAczE,IAAK,KAGJ;AAHD,WAAK,KAAK;IACR,4BAAmB,CAAA;IACnB,4BAAmB,CAAA;AACrB,CAAC,EAHI,KAAK,KAAL,KAAK,QAGT;AAMD,MAAM,MAAM,GAA4C;IACtD,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE;IACzC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,EAAE;CACzC,CAAA;AAED,MAAa,YAAY;IAQvB,YAAY,OAA6B;QAPxB,QAAG,GAAG,IAAI,8BAAkB,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;QAK5D,kBAAa,GAAG,CAAC,CAAA;QAkCjB,SAAI,GAAG,GAAS,EAAE;YAIxB,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;YACnC,MAAM,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC,aAAc,CAAA;YACjD,IAAI,CAAC,aAAa,GAAG,SAAS,CAAA;YAC9B,IAAI,CAAC,aAAa,GAAG,SAAS,CAAA;YAE9B,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;YAEzB,IAAI,CAAC,QAAQ,GAAG,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAClD,CAAC,CAAA;QA3CC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAA;QAC5B,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAA;IAC9B,CAAC;IAED,KAAK;QACH,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAEtB,IAAI,CAAC,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;QACtC,IAAI,CAAC,IAAI,EAAE,CAAA;IACb,CAAC;IAED,IAAI;QACF,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAErB,oBAAoB,CAAC,IAAI,CAAC,QAAS,CAAC,CAAA;QAEpC,OAAO,IAAI,CAAC,QAAQ,CAAA;QACpB,OAAO,IAAI,CAAC,aAAa,CAAA;QACzB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAA;IACxB,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;YACnC,OAAO,IAAI,CAAC,aAAa,KAAK,CAAC;gBAC1B,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa;gBAC3B,CAAC,CAAC,CAAC,CAAA;SACT;aAAM;YACL,OAAO,CAAC,CAAA;SACT;IACH,CAAC;IAgBD,SAAS,CAAC,SAAiB;;QACzB,MAAA,IAAI,CAAC,MAAM,qDAAG,SAAS,CAAC,CAAA;QAExB,MAAA,IAAI,CAAC,MAAM,oDAAI,CAAA;IACjB,CAAC;CACF;AA3DD,oCA2DC"}

package/lib/index.d.ts

@@ -1 +1,2 @@
 export * from './game-loop';
+export * from './game-loop-lite';

package/lib/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./game-loop"), exports);
+__exportStar(require("./game-loop-lite"), exports);
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA2B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA2B;AAC3B,mDAAgC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-game-loop",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "",
   "keywords": [],
   "files": [

package/src/game-loop-lite.ts

@@ -0,0 +1,88 @@
+import { FiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm'
+
+interface IGameLoopLiteOptions {
+  /**
+   * 每帧运行一次, 总是最早运行.
+   */
+  update?: (deltaTime: number) => void
+
+  /**
+   * 每帧运行一次, 总是最晚运行.
+   */
+  render?: () => void
+}
+
+enum State {
+  Stopped = 'stopped'
+, Running = 'running'
+}
+
+type Event =
+| 'start'
+| 'stop'
+
+const schema: IFiniteStateMachineSchema<State, Event> = {
+  [State.Stopped]: { start: State.Running }
+, [State.Running]: { stop: State.Stopped }
+}
+
+export class GameLoopLite {
+  private readonly fsm = new FiniteStateMachine(schema, State.Stopped)
+  private readonly update?: (deltaTime: number) => void
+  private readonly render?: () => void
+  private requstId?: number
+  private lastTimestamp?: number
+  private lastDeltaTime = 0
+
+  constructor(options: IGameLoopLiteOptions) {
+    this.update = options.update
+    this.render = options.render
+  }
+
+  start(): void {
+    this.fsm.send('start')
+
+    this.lastTimestamp = performance.now()
+    this.loop()
+  }
+
+  stop(): void {
+    this.fsm.send('stop')
+
+    cancelAnimationFrame(this.requstId!)
+
+    delete this.requstId
+    delete this.lastTimestamp
+    this.lastDeltaTime = 0
+  }
+
+  getFramesOfSecond(): number {
+    if (this.fsm.matches(State.Running)) {
+      return this.lastDeltaTime !== 0
+           ? 1000 / this.lastDeltaTime
+           : 0
+    } else {
+      return 0
+    }
+  }
+
+  private loop = (): void => {
+    // requestAnimationFrame的实现存在陷阱, 它提供的timestamp参数有时会比`performance.now()`早.
+    // 因此主动调用`performance.now()`来获取时间戳.
+    // https://stackoverflow.com/questions/50895206/exact-time-of-display-requestanimationframe-usage-and-timeline
+    const timestamp = performance.now()
+    const deltaTime = timestamp - this.lastTimestamp!
+    this.lastDeltaTime = deltaTime
+    this.lastTimestamp = timestamp
+
+    this.nextFrame(deltaTime)
+
+    this.requstId = requestAnimationFrame(this.loop)
+  }
+
+  nextFrame(deltaTime: number): void {
+    this.update?.(deltaTime)
+
+    this.render?.()
+  }
+}

package/src/game-loop.ts

@@ -15,7 +15,7 @@ interface IGameLoopOptions<FixedDeltaTime extends number = number> {
   maximumDeltaTime: number
 
   /**
-   * 每帧运行一次, 运行早于fixedUpdate.
+   * 每帧运行一次, 总是最早运行.
    * 在此处理用户输入等与物理计算无关的操作, 在update里改变的状态直到下一物理帧时才会反应.
    */
   update?: (deltaTime: number) => void
@@ -34,7 +34,7 @@ interface IGameLoopOptions<FixedDeltaTime extends number = number> {
   lateUpdate?: (deltaTime: number, alpha: number) => void
 
   /**
-   * 每帧运行一次, 总是运行在fixedUpdate和udpate之后.
+   * 每帧运行一次, 总是最晚运行.
    */
   render?: (alpha: number) => void
 }
@@ -122,7 +122,7 @@ export class GameLoop<FixedDeltaTime extends number> {
   }
 
   /**
-   * nextFrameUpdateFirst依序做以下几件事:
+   * nextFrame依序做以下几件事:
    * 1. 响应用户输入, 为这一帧的游戏世界做出非物理方面的更新, 例如角色转向, 改变武器瞄准角度等.
    * 2. 响应游戏世界从上一帧更新后到这一帧更新之前发生的物理变化.
    *    注意, 如果渲染帧率比物理帧率快, 且运行性能良好, 则物理帧不一定会在此帧更新.

package/src/index.ts

@@ -1 +1,2 @@
 export * from './game-loop'
+export * from './game-loop-lite'