kiwiengine 0.0.1-alpha

package/lib/world/world.js

@@ -0,0 +1,147 @@
+import { GameObject } 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 class World extends GameObject {
+    container = document.createElement('div');
+    #containerResizeObserver;
+    _worldRendering = new WorldRendering();
+    _worldPhysics = new WorldPhysics();
+    #worldDebug = new WorldDebug(this.container);
+    #width;
+    #height;
+    #hasEverBeenConnected = false;
+    #destroyed = false;
+    #pt = new WorldTransform();
+    #update(dt) {
+        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;
+        const step = (timestamp) => {
+            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) {
+        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) { this.#width = v; this.#applySize(); }
+    get height() { return this.#height ?? this._worldRendering.renderHeight; }
+    set height(v) { this.#height = v; this.#applySize(); }
+    get backgroundColor() { return this._worldRendering.backgroundColor; }
+    set backgroundColor(v) { this._worldRendering.backgroundColor = v; }
+    get backgroundAlpha() { return this._worldRendering.backgroundAlpha; }
+    set backgroundAlpha(v) { this._worldRendering.backgroundAlpha = v; }
+    get gravity() { return this._worldPhysics.gravity; }
+    set gravity(v) { this._worldPhysics.gravity = v; }
+    get cameraX() { return this._worldRendering.cameraX; }
+    set cameraX(v) { this._worldRendering.cameraX = v; }
+    get cameraY() { return this._worldRendering.cameraY; }
+    set cameraY(v) { this._worldRendering.cameraY = v; }
+    #backgroundImage;
+    get backgroundImage() { return this.#backgroundImage; }
+    set backgroundImage(image) {
+        this.#backgroundImage = image;
+        this._worldRendering.setBackgroundImage(image);
+    }
+}
+//# sourceMappingURL=world.js.map

package/lib/world/world.js.map

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

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "kiwiengine",
+  "version": "0.0.1-alpha",
+  "types": "./lib/types/index.d.ts",
+  "main": "./lib/index.js",
+  "devDependencies": {
+    "@types/jest": "^30.0.0",
+    "@types/matter-js": "^0.19.8",
+    "@types/stats.js": "^0.17.4",
+    "jest": "^30.0.4",
+    "jest-environment-jsdom": "^30.0.4",
+    "ts-jest": "^29.4.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "@esotericsoftware/spine-pixi-v8": "^4.2.88",
+    "matter-js": "^0.20.0",
+    "pixi.js": "^8.11.0",
+    "stats.js": "^0.17.0"
+  },
+  "packageManager": "yarn@1.22.22"
+}

package/src/asset/audio.ts

@@ -0,0 +1,176 @@
+import { audioLoader } from './loaders/audio';
+
+const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+window.addEventListener('mousedown', () => audioContext.resume());
+window.addEventListener('touchend', () => audioContext.resume());
+
+async function getAvailableContext(): Promise<AudioContext> {
+  if (audioContext.state === 'suspended') await audioContext.resume();
+  return audioContext;
+}
+
+const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+let isPageVisible = !document.hidden;
+window.addEventListener('visibilitychange', () => isPageVisible = !document.hidden);
+
+class Audio {
+  src: string;
+  #volume: number;
+  #loop: boolean;
+
+  #audioBuffer?: AudioBuffer;
+  #audioContext?: AudioContext;
+  #gainNode?: GainNode;
+  #source?: AudioBufferSourceNode;
+
+  #isPlaying = false;
+  #isPaused = false;
+  #startTime = 0;
+  #pauseTime = 0;
+  #offset = 0;
+
+  constructor(src: string, volume: number, loop: boolean) {
+    this.src = src;
+    this.#volume = volume;
+    this.#loop = loop;
+    this.play();
+  }
+
+  get volume() { return this.#volume; }
+  set volume(volume: number) {
+    this.#volume = volume;
+    if (this.#gainNode) this.#gainNode.gain.value = Math.max(0, Math.min(1, volume));
+  }
+
+  async play() {
+    if (isMobile && !isPageVisible) return;
+
+    if (!this.#audioBuffer) {
+      if (!audioLoader.checkLoaded(this.src)) {
+        console.info(`Audio not preloaded. Loading now: ${this.src}`);
+      }
+      this.#audioBuffer = await audioLoader.load(this.src);
+    }
+    if (!this.#audioBuffer) return;
+
+    if (this.#isPlaying) this.stop();
+    if (!this.#isPaused) this.#offset = 0;
+    this.#isPlaying = true;
+    this.#isPaused = false;
+    if (!this.#audioContext) this.#audioContext = await getAvailableContext();
+    if (!this.#isPlaying) return;
+
+    if (!this.#gainNode) {
+      this.#gainNode = this.#audioContext.createGain();
+      this.#gainNode.gain.value = this.#volume;
+      this.#gainNode.connect(this.#audioContext.destination);
+    }
+
+    this.#source = this.#audioContext.createBufferSource();
+    this.#source.buffer = this.#audioBuffer;
+    this.#source.loop = this.#loop;
+    this.#source.connect(this.#gainNode);
+    this.#source.start(0, this.#offset);
+    this.#startTime = this.#audioContext.currentTime;
+    this.#source.onended = () => { if (!this.#isPaused && !this.#loop) this.stop(); };
+  }
+
+  #clear(): void {
+    if (this.#source) {
+      this.#source.stop();
+      this.#source.disconnect();
+      this.#source = undefined;
+    }
+  }
+
+  pause() {
+    if (this.#isPlaying && !this.#isPaused) {
+      if (this.#audioContext) {
+        this.#pauseTime = this.#audioContext.currentTime;
+        this.#offset += this.#pauseTime - this.#startTime;
+      }
+      this.#isPaused = true;
+      this.#isPlaying = false;
+      this.#clear();
+    }
+  }
+
+  stop() {
+    this.#isPlaying = false;
+    this.#isPaused = false;
+    this.#offset = 0;
+    this.#clear();
+  }
+}
+
+class MusicPlayer {
+  #volume = 0.7;
+  #currentAudio?: Audio;
+
+  constructor() {
+    const stored = parseFloat(localStorage.getItem('musicVolume') || '');
+    this.#volume = Number.isNaN(stored) ? this.#volume : stored;
+
+    if (isMobile) {
+      document.addEventListener('visibilitychange', () => {
+        if (document.hidden) this.pause();
+        else {
+          isPageVisible = true;
+          this.#currentAudio?.play();
+        }
+      });
+    }
+  }
+
+  get volume() {
+    return this.#volume;
+  }
+
+  set volume(volume: number) {
+    this.#volume = volume;
+    localStorage.setItem('musicVolume', volume.toString());
+    if (this.#currentAudio) this.#currentAudio.volume = volume;
+  }
+
+  play(src: string) {
+    if (this.#currentAudio?.src === src) return;
+    this.#currentAudio?.stop();
+    this.#currentAudio = new Audio(src, this.#volume, true);
+  }
+
+  pause() {
+    this.#currentAudio?.pause();
+  }
+
+  stop() {
+    this.#currentAudio?.stop();
+    this.#currentAudio = undefined;
+  }
+}
+
+class SfxPlayer {
+  #volume = 1;
+
+  constructor() {
+    const stored = parseFloat(localStorage.getItem('sfxVolume') || '');
+    this.#volume = Number.isNaN(stored) ? this.#volume : stored;
+  }
+
+  get volume() {
+    return this.#volume;
+  }
+
+  set volume(volume: number) {
+    this.#volume = volume;
+    localStorage.setItem('sfxVolume', volume.toString());
+  }
+
+  play(src: string) {
+    new Audio(src, this.#volume, false);
+  }
+}
+
+const musicPlayer = new MusicPlayer();
+const sfxPlayer = new SfxPlayer();
+
+export { audioContext, musicPlayer, sfxPlayer };

package/src/asset/loaders/audio.ts

@@ -0,0 +1,39 @@
+import { audioContext } from '../audio';
+import { Loader } from './loader';
+
+class AudioLoader extends Loader<AudioBuffer> {
+  protected override async _load(src: string) {
+    const loadingPromise = (async () => {
+      const response = await fetch(src);
+      if (!response.ok) {
+        console.error(`Failed to load audio data: ${src}`);
+        return;
+      }
+
+      const arrayBuffer = await response.arrayBuffer();
+
+      try {
+        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+        this.loadingPromises.delete(src);
+
+        if (this.hasActiveRef(src)) {
+          if (this.loadedAssets.has(src)) {
+            console.error(`Audio buffer already exists: ${src}`);
+          } else {
+            this.loadedAssets.set(src, audioBuffer);
+            return audioBuffer;
+          }
+        }
+      } catch (error) {
+        console.error(`Failed to decode audio data: ${src}`, error);
+        this.loadingPromises.delete(src);
+      }
+    })();
+
+    this.loadingPromises.set(src, loadingPromise);
+    return await loadingPromise;
+  }
+}
+
+export const audioLoader = new AudioLoader();

package/src/asset/loaders/binary.ts

@@ -0,0 +1,32 @@
+import { Loader } from './loader';
+
+class BinaryLoader extends Loader<Uint8Array> {
+  protected override async _load(src: string) {
+    const loadingPromise = (async () => {
+      const response = await fetch(src);
+      if (!response.ok) {
+        console.error(`Failed to load binary data: ${src}`);
+        return;
+      }
+
+      const arrayBuffer = await response.arrayBuffer();
+      const data = new Uint8Array(arrayBuffer);
+
+      this.loadingPromises.delete(src);
+
+      if (this.hasActiveRef(src)) {
+        if (this.loadedAssets.has(src)) {
+          console.error(`Binary data already exists: ${src}`);
+        } else {
+          this.loadedAssets.set(src, data);
+          return data;
+        }
+      }
+    })();
+
+    this.loadingPromises.set(src, loadingPromise);
+    return await loadingPromise;
+  }
+}
+
+export const binaryLoader = new BinaryLoader();

package/src/asset/loaders/font.ts

@@ -0,0 +1,27 @@
+import { Loader } from './loader';
+
+class FontFamilyLoader extends Loader<boolean> {
+  protected override async _load(fontName: string) {
+    const loadingPromise = (async () => {
+      if ('fonts' in document) {
+        try {
+          await document.fonts.load(`1em ${fontName}`);
+          await document.fonts.ready;
+          this.loadingPromises.delete(fontName);
+          return true;
+        } catch (error) {
+          console.error(`Failed to load font: ${fontName}`, error);
+          this.loadingPromises.delete(fontName);
+        }
+      } else {
+        console.warn(`This browser does not support the Font Loading API`);
+        this.loadingPromises.delete(fontName);
+      }
+    })();
+
+    this.loadingPromises.set(fontName, loadingPromise);
+    return await loadingPromise;
+  }
+}
+
+export const fontFamilyLoader = new FontFamilyLoader();

package/src/asset/loaders/loader.ts

@@ -0,0 +1,39 @@
+abstract class Loader<T> {
+  protected loadedAssets: Map<string, T> = new Map();
+  protected loadingPromises: Map<string, Promise<T | undefined>> = new Map();
+
+  #refCount: Map<string, number> = new Map();
+  #incRefCount(id: string) { this.#refCount.set(id, (this.#refCount.get(id) || 0) + 1); }
+
+  protected hasActiveRef(id: string) { return this.#refCount.get(id)! > 0; }
+  protected abstract _load(id: string, ...args: any[]): Promise<T | undefined>;
+  protected _dispose(id: string, asset: T): void { /* override to clean up */ }
+
+  checkLoaded(id: string) {
+    return this.loadedAssets.has(id);
+  }
+
+  async load(id: string, ...args: any[]) {
+    this.#incRefCount(id);
+    if (this.checkLoaded(id)) return this.loadedAssets.get(id);
+    if (this.loadingPromises.has(id)) return await this.loadingPromises.get(id);
+    return await this._load(id, ...args);
+  }
+
+  release(id: string) {
+    const refCount = this.#refCount.get(id);
+    if (refCount === undefined) throw new Error(`Asset not found: ${id}`);
+    if (refCount === 1) {
+      this.#refCount.delete(id);
+      const asset = this.loadedAssets.get(id);
+      if (asset) {
+        this._dispose(id, asset);
+        this.loadedAssets.delete(id);
+      }
+    } else {
+      this.#refCount.set(id, refCount - 1);
+    }
+  }
+}
+
+export { Loader };

package/src/asset/loaders/spritesheet.ts

@@ -0,0 +1,67 @@
+import { Spritesheet, SpritesheetData } from 'pixi.js';
+import { Loader } from './loader';
+import { textureLoader } from './texture';
+
+const atlasIdCache = new WeakMap<object, Map<string, string>>();
+let idCounter = 0;
+
+function getCachedId(src: string, atlas: object): string {
+  let innerMap = atlasIdCache.get(atlas);
+  if (!innerMap) {
+    innerMap = new Map<string, string>();
+    atlasIdCache.set(atlas, innerMap);
+  }
+
+  if (!innerMap.has(src)) {
+    innerMap.set(src, `${src}#${idCounter++}`);
+  }
+
+  return innerMap.get(src)!;
+}
+
+class SpritesheetLoader extends Loader<Spritesheet> {
+  #idToSrc: Map<string, string> = new Map();
+
+  protected override async _load(id: string, src: string, atlas: SpritesheetData) {
+    this.#idToSrc.set(id, src);
+
+    const loadingPromise = (async () => {
+      const texture = await textureLoader.load(src);
+      if (!texture) {
+        console.error(`Failed to load texture: ${src}`);
+        return;
+      }
+
+      const spritesheet = new Spritesheet(texture, atlas);
+      await spritesheet.parse();
+
+      this.loadingPromises.delete(id);
+
+      if (this.hasActiveRef(id)) {
+        if (this.loadedAssets.has(id)) {
+          textureLoader.release(src);
+          console.error(`Spritesheet already exists: ${src}`);
+        } else {
+          this.loadedAssets.set(id, spritesheet);
+          return spritesheet;
+        }
+      } else {
+        textureLoader.release(src);
+      }
+    })();
+
+    this.loadingPromises.set(id, loadingPromise);
+    return await loadingPromise;
+  }
+
+  protected override _dispose(id: string, spritesheet: Spritesheet) {
+    spritesheet.destroy();
+
+    const src = this.#idToSrc.get(id);
+    if (src) textureLoader.release(src);
+  }
+}
+
+const spritesheetLoader = new SpritesheetLoader();
+
+export { getCachedId, spritesheetLoader };

package/src/asset/loaders/text.ts

@@ -0,0 +1,31 @@
+import { Loader } from './loader';
+
+class TextLoader extends Loader<string> {
+  protected override async _load(src: string) {
+    const loadingPromise = (async () => {
+      const response = await fetch(src);
+      if (!response.ok) {
+        console.error(`Failed to load text: ${src}`);
+        return;
+      }
+
+      const text = await response.text();
+
+      this.loadingPromises.delete(src);
+
+      if (this.hasActiveRef(src)) {
+        if (this.loadedAssets.has(src)) {
+          console.error(`Text already exists: ${src}`);
+        } else {
+          this.loadedAssets.set(src, text);
+          return text;
+        }
+      }
+    })();
+
+    this.loadingPromises.set(src, loadingPromise);
+    return await loadingPromise;
+  }
+}
+
+export const textLoader = new TextLoader();

package/src/asset/loaders/texture.ts

@@ -0,0 +1,46 @@
+import { Texture } from 'pixi.js';
+import { Loader } from './loader';
+
+class TextureLoader extends Loader<Texture> {
+  protected override async _load(src: string) {
+    const loadingPromise = new Promise<Texture | undefined>((resolve) => {
+      const image = new Image();
+      image.crossOrigin = 'anonymous';
+      image.src = src;
+
+      image.onload = () => {
+        this.loadingPromises.delete(src);
+
+        if (!this.hasActiveRef(src)) {
+          resolve(undefined);
+          return;
+        }
+
+        if (this.loadedAssets.has(src)) {
+          console.error(`Texture already loaded: ${src}`);
+          resolve(undefined);
+          return;
+        }
+
+        const texture = Texture.from(image);
+        this.loadedAssets.set(src, texture);
+        resolve(texture);
+      };
+
+      image.onerror = (error) => {
+        this.loadingPromises.delete(src);
+        console.error(`Failed to load texture: ${src}`, error);
+        resolve(undefined);
+      };
+    });
+
+    this.loadingPromises.set(src, loadingPromise);
+    return await loadingPromise;
+  }
+
+  protected override _dispose(src: string, texture: Texture) {
+    texture.destroy(true);
+  }
+}
+
+export const textureLoader = new TextureLoader();