kiwiengine 0.0.1-alpha

package/src/utils/debug.ts

@@ -0,0 +1,5 @@
+export let debugMode = false;
+
+export function enableDebug() {
+  debugMode = true;
+}

package/src/utils/go.ts

@@ -0,0 +1,53 @@
+import { AnimatedSpriteObject } from '../game-object-ext/animated-sprite';
+import { DomContainerObject } from '../game-object-ext/dom-container';
+import { RectangleObject } from '../game-object-ext/rect';
+import { SpineObject } from '../game-object-ext/spine';
+import { SpriteObject } from '../game-object-ext/sprite';
+import { TextObject } from '../game-object-ext/text';
+import { TilingSpriteObject } from '../game-object-ext/tiling-sprite';
+import { GameObject } from '../game-object/game-object';
+
+const GameObjectClassMap = {
+  'go': GameObject,
+  'sprite': SpriteObject,
+  'animated-sprite': AnimatedSpriteObject,
+  'tiling-sprite': TilingSpriteObject,
+  'spine': SpineObject,
+  'dom': DomContainerObject,
+  'text': TextObject,
+  'rect': RectangleObject,
+} as const;
+
+type GameObjectNameMap = {
+  [K in keyof typeof GameObjectClassMap]: InstanceType<(typeof GameObjectClassMap)[K]>;
+};
+
+type Name = '' | keyof GameObjectNameMap;
+
+type GameObjectByName<T extends Name> = (
+  T extends '' ? GameObject
+  : (
+    T extends keyof GameObjectNameMap ? GameObjectNameMap[T]
+    : GameObject
+  )
+);
+
+function go<T extends Name>(
+  name: T = '' as T,
+  ...args: (GameObjectByName<T> | Partial<GameObjectByName<T>>)[]
+): GameObjectByName<T> {
+  const go = new GameObjectClassMap[(name || 'go') as keyof GameObjectNameMap]();
+
+  for (const arg of args) {
+    if (arg instanceof GameObject) go.add(arg);
+    else if (arg) {
+      for (const key in arg) {
+        (go as any)[key] = arg[key];
+      }
+    }
+  }
+
+  return go as GameObjectByName<T>;
+}
+
+export { go };

package/src/world/world-debug.ts

@@ -0,0 +1,114 @@
+import Matter from 'matter-js';
+import Stats from 'stats.js';
+import { debugMode } from '../utils/debug';
+
+export class WorldDebug {
+  #container: HTMLElement;
+  #stats?: Stats;
+  #matterDebugRenderer?: Matter.Render;
+
+  constructor(container: HTMLElement) {
+    this.#container = container;
+
+    if (debugMode) {
+      const stats = new Stats();
+      stats.dom.style.position = 'absolute';
+      stats.showPanel(0);
+      container.appendChild(stats.dom);
+      this.#stats = stats;
+    }
+  }
+
+  update() {
+    this.#stats?.update();
+  }
+
+  createMatterDebugRenderer(engine: Matter.Engine, width: number, height: number) {
+    if (debugMode) {
+      const matterDebugRenderer = Matter.Render.create({
+        element: this.#container,
+        engine,
+        options: {
+          width,
+          height,
+          background: 'transparent',
+          wireframes: false,
+          showCollisions: true,
+          pixelRatio: window.devicePixelRatio,
+        },
+      });
+      this.#matterDebugRenderer = matterDebugRenderer;
+
+      const debugCanvas = matterDebugRenderer.canvas;
+      debugCanvas.style.position = 'absolute';
+      debugCanvas.style.zIndex = '1';
+      debugCanvas.style.touchAction = 'auto';
+      Matter.Render.run(matterDebugRenderer);
+
+      if (this.#lastRect) this.setMatterDebugRendererSize(this.#lastRect, this.#lastWidth, this.#lastHeight, this.#lastCameraX, this.#lastCameraY);
+    }
+  }
+
+  #lastRect?: DOMRectReadOnly;
+  #lastWidth = 0;
+  #lastHeight = 0;
+  #lastCameraX = 0;
+  #lastCameraY = 0;
+
+  setMatterDebugRendererSize(
+    rect: DOMRectReadOnly,
+    width: number,
+    height: number,
+    cameraX: number,
+    cameraY: number,
+  ) {
+    this.#lastRect = rect;
+    this.#lastWidth = width;
+    this.#lastHeight = height;
+    this.#lastCameraX = cameraX;
+    this.#lastCameraY = cameraY;
+
+    if (!debugMode || !this.#matterDebugRenderer) return;
+
+    const r = this.#matterDebugRenderer;
+    const pr = window.devicePixelRatio || 1;
+
+    r.options.width = width;
+    r.options.height = height;
+
+    r.canvas.width = Math.max(1, Math.floor(width * pr));
+    r.canvas.height = Math.max(1, Math.floor(height * pr));
+
+    const scale = Math.min(rect.width / width, rect.height / height);
+
+    const displayW = width * scale;
+    const displayH = height * scale;
+
+    const left = (rect.width - displayW) / 2;
+    const top = (rect.height - displayH) / 2;
+
+    r.canvas.style.width = `${displayW}px`;
+    r.canvas.style.height = `${displayH}px`;
+    r.canvas.style.left = `${left}px`;
+    r.canvas.style.top = `${top}px`;
+
+    this.setMatterDebugRendererCamera(cameraX, cameraY);
+  }
+
+  setMatterDebugRendererCamera(cameraX: number, cameraY: number) {
+    if (this.#matterDebugRenderer) {
+      const r = this.#matterDebugRenderer;
+      const halfW = this.#lastWidth / 2;
+      const halfH = this.#lastHeight / 2;
+
+      r.bounds.min.x = cameraX - halfW;
+      r.bounds.min.y = cameraY - halfH;
+      r.bounds.max.x = cameraX + halfW;
+      r.bounds.max.y = cameraY + halfH;
+
+      Matter.Render.lookAt(r, r.bounds);
+    }
+  }
+
+  destroy() { }
+}

package/src/world/world-physics.ts

@@ -0,0 +1,52 @@
+import { EventEmitter } from '@webtaku/event-emitter';
+import Matter from 'matter-js';
+import { GameObject } from '../game-object/game-object';
+
+export class WorldPhysics extends EventEmitter<{
+  engineCreated: (engine: Matter.Engine) => void;
+  collisionStart: (a: GameObject, b: GameObject) => void;
+}> {
+  #engine?: Matter.Engine;
+  #gravity = 0;
+
+  get gravity() { return this.#gravity; }
+  set gravity(v: number) {
+    this.#gravity = v;
+    if (this.#engine) this.#engine.gravity.y = v;
+  }
+
+  #createEngine() {
+    this.#engine = Matter.Engine.create();
+    this.#engine.gravity.y = this.#gravity;
+
+    Matter.Events.on(this.#engine, 'collisionStart', (event) => {
+      event.pairs.forEach((pair) => {
+        const { bodyA, bodyB } = pair;
+        this.emit('collisionStart', bodyA.plugin.owner, bodyB.plugin.owner);
+      });
+    });
+
+    this.emit('engineCreated', this.#engine);
+  }
+
+  addBody(body: Matter.Body) {
+    if (!this.#engine) this.#createEngine();
+    Matter.World.add(this.#engine!.world, body);
+  }
+
+  removeBody(body: Matter.Body) {
+    if (!this.#engine) return;
+    Matter.World.remove(this.#engine!.world, body);
+  }
+
+  update(dt: number) {
+    if (!this.#engine) return;
+    const matterDt = dt * 1000;
+    Matter.Engine.update(this.#engine, matterDt > 16.666 ? 16.666 : matterDt);
+  }
+
+  destroy() {
+    if (this.#engine) Matter.Engine.clear(this.#engine);
+    this.#engine = undefined;
+  }
+}

package/src/world/world-rendering.ts

@@ -0,0 +1,145 @@
+import { autoDetectRenderer, Container, EventEmitter, Renderer, Sprite } from "pixi.js";
+import { textureLoader } from '../asset/loaders/texture';
+
+export class WorldRendering extends EventEmitter<{
+  positionChanged: () => void;
+}> {
+  #renderer?: Renderer;
+  #root = new Container();
+  #backgroundAlpha = 1;
+
+  #cameraX = 0;
+  #cameraY = 0;
+
+  centerX = 0;
+  centerY = 0;
+  renderWidth = 0;
+  renderHeight = 0;
+  renderScale = 1;
+  canvasLeft = 0;
+  canvasTop = 0;
+
+  #backgroundColor = 0x304C79;
+  get backgroundColor() { return this.#backgroundColor; }
+  set backgroundColor(v: number) {
+    this.#backgroundColor = v;
+    if (this.#renderer) this.#renderer.background.color = v;
+  }
+
+  get backgroundAlpha() { return this.#backgroundAlpha; }
+  set backgroundAlpha(v: number) {
+    this.#backgroundAlpha = v;
+    if (this.#renderer) this.#renderer.background.alpha = v;
+  }
+
+  async init(container: HTMLElement, width: number | undefined, height: number | undefined) {
+    const renderer = await autoDetectRenderer({
+      width,
+      height,
+      backgroundColor: this.#backgroundColor,
+      backgroundAlpha: this.#backgroundAlpha,
+      eventMode: 'none',
+      resolution: window.devicePixelRatio,
+    });
+    this.#renderer = renderer;
+
+    const canvas = renderer.canvas;
+    canvas.style.position = 'absolute';
+    canvas.style.touchAction = 'auto';
+    canvas.style.borderRadius = container.style.borderRadius;
+    container.appendChild(canvas);
+
+    if (this.#lastRect) this.setRendererSize(this.#lastRect, this.#lastWidth, this.#lastHeight);
+  }
+
+  #applyPosition() {
+    this.#root.x = this.centerX - this.#cameraX;
+    this.#root.y = this.centerY - this.#cameraY;
+
+    if (this.#backgroundSprite) {
+      this.#backgroundSprite.x = this.#cameraX;
+      this.#backgroundSprite.y = this.#cameraY;
+    }
+
+    this.emit('positionChanged');
+  }
+
+  #lastRect?: DOMRect;
+  #lastWidth = 0;
+  #lastHeight = 0;
+
+  setRendererSize(rect: DOMRect, width: number, height: number) {
+    this.#lastRect = rect;
+    this.#lastWidth = width;
+    this.#lastHeight = height;
+
+    this.centerX = width / 2;
+    this.centerY = height / 2;
+    this.#applyPosition();
+
+    this.renderWidth = width;
+    this.renderHeight = height;
+
+    const scale = Math.min(rect.width / width, rect.height / height);
+    this.renderScale = scale;
+
+    const displayW = width * scale;
+    const displayH = height * scale;
+
+    const left = (rect.width - displayW) / 2;
+    const top = (rect.height - displayH) / 2;
+    this.canvasLeft = left;
+    this.canvasTop = top;
+
+    if (!this.#renderer) return;
+    this.#renderer.resize(width, height);
+
+    const canvas = this.#renderer.canvas;
+    canvas.style.width = `${displayW}px`;
+    canvas.style.height = `${displayH}px`;
+    canvas.style.left = `${left}px`;
+    canvas.style.top = `${top}px`;
+  }
+
+  update() {
+    this.#renderer?.render(this.#root);
+  }
+
+  get cameraX() { return this.#cameraX; }
+  set cameraX(value: number) { this.#cameraX = value; this.#applyPosition(); }
+  get cameraY() { return this.#cameraY; }
+  set cameraY(value: number) { this.#cameraY = value; this.#applyPosition(); }
+
+  addPixiChildToRoot(child: Container) {
+    this.#root.addChild(child);
+  }
+
+  destroy() {
+    this.#renderer?.destroy();
+    this.#renderer = undefined;
+  }
+
+  #backgroundSprite?: Sprite;
+  setBackgroundImage(image: string | undefined) {
+    if (image) {
+      if (!textureLoader.checkLoaded(image)) {
+        console.info(`Background image not preloaded. Loading now: ${image}`);
+      }
+      textureLoader.load(image).then((texture) => {
+        if (texture) {
+          this.#backgroundSprite?.destroy();
+          this.#backgroundSprite = new Sprite({
+            x: this.#cameraX,
+            y: this.#cameraY,
+            texture,
+            anchor: { x: 0.5, y: 0.5 },
+            width: this.renderWidth,
+            height: this.renderHeight,
+            zIndex: -999999,
+          });
+          this.#root.addChild(this.#backgroundSprite);
+        }
+      });
+    }
+  }
+}

package/src/world/world.ts

@@ -0,0 +1,171 @@
+import { GameObject, GameObjectOptions } from '../game-object/game-object';
+import { WorldTransform } from '../game-object/transform';
+import { debugMode } from '../utils/debug';
+import { WorldDebug } from './world-debug';
+import { WorldPhysics } from "./world-physics";
+import { WorldRendering } from "./world-rendering";
+
+export type WorldOptions = {
+  width?: number;
+  height?: number;
+  backgroundColor?: number;
+  backgroundAlpha?: number;
+  gravity?: number;
+} & GameObjectOptions;
+
+export class World extends GameObject<{
+  resize: (width: number, height: number) => void;
+  collisionStart: (a: GameObject, b: GameObject) => void;
+}> {
+  container = document.createElement('div');
+  #containerResizeObserver: ResizeObserver;
+
+  _worldRendering = new WorldRendering();
+  _worldPhysics = new WorldPhysics();
+  #worldDebug = new WorldDebug(this.container);
+
+  #width?: number;
+  #height?: number;
+
+  #hasEverBeenConnected = false;
+  #destroyed = false;
+
+  #pt = new WorldTransform();
+  #update(dt: number) {
+    if (this.container.isConnected) {
+      if (!this.#hasEverBeenConnected) {
+        this.#hasEverBeenConnected = true;
+        this.#applySize();
+      }
+
+      this._worldPhysics.update(dt);
+      this._engineUpdate(dt, this.#pt);
+      this._worldRendering.update();
+      this.#worldDebug.update();
+
+      this._containerSizeDirty = false;
+    }
+
+    else if (this.#hasEverBeenConnected) {
+      this.#destroy();
+      return;
+    }
+  }
+
+  #lastContainerW = 0;
+  #lastContainerH = 0;
+  _containerSizeDirty = false;
+
+  #applySize() {
+    const rect = this.container.getBoundingClientRect();
+
+    if (rect.width === this.#lastContainerW && rect.height === this.#lastContainerH) return;
+    this.#lastContainerW = rect.width;
+    this.#lastContainerH = rect.height;
+    this._containerSizeDirty = true;
+
+    if (rect.width === 0 || rect.height === 0) return;
+
+    const canvasWidth = this.#width ?? rect.width;
+    const canvasHeight = this.#height ?? rect.height;
+
+    this._worldRendering.setRendererSize(rect, canvasWidth, canvasHeight);
+    this.#worldDebug.setMatterDebugRendererSize(rect, canvasWidth, canvasHeight, this.cameraX, this.cameraY);
+
+    this.emit('resize', this.width, this.height);
+  }
+
+  #destroy() {
+    this.#containerResizeObserver.disconnect();
+    this._worldRendering.destroy();
+    this._worldPhysics.destroy();
+    this.#worldDebug.destroy();
+
+    this.#destroyed = true;
+  }
+
+  async #init() {
+    await this._worldRendering.init(this.container, this.#width, this.#height);
+    this.#applySize();
+
+    let prevTime = 0;
+    let lagSeconds = 0;
+    let fpsCap: number | undefined;
+
+    const step = (timestamp: number) => {
+      if (this.#destroyed) return;
+
+      const dt = (timestamp - prevTime) / 1000;
+      if (dt > 0) {
+        if (fpsCap !== undefined && fpsCap > 0) {
+          lagSeconds += dt;
+          const fixedStep = 1 / fpsCap;
+          if (lagSeconds >= fixedStep) {
+            this.#update(fixedStep);
+            if (lagSeconds >= fixedStep * 2) { this.#update(dt); lagSeconds = 0; }
+            else { lagSeconds -= fixedStep; }
+          }
+        } else {
+          this.#update(dt);
+        }
+        prevTime = timestamp;
+      }
+      requestAnimationFrame(step);
+    };
+    requestAnimationFrame(step);
+
+    if (debugMode) {
+      if (!document.hasFocus()) fpsCap = 6;
+      window.addEventListener('blur', () => fpsCap = 6);
+      window.addEventListener('focus', () => fpsCap = undefined);
+      window.addEventListener('pageshow', (event) => { if (event.persisted) fpsCap = undefined; });
+    }
+  }
+
+  constructor(opts?: WorldOptions) {
+    super(opts);
+    this._setWorld(this);
+    this._worldRendering.addPixiChildToRoot(this._rendering._container);
+
+    this.#containerResizeObserver = new ResizeObserver(this.#applySize.bind(this));
+    this.#containerResizeObserver.observe(this.container);
+
+    this._worldRendering.on('positionChanged', () => this.#worldDebug.setMatterDebugRendererCamera(this.cameraX, this.cameraY));
+    this._worldPhysics.on('engineCreated', (engine) => this.#worldDebug.createMatterDebugRenderer(engine, this.width, this.height));
+    this._worldPhysics.on('collisionStart', (a, b) => this.emit('collisionStart', a, b));
+    ``
+    if (opts) {
+      if (opts.width !== undefined) this.#width = opts.width;
+      if (opts.height !== undefined) this.#height = opts.height;
+      if (opts.backgroundColor !== undefined) this.backgroundColor = opts.backgroundColor;
+      if (opts.backgroundAlpha !== undefined) this.backgroundAlpha = opts.backgroundAlpha;
+      if (opts.gravity !== undefined) this.gravity = opts.gravity;
+    }
+
+    this.#init();
+  }
+
+  get width() { return this.#width ?? this._worldRendering.renderWidth; }
+  set width(v: number) { this.#width = v; this.#applySize(); }
+  get height() { return this.#height ?? this._worldRendering.renderHeight; }
+  set height(v: number) { this.#height = v; this.#applySize(); }
+
+  get backgroundColor() { return this._worldRendering.backgroundColor; }
+  set backgroundColor(v: number) { this._worldRendering.backgroundColor = v; }
+  get backgroundAlpha() { return this._worldRendering.backgroundAlpha; }
+  set backgroundAlpha(v: number) { this._worldRendering.backgroundAlpha = v; }
+  get gravity() { return this._worldPhysics.gravity; }
+  set gravity(v: number) { this._worldPhysics.gravity = v; }
+
+  get cameraX() { return this._worldRendering.cameraX; }
+  set cameraX(v: number) { this._worldRendering.cameraX = v; }
+  get cameraY() { return this._worldRendering.cameraY; }
+  set cameraY(v: number) { this._worldRendering.cameraY = v; }
+
+  #backgroundImage?: string;
+  get backgroundImage() { return this.#backgroundImage; }
+  set backgroundImage(image: string | undefined) {
+    this.#backgroundImage = image;
+    this._worldRendering.setBackgroundImage(image);
+  }
+}

package/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "noImplicitAny": true,
+    "preserveConstEnums": true,
+    "inlineSources": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "lib": [
+      "DOM",
+      "ESNext",
+      "ScriptHost"
+    ],
+    "declaration": true,
+    "declarationDir": "lib/types",
+    "declarationMap": true,
+    "composite": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "strict": true,
+    "rootDir": "./src",
+    "outDir": "lib"
+  },
+  "include": [
+    "./src",
+  ],
+  "exclude": [
+    "node_modules",
+    "**/lib/**",
+    "examples"
+  ],
+}