kiwiengine 0.0.1-alpha → 0.5.2

package/src/node/ext/spine.ts

@@ -0,0 +1,323 @@
+import { AtlasAttachmentLoader, Spine as PixiSpine, SkeletonBinary, SkeletonJson, Skin, 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 '../core/game-object'
+
+export type SpineNodeOptions = {
+  atlas: string
+  texture: string | Record<string, string>
+
+  rawSkeletonData?: any
+  skel?: string
+  json?: string
+
+  skins?: string[]
+  animation?: string
+  loop?: boolean
+} & GameObjectOptions
+
+export class SpineNode<E extends EventMap = EventMap> extends GameObject<E & {
+  animationend: (animation: string) => void
+}> {
+  #atlas: string
+  #texture: string | Record<string, string>
+
+  #rawSkeletonData?: any
+  #skel?: string
+  #json?: string
+
+  #skins?: string[]
+  #animation?: string
+  #loop?: boolean
+
+  #spine?: PixiSpine
+
+  constructor(options: SpineNodeOptions) {
+    super(options)
+    this.#atlas = options.atlas
+    this.#texture = options.texture
+    this.#rawSkeletonData = options.rawSkeletonData
+    this.#skel = options.skel
+    this.#json = options.json
+    this.#skins = options.skins
+    this.#animation = options.animation
+    this.#loop = options.loop
+    this.#load()
+  }
+
+  #buildSkeletonData(
+    atlasText: string,
+    texture: Texture | undefined,
+    textures: Record<string, Texture> | undefined,
+    skeletonBinary: Uint8Array | undefined,
+    textSkeletonData: string | undefined
+  ) {
+    if (!atlasText) return undefined
+    if (!texture && !textures) return undefined
+    if (!this.rawSkeletonData && !skeletonBinary && !textSkeletonData) return undefined
+
+    // Create TextureAtlas and bind pages to provided textures
+    const atlas = new TextureAtlas(atlasText)
+    atlas.pages.forEach((page) => {
+      if (texture) {
+        page.setTexture(SpineTexture.from(texture.source))
+      } else if (textures) {
+        const t = textures[page.name]
+        if (!t) throw new Error(`Missing texture for atlas page: ${page.name}`)
+        page.setTexture(SpineTexture.from(t.source))
+      }
+    })
+
+    const atlasLoader = new AtlasAttachmentLoader(atlas)
+
+    // Parse skeleton data depending on available source
+    if (this.rawSkeletonData) {
+      const jsonLoader = new SkeletonJson(atlasLoader)
+      return jsonLoader.readSkeletonData(this.rawSkeletonData)
+    }
+    if (skeletonBinary) {
+      const binLoader = new SkeletonBinary(atlasLoader)
+      return binLoader.readSkeletonData(skeletonBinary)
+    }
+    if (textSkeletonData) {
+      const jsonLoader = new SkeletonJson(atlasLoader)
+      return jsonLoader.readSkeletonData(textSkeletonData)
+    }
+    return undefined
+  }
+
+  #getCachedSkeletonData() {
+    try {
+      if (!this.#rawSkeletonData && !this.#skel && !this.#json) return undefined
+      if (!textLoader.checkCached(this.#atlas)) return undefined
+
+      const atlasText = textLoader.getCached(this.#atlas)!
+
+      let texture: Texture | undefined
+      let textures: Record<string, Texture> | undefined
+
+      if (typeof this.#texture === 'string') {
+        if (!textureLoader.checkCached(this.#texture)) return undefined
+        texture = textureLoader.getCached(this.#texture)!
+      } else if (this.#texture) {
+        textures = {}
+        for (const [key, path] of Object.entries(this.#texture)) {
+          if (!textureLoader.checkCached(path)) return undefined
+          textures[key] = textureLoader.getCached(path)!
+        }
+      } else {
+        return undefined
+      }
+
+      let skeletonBinary: Uint8Array | undefined
+      let textSkeletonData: string | undefined
+
+      if (!this.#rawSkeletonData) {
+        if (this.#skel) {
+          if (!binaryLoader.checkCached(this.#skel)) return undefined
+          skeletonBinary = binaryLoader.getCached(this.#skel)!
+        } else if (this.#json) {
+          if (!textLoader.checkCached(this.#json)) return undefined
+          textSkeletonData = textLoader.getCached(this.#json)!
+        }
+      }
+
+      return this.#buildSkeletonData(
+        atlasText,
+        texture,
+        textures,
+        skeletonBinary,
+        textSkeletonData,
+      )
+    } catch (e) {
+      console.error('Failed to build skeleton data from cache:', e)
+      return undefined
+    }
+  }
+
+  async #loadSkeletonData() {
+    if (!this.#rawSkeletonData && !this.#skel && !this.#json) return undefined
+
+    const promises: Promise<any>[] = []
+
+    let atlasText: string | undefined
+    let skeletonBinary: Uint8Array | undefined
+    let textSkeletonData: string | undefined
+    let texture: Texture | undefined
+    let textures: Record<string, Texture> | undefined
+
+    // Load atlas (text)
+    if (!textLoader.checkCached(this.#atlas)) console.info(`Atlas not preloaded. Loading now: ${this.#atlas}`)
+    promises.push((async () => (atlasText = await textLoader.load(this.#atlas)))())
+
+    // Load skeleton (raw / binary / json)
+    if (this.#rawSkeletonData) {
+      // already provided
+    } else if (this.#skel) {
+      if (!binaryLoader.checkCached(this.#skel)) console.info(`Skeleton not preloaded. Loading now: ${this.#skel}`)
+      promises.push((async () => (skeletonBinary = await binaryLoader.load(this.#skel!)))())
+    } else if (this.#json) {
+      if (!textLoader.checkCached(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 undefined
+    }
+
+    // Load textures (single or multiple)
+    if (typeof this.#texture === 'string') {
+      if (!textureLoader.checkCached(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.checkCached(path)) console.info(`Texture not preloaded. Loading now: ${path}`)
+        promises.push((async () => {
+          const t = await textureLoader.load(path)
+          if (t) textures![key] = t
+        })())
+      }
+    }
+
+    await Promise.all(promises)
+
+    if (!atlasText) return undefined
+    if (!texture && !(textures && Object.keys(textures).length)) return undefined
+
+    return this.#buildSkeletonData(
+      atlasText,
+      texture,
+      textures,
+      skeletonBinary,
+      textSkeletonData,
+    )
+  }
+
+  async #load() {
+    let skeletonData = this.#getCachedSkeletonData()
+    if (!skeletonData) {
+      skeletonData = await this.#loadSkeletonData()
+    }
+
+    this.#spine?.destroy()
+    this.#spine = undefined
+
+    if (skeletonData) {
+      const s = new PixiSpine(skeletonData)
+      s.state.addListener({
+        complete: (e) => (this as any).emit('animationend', e.animation?.name ?? '')
+      })
+      this.#spine = s
+      this.#updateAnimation()
+      this.#updateSkins()
+      this._pixiContainer.addChild(s)
+    }
+  }
+
+  #updateSkins() {
+    const s = this.#spine?.skeleton
+    if (s && this.#skins) {
+      const newSkin = new Skin('combined-skin')
+      for (const skinName of this.#skins) {
+        const skin = s.data.findSkin(skinName)
+        if (skin) newSkin.addSkin(skin)
+      }
+      s.setSkin(newSkin)
+      s.setSlotsToSetupPose()
+    }
+  }
+
+  #updateAnimation() {
+    const s = this.#spine
+    if (s && this.#animation) {
+      s.state.setAnimation(0, this.#animation, this.#loop ?? true)
+      s.state.apply(s.skeleton)
+    }
+  }
+
+  set atlas(atlas) {
+    if (this.#atlas !== atlas) {
+      this.#atlas = atlas
+      this.#load()
+    }
+  }
+
+  get atlas() { return this.#atlas }
+
+  set texture(texture) {
+    if (this.#texture !== texture) {
+      this.#texture = texture
+      this.#load()
+    }
+  }
+
+  get texture() { return this.#texture }
+
+  set rawSkeletonData(rawSkeletonData) {
+    if (this.#rawSkeletonData !== rawSkeletonData) {
+      this.#rawSkeletonData = rawSkeletonData
+      this.#load()
+    }
+  }
+
+  get rawSkeletonData() { return this.#rawSkeletonData }
+
+  set skel(skel) {
+    if (this.#skel !== skel) {
+      this.#skel = skel
+      this.#load()
+    }
+  }
+
+  get skel() { return this.#skel }
+
+  set json(json) {
+    if (this.#json !== json) {
+      this.#json = json
+      this.#load()
+    }
+  }
+
+  get json() { return this.#json }
+
+  set skins(skins) {
+    if (this.#skins !== skins) {
+      this.#skins = skins
+      this.#updateSkins()
+    }
+  }
+
+  get skins() { return this.#skins }
+
+  set animation(animation) {
+    if (this.#animation !== animation) {
+      this.#animation = animation
+      this.#updateAnimation()
+    }
+  }
+
+  get animation() { return this.#animation }
+
+  set loop(loop) {
+    if (this.#loop !== loop) {
+      this.#loop = loop
+      this.#updateAnimation()
+    }
+  }
+
+  get loop() { return this.#loop }
+
+  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()
+  }
+}

package/src/node/ext/sprite.ts

@@ -0,0 +1,53 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { Sprite as PixiSprite } from 'pixi.js'
+import { textureLoader } from '../../asset/loaders/texture'
+import { GameObject, GameObjectOptions } from '../core/game-object'
+
+export type SpriteNodeOptions = {
+  src: string
+} & GameObjectOptions
+
+export class SpriteNode<E extends EventMap = EventMap> extends GameObject<E> {
+  #src: string
+  #sprite?: PixiSprite
+
+  constructor(options: SpriteNodeOptions) {
+    super(options)
+    this.#src = options.src
+    this.#load()
+  }
+
+  async #load() {
+    let texture
+    if (textureLoader.checkCached(this.#src)) {
+      texture = textureLoader.getCached(this.#src)
+    } else {
+      console.info(`Texture not preloaded. Loading now: ${this.#src}`)
+      texture = await textureLoader.load(this.#src)
+    }
+
+    this.#sprite?.destroy()
+    this.#sprite = undefined
+
+    if (texture) {
+      const s = new PixiSprite({ texture, anchor: 0.5, zIndex: -999999 })
+      this._pixiContainer.addChild(s)
+      this.#sprite = s
+    }
+  }
+
+  set src(src) {
+    if (this.#src !== src) {
+      textureLoader.release(this.#src)
+      this.#src = src
+      this.#load()
+    }
+  }
+
+  get src() { return this.#src }
+
+  override remove() {
+    textureLoader.release(this.#src)
+    super.remove()
+  }
+}

package/src/node/physics/physics-object.ts

@@ -0,0 +1,156 @@
+import { EventMap } from '@webtaku/event-emitter'
+import Matter, { IChamferableBodyDefinition } from 'matter-js'
+import { Container as PixiContainer } from 'pixi.js'
+import { Collider, ColliderType } from '../../collision/colliders'
+import { GameNode } from '../core/game-node'
+import { isRenderableNode, RenderableNode } from '../core/renderable'
+import { LocalTransform } from '../core/transform'
+import { PhysicsWorld } from './physics-world'
+
+function createEllipseBody(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  options: IChamferableBodyDefinition = {},
+  // segLen은 "인접 정점 사이의 목표 간격(px)" 정도로 생각하면 됩니다.
+  segLen = 6
+): Matter.Body {
+  const rx = width / 2
+  const ry = height / 2
+
+  // 주변길이 ~ π(a+b) 근사 → 그 길이를 segLen 간격으로 쪼개서 정점 수 결정
+  const perimeterApprox = Math.PI * (rx + ry)
+  const segments = Math.max(12, Math.ceil(perimeterApprox / segLen))
+
+  const verts = Array.from({ length: segments }, (_, i) => {
+    const t = (i / segments) * Math.PI * 2
+    return { x: Math.cos(t) * rx, y: Math.sin(t) * ry }
+  })
+
+  // fromVertices는 로컬 기준이므로 x,y는 중심 위치로 넘깁니다.
+  return Matter.Bodies.fromVertices(x, y, [verts], options)
+}
+
+export type PhysicsObjectOptions = {
+  collider: Collider
+  x?: number
+  y?: number
+  rotation?: number
+  fixedRotation?: boolean
+  velocityX?: number
+  velocityY?: number
+  isStatic?: boolean
+
+  useYSort?: boolean
+}
+
+export class PhysicsObject<E extends EventMap = EventMap> extends RenderableNode<PixiContainer, E> {
+  #localTransform = new LocalTransform()
+  #matterBody: Matter.Body
+
+  #useYSort = false
+
+  constructor(options: PhysicsObjectOptions) {
+    super(new PixiContainer({ sortableChildren: true }))
+
+    const c = options.collider
+    const x = options.x ?? 0
+    const y = options.y ?? 0
+
+    const bodyOptions: IChamferableBodyDefinition = {
+      angle: options.rotation ?? 0,
+      velocity: { x: options.velocityX ?? 0, y: options.velocityY ?? 0 },
+      isStatic: options.isStatic ?? false
+    }
+
+    if (options.fixedRotation) {
+      bodyOptions.inertia = Infinity
+      bodyOptions.angularVelocity = 0
+    }
+
+    if (c.type === ColliderType.Rectangle) {
+      this.#matterBody = Matter.Bodies.rectangle(x, y, c.width, c.height, bodyOptions)
+    } else if (c.type === ColliderType.Circle) {
+      this.#matterBody = Matter.Bodies.circle(x, y, c.radius, bodyOptions)
+    } else if (c.type === ColliderType.Ellipse) {
+      this.#matterBody = createEllipseBody(
+        x, y, c.width, c.height, bodyOptions,
+        /* segLen= */ 6 // 더 매끄럽게 하고 싶으면 더 작게
+      )
+    } else if (c.type === ColliderType.Polygon) {
+      this.#matterBody = Matter.Bodies.fromVertices(x, y, [c.vertices], bodyOptions)
+    } else {
+      throw new Error('Invalid collider type')
+    }
+
+    this.#useYSort = options.useYSort ?? false
+  }
+
+  protected override set parent(parent: GameNode<EventMap> | undefined) {
+    if (!(parent instanceof PhysicsWorld)) {
+      const actual = parent === undefined
+        ? 'undefined'
+        : parent.constructor?.name ?? typeof parent
+      throw new Error(`PhysicsObject parent must be PhysicsWorld, but got ${actual}`)
+    }
+    parent.addBody(this.#matterBody)
+    super.parent = parent
+  }
+
+  protected override get parent() {
+    return super.parent
+  }
+
+  override _updateWorldTransform() {
+    const mb = this.#matterBody
+
+    const pc = this._pixiContainer
+    pc.position.set(mb.position.x, mb.position.y)
+    if (this.#useYSort) pc.zIndex = mb.position.y
+    pc.rotation = mb.angle
+
+    const lt = this.#localTransform
+    lt.x = mb.position.x
+    lt.y = mb.position.y
+    lt.rotation = mb.angle
+
+    const parent = this.parent
+    if (parent && isRenderableNode(parent)) {
+      this.worldTransform.update(parent.worldTransform, this.#localTransform)
+    }
+
+    super._updateWorldTransform()
+  }
+
+  #removeFromWorld() {
+    (this.parent as PhysicsWorld)?.removeBody(this.#matterBody)
+  }
+
+  override remove() {
+    this.#removeFromWorld()
+    super.remove()
+  }
+
+  set x(v) { Matter.Body.setPosition(this.#matterBody, { x: v, y: this.#matterBody.position.y }) }
+  get x() { return this.#matterBody.position.x }
+
+  set y(v) { Matter.Body.setPosition(this.#matterBody, { x: this.#matterBody.position.x, y: v }) }
+  get y() { return this.#matterBody.position.y }
+
+  set rotation(v) { Matter.Body.setAngle(this.#matterBody, v) }
+  get rotation() { return this.#matterBody.angle }
+
+  set velocityX(v) { Matter.Body.setVelocity(this.#matterBody, { x: v, y: this.#matterBody.velocity.y }) }
+  get velocityX() { return this.#matterBody.velocity.x }
+
+  set velocityY(v) { Matter.Body.setVelocity(this.#matterBody, { x: this.#matterBody.velocity.x, y: v }) }
+  get velocityY() { return this.#matterBody.velocity.y }
+
+  set isStatic(v) { Matter.Body.setStatic(this.#matterBody, v) }
+  get isStatic() { return this.#matterBody.isStatic }
+
+  disableCollisions() {
+    this.#removeFromWorld()
+  }
+}

package/src/node/physics/physics-world.ts

@@ -0,0 +1,40 @@
+import { EventMap } from '@webtaku/event-emitter'
+import Matter from 'matter-js'
+import { Container as PixiContainer } from 'pixi.js'
+import { RenderableNode } from '../core/renderable'
+
+export type PhysicsWorldOptions = {
+  gravity?: number
+}
+
+export class PhysicsWorld<E extends EventMap = EventMap> extends RenderableNode<PixiContainer, E> {
+  #matterEngine = Matter.Engine.create()
+
+  constructor(options?: PhysicsWorldOptions) {
+    super(new PixiContainer({ sortableChildren: true }))
+
+    this.worldTransform.x.v = 0
+    this.worldTransform.y.v = 0
+    this.worldTransform.resetDirty()
+
+    this.gravity = options?.gravity ?? 0
+  }
+
+  set gravity(v) { this.#matterEngine.gravity.y = v }
+  get gravity() { return this.#matterEngine.gravity.y }
+
+  addBody(body: Matter.Body) { Matter.World.add(this.#matterEngine.world, body) }
+  removeBody(body: Matter.Body) { Matter.World.remove(this.#matterEngine.world, body) }
+
+  protected override update(dt: number) {
+    super.update(dt)
+
+    const matterDt = dt * 1000
+    Matter.Engine.update(this.#matterEngine, matterDt > 16.666 ? 16.666 : matterDt)
+  }
+
+  override remove() {
+    Matter.Engine.clear(this.#matterEngine)
+    super.remove()
+  }
+}

package/src/renderer/camera.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '@webtaku/event-emitter'
+
+export class Camera extends EventEmitter<{
+  positionChanged: () => void
+  scaleChanged: () => void
+}> {
+  #x = 0
+  #y = 0
+  #scale = 1
+
+  get x() { return this.#x }
+  get y() { return this.#y }
+  get scale() { return this.#scale }
+
+  setPosition(x: number, y: number) {
+    this.#x = x
+    this.#y = y
+    this.emit('positionChanged')
+  }
+
+  setScale(scale: number) {
+    this.#scale = scale
+    this.emit('scaleChanged')
+  }
+}

package/src/renderer/container-manager.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from '@webtaku/event-emitter'
+import { DirtyNumber } from '../node/core/dirty-number'
+
+export class RendererContainerManager extends EventEmitter<{
+  resize: (width: number, height: number) => void
+}> {
+  #container: HTMLElement
+  #containerResizeObserver: ResizeObserver
+  #containerWidth = new DirtyNumber(0)
+  #containerHeight = new DirtyNumber(0)
+
+  constructor(container: HTMLElement) {
+    super()
+    this.#container = container
+    this.#containerResizeObserver = new ResizeObserver(this.#resizeListener.bind(this))
+    this.#containerResizeObserver.observe(container)
+  }
+
+  #resizeListener() {
+    const cr = this.#container.getBoundingClientRect()
+    this.#containerWidth.v = cr.width
+    this.#containerHeight.v = cr.height
+
+    if (this.#containerWidth.dirty || this.#containerHeight.dirty) {
+      this.emit('resize', this.#containerWidth.v, this.#containerHeight.v)
+
+      this.#containerWidth.resetDirty()
+      this.#containerHeight.resetDirty()
+    }
+  }
+
+  override remove() {
+    this.#containerResizeObserver.disconnect()
+    super.remove()
+  }
+}

package/src/renderer/fps-display.ts

@@ -0,0 +1,21 @@
+import Stats from 'stats.js'
+
+export class FpsDisplay {
+  #stats: Stats
+
+  constructor(container: HTMLElement) {
+    const stats = new Stats()
+    stats.dom.style.position = 'absolute'
+    stats.showPanel(0)
+    container.appendChild(stats.dom)
+    this.#stats = stats
+  }
+
+  update() {
+    this.#stats.update()
+  }
+
+  remove() {
+    this.#stats.dom.remove()
+  }
+}

package/src/renderer/layer.ts

@@ -0,0 +1,15 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { Container as PixiContainer } from 'pixi.js'
+import { RenderableNode } from '../node/core/renderable'
+
+export class Layer extends RenderableNode<PixiContainer, EventMap> {
+  constructor(drawOrder: number) {
+    super(new PixiContainer({ sortableChildren: true }))
+
+    this._pixiContainer.zIndex = drawOrder
+
+    this.worldTransform.x.v = 0
+    this.worldTransform.y.v = 0
+    this.worldTransform.resetDirty()
+  }
+}