kiwiengine 0.0.1-alpha

package/src/game-object-ext/animated-sprite.ts

@@ -0,0 +1,140 @@
+import { EventMap } from '@webtaku/event-emitter';
+import { AnimatedSprite, Spritesheet, SpritesheetData } from 'pixi.js';
+import { getCachedId, spritesheetLoader } from '../asset/loaders/spritesheet';
+import { GameObject, GameObjectOptions } from '../game-object/game-object';
+
+type AnimatedSpriteOptions = {
+  src?: string;
+  atlas?: SpritesheetData;
+  animation?: string;
+  fps?: number;
+  loop?: boolean;
+} & GameObjectOptions;
+
+class AnimatedSpriteObject<E extends EventMap = EventMap> extends GameObject<E & {
+  animationend: (animation: string) => void;
+}> {
+  #id?: string;
+  #sheet?: Spritesheet;
+  #sprite?: AnimatedSprite;
+
+  #src?: string;
+  #atlas?: SpritesheetData;
+  #animation?: string;
+  #fps?: number;
+  #loop?: boolean;
+
+  constructor(opts?: AnimatedSpriteOptions) {
+    super(opts);
+    if (opts) {
+      if (opts.src) this.src = opts.src;
+      if (opts.atlas) this.atlas = opts.atlas;
+      if (opts.animation) this.animation = opts.animation;
+      if (opts.fps) this.fps = opts.fps;
+      if (opts.loop) this.loop = opts.loop;
+    }
+  }
+
+  #updateAnimation() {
+    this.#sprite?.destroy();
+    this.#sprite = undefined;
+
+    if (this.#sheet && this.#animation) {
+      if (!this.#sheet.animations[this.#animation]) {
+        console.error(`Animation not found: ${this.#animation}`);
+        return;
+      }
+      const sprite = new AnimatedSprite(this.#sheet.animations[this.#animation]);
+      sprite.anchor.set(0.5, 0.5);
+      sprite.loop = this.#loop ?? true;
+      sprite.animationSpeed = (this.#fps ?? 0) / 60;
+      sprite.play();
+      this._addPixiChild(sprite);
+      this.#sprite = sprite;
+
+      sprite.onLoop = () => (this as any).emit('animationend', this.#animation);
+      sprite.onComplete = () => (this as any).emit('animationend', this.#animation);
+    }
+  }
+
+  async #load() {
+    if (this.#id) spritesheetLoader.release(this.#id);
+
+    this.#id = undefined;
+    this.#sheet = undefined;
+    this.#sprite?.destroy();
+    this.#sprite = undefined;
+
+    if (this.#src && this.#atlas) {
+      this.#id = getCachedId(this.#src, this.#atlas);
+      if (!spritesheetLoader.checkLoaded(this.#id)) {
+        console.info(`Spritesheet not preloaded. Loading now: ${this.#id}`);
+      }
+      this.#sheet = await spritesheetLoader.load(this.#id, this.#src, this.#atlas);
+    }
+
+    this.#updateAnimation();
+  }
+
+  get src() {
+    return this.#src;
+  }
+
+  set src(src: string | undefined) {
+    if (this.#src !== src) {
+      this.#src = src;
+      this.#load();
+    }
+  }
+
+  get atlas() {
+    return this.#atlas;
+  }
+
+  set atlas(atlas: SpritesheetData | undefined) {
+    if (this.#atlas !== atlas) {
+      this.#atlas = atlas;
+      this.#load();
+    }
+  }
+
+  get animation() {
+    return this.#animation;
+  }
+
+  set animation(animation: string | undefined) {
+    if (this.#animation !== animation) {
+      this.#animation = animation;
+      this.#updateAnimation();
+    }
+  }
+
+  get fps() {
+    return this.#fps;
+  }
+
+  set fps(fps: number | undefined) {
+    if (this.#fps !== fps) {
+      this.#fps = fps;
+      if (this.#sprite) this.#sprite.animationSpeed = (fps ?? 0) / 60;
+    }
+  }
+
+  get loop() {
+    return this.#loop;
+  }
+
+  set loop(loop: boolean | undefined) {
+    if (this.#loop !== loop) {
+      this.#loop = loop;
+      if (this.#sprite) this.#sprite.loop = loop === true;
+    }
+  }
+
+  remove() {
+    if (this.#id) spritesheetLoader.release(this.#id);
+    super.remove();
+  }
+}
+
+export { AnimatedSpriteObject };

package/src/game-object-ext/dom-container.ts

@@ -0,0 +1,67 @@
+import { EventMap } from '@webtaku/event-emitter';
+import { GameObject, GameObjectOptions } from "../game-object/game-object";
+import { World } from '../world/world';
+
+type DomContainerObjectOptions = {
+  el?: HTMLElement;
+} & GameObjectOptions;
+
+export class DomContainerObject<E extends EventMap = EventMap> extends GameObject<E> {
+  #el?: HTMLElement;
+
+  constructor(opts?: DomContainerObjectOptions) {
+    super(opts);
+    if (opts) {
+      if (opts.el) this.el = opts.el;
+    }
+  }
+
+  protected _setWorld(world: World): void {
+    super._setWorld(world);
+    if (this.#el) world.container.appendChild(this.#el);
+  }
+
+  get el() {
+    return this.#el;
+  }
+
+  set el(el: HTMLElement | undefined) {
+    this.#el = el;
+    if (el) {
+      el.style.position = 'absolute';
+      el.style.left = '0';
+      el.style.top = '0';
+      el.style.zIndex = '1';
+
+      const world = this._getWorld();
+      if (world) world.container.appendChild(el);
+    }
+  }
+
+  _afterRender() {
+    const world = this._getWorld();
+    if (world && this.#el) {
+      if (
+        world._containerSizeDirty ||
+        this._wt.x.dirty ||
+        this._wt.y.dirty ||
+        this._wt.scaleX.dirty ||
+        this._wt.scaleY.dirty ||
+        this._wt.rotation.dirty
+      ) {
+        const R = world._worldRendering;
+        const S = R.renderScale;
+
+        this.#el.style.transform = `
+        translate(
+          calc(-50% + ${this._wt.x.v * S + R.canvasLeft + R.centerX * S}px),
+          calc(-50% + ${this._wt.y.v * S + R.canvasTop + R.centerY * S}px)
+        )
+        scale(${this._wt.scaleX.v * S}, ${this._wt.scaleY.v * S})
+        rotate(${this._wt.rotation.v}rad)
+      `;
+      }
+      if (this._wt.alpha.dirty) this.#el.style.opacity = this._wt.alpha.v.toString();
+    }
+  }
+}

package/src/game-object-ext/rect.ts

@@ -0,0 +1,40 @@
+import { EventMap } from '@webtaku/event-emitter';
+import { FillInput, Graphics, StrokeInput } from 'pixi.js';
+import { GameObject } from '../game-object/game-object';
+
+class RectangleObject<E extends EventMap = EventMap> extends GameObject<E> {
+  #graphics = new Graphics({ zIndex: -999999 });
+  #width: number = 0;
+  #height: number = 0;
+  #fill?: FillInput;
+  #stroke?: StrokeInput;
+
+  constructor() {
+    super();
+    this._addPixiChild(this.#graphics);
+  }
+
+  #draw() {
+    this.#graphics.clear().rect(
+      -this.#width / 2,
+      -this.#height / 2,
+      this.#width,
+      this.#height,
+    );
+    if (this.#fill) this.#graphics.fill(this.#fill);
+    if (this.#stroke) this.#graphics.stroke(this.#stroke);
+  }
+
+  get width(): number { return this.#width; }
+  set width(value: number) { this.#width = value; this.#draw(); }
+  get height(): number { return this.#height; }
+  set height(value: number) { this.#height = value; this.#draw(); }
+
+  get fill(): FillInput | undefined { return this.#fill; }
+  set fill(value: FillInput | undefined) { this.#fill = value; this.#draw(); }
+
+  get stroke(): StrokeInput | undefined { return this.#stroke; }
+  set stroke(value: StrokeInput | undefined) { this.#stroke = value; this.#draw(); }
+}
+
+export { RectangleObject };

package/src/game-object-ext/spine.ts

@@ -0,0 +1,235 @@
+import { AtlasAttachmentLoader, SkeletonBinary, SkeletonData, SkeletonJson, Skin, Spine, SpineTexture, TextureAtlas } from '@esotericsoftware/spine-pixi-v8';
+import { EventMap } from '@webtaku/event-emitter';
+import { Texture } from 'pixi.js';
+import { binaryLoader } from '../asset/loaders/binary';
+import { textLoader } from '../asset/loaders/text';
+import { textureLoader } from '../asset/loaders/texture';
+import { GameObject, GameObjectOptions } from '../game-object/game-object';
+
+type SpineOptions = {
+  atlas?: string;
+  skeletonData?: any;
+  skel?: string;
+  json?: string;
+  texture?: string | Record<string, string>;
+  skins?: string[];
+  animation?: string;
+  loop?: boolean;
+} & GameObjectOptions;
+
+class SpineObject<E extends EventMap = EventMap> extends GameObject<E> {
+  #spine?: Spine;
+
+  #atlas?: string;
+  #skeletonData?: any;
+  #skel?: string;
+  #json?: string;
+  #texture?: string | Record<string, string>;
+  #skins?: string[];
+  #animation?: string;
+  #loop?: boolean;
+
+  constructor(opts?: SpineOptions) {
+    super(opts);
+    if (opts) {
+      if (opts.atlas) this.atlas = opts.atlas;
+      if (opts.skeletonData) this.skeletonData = opts.skeletonData;
+      if (opts.skel) this.skel = opts.skel;
+      if (opts.json) this.json = opts.json;
+      if (opts.texture) this.texture = opts.texture;
+      if (opts.skins) this.skins = opts.skins;
+      if (opts.animation) this.animation = opts.animation;
+      if (opts.loop) this.loop = opts.loop;
+    }
+  }
+
+  async #load() {
+    if (this.#atlas && (
+      this.#skeletonData ||
+      this.#skel ||
+      this.#json
+    )) {
+      const promises: Promise<any>[] = [];
+
+      let textAtlasData: string | undefined;
+      let skeletonBynary: Uint8Array | undefined;
+      let textSkeletonData: string | undefined;
+
+      let texture: Texture | undefined;
+      let textures: Record<string, Texture> | undefined;
+
+      if (!textLoader.checkLoaded(this.#atlas)) console.info(`Atlas not preloaded. Loading now: ${this.#atlas}`);
+      promises.push((async () => textAtlasData = await textLoader.load(this.#atlas!))());
+
+      if (this.#skeletonData) {
+        // Skeleton data is already loaded, no need to load again
+      } else if (this.#skel) {
+        if (!binaryLoader.checkLoaded(this.#skel)) console.info(`Skeleton not preloaded. Loading now: ${this.#skel}`);
+        promises.push((async () => skeletonBynary = await binaryLoader.load(this.#skel!))());
+      } else if (this.#json) {
+        if (!textLoader.checkLoaded(this.#json)) console.info(`Skeleton not preloaded. Loading now: ${this.#json}`);
+        promises.push((async () => textSkeletonData = await textLoader.load(this.#json!))());
+      } else {
+        console.error('Either skel or json must be provided');
+        return;
+      }
+
+      if (typeof this.#texture === 'string') {
+        if (!textureLoader.checkLoaded(this.#texture)) console.info(`Texture not preloaded. Loading now: ${this.#texture}`);
+        promises.push((async () => texture = await textureLoader.load(this.#texture as string))());
+      } else if (this.#texture) {
+        textures = {};
+        for (const [key, path] of Object.entries(this.#texture)) {
+          if (!textureLoader.checkLoaded(path)) console.info(`Texture not preloaded. Loading now: ${path}`);
+          promises.push((async () => {
+            const texture = await textureLoader.load(path);
+            if (texture) textures[key] = texture;
+          })());
+        }
+      }
+
+      await Promise.all(promises);
+
+      if (texture || textures) {
+        const atlas = new TextureAtlas(textAtlasData!);
+        atlas.pages.forEach((page) => {
+          if (texture) page.setTexture(SpineTexture.from(texture.source));
+          else if (textures) {
+            page.setTexture(SpineTexture.from(textures[page.name].source));
+          }
+        });
+
+        const atlasLoader = new AtlasAttachmentLoader(atlas);
+
+        let skeletonData: SkeletonData;
+        if (this.#skeletonData) {
+          const jsonLoader = new SkeletonJson(atlasLoader);
+          skeletonData = jsonLoader.readSkeletonData(this.#skeletonData);
+        } else if (skeletonBynary) {
+          const binaryLoader = new SkeletonBinary(atlasLoader);
+          skeletonData = binaryLoader.readSkeletonData(skeletonBynary);
+        } else if (textSkeletonData) {
+          const jsonLoader = new SkeletonJson(atlasLoader);
+          skeletonData = jsonLoader.readSkeletonData(textSkeletonData);
+        } else {
+          console.error('Either skel or json must be provided');
+          return;
+        }
+
+        this.#spine = new Spine(skeletonData);
+        this.#applyAnimation();
+        this.#applySkins();
+
+        this._addPixiChild(this.#spine);
+      }
+    }
+  }
+
+  #applyAnimation() {
+    if (this.#spine && this.#animation) {
+      this.#spine.state.setAnimation(
+        0,
+        this.#animation,
+        this.#loop ?? true,
+      );
+      this.#spine.state.apply(this.#spine.skeleton);
+    }
+  }
+
+  #applySkins() {
+    if (this.#spine && this.#skins) {
+      const newSkin = new Skin('combined-skin');
+      for (const skinName of this.#skins) {
+        const skin = this.#spine.skeleton.data.findSkin(skinName);
+        if (skin) newSkin.addSkin(skin);
+      }
+      this.#spine.skeleton.setSkin(newSkin);
+      this.#spine.skeleton.setSlotsToSetupPose();
+    }
+  }
+
+  get atlas() {
+    return this.#atlas;
+  }
+
+  set atlas(atlas: string | undefined) {
+    this.#atlas = atlas;
+    this.#load();
+  }
+
+  get skeletonData() {
+    return this.#skeletonData;
+  }
+
+  set skeletonData(skeletonData: any | undefined) {
+    this.#skeletonData = skeletonData;
+    this.#load();
+  }
+
+  get skel() {
+    return this.#skel;
+  }
+
+  set skel(skel: string | undefined) {
+    this.#skel = skel;
+    this.#load();
+  }
+
+  get json() {
+    return this.#json;
+  }
+
+  set json(json: string | undefined) {
+    this.#json = json;
+    this.#load();
+  }
+
+  get texture() {
+    return this.#texture;
+  }
+
+  set texture(texture: string | Record<string, string> | undefined) {
+    this.#texture = texture;
+    this.#load();
+  }
+
+  get skins() {
+    return this.#skins;
+  }
+
+  set skins(skins: string[] | undefined) {
+    this.#skins = skins;
+    this.#applySkins();
+  }
+
+  get animation() {
+    return this.#animation;
+  }
+
+  set animation(animation: string | undefined) {
+    this.#animation = animation;
+    this.#applyAnimation();
+  }
+
+  get loop() {
+    return this.#loop;
+  }
+
+  set loop(loop: boolean | undefined) {
+    this.#loop = loop;
+    this.#applyAnimation();
+  }
+
+  remove() {
+    if (typeof this.#texture === 'string') {
+      textureLoader.release(this.#texture);
+    } else if (this.#texture) {
+      for (const path of Object.values(this.#texture)) {
+        textureLoader.release(path);
+      }
+    }
+    super.remove();
+  }
+}
+
+export { SpineObject };

package/src/game-object-ext/sprite.ts

@@ -0,0 +1,55 @@
+import { EventMap } from '@webtaku/event-emitter';
+import { Sprite } from 'pixi.js';
+import { textureLoader } from '../asset/loaders/texture';
+import { GameObject, GameObjectOptions } from '../game-object/game-object';
+
+type SpriteOptions = {
+  src?: string;
+} & GameObjectOptions;
+
+class SpriteObject<E extends EventMap = EventMap> extends GameObject<E> {
+  #sprite?: Sprite;
+  #src?: string;
+
+  constructor(opts?: SpriteOptions) {
+    super(opts);
+    if (opts) {
+      if (opts.src) this.src = opts.src;
+    }
+  }
+
+  async #load() {
+    this.#sprite?.destroy({ children: true });
+    this.#sprite = undefined;
+
+    if (this.#src) {
+      if (!textureLoader.checkLoaded(this.#src)) {
+        console.info(`Texture not preloaded. Loading now: ${this.#src}`);
+      }
+      const texture = await textureLoader.load(this.#src);
+      if (texture) {
+        this.#sprite = new Sprite({ texture, anchor: 0.5, zIndex: -999999 });
+        this._addPixiChild(this.#sprite);
+      }
+    }
+  }
+
+  get src() {
+    return this.#src;
+  }
+
+  set src(src: string | undefined) {
+    if (this.#src !== src) {
+      if (this.#src) textureLoader.release(this.#src);
+      this.#src = src;
+      this.#load();
+    }
+  }
+
+  remove() {
+    if (this.#src) textureLoader.release(this.#src);
+    super.remove();
+  }
+}
+
+export { SpriteObject };

package/src/game-object-ext/text.ts

@@ -0,0 +1,83 @@
+import { EventMap } from '@webtaku/event-emitter';
+import { Text as PixiText } from 'pixi.js';
+import { GameObject, GameObjectOptions } from '../game-object/game-object';
+
+type TextObjectOptions = {
+  text: string;
+  textAlign?: 'left' | 'center' | 'right';
+  fontSize?: number;
+  color?: string;
+} & GameObjectOptions;
+
+class TextObject<E extends EventMap = EventMap> extends GameObject<E> {
+  #pixiText = new PixiText({ anchor: 0.5 });
+  #text?: string;
+  #textAlign?: 'left' | 'center' | 'right';
+  #fontSize?: number;
+  #color?: string;
+
+  constructor(opts?: TextObjectOptions) {
+    super(opts);
+    this._addPixiChild(this.#pixiText);
+    if (opts) {
+      if (opts.text) this.text = opts.text;
+      if (opts.textAlign) this.textAlign = opts.textAlign;
+      if (opts.fontSize) this.fontSize = opts.fontSize;
+      if (opts.color) this.color = opts.color;
+    }
+  }
+
+  get text() {
+    return this.#text;
+  }
+
+  set text(text: string | undefined) {
+    this.#text = text;
+    this.#pixiText.text = text || '';
+  }
+
+  get textAlign() {
+    return this.#textAlign;
+  }
+
+  set textAlign(textAlign: 'left' | 'center' | 'right' | undefined) {
+    this.#textAlign = textAlign;
+    if (textAlign !== undefined) this.#pixiText.style.align = textAlign;
+  }
+
+  get fontSize() {
+    return this.#fontSize;
+  }
+
+  set fontSize(fontSize: number | undefined) {
+    this.#fontSize = fontSize;
+    if (fontSize !== undefined) this.#pixiText.style.fontSize = fontSize;
+  }
+
+  get color() {
+    return this.#color;
+  }
+
+  set color(color: string | undefined) {
+    this.#color = color;
+    if (color !== undefined) this.#pixiText.style.fill = color;
+  }
+
+  get anchorX() {
+    return this.#pixiText.anchor.x - 0.5;
+  }
+
+  set anchorX(value: number) {
+    this.#pixiText.anchor.x = value + 0.5;
+  }
+
+  get anchorY() {
+    return this.#pixiText.anchor.y - 0.5;
+  }
+
+  set anchorY(value: number) {
+    this.#pixiText.anchor.y = value + 0.5;
+  }
+}
+
+export { TextObject };

package/src/game-object-ext/tiling-sprite.ts

@@ -0,0 +1,73 @@
+import { EventMap } from '@webtaku/event-emitter';
+import { TilingSprite } from 'pixi.js';
+import { textureLoader } from '../asset/loaders/texture';
+import { GameObject, GameObjectOptions } from '../game-object/game-object';
+import { WorldTransform } from '../game-object/transform';
+
+type TilingSpriteOptions = {
+  src?: string;
+  scrollSpeedX?: number;
+  scrollSpeedY?: number;
+} & GameObjectOptions;
+
+class TilingSpriteObject<E extends EventMap = EventMap> extends GameObject<E> {
+  #sprite?: TilingSprite;
+  #src?: string;
+
+  scrollSpeedX?: number;
+  scrollSpeedY?: number;
+
+  constructor(opts?: TilingSpriteOptions) {
+    super();
+    if (opts) {
+      if (opts.src) this.src = opts.src;
+      if (opts.scrollSpeedX) this.scrollSpeedX = opts.scrollSpeedX;
+      if (opts.scrollSpeedY) this.scrollSpeedY = opts.scrollSpeedY;
+    }
+  }
+
+  async #load() {
+    if (this.#src) {
+      if (!textureLoader.checkLoaded(this.#src)) {
+        console.info(`Tiling sprite not preloaded. Loading now: ${this.#src}`);
+      }
+      const texture = await textureLoader.load(this.#src);
+      if (texture) {
+        const sprite = new TilingSprite({
+          texture,
+          anchor: 0.5,
+          zIndex: -999999,
+        });
+        this._addPixiChild(sprite);
+        this.#sprite = sprite;
+      }
+    }
+  }
+
+  get src() {
+    return this.#src;
+  }
+
+  set src(src: string | undefined) {
+    this.#sprite?.destroy({ children: true });
+    this.#sprite = undefined;
+    if (this.#src) textureLoader.release(this.#src);
+    this.#src = src;
+    this.#load();
+  }
+
+  _engineUpdate(dt: number, pt: WorldTransform) {
+    if (this.#sprite) {
+      if (this.scrollSpeedX !== undefined) this.#sprite.tilePosition.x += this.scrollSpeedX * dt;
+      if (this.scrollSpeedY !== undefined) this.#sprite.tilePosition.y += this.scrollSpeedY * dt;
+    }
+    super._engineUpdate(dt, pt);
+  }
+
+  remove() {
+    if (this.#src) textureLoader.release(this.#src);
+    super.remove();
+  }
+}
+
+export { TilingSpriteObject };

package/src/index.ts

@@ -0,0 +1,14 @@
+export { musicPlayer, sfxPlayer } from './asset/audio';
+export { AssetSource, preload } from './asset/preload';
+export { AnimatedSpriteObject } from './game-object-ext/animated-sprite';
+export { DomContainerObject } from './game-object-ext/dom-container';
+export { RectangleObject } from './game-object-ext/rect';
+export { SpineObject } from './game-object-ext/spine';
+export { SpriteObject } from './game-object-ext/sprite';
+export { TextObject } from './game-object-ext/text';
+export { GameObject, GameObjectOptions } from './game-object/game-object';
+export { Collider } from './game-object/game-object-physics';
+export { enableDebug } from './utils/debug';
+export { go } from './utils/go';
+export { World } from './world/world';
+