kiwiengine 0.5.2 → 0.5.4

package/examples/battle-benchmark-separation2/objects/orc.ts

@@ -0,0 +1,213 @@
+import {
+  AnimatedSpriteNode,
+  ColliderType,
+  DelayNode,
+  GameObjectOptions,
+  RigidbodyType,
+  sfxPlayer,
+} from '../../../src/index'
+import orcAtlas from '../assets/spritesheets/orc-atlas.json'
+import { Character } from './character'
+
+const ORC_MOVE_SPEED = 3 as const         // 엔진이 dt(초)를 주면 아래 step 계산 주석 참고
+const ORC_HITBOX_X = 24 as const
+const ORC_ATTACK_DAMAGE = 1 as const
+const EPS = 1e-3                          // 스냅/오버슈트 방지용
+const EPS2 = EPS * EPS
+
+export class Orc extends Character<{
+  hit: (damage: number) => void
+  dead: () => void
+}> {
+  protected _sprite: AnimatedSpriteNode
+
+  // ── 타겟/방향(정규화) ─────────────────────────────────────────────
+  #tx: number | null = null
+  #ty: number | null = null
+  #dirX = 0
+  #dirY = 0
+  #moveSpeed = ORC_MOVE_SPEED
+
+  // ── 상태 ─────────────────────────────────────────────────────────
+  #attacking = false
+
+  constructor(options?: GameObjectOptions) {
+    super({
+      ...options,
+      maxHp: 100,
+      hp: 100,
+      rigidbody: { type: RigidbodyType.Rectangle, width: 30, height: 30 },
+      hitbox: { type: ColliderType.Rectangle, width: 32, height: 52, x: ORC_HITBOX_X, y: -8 },
+      hurtbox: { type: ColliderType.Rectangle, width: 24, height: 32, x: 0, y: 0 },
+    })
+
+    this._sprite = new AnimatedSpriteNode({
+      src: 'assets/spritesheets/orc.png',
+      atlas: orcAtlas,
+      animation: 'idle',
+      scale: 2,
+    })
+
+    this._sprite.on('animationend', (animation: string) => {
+      if (animation.startsWith('attack')) {
+        this.#attacking = false
+        // 이동 중이면 walk, 아니면 idle (중복 전환 방지)
+        if (this.#isMoving()) this.#setWalk()
+        else this.#setIdle()
+      } else if (animation === 'die') {
+        this.emit('dead')
+      }
+    })
+
+    this.add(this._sprite)
+  }
+
+  // ── 외부 인터페이스 ──────────────────────────────────────────────
+  moveTo(x: number, y: number) {
+    if (this.dead) return
+    this.#tx = x
+    this.#ty = y
+
+    // 방향 벡터 미리 정규화(삼각함수 없음)
+    const dx = x - this.x
+    const dy = y - this.y
+    const len2 = dx * dx + dy * dy
+    if (len2 > EPS2) {
+      // 역길이 계산(정확 sqrt 대신 1/sqrt 사용; JS에 fast invsqrt 없음)
+      const invLen = 1 / Math.sqrt(len2)
+      this.#dirX = dx * invLen
+      this.#dirY = dy * invLen
+    } else {
+      this.#dirX = 0
+      this.#dirY = 0
+    }
+
+    // 좌우 플립/히트박스 오프셋(부호만 필요)
+    const scale = Math.abs(this._sprite.scaleX)
+    this._sprite.scaleX = dx >= 0 ? scale : -scale
+    this.hitboxX = dx >= 0 ? ORC_HITBOX_X : -ORC_HITBOX_X
+
+    if (!this.#attacking) this.#setWalk()
+  }
+
+  stop() {
+    this.#tx = null
+    this.#ty = null
+    this.#dirX = 0
+    this.#dirY = 0
+    if (!this.#attacking && !this.dead) this.#setIdle()
+  }
+
+  attack() {
+    if (this.dead || this.#attacking) return
+    this.#attacking = true
+    // 이동 즉시 정지(불필요한 계산 차단)
+    this.#tx = null
+    this.#ty = null
+    this.#dirX = 0
+    this.#dirY = 0
+
+    // 랜덤 공격 모션(애니메이션 변경 최소)
+    const nextAnim = (Math.random() < 0.5) ? 'attack1' : 'attack2'
+    if (this._sprite.animation !== nextAnim) {
+      this._sprite.animation = nextAnim
+    }
+
+    // 타격 타이밍
+    this.add(new DelayNode(0.3, () => this.emit('hit', ORC_ATTACK_DAMAGE)))
+
+    // SFX (대량 동시 재생은 믹서에서 한정/풀링 권장)
+    sfxPlayer.playRandom(
+      'assets/sfx/orc/miss/miss1.wav',
+      'assets/sfx/orc/miss/miss2.wav',
+      'assets/sfx/orc/miss/miss3.wav'
+    )
+  }
+
+  // ── 루프 ─────────────────────────────────────────────────────────
+  protected override update(dt: number) {
+    if (this.paused) return
+    super.update(dt)
+
+    if (this.dead || this.#attacking) return
+    if (this.#tx === null || this.#ty === null) return
+
+    // 남은 거리 제곱(정확 sqrt 불필요)
+    const rx = this.#tx - this.x
+    const ry = this.#ty - this.y
+    const remaining2 = rx * rx + ry * ry
+    if (remaining2 <= EPS2) {
+      // 도착 처리
+      this.x = this.#tx
+      this.y = this.#ty
+      this.stop()
+      return
+    }
+
+    // 한 프레임 이동량(step)
+    const step = this.#moveSpeed * (dt > 0 ? dt * 60 : 1)   // 프레임 기준 정규화
+
+    // 오버슈트 방지: step^2와 remaining^2 비교
+    const step2 = step * step
+    if (remaining2 <= step2) {
+      this.x = this.#tx
+      this.y = this.#ty
+      this.stop()
+      return
+    }
+
+    // 미리 정규화해둔 방향으로 이동(삼각함수 없음)
+    this.x += this.#dirX * step
+    this.y += this.#dirY * step
+
+    // 진행 방향에 따른 좌우 플립/히트박스 (dirX 부호만 사용)
+    const scale = Math.abs(this._sprite.scaleX)
+    const dirX = this.#dirX
+    if (dirX > 0) {
+      if (this._sprite.scaleX < 0) this._sprite.scaleX = scale
+      if (this.hitboxX !== ORC_HITBOX_X) this.hitboxX = ORC_HITBOX_X
+    } else if (dirX < 0) {
+      if (this._sprite.scaleX > 0) this._sprite.scaleX = -scale
+      if (this.hitboxX !== -ORC_HITBOX_X) this.hitboxX = -ORC_HITBOX_X
+    }
+
+    // 이동 중 애니메이션 보장(중복 전환 방지)
+    if (this._sprite.animation !== 'walk') this.#setWalk()
+  }
+
+  // ── 피격/사망 ────────────────────────────────────────────────────
+  override takeDamage(damage: number) {
+    super.takeDamage(damage)
+    sfxPlayer.playRandom(
+      'assets/sfx/orc/hit/hit1.wav',
+      'assets/sfx/orc/hit/hit2.wav',
+      'assets/sfx/orc/hit/hit3.wav'
+    )
+  }
+
+  protected override onDie() {
+    this.#tx = null
+    this.#ty = null
+    this.#dirX = 0
+    this.#dirY = 0
+    if (this._sprite.animation !== 'die') {
+      this._sprite.animation = 'die'
+    }
+    sfxPlayer.play('assets/sfx/orc/die/die.wav')
+  }
+
+  // ── 내부 유틸 ────────────────────────────────────────────────────
+  #isMoving() {
+    return this.#tx !== null && this.#ty !== null
+  }
+  #setWalk() {
+    if (this._sprite.animation !== 'walk') {
+      this._sprite.animation = 'walk'
+    }
+  }
+  #setIdle() {
+    if (this._sprite.animation !== 'idle') {
+      this._sprite.animation = 'idle'
+    }
+  }
+}

package/examples/battle-benchmark-separation2/objects/potion.ts

@@ -0,0 +1,27 @@
+import { AnimatedSpriteNode, CircleCollider, CircleNode, ColliderType, debugMode, GameObject, GameObjectOptions } from '../../../src'
+import potionAtlas from '../assets/spritesheets/potion-atlas.json'
+
+export type PotionOptions = {
+  healAmount?: number
+} & GameObjectOptions
+
+export class Potion extends GameObject {
+  triggerCollider: CircleCollider = { type: ColliderType.Circle, radius: 16 }
+  healAmount: number
+
+  constructor(options?: PotionOptions) {
+    super({ ...options, useYSort: true })
+    this.healAmount = options?.healAmount ?? 100
+
+    this.add(new AnimatedSpriteNode({
+      src: 'assets/spritesheets/potion.png',
+      atlas: potionAtlas,
+      animation: 'animation',
+      scale: 2
+    }))
+
+    if (debugMode) {
+      this.add(new CircleNode({ ...this.triggerCollider, stroke: 'green', alpha: 0.5, layer: 'hud' }))
+    }
+  }
+}

package/examples/battle-benchmark-separation2/stage.ts

@@ -0,0 +1,178 @@
+import { checkCollision, GameObject, IntervalNode, isMobile, Joystick, musicPlayer } from '../../src'
+import { Hero } from './objects/hero'
+import { Orc } from './objects/orc'
+import { Potion } from './objects/potion'
+
+function createTextElement() {
+  const el = document.createElement('div')
+  el.style.color = 'white'
+  el.style.position = 'absolute'
+  el.style.top = '10px'
+  el.style.zIndex = '1'
+  return el
+}
+
+const SCORE_PER_ORC = 100
+
+export class Stage extends GameObject {
+  #hero = new Hero();
+  #orcs: Set<Orc> = new Set();
+  #potions: Set<Potion> = new Set();
+
+  #time = 0
+  #score = 0
+  #isGameOver = false
+
+  #timeText: HTMLDivElement
+  #hpText: HTMLDivElement
+  #scoreText: HTMLDivElement
+
+  #spawnOrcInterval: IntervalNode
+  #spawnPotionInterval: IntervalNode
+
+  constructor() {
+    super()
+    musicPlayer.play('assets/bgm/battle.mp3')
+
+    this.add(this.#hero)
+    this.add(this.#spawnOrcInterval = new IntervalNode(1, () => this.#spawnOrc()))
+    this.add(this.#spawnPotionInterval = new IntervalNode(3, () => this.#spawnPotion()))
+
+    for (let i = 0; i < 1000; i++) {
+      this.#spawnOrc()
+    }
+
+    const joystickImage = new Image()
+    joystickImage.src = 'assets/joystick/joystick.png'
+
+    const knobImage = new Image()
+    knobImage.src = 'assets/joystick/knob.png'
+
+    this.add(
+      new Joystick({
+        onMove: (r, d) => this.#hero.move(r, d),
+        onRelease: () => this.#hero.stop(),
+        onKeyDown: (code) => {
+          if (code === 'KeyA') this.#hero.attack()
+        },
+        joystickImage,
+        knobImage,
+        maxKnobDistance: 70,
+      }),
+    )
+
+    this.#timeText = createTextElement()
+    this.#hpText = createTextElement()
+    this.#scoreText = createTextElement()
+
+    this.#timeText.textContent = `Time: ${this.#time}`
+    this.#hpText.textContent = `HP: ${this.#hero.hp}`
+    this.#scoreText.textContent = `Score: ${this.#score}`
+
+    this.#timeText.style.left = '10px'
+    this.#hpText.style.left = '50%'
+    this.#hpText.style.transform = 'translate(-50%, 0)'
+    this.#scoreText.style.right = '10px'
+
+    this.#hero.on('hit', (damage) => {
+      for (const o of this.#orcs) {
+        if (checkCollision(this.#hero.hitbox, this.#hero.worldTransform, o.hurtbox, o.worldTransform)) {
+          o.takeDamage(damage)
+        }
+      }
+    })
+
+    this.#hero.on('changeHp', () => {
+      this.#hpText.textContent = `HP: ${this.#hero.hp}`
+    })
+
+    this.#hero.on('dead', () => {
+      this.#gameOver()
+    })
+  }
+
+  #gameOver() {
+    this.#isGameOver = true
+    this.#spawnOrcInterval.remove()
+    this.#spawnPotionInterval.remove()
+    for (const o of this.#orcs) {
+      o.stop()
+    }
+
+    const gameOverText = createTextElement()
+    gameOverText.textContent = 'Game Over'
+    gameOverText.style.left = '50%'
+    gameOverText.style.top = '50%'
+    gameOverText.style.transform = 'translate(-50%, -50%)'
+    this.renderer?.container.append(gameOverText)
+  }
+
+  protected override set renderer(renderer) {
+    super.renderer = renderer
+
+    if (renderer) {
+      const c = renderer.container
+      c.append(this.#timeText, this.#hpText, this.#scoreText)
+    }
+  }
+
+  protected override get renderer() {
+    return super.renderer
+  }
+
+  #spawnOrc() {
+    const o = new Orc()
+    o.x = Math.random() * 800 - 400
+    o.y = Math.random() * 600 - 300
+    o.on('hit', (damage) => {
+      if (checkCollision(this.#hero.hurtbox, this.#hero.worldTransform, o.hitbox, o.worldTransform)) {
+        this.#hero.takeDamage(damage)
+      }
+    })
+    this.add(o)
+    this.#orcs.add(o)
+    o.on('dead', () => {
+      this.#orcs.delete(o)
+      this.#score += SCORE_PER_ORC
+      this.#scoreText.textContent = `Score: ${this.#score}`
+    })
+  }
+
+  #spawnPotion() {
+    const p = new Potion()
+    p.x = Math.random() * 800 - 400
+    p.y = Math.random() * 600 - 300
+    this.add(p)
+    this.#potions.add(p)
+    p.on('remove', () => this.#potions.delete(p))
+  }
+
+  protected override update(dt: number) {
+    if (this.paused) return
+    super.update(dt)
+
+    if (this.#isGameOver) return
+
+    const h = this.#hero
+    if (h.dead) return
+
+    for (const o of this.#orcs) {
+      if (checkCollision(h.hurtbox, h.worldTransform, o.hitbox, o.worldTransform)) {
+        o.attack()
+      } else {
+        o.moveTo(this.#hero.x, this.#hero.y)
+      }
+
+      if (isMobile && checkCollision(h.hitbox, h.worldTransform, o.hurtbox, o.worldTransform)) {
+        h.attack()
+      }
+    }
+
+    for (const p of this.#potions) {
+      if (checkCollision(h.hitbox, h.worldTransform, p.triggerCollider, p.worldTransform)) {
+        h.heal(p.healAmount)
+        p.remove()
+      }
+    }
+  }
+}

package/examples/dom-sprite-test/index.ts

@@ -19,20 +19,17 @@ const animatedSprite = new DomAnimatedSpriteNode({
   src: 'assets/fire.png',
   atlas: {
     frames: {
-      fire1: { frame: { x: 0, y: 0, w: 64, h: 64 } },
-      fire2: { frame: { x: 64, y: 0, w: 64, h: 64 } },
-      fire3: { frame: { x: 128, y: 0, w: 64, h: 64 } },
-      fire4: { frame: { x: 192, y: 0, w: 64, h: 64 } },
-      fire5: { frame: { x: 256, y: 0, w: 64, h: 64 } },
+      fire1: { x: 0, y: 0, w: 64, h: 64 },
+      fire2: { x: 64, y: 0, w: 64, h: 64 },
+      fire3: { x: 128, y: 0, w: 64, h: 64 },
+      fire4: { x: 192, y: 0, w: 64, h: 64 },
+      fire5: { x: 256, y: 0, w: 64, h: 64 },
     },
-    meta: { scale: 1 },
     animations: {
-      fire: ['fire1', 'fire2', 'fire3', 'fire4', 'fire5'],
+      fire: { frames: ['fire1', 'fire2', 'fire3', 'fire4', 'fire5'], fps: 12, loop: true },
     },
   },
   animation: 'fire',
-  fps: 12,
-  loop: true,
 }).attachTo(document.body)
 
 new Ticker(dt => animatedSprite.render(dt))