kiwiengine 0.0.1-alpha → 0.5.3

package/examples/battle-benchmark-separation/dist/game.js.LICENSE.txt

@@ -0,0 +1,35 @@
+/*!
+ * matter-js 0.20.0 by @liabru
+ * http://brm.io/matter-js/
+ * License MIT
+ * 
+ * The MIT License (MIT)
+ * 
+ * Copyright (c) Liam Brummitt and contributors.
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/**
+ * tiny-lru
+ *
+ * @copyright 2025 Jason Mulligan <jason.mulligan@avoidwork.com>
+ * @license BSD-3-Clause
+ * @version 11.4.5
+ */

package/examples/battle-benchmark-separation/hud/damage-text.ts

@@ -0,0 +1,46 @@
+import { BitmapTextNode, GameObjectOptions } from '../../../src/index'
+
+export type DamageTextOptions = {
+  damage: number
+} & GameObjectOptions
+
+export class DamageText extends BitmapTextNode {
+  #velocityY = -50
+  #gravity = 100
+  #lifetime = 1.0
+  #elapsed = 0
+  #fadeStart = 0.5
+  #initialScale = 1.0
+  #targetScale = 1.2
+
+  constructor(options: DamageTextOptions) {
+    super({
+      ...options,
+      text: `-${options.damage}`,
+      fnt: 'assets/bitmap-fonts/white-peaberry.fnt',
+      src: 'assets/bitmap-fonts/white-peaberry.png'
+    })
+  }
+
+  protected override update(dt: number) {
+    if (this.paused) return
+    super.update(dt)
+
+    this.#elapsed += dt
+    this.#velocityY += this.#gravity * dt
+    this.y += this.#velocityY * dt
+
+    const progress = Math.min(this.#elapsed / this.#lifetime, 1)
+    const scale = this.#initialScale + (this.#targetScale - this.#initialScale) * progress
+    this.scale = scale
+
+    if (this.#elapsed > this.#fadeStart) {
+      const fadeProgress = (this.#elapsed - this.#fadeStart) / (this.#lifetime - this.#fadeStart)
+      this.alpha = Math.max(1 - fadeProgress, 0)
+    }
+
+    if (this.#elapsed >= this.#lifetime) {
+      this.remove()
+    }
+  }
+}

package/examples/battle-benchmark-separation/hud/heal-text.ts

@@ -0,0 +1,46 @@
+import { BitmapTextNode, GameObjectOptions } from '../../../src/index'
+
+export type HealTextOptions = {
+  hp: number
+} & GameObjectOptions
+
+export class HealText extends BitmapTextNode {
+  #velocityY = -50
+  #gravity = 100
+  #lifetime = 1.0
+  #elapsed = 0
+  #fadeStart = 0.5
+  #initialScale = 1.0
+  #targetScale = 1.2
+
+  constructor(options: HealTextOptions) {
+    super({
+      ...options,
+      text: `+${options.hp}`,
+      fnt: 'assets/bitmap-fonts/white-peaberry.fnt',
+      src: 'assets/bitmap-fonts/white-peaberry.png'
+    })
+  }
+
+  protected override update(dt: number) {
+    if (this.paused) return
+    super.update(dt)
+
+    this.#elapsed += dt
+    this.#velocityY += this.#gravity * dt
+    this.y += this.#velocityY * dt
+
+    const progress = Math.min(this.#elapsed / this.#lifetime, 1)
+    const scale = this.#initialScale + (this.#targetScale - this.#initialScale) * progress
+    this.scale = scale
+
+    if (this.#elapsed > this.#fadeStart) {
+      const fadeProgress = (this.#elapsed - this.#fadeStart) / (this.#lifetime - this.#fadeStart)
+      this.alpha = Math.max(1 - fadeProgress, 0)
+    }
+
+    if (this.#elapsed >= this.#lifetime) {
+      this.remove()
+    }
+  }
+}

package/examples/battle-benchmark-separation/hud/hp-bar.ts

@@ -0,0 +1,38 @@
+import { GameObject, GameObjectOptions, RectangleNode } from '../../../src'
+
+const HP_BAR_WIDTH = 26
+
+export type HpBarOptions = {
+  maxHp: number
+  hp: number
+} & GameObjectOptions
+
+export class HpBar extends GameObject {
+  #bg = new RectangleNode({ width: HP_BAR_WIDTH, height: 4, fill: '#000000', alpha: 0.4 })
+  #fg = new RectangleNode({ width: HP_BAR_WIDTH, height: 4, fill: '#ff3b30' })
+
+  #maxHp: number
+  #hp: number
+
+  constructor(options: HpBarOptions) {
+    super(options)
+    this.#maxHp = options.maxHp
+    this.#hp = options.hp
+    this.add(this.#bg, this.#fg)
+    this.#updateFg()
+  }
+
+  #updateFg() {
+    const ratio = Math.max(0, Math.min(1, this.#hp / this.#maxHp))
+    const newWidth = HP_BAR_WIDTH * ratio
+    this.#fg.width = newWidth
+    this.#fg.x = -(HP_BAR_WIDTH - newWidth) / 2
+  }
+
+  set hp(hp: number) {
+    this.#hp = hp
+    this.#updateFg()
+  }
+
+  get hp() { return this.#hp }
+}

package/examples/battle-benchmark-separation/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <style>
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      background-color: #000;
+    }
+  </style>
+</head>
+
+<body>
+  <script src="dist/game.js"></script>
+</body>
+
+</html>

package/examples/battle-benchmark-separation/index.ts

@@ -0,0 +1,41 @@
+import { enableDebug, preload, Renderer } from '../../src'
+import heroAtlas from './assets/spritesheets/hero-atlas.json'
+import orcAtlas from './assets/spritesheets/orc-atlas.json'
+import potionAtlas from './assets/spritesheets/potion-atlas.json'
+import { Stage } from './stage'
+
+if (process.env.NODE_ENV === 'development') {
+  enableDebug()
+}
+
+await preload([
+  { src: 'assets/spritesheets/hero.png', atlas: heroAtlas },
+  { src: 'assets/spritesheets/orc.png', atlas: orcAtlas },
+  { src: 'assets/spritesheets/potion.png', atlas: potionAtlas },
+  { fnt: 'assets/bitmap-fonts/white-peaberry.fnt', src: 'assets/bitmap-fonts/white-peaberry.png' },
+  'assets/bgm/battle.mp3',
+  'assets/sfx/hero/hit/hit1.wav',
+  'assets/sfx/hero/hit/hit2.wav',
+  'assets/sfx/hero/hit/hit3.wav',
+  'assets/sfx/hero/miss/miss1.wav',
+  'assets/sfx/hero/miss/miss2.wav',
+  'assets/sfx/hero/miss/miss3.wav',
+  'assets/sfx/hero/heal/heal.wav',
+  'assets/sfx/hero/die/die.wav',
+  'assets/sfx/orc/hit/hit1.wav',
+  'assets/sfx/orc/hit/hit2.wav',
+  'assets/sfx/orc/hit/hit3.wav',
+  'assets/sfx/orc/miss/miss1.wav',
+  'assets/sfx/orc/miss/miss2.wav',
+  'assets/sfx/orc/miss/miss3.wav',
+  'assets/sfx/orc/die/die.wav',
+])
+
+const renderer = new Renderer(document.body, {
+  backgroundColor: '#304C79',
+  layers: [
+    { name: 'hud', drawOrder: 1 }
+  ],
+})
+
+renderer.add(new Stage())

package/examples/battle-benchmark-separation/objects/character.ts

@@ -0,0 +1,225 @@
+import { EventMap } from '@webtaku/event-emitter'
+import {
+  AnimatedSpriteNode,
+  debugMode,
+  DelayNode,
+  GameObject,
+  PhysicsObjectOptions,
+  RectangleCollider,
+  RectangleNode,
+  RectangleRigidbody
+} from '../../../src'
+import { DamageText } from '../hud/damage-text'
+import { HealText } from '../hud/heal-text'
+import { HpBar } from '../hud/hp-bar'
+
+export type CharacterOptions = {
+  maxHp: number
+  hp: number
+  rigidbody: RectangleRigidbody
+  hitbox: RectangleCollider
+  hurtbox: RectangleCollider
+} & PhysicsObjectOptions
+
+export abstract class Character<E extends EventMap = EventMap> extends GameObject<E & {
+  changeHp: (damage: number) => void
+  dead: () => void
+}> {
+  // ── 고유 ID: 한 페어를 한 번만 해결하기 위한 편향 ─────────────────
+  private static _uidCounter = 1
+  readonly uid = Character._uidCounter++
+
+  maxHp: number
+  hp: number
+  dead = false
+
+  rigidbody: RectangleRigidbody
+  hitbox: RectangleCollider
+  hurtbox: RectangleCollider
+
+  #hpBar: HpBar
+  protected _sprite?: AnimatedSpriteNode
+  #hitboxDebugNode?: RectangleNode
+  #tintDelay?: DelayNode
+
+  // ── 분리 파라미터/상태 (안정화 + 시간 기반 쓰로틀) ────────────────
+  #beta = 0.35                 // 부분 보정 계수(0~1)
+  #maxPushPerPair = 6          // 한 페어당 프레임 최대 밀기(픽셀)
+  #eps = 1e-3                  // 대칭 진동 방지용 미세 오프셋
+  #warmupFrames = 30           // 스폰 후 워밍업 프레임 수(강/자주 분리)
+  #spawnJitter = 0.25          // 스폰 시 위치에 미세 난수 섞기
+
+  // dt 누적 기반 쓰로틀(초)
+  #sepTimerSec = 0
+  #sepIntervalSec = 0.033      // 평상시 분리 주기(약 2프레임 @60fps)
+  #sepJitterSec = Math.random() * 0.01 // 동기화 붕괴용
+
+  constructor(options: CharacterOptions) {
+    super({ ...options, useYSort: true })
+    this.maxHp = options.maxHp
+    this.hp = options.hp
+    this.rigidbody = options.rigidbody
+    this.hitbox = options.hitbox
+    this.hurtbox = options.hurtbox
+
+    // 스폰 시 완전 대칭 상태 깨기
+    if (this.#spawnJitter > 0) {
+      this.x += (Math.random() * 2 - 1) * this.#spawnJitter
+      this.y += (Math.random() * 2 - 1) * this.#spawnJitter
+    }
+
+    this.#hpBar = new HpBar({ y: -30, maxHp: options.maxHp, hp: options.hp, layer: 'hud' })
+    this.add(this.#hpBar)
+
+    if (debugMode) {
+      this.add(new RectangleNode({ ...options.rigidbody, stroke: 'yellow', alpha: 0.5, layer: 'hud' }))
+      this.#hitboxDebugNode = new RectangleNode({ ...this.hitbox, stroke: 'red', alpha: 0.5, layer: 'hud' })
+      this.add(this.#hitboxDebugNode)
+      this.add(new RectangleNode({ ...this.hurtbox, stroke: 'green', alpha: 0.5, layer: 'hud' }))
+    }
+  }
+
+  set hitboxX(x: number) {
+    this.hitbox.x = x
+    if (this.#hitboxDebugNode) this.#hitboxDebugNode.x = x
+  }
+
+  takeDamage(damage: number) {
+    if (this.dead) return
+
+    this.hp -= damage
+    this.#hpBar.hp = this.hp
+
+    if (this._sprite) {
+      this._sprite.tint = 0xff0000
+      this.#tintDelay?.remove()
+      this.#tintDelay = new DelayNode(0.1, () => (this._sprite!.tint = 0xffffff))
+      this.add(this.#tintDelay)
+    }
+    ; (this as any).emit('changeHp', damage)
+    this.add(new DamageText({ y: -20, damage, layer: 'hud' }))
+
+    if (this.hp <= 0) {
+      this.dead = true
+      this.onDie()
+        ; (this as any).emit('dead')
+    }
+  }
+
+  heal(amount: number) {
+    if (this.dead) return
+
+    this.hp = Math.min(this.maxHp, this.hp + amount)
+    this.#hpBar.hp = this.hp
+
+    if (this._sprite) {
+      this._sprite.tint = 0x00ff00
+      this.#tintDelay?.remove()
+      this.#tintDelay = new DelayNode(0.1, () => (this._sprite!.tint = 0xffffff))
+      this.add(this.#tintDelay)
+    }
+    ; (this as any).emit('changeHp', amount)
+    this.add(new HealText({ y: -20, hp: amount, layer: 'hud' }))
+  }
+
+  protected abstract onDie(): void
+
+  // ── 매 프레임: 이동/전투 처리 후 겹침 분리 수행 ────────────────────
+  protected override update(dt: number) {
+    if (this.paused) return
+    super.update(dt)
+
+    // 워밍업 동안: 더 자주(간격 0 → 매 프레임), 조금 더 강하게(β↑)
+    const inWarmup = this.#warmupFrames-- > 0
+    const intervalSec = inWarmup ? 0 : this.#sepIntervalSec
+    const beta = inWarmup ? Math.min(0.6, this.#beta + 0.15) : this.#beta
+
+    this.separateFromNeighbors(dt, 48, 1, intervalSec, beta)
+  }
+
+  // ────────────────────────────────────────────────────────────────
+  // 겹침 방지(안정화 + dt 기반 쓰로틀)
+  separateFromNeighbors(
+    dt: number,
+    radius = 48,
+    iterations = 1,
+    intervalSec = 0,        // 0이면 매 프레임 실행
+    beta = this.#beta
+  ) {
+    if (this.dead) return
+    const parent = this.parent as any
+    if (!parent || !parent.children) return
+
+    // 시간 기반 쓰로틀 (초 단위)
+    if (intervalSec > 0) {
+      this.#sepTimerSec += dt
+      if (this.#sepTimerSec + this.#sepJitterSec < intervalSec) return
+      this.#sepTimerSec = 0
+    }
+
+    const cx = this.x
+    const cy = this.y
+    const hw = (this.rigidbody.width ?? 0) * 0.5
+    const hh = (this.rigidbody.height ?? 0) * 0.5
+    const radius2 = radius * radius
+    const eps = this.#eps
+    const maxPush = this.#maxPushPerPair
+
+    for (let iter = 0; iter < iterations; iter++) {
+      for (const other of parent.children as any[]) {
+        if (other === this) continue
+        if (!(other instanceof Character)) continue
+        if (other.dead) continue
+
+        // 한 페어는 uid 작은 쪽만 처리 → 동시 되밀기 방지
+        if (this.uid > (other as Character).uid) continue
+
+        const or = other.rigidbody
+        if (!or) continue
+
+        const ocx = other.x
+        const ocy = other.y
+
+        // 원거리 프리체크
+        const dx0 = ocx - cx
+        const dy0 = ocy - cy
+        if (dx0 * dx0 + dy0 * dy0 > radius2) continue
+
+        // AABB 침투량
+        const ohw = (or.width ?? 0) * 0.5
+        const ohh = (or.height ?? 0) * 0.5
+
+        const dx = ocx - cx
+        const px = (hw + ohw) - Math.abs(dx)
+        if (px <= 0) continue
+
+        const dy = ocy - cy
+        const py = (hh + ohh) - Math.abs(dy)
+        if (py <= 0) continue
+
+        // 작은 축으로 부분 보정 + 푸시 캡 + ε
+        if (px < py) {
+          const push = Math.min(maxPush, Math.max(0, px * beta) + eps)
+          const half = push * 0.5
+          if (dx > 0) {
+            this.x -= half
+            other.x += half
+          } else {
+            this.x += half
+            other.x -= half
+          }
+        } else {
+          const push = Math.min(maxPush, Math.max(0, py * beta) + eps)
+          const half = push * 0.5
+          if (dy > 0) {
+            this.y -= half
+            other.y += half
+          } else {
+            this.y += half
+            other.y -= half
+          }
+        }
+      }
+    }
+  }
+}

package/examples/battle-benchmark-separation/objects/hero.ts

@@ -0,0 +1,110 @@
+import { AnimatedSpriteNode, ColliderType, DelayNode, GameObjectOptions, RigidbodyType, sfxPlayer } from '../../../src/index'
+import heroAtlas from '../assets/spritesheets/hero-atlas.json'
+import { Character } from './character'
+
+const HERO_MOVE_SPEED = 200 as const
+const HERO_HITBOX_X = 24 as const
+const HERO_ATTACK_DAMAGE = 60 as const
+
+export class Hero extends Character<{
+  hit: (damage: number) => void
+  dead: () => void
+}> {
+  protected _sprite: AnimatedSpriteNode
+
+  #cachedVelX = 0
+  #cachedVelY = 0
+  #prevX = this.x
+  #attacking = false
+
+  constructor(options?: GameObjectOptions) {
+    super({
+      ...options,
+      maxHp: 100000,
+      hp: 100000,
+      rigidbody: { type: RigidbodyType.Rectangle, width: 30, height: 30 },
+      hitbox: { type: ColliderType.Rectangle, width: 32, height: 52, x: HERO_HITBOX_X, y: -8 },
+      hurtbox: { type: ColliderType.Rectangle, width: 24, height: 40, x: 0, y: -4 },
+      isStatic: true
+    })
+
+    this._sprite = new AnimatedSpriteNode({
+      src: 'assets/spritesheets/hero.png',
+      atlas: heroAtlas,
+      animation: 'idle',
+      scale: 2
+    })
+    this._sprite.on('animationend', (animation) => {
+      if (animation.startsWith('attack')) {
+        this.#attacking = false
+        this._sprite.animation = 'idle'
+      } else if (animation === 'die') {
+        this.emit('dead')
+      }
+    })
+    this.add(this._sprite)
+  }
+
+  move(radian: number, distance: number) {
+    if (this.dead) return
+    this.#cachedVelX = Math.cos(radian) * distance * HERO_MOVE_SPEED
+    this.#cachedVelY = Math.sin(radian) * distance * HERO_MOVE_SPEED
+  }
+
+  stop() {
+    this.#cachedVelX = 0
+    this.#cachedVelY = 0
+  }
+
+  attack() {
+    if (this.dead || this.#attacking) return
+    this.#attacking = true
+
+    this._sprite.animation = Math.floor(Math.random() * 2) ? 'attack1' : 'attack2'
+
+    this.add(new DelayNode(0.3, () => this.emit('hit', HERO_ATTACK_DAMAGE)))
+
+    sfxPlayer.playRandom(
+      'assets/sfx/hero/miss/miss1.wav',
+      'assets/sfx/hero/miss/miss2.wav',
+      'assets/sfx/hero/miss/miss3.wav',
+    )
+  }
+
+  protected override update(dt: number) {
+    if (this.paused) return
+    super.update(dt)
+
+    this.x += this.#cachedVelX * dt
+    this.y += this.#cachedVelY * dt
+
+    if (this._sprite && this.x !== this.#prevX) {
+      const scale = Math.abs(this._sprite.scaleX)
+      this._sprite.scaleX = this.x > this.#prevX ? scale : -scale
+      this.hitboxX = this.x > this.#prevX ? HERO_HITBOX_X : -HERO_HITBOX_X
+    }
+    this.#prevX = this.x
+  }
+
+  override takeDamage(damage: number) {
+    super.takeDamage(damage)
+    sfxPlayer.playRandom(
+      'assets/sfx/hero/hit/hit1.wav',
+      'assets/sfx/hero/hit/hit2.wav',
+      'assets/sfx/hero/hit/hit3.wav'
+    )
+  }
+
+  override heal(amount: number) {
+    super.heal(amount)
+    sfxPlayer.play('assets/sfx/hero/heal/heal.wav')
+  }
+
+  protected override onDie() {
+    this._sprite.animation = 'die'
+    this.#cachedVelX = 0
+    this.#cachedVelY = 0
+
+    sfxPlayer.play('assets/sfx/hero/die/die.wav')
+  }
+}