kiwiengine 0.5.2 → 0.5.3

package/src/asset/loaders/texture.ts

@@ -3,44 +3,36 @@ import { Loader } from './loader'
 
 class TextureLoader extends Loader<Texture> {
   protected override async doLoad(src: string) {
-    const loadingPromise = new Promise<Texture | undefined>((resolve) => {
-      const image = new Image()
-      image.crossOrigin = 'anonymous'
-      image.src = src
+    const loadingPromise = (async () => {
+      const response = await fetch(src)
+      if (!response.ok) {
+        console.error(`Failed to load texture: ${src}`)
+        return
+      }
 
-      image.onload = () => {
-        this.loadingPromises.delete(src)
+      const blob = await response.blob()
+      const bitmap = await createImageBitmap(blob, { premultiplyAlpha: 'premultiply' })
 
-        if (!this.hasActiveRef(src)) {
-          resolve(undefined)
-          return
-        }
+      this.loadingPromises.delete(src)
 
+      if (this.hasActiveRef(src)) {
         if (this.cachedAssets.has(src)) {
-          console.error(`Texture already loaded: ${src}`)
-          resolve(undefined)
-          return
+          console.error(`Texture already exists: ${src}`)
+        } else {
+          const texture = Texture.from(bitmap)
+          texture.source.scaleMode = 'nearest'
+          this.cachedAssets.set(src, texture)
+          return texture
         }
-
-        const texture = Texture.from(image)
-        texture.source.scaleMode = 'nearest'
-        this.cachedAssets.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 cleanup(src: string, texture: Texture) {
-    texture.destroy(true)
+  override async load(src: string) {
+    return await super.load(src)
   }
 }
 

package/src/asset/preload.ts

@@ -1,4 +1,4 @@
-import { SpritesheetData } from 'pixi.js'
+import { Atlas } from '../types/atlas'
 import { audioLoader } from './loaders/audio'
 import { binaryLoader } from './loaders/binary'
 import { bitmapFontLoader } from './loaders/bitmap-font'
@@ -8,13 +8,9 @@ import { getCachedAtlasId, spritesheetLoader } from './loaders/spritesheet'
 import { textLoader } from './loaders/text'
 import { textureLoader } from './loaders/texture'
 
-export type AssetSource = string | {
-  src: string
-  atlas: SpritesheetData
-} | {
-  fnt: string
-  src: string
-}
+export type AssetSource = string
+  | { src: string, atlas: Atlas }
+  | { fnt: string, src: string }
 
 const loaderForPathMap: Array<{ check: (path: string) => boolean, loader: Loader<any> }> = [
   { check: (p) => p.endsWith('.json') || p.endsWith('.atlas'), loader: textLoader },

package/src/collision/check-collision.ts

@@ -47,7 +47,7 @@ function checkRectRectCollision(
   const asx = ta.scaleX.v, asy = ta.scaleY.v
   const ahx = abs(ca.width * asx) * 0.5
   const ahy = abs(ca.height * asy) * 0.5
-  const cA = ta.rotation.cos, sA = ta.rotation.sin
+  const cA = ta.cos, sA = ta.sin
   const aux = cA, auy = sA
   const avx = -sA, avy = cA
   // apply rotated local offset for center
@@ -60,7 +60,7 @@ function checkRectRectCollision(
   const bsx = tb.scaleX.v, bsy = tb.scaleY.v
   const bhx = abs(cb.width * bsx) * 0.5
   const bhy = abs(cb.height * bsy) * 0.5
-  const cB = tb.rotation.cos, sB = tb.rotation.sin
+  const cB = tb.cos, sB = tb.sin
   const bux = cB, buy = sB
   const bvx = -sB, bvy = cB
   const box = (cb.x || 0) * bsx
@@ -98,7 +98,7 @@ let _ccx = 0, _ccy = 0
 function circleCenterScratch(c: CircleCollider, t: WorldTransform): void {
   // No object/array allocation; scalar math only
   const sx = t.scaleX.v, sy = t.scaleY.v
-  const cos = t.rotation.cos, sin = t.rotation.sin
+  const cos = t.cos, sin = t.sin
   // local axes
   const ux = cos, uy = sin
   const vx = -sin, vy = cos
@@ -138,7 +138,7 @@ function checkRectCircleCollision(
   const rsx = tr.scaleX.v, rsy = tr.scaleY.v
   const rhx = abs(r.width * rsx) * 0.5
   const rhy = abs(r.height * rsy) * 0.5
-  const rc = tr.rotation.cos, rs = tr.rotation.sin
+  const rc = tr.cos, rs = tr.sin
   const rux = rc, ruy = rs
   const rvx = -rs, rvy = rc
   const rox = (r.x || 0) * rsx
@@ -186,7 +186,7 @@ function checkPolyPolyCollision(
 
   // Frame A
   const asx = ta.scaleX.v, asy = ta.scaleY.v
-  const acs = ta.rotation.cos, asn = ta.rotation.sin
+  const acs = ta.cos, asn = ta.sin
   const aux = acs, auy = asn
   const avx = -asn, avy = acs
   const aox = ((a as any).x || 0) * asx
@@ -196,7 +196,7 @@ function checkPolyPolyCollision(
 
   // Frame B
   const bsx = tb.scaleX.v, bsy = tb.scaleY.v
-  const bcs = tb.rotation.cos, bsn = tb.rotation.sin
+  const bcs = tb.cos, bsn = tb.sin
   const bux = bcs, buy = bsn
   const bvx = -bsn, bvy = bcs
   const box = ((b as any).x || 0) * bsx
@@ -284,7 +284,7 @@ function checkPolyCircleCollision(poly: PolygonCollider, tp: WorldTransform, c:
 
   // Poly frame
   const psx = tp.scaleX.v, psy = tp.scaleY.v
-  const pcs = tp.rotation.cos, psn = tp.rotation.sin
+  const pcs = tp.cos, psn = tp.sin
   const pux = pcs, puy = psn
   const pvx = -psn, pvy = pcs
   const pox = ((poly as any).x || 0) * psx
@@ -361,7 +361,7 @@ function checkPolyRectCollision(poly: PolygonCollider, tp: WorldTransform, r: Re
 
   // Poly frame
   const psx = tp.scaleX.v, psy = tp.scaleY.v
-  const pcs = tp.rotation.cos, psn = tp.rotation.sin
+  const pcs = tp.cos, psn = tp.sin
   const pux = pcs, puy = psn
   const pvx = -psn, pvy = pcs
   const pox = ((poly as any).x || 0) * psx
@@ -373,7 +373,7 @@ function checkPolyRectCollision(poly: PolygonCollider, tp: WorldTransform, r: Re
   const rsx = tr.scaleX.v, rsy = tr.scaleY.v
   const rhx = abs(r.width * rsx) * 0.5
   const rhy = abs(r.height * rsy) * 0.5
-  const rc = tr.rotation.cos, rs = tr.rotation.sin
+  const rc = tr.cos, rs = tr.sin
   const rux = rc, ruy = rs
   const rvx = -rs, rvy = rc
   const rox = (r.x || 0) * rsx, roy = (r.y || 0) * rsy
@@ -651,7 +651,7 @@ function checkEllipseRectCollision(
   const esx = te.scaleX.v, esy = te.scaleY.v
   _Arx = abs(e.width * esx) * 0.5
   _Ary = abs(e.height * esy) * 0.5
-  const ecs = te.rotation.cos, esn = te.rotation.sin
+  const ecs = te.cos, esn = te.sin
   _Aux = ecs; _Auy = esn; _Avx = -esn; _Avy = ecs
   const eox = (e.x || 0) * esx, eoy = (e.y || 0) * esy
   _Acx = te.x.v + _Aux * eox + _Avx * eoy
@@ -663,7 +663,7 @@ function checkEllipseRectCollision(
   const rsx = tr.scaleX.v, rsy = tr.scaleY.v
   _Bhx = abs(r.width * rsx) * 0.5
   _Bhy = abs(r.height * rsy) * 0.5
-  const rcs = tr.rotation.cos, rsn = tr.rotation.sin
+  const rcs = tr.cos, rsn = tr.sin
   _Bux = rcs; _Buy = rsn; _Bvx = -rsn; _Bvy = rcs
   const rox = (r.x || 0) * rsx, roy = (r.y || 0) * rsy
   _Bcx = tr.x.v + _Bux * rox + _Bvx * roy
@@ -682,7 +682,7 @@ function checkEllipseCircleCollision(
   const esx = te.scaleX.v, esy = te.scaleY.v
   _Arx = abs(e.width * esx) * 0.5
   _Ary = abs(e.height * esy) * 0.5
-  const ecs = te.rotation.cos, esn = te.rotation.sin
+  const ecs = te.cos, esn = te.sin
   _Aux = ecs; _Auy = esn; _Avx = -esn; _Avy = ecs
   const eox = (e.x || 0) * esx, eoy = (e.y || 0) * esy
   _Acx = te.x.v + _Aux * eox + _Avx * eoy
@@ -708,7 +708,7 @@ function checkEllipseEllipseCollision(
   const asx = ta.scaleX.v, asy = ta.scaleY.v
   _Arx = abs(a.width * asx) * 0.5
   _Ary = abs(a.height * asy) * 0.5
-  const acs = ta.rotation.cos, asn = ta.rotation.sin
+  const acs = ta.cos, asn = ta.sin
   _Aux = acs; _Auy = asn; _Avx = -asn; _Avy = acs
   const aox = (a.x || 0) * asx, aoy = (a.y || 0) * asy
   _Acx = ta.x.v + _Aux * aox + _Avx * aoy
@@ -720,7 +720,7 @@ function checkEllipseEllipseCollision(
   const bsx = tb.scaleX.v, bsy = tb.scaleY.v
   _Brx = abs(b.width * bsx) * 0.5
   _Bry = abs(b.height * bsy) * 0.5
-  const bcs = tb.rotation.cos, bsn = tb.rotation.sin
+  const bcs = tb.cos, bsn = tb.sin
   _Bux = bcs; _Buy = bsn; _Bvx = -bsn; _Bvy = bcs
   const box = (b.x || 0) * bsx, boy = (b.y || 0) * bsy
   _Bcx = tb.x.v + _Bux * box + _Bvx * boy
@@ -735,7 +735,7 @@ function checkEllipseEllipseCollision(
 function checkPolyEllipseCollision(poly: PolygonCollider, tp: WorldTransform, e: EllipseCollider, te: WorldTransform): boolean {
   // A = Poly (LOCAL + Transform) → use PolyLocal support; reuse A scratch slots
   const psx = tp.scaleX.v, psy = tp.scaleY.v
-  const pcs = tp.rotation.cos, psn = tp.rotation.sin
+  const pcs = tp.cos, psn = tp.sin
   const pux = pcs, puy = psn
   const pvx = -psn, pvy = pcs
   const pox = ((poly as any).x || 0) * psx
@@ -751,7 +751,7 @@ function checkPolyEllipseCollision(poly: PolygonCollider, tp: WorldTransform, e:
   const esx = te.scaleX.v, esy = te.scaleY.v
   _Brx = abs(e.width * esx) * 0.5
   _Bry = abs(e.height * esy) * 0.5
-  const ecs = te.rotation.cos, esn = te.rotation.sin
+  const ecs = te.cos, esn = te.sin
   _Bux = ecs; _Buy = esn; _Bvx = -esn; _Bvy = ecs
   const eox = (e.x || 0) * esx, eoy = (e.y || 0) * esy
   _Bcx = te.x.v + _Bux * eox + _Bvx * eoy

package/src/dom/dom-animated-sprite.ts

@@ -1,29 +1,24 @@
 import { EventMap } from '@webtaku/event-emitter'
-import { SpritesheetData } from 'pixi.js'
+import { Animation, Atlas } from '../types/atlas'
 import { DomGameObject, DomGameObjectOptions } from './dom-game-object'
 import { domTextureLoader } from './dom-texture-loader'
 import { setStyle } from './dom-utils'
 
 export type DomAnimatedSpriteNodeOptions = {
   src: string
-  atlas: SpritesheetData
+  atlas: Atlas
   animation: string
-  fps: number
-  loop?: boolean
 } & DomGameObjectOptions
 
 export class DomAnimatedSpriteNode<E extends EventMap = EventMap> extends DomGameObject<E & {
   animationend: (animation: string) => void
 }> {
   #src: string
-  #atlas: SpritesheetData
+  #atlas: Atlas
   #animation: string
-  #fps: number
-  #loop: boolean
 
-  #frames: string[] = []
+  #animationData?: Animation
   #frameDuration?: number
-  #textureScale = 1
   #elapsedTime = 0
   #currentFrameIdx = 0
 
@@ -32,8 +27,6 @@ export class DomAnimatedSpriteNode<E extends EventMap = EventMap> extends DomGam
     this.#src = options.src
     this.#atlas = options.atlas
     this.#animation = options.animation
-    this.#fps = options.fps
-    this.#loop = options.loop ?? true
     this.#load()
   }
 
@@ -46,31 +39,30 @@ export class DomAnimatedSpriteNode<E extends EventMap = EventMap> extends DomGam
       texture = await domTextureLoader.load(this.#src)
     }
 
-    const S = this.#atlas.meta.scale === 'auto' ? 1 : Number(this.#atlas.meta.scale)
+    const a = this.#atlas.animations[this.#animation]
+    this.#animationData = a
+    this.#frameDuration = 1 / a.fps
 
-    this.#frameDuration = 1 / this.#fps
-    this.#frames = this.#atlas.animations?.[this.#animation] ?? []
-    this.#textureScale = S
-
-    const frameName = this.#frames[this.#currentFrameIdx]
-    const frame = this.#atlas.frames[frameName].frame
+    const frameName = a.frames[this.#currentFrameIdx]
+    const frame = this.#atlas.frames[frameName]
 
     setStyle(this.el, !frameName || !texture ? { backgroundImage: 'none' } : {
       backgroundImage: `url(${this.#src})`,
-      width: `${frame.w * S}px`,
-      height: `${frame.h * S}px`,
-      backgroundSize: `${texture.width * S}px ${texture.height * S}px`,
-      backgroundPosition: `-${frame.x * S}px -${frame.y * S}px`
+      width: `${frame.w}px`,
+      height: `${frame.h}px`,
+      backgroundSize: `${texture.width}px ${texture.height}px`,
+      backgroundPosition: `-${frame.x}px -${frame.y}px`
     })
   }
 
   override render(dt: number) {
     super.render(dt)
 
-    if (this.#frameDuration === undefined || this.#frames.length === 0) return
+    const a = this.#animationData
+    if (!a || a.frames.length === 0 || this.#frameDuration === undefined) return
 
-    const lastIndex = this.#frames.length - 1
-    if (!this.#loop && this.#currentFrameIdx === lastIndex) return
+    const lastIndex = a.frames.length - 1
+    if (!a.loop && this.#currentFrameIdx === lastIndex) return
 
     this.#elapsedTime += dt
     if (this.#elapsedTime < this.#frameDuration) return
@@ -81,7 +73,7 @@ export class DomAnimatedSpriteNode<E extends EventMap = EventMap> extends DomGam
       if (this.#currentFrameIdx === lastIndex) {
         (this as any).emit('animationend', this.#animation)
 
-        if (this.#loop) {
+        if (a.loop) {
           this.#currentFrameIdx = 0
         } else {
           this.#elapsedTime = 0
@@ -92,14 +84,13 @@ export class DomAnimatedSpriteNode<E extends EventMap = EventMap> extends DomGam
       }
     }
 
-    const S = this.#textureScale
-    const frameName = this.#frames[this.#currentFrameIdx]
-    const frame = this.#atlas.frames[frameName].frame
+    const frameName = a.frames[this.#currentFrameIdx]
+    const frame = this.#atlas.frames[frameName]
 
     setStyle(this.el, {
-      width: `${frame.w * S}px`,
-      height: `${frame.h * S}px`,
-      backgroundPosition: `-${frame.x * S}px -${frame.y * S}px`
+      width: `${frame.w}px`,
+      height: `${frame.h}px`,
+      backgroundPosition: `-${frame.x}px -${frame.y}px`
     })
   }
 
@@ -126,7 +117,7 @@ export class DomAnimatedSpriteNode<E extends EventMap = EventMap> extends DomGam
   set animation(animation) {
     if (this.#animation !== animation) {
       this.#animation = animation
-      this.#frames = this.#atlas.animations?.[animation] ?? []
+      this.#animationData = this.#atlas.animations[animation]
       this.#currentFrameIdx = 0
       this.#elapsedTime = 0
     }
@@ -134,18 +125,6 @@ export class DomAnimatedSpriteNode<E extends EventMap = EventMap> extends DomGam
 
   get animation() { return this.#animation }
 
-  set fps(fps) {
-    if (this.#fps !== fps) {
-      this.#fps = fps
-      this.#frameDuration = 1 / fps
-    }
-  }
-
-  get fps() { return this.#fps }
-
-  set loop(loop) { this.#loop = loop }
-  get loop() { return this.#loop }
-
   override remove() {
     domTextureLoader.release(this.#src)
     super.remove()

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

@@ -1,10 +1,13 @@
 import { EventMap } from '@webtaku/event-emitter'
 import { DirtyNumber } from '../node/core/dirty-number'
 import { GameNode } from '../node/core/game-node'
-import { isRenderableNode } from '../node/core/renderable'
 import { LocalTransform, WorldTransform } from '../node/core/transform'
 import { setStyle } from './dom-utils'
 
+export function isDomGameObject(v: unknown): v is DomGameObject {
+  return (v as DomGameObject).worldTransform !== undefined
+}
+
 export type DomGameObjectOptions = {
   x?: number
   y?: number
@@ -68,12 +71,12 @@ export class DomGameObject<E extends EventMap = EventMap> extends GameNode<E> {
 
   render(dt: number) {
     this.update(dt)
-    this._updateWorldTransform()
+    this.#updateWorldTransform()
   }
 
-  protected _updateWorldTransform() {
+  #updateWorldTransform() {
     const parent = this.parent
-    if (parent && isRenderableNode(parent)) {
+    if (parent && isDomGameObject(parent)) {
       this.worldTransform.update(parent.worldTransform, this.#localTransform)
       this.worldAlpha.v = parent.worldAlpha.v * this.alpha
     }
@@ -93,7 +96,7 @@ export class DomGameObject<E extends EventMap = EventMap> extends GameNode<E> {
     if (this.worldAlpha.dirty) this.el.style.opacity = this.worldAlpha.v.toString()
 
     for (const child of this.children) {
-      if (isRenderableNode(child)) child._updateWorldTransform()
+      if (isDomGameObject(child)) child.#updateWorldTransform()
     }
     this.worldTransform.resetDirty()
   }
@@ -101,7 +104,7 @@ export class DomGameObject<E extends EventMap = EventMap> extends GameNode<E> {
   attachTo(target: HTMLElement) {
     target.appendChild(this.el)
     this.parent = new DomRootNode()
-    this._updateWorldTransform()
+    this.#updateWorldTransform()
     return this
   }
 

package/src/dom/dom-particle.ts

@@ -120,7 +120,7 @@ export class DomParticleSystem extends DomGameObject {
     }
   }
 
-  protected update(dt: number) {
+  protected override update(dt: number) {
     super.update(dt)
 
     const ps = this.#particles

package/src/index.ts

@@ -28,6 +28,7 @@ export { SpriteNode, SpriteNodeOptions } from './node/ext/sprite'
 // Physics
 export { PhysicsObject, PhysicsObjectOptions } from './node/physics/physics-object'
 export { PhysicsWorld } from './node/physics/physics-world'
+export { CircleRigidbody, PolygonRigidbody, RectangleRigidbody, Rigidbody, RigidbodyType } from './node/physics/rigidbodies'
 
 // DOM Nodes
 export { DomAnimatedSpriteNode } from './dom/dom-animated-sprite'

package/src/node/core/dirty-number.ts

@@ -19,27 +19,3 @@ export class DirtyNumber {
     this.#isDirty = false
   }
 }
-
-export class DirtyRadian extends DirtyNumber {
-  #cos: number
-  #sin: number
-
-  constructor(initialValue: number) {
-    super(initialValue)
-    this.#cos = Math.cos(initialValue)
-    this.#sin = Math.sin(initialValue)
-  }
-
-  get cos() { return this.#cos }
-  get sin() { return this.#sin }
-
-  override set v(newValue: number) {
-    if (super.v !== newValue) {
-      this.#cos = Math.cos(newValue)
-      this.#sin = Math.sin(newValue)
-    }
-    super.v = newValue
-  }
-
-  override get v() { return super.v }
-}

package/src/node/core/renderable.ts

@@ -57,7 +57,14 @@ export abstract class RenderableNode<C extends PixiContainer, E extends EventMap
     for (const child of this.children) {
       if (isRenderableNode(child)) child._updateWorldTransform()
     }
+  }
+
+  _resetWorldTransformDirty() {
+    for (const child of this.children) {
+      if (isRenderableNode(child)) child._resetWorldTransformDirty()
+    }
     this.worldTransform.resetDirty()
+    this.worldAlpha.resetDirty()
   }
 
   set tint(t) { this._pixiContainer.tint = t }

package/src/node/core/transform.ts

@@ -1,4 +1,4 @@
-import { DirtyNumber, DirtyRadian } from './dirty-number'
+import { DirtyNumber } from './dirty-number'
 
 export class LocalTransform {
   x = 0
@@ -26,30 +26,42 @@ export class LocalTransform {
 }
 
 export class WorldTransform {
-  x = new DirtyNumber(Number.NEGATIVE_INFINITY)
-  y = new DirtyNumber(Number.NEGATIVE_INFINITY)
+  x = new DirtyNumber(NaN)
+  y = new DirtyNumber(NaN)
   scaleX = new DirtyNumber(1)
   scaleY = new DirtyNumber(1)
-  rotation = new DirtyRadian(0)
+  rotation = new DirtyNumber(0)
+  cos = 1
+  sin = 0
 
   update(parent: WorldTransform, local: LocalTransform) {
     const rx = local.x * parent.scaleX.v
     const ry = local.y * parent.scaleY.v
-    const pCos = parent.rotation.cos
-    const pSin = parent.rotation.sin
+    const pCos = parent.cos
+    const pSin = parent.sin
 
     this.scaleX.v = parent.scaleX.v * local.scaleX
     this.scaleY.v = parent.scaleY.v * local.scaleY
 
     const pivotX = local.pivotX * this.scaleX.v
     const pivotY = local.pivotY * this.scaleY.v
-    const cos = local.cos
-    const sin = local.sin
 
-    this.x.v = parent.x.v + (rx * pCos - ry * pSin) - (pivotX * cos - pivotY * sin)
-    this.y.v = parent.y.v + (rx * pSin + ry * pCos) - (pivotX * sin + pivotY * cos)
+    // 로컬 회전
+    const lCos = local.cos
+    const lSin = local.sin
+    // 월드 회전(부모+자식) cos/sin — 덧셈정리
+    const wCos = pCos * lCos - pSin * lSin
+    const wSin = pSin * lCos + pCos * lSin
 
-    this.rotation.v = parent.rotation.v + local.rotation
+    // 위치: 부모 회전으로 (rx,ry) 회전 + 월드 회전으로 피벗 보정
+    this.x.v = parent.x.v + (rx * pCos - ry * pSin) - (pivotX * wCos - pivotY * wSin)
+    this.y.v = parent.y.v + (rx * pSin + ry * pCos) - (pivotX * wSin + pivotY * wCos)
+
+    // 회전(스칼라 값)
+    const rot = parent.rotation.v + local.rotation
+    this.rotation.v = rot
+    this.cos = wCos
+    this.sin = wSin
   }
 
   get dirty() {

package/src/node/ext/animated-sprite.ts

@@ -1,24 +1,21 @@
 import { EventMap } from '@webtaku/event-emitter'
-import { AnimatedSprite as PixiAnimatedSprite, Spritesheet, SpritesheetData } from 'pixi.js'
+import { AnimatedSprite as PixiAnimatedSprite, Spritesheet } from 'pixi.js'
 import { getCachedAtlasId, spritesheetLoader } from '../../asset/loaders/spritesheet'
+import { Atlas } from '../../types/atlas'
 import { GameObject, GameObjectOptions } from '../core/game-object'
 
 export type AnimatedSpriteNodeOptions = {
   src: string
-  atlas: SpritesheetData
+  atlas: Atlas
   animation: string
-  fps: number
-  loop?: boolean
 } & GameObjectOptions
 
 export class AnimatedSpriteNode<E extends EventMap = EventMap> extends GameObject<E & {
   animationend: (animation: string) => void
 }> {
   #src: string
-  #atlas: SpritesheetData
+  #atlas: Atlas
   #animation: string
-  #fps: number
-  #loop: boolean
 
   #atlasId!: string
   #sheet?: Spritesheet
@@ -29,8 +26,6 @@ export class AnimatedSpriteNode<E extends EventMap = EventMap> extends GameObjec
     this.#src = options.src
     this.#atlas = options.atlas
     this.#animation = options.animation
-    this.#fps = options.fps
-    this.#loop = options.loop ?? true
     this.#load()
   }
 
@@ -57,13 +52,16 @@ export class AnimatedSpriteNode<E extends EventMap = EventMap> extends GameObjec
         return
       }
 
+      const a = this.#atlas.animations[this.#animation]
       const s = new PixiAnimatedSprite(this.#sheet.animations[this.#animation])
+
       s.anchor.set(0.5, 0.5)
-      s.loop = this.#loop
-      s.animationSpeed = (this.#fps ?? 0) / 60
+      s.loop = a.loop
+      s.animationSpeed = a.fps / 60
       s.play()
       s.onLoop = () => (this as any).emit('animationend', this.#animation)
       s.onComplete = () => (this as any).emit('animationend', this.#animation)
+
       this._pixiContainer.addChild(s)
       this.#sprite = s
     }
@@ -98,24 +96,6 @@ export class AnimatedSpriteNode<E extends EventMap = EventMap> extends GameObjec
 
   get animation() { return this.#animation }
 
-  set fps(fps) {
-    if (this.#fps !== fps) {
-      this.#fps = fps
-      if (this.#sprite) this.#sprite.animationSpeed = (fps ?? 0) / 60
-    }
-  }
-
-  get fps() { return this.#fps }
-
-  set loop(loop) {
-    if (this.#loop !== loop) {
-      this.#loop = loop
-      if (this.#sprite) this.#sprite.loop = loop
-    }
-  }
-
-  get loop() { return this.#loop }
-
   remove() {
     spritesheetLoader.release(this.#atlasId)
     super.remove()

package/src/node/ext/bitmap-text.ts

@@ -13,6 +13,7 @@ export class BitmapTextNode<E extends EventMap = EventMap> extends GameObject<E>
   #fnt: string
   #src: string
   #text: string
+  #sprites: PixiSprite[] = []
 
   constructor(options: BitmapTextNodeOptions) {
     super(options)
@@ -32,7 +33,10 @@ export class BitmapTextNode<E extends EventMap = EventMap> extends GameObject<E>
     }
     if (!font) return
 
-    const sprites: PixiSprite[] = []
+    for (const sprite of this.#sprites) {
+      sprite.destroy()
+    }
+    this.#sprites = []
 
     let xPos = 0, yPos = 0
     let minX = Infinity, minY = Infinity
@@ -60,7 +64,7 @@ export class BitmapTextNode<E extends EventMap = EventMap> extends GameObject<E>
       sprite.x = x0
       sprite.y = y0
 
-      sprites.push(sprite)
+      this.#sprites.push(sprite)
 
       const x1 = x0 + c.width
       const y1 = y0 + c.height
@@ -86,7 +90,7 @@ export class BitmapTextNode<E extends EventMap = EventMap> extends GameObject<E>
     const width = maxX - minX
     const height = maxY - minY
 
-    for (const s of sprites) {
+    for (const s of this.#sprites) {
       s.x -= width / 2
       s.y -= height / 2
       this._pixiContainer.addChild(s)