kiwiengine 0.0.1-alpha → 0.5.2

package/src/world/world-debug.ts

@@ -1,114 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,145 +0,0 @@
-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

@@ -1,171 +0,0 @@
-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);
-  }
-}