kiwiengine 0.5.2 → 0.5.3

package/examples/battle-benchmark-separation2/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-separation2/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-separation2/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-separation2/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-separation2/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-separation2/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-separation2/objects/character.ts

@@ -0,0 +1,195 @@
+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
+  /** 밀어내기 강도 (프레임 보정 전), 0으로 두면 비활성화 */
+  separationStrength?: number
+} & PhysicsObjectOptions
+
+export abstract class Character<E extends EventMap = EventMap> extends GameObject<E & {
+  changeHp: (damage: number) => void
+  dead: () => void
+}> {
+  /** ==== Separation 레지스트리 ==== */
+  private static readonly _registry = new Set<Character>()
+  static get all(): ReadonlySet<Character> { return this._registry }
+
+  /** 같은 팀/유형 제외 등의 필터가 필요하면 오버라이드 */
+  protected canSeparateWith(other: Character): boolean {
+    return !this.dead && !other.dead && other !== this
+  }
+
+  /** ===== 기본 스탯/컴포넌트 ===== */
+  maxHp: number
+  hp: number
+  dead = false
+
+  /** 충돌은 collider 기준으로만 처리 */
+  rigidbody: RectangleRigidbody
+  hitbox: RectangleCollider
+  hurtbox: RectangleCollider
+
+  #hpBar: HpBar
+  protected _sprite?: AnimatedSpriteNode
+  #hitboxDebugNode?: RectangleNode
+  #tintDelay?: DelayNode
+
+  /** 밀어내기 강도 */
+  protected separationStrength: number
+
+  constructor(options: CharacterOptions) {
+    super({ ...options, useYSort: true })
+    this.maxHp = options.maxHp
+    this.hp = options.hp
+
+    // collider 기반 처리
+    this.rigidbody = { ...options.rigidbody }   // 원본 참조 대신 복사해 안전하게 사용
+    this.hitbox = { ...options.hitbox }
+    this.hurtbox = { ...options.hurtbox }
+
+    this.separationStrength = options.separationStrength ?? 1.0
+
+    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' }))
+    }
+
+    Character._registry.add(this)
+  }
+
+  /** 제거 시 레지스트리에서 해제 */
+  override remove(...args: any[]) {
+    Character._registry.delete(this)
+    // @ts-ignore
+    return super.remove?.(...args)
+  }
+
+  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' }))
+  }
+
+  /** ===== 핵심: collider 기반 소프트 충돌 해소 ===== */
+  protected applySeparationByCollider(dt: number) {
+    if (this.separationStrength <= 0) return
+
+    // A의 월드 기준 collider 사각형
+    const aLeft = this.x
+    const aTop = this.y
+    const aRight = aLeft + (this.rigidbody?.width ?? 0)
+    const aBottom = aTop + (this.rigidbody?.height ?? 0)
+
+    for (const other of Character.all) {
+      if (!this.canSeparateWith(other)) continue
+
+      const bLeft = other.x
+      const bTop = other.y
+      const bRight = bLeft + (other.rigidbody?.width ?? 0)
+      const bBottom = bTop + (other.rigidbody?.height ?? 0)
+
+      // AABB 교차 판정
+      const intersect =
+        aLeft < bRight && aRight > bLeft && aTop < bBottom && aBottom > bTop
+      if (!intersect) continue
+
+      // 축 분리: x/y 중 더 작은 침투량으로 해소
+      const overlapX = Math.min(aRight - bLeft, bRight - aLeft)
+      const overlapY = Math.min(aBottom - bTop, bBottom - aTop)
+
+      // 해소 벡터
+      let sepX = 0, sepY = 0
+      if (overlapX < overlapY) {
+        // X축으로 밀어냄: 방향은 중심 비교로 결정
+        const aCenterX = (aLeft + aRight) * 0.5
+        const bCenterX = (bLeft + bRight) * 0.5
+        const dir = Math.sign(aCenterX - bCenterX) || (Math.random() < 0.5 ? 1 : -1)
+        sepX = dir * overlapX
+      } else {
+        // Y축으로 밀어냄
+        const aCenterY = (aTop + aBottom) * 0.5
+        const bCenterY = (bTop + bBottom) * 0.5
+        const dir = Math.sign(aCenterY - bCenterY) || (Math.random() < 0.5 ? 1 : -1)
+        sepY = dir * overlapY
+      }
+
+      // 반씩 나눠 밀기 + 프레임 보정 + 강도
+      const push = this.separationStrength * Math.min(dt ?? 0.016, 0.033)
+      const mx = (sepX * 0.5) * push
+      const my = (sepY * 0.5) * push
+
+      this.x += mx
+      this.y += my
+      other.x -= mx
+      other.y -= my
+    }
+  }
+
+  /** 엔진의 업데이트 훅 이름이 다르면 여기를 맞춰주세요 */
+  protected override update(dt: number) {
+    if (this.paused) return
+
+    // 원래 업데이트
+    // @ts-ignore
+    super.update?.(dt)
+
+    // collider 기반 소프트 충돌
+    this.applySeparationByCollider(dt)
+  }
+
+  protected abstract onDie(): void
+}

package/examples/battle-benchmark-separation2/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')
+  }
+}