kiwiengine 0.0.1-alpha → 0.5.2

package/examples/simple-battle/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/simple-battle/hud/damage-text.ts

@@ -0,0 +1,45 @@
+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) {
+    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/simple-battle/hud/heal-text.ts

@@ -0,0 +1,45 @@
+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) {
+    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/simple-battle/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/simple-battle/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/simple-battle/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/simple-battle/objects/character.ts

@@ -0,0 +1,95 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { AnimatedSpriteNode, debugMode, DelayNode, PhysicsObject, PhysicsObjectOptions, RectangleCollider, RectangleNode } 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
+  collider: RectangleCollider
+  hitbox: RectangleCollider
+  hurtbox: RectangleCollider
+} & PhysicsObjectOptions
+
+export abstract class Character<E extends EventMap = EventMap> extends PhysicsObject<E & {
+  changeHp: (damage: number) => void
+  dead: () => void
+}> {
+  maxHp: number
+  hp: number
+  dead = false
+
+  hitbox: RectangleCollider
+  hurtbox: RectangleCollider
+
+  #hpBar: HpBar
+  protected _sprite?: AnimatedSpriteNode
+  #hitboxDebugNode?: RectangleNode
+  #tintDelay?: DelayNode
+
+  constructor(options: CharacterOptions) {
+    super({ ...options, fixedRotation: true, useYSort: true })
+    this.maxHp = options.maxHp
+    this.hp = options.hp
+    this.hitbox = options.hitbox
+    this.hurtbox = options.hurtbox
+
+    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.collider, 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
+}

package/examples/simple-battle/objects/hero.ts

@@ -0,0 +1,113 @@
+import { AnimatedSpriteNode, ColliderType, DelayNode, GameObjectOptions, 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: 1000,
+      hp: 1000,
+      collider: { type: ColliderType.Rectangle, width: 30, height: 30, y: 12 },
+      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',
+      fps: 10,
+      loop: true,
+      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) {
+    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._sprite.loop = false
+    this.#cachedVelX = 0
+    this.#cachedVelY = 0
+    this.disableCollisions()
+
+    sfxPlayer.play('assets/sfx/hero/die/die.wav')
+  }
+}

package/examples/simple-battle/objects/orc.ts

@@ -0,0 +1,109 @@
+import { AnimatedSpriteNode, ColliderType, DelayNode, GameObjectOptions, sfxPlayer } from '../../../src/index'
+import orcAtlas from '../assets/spritesheets/orc-atlas.json'
+import { Character } from './character'
+
+const ORC_MOVE_VELOCITY = 3 as const
+const ORC_HITBOX_X = 24 as const
+const ORC_ATTACK_DAMAGE = 15 as const
+
+export class Orc extends Character<{
+  hit: (damage: number) => void
+  dead: () => void
+}> {
+  protected _sprite: AnimatedSpriteNode
+
+  #cachedVelX = 0
+  #cachedVelY = 0
+  #attacking = false
+
+  constructor(options?: GameObjectOptions) {
+    super({
+      ...options,
+      maxHp: 100,
+      hp: 100,
+      collider: { type: ColliderType.Rectangle, width: 30, height: 30, y: 12 },
+      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',
+      fps: 10,
+      loop: true,
+      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)
+  }
+
+  moveTo(x: number, y: number) {
+    if (this.dead) return
+
+    const dx = x - this.x
+    const dy = y - this.y
+    const radian = Math.atan2(dy, dx)
+    this.#cachedVelX = Math.cos(radian) * ORC_MOVE_VELOCITY
+    this.#cachedVelY = Math.sin(radian) * ORC_MOVE_VELOCITY
+
+    const scale = Math.abs(this._sprite.scaleX)
+    this._sprite.scaleX = dx > 0 ? scale : -scale
+    this.hitboxX = dx > 0 ? ORC_HITBOX_X : -ORC_HITBOX_X
+  }
+
+  stop() {
+    this.#cachedVelX = 0
+    this.#cachedVelY = 0
+  }
+
+  attack() {
+    if (this.dead || this.#attacking) return
+    this.#attacking = true
+
+    this.#cachedVelX = 0
+    this.#cachedVelY = 0
+
+    this._sprite.animation = Math.floor(Math.random() * 2) ? 'attack1' : 'attack2'
+
+    this.add(new DelayNode(0.3, () => this.emit('hit', ORC_ATTACK_DAMAGE)))
+
+    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) {
+    super.update(dt)
+    this.velocityX = this.#cachedVelX
+    this.velocityY = this.#cachedVelY
+  }
+
+  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._sprite.animation = 'die'
+    this._sprite.loop = false
+    this.#cachedVelX = 0
+    this.#cachedVelY = 0
+    this.disableCollisions()
+
+    sfxPlayer.play('assets/sfx/orc/die/die.wav')
+  }
+}

package/examples/simple-battle/objects/potion.ts

@@ -0,0 +1,29 @@
+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',
+      fps: 10,
+      loop: true,
+      scale: 2
+    }))
+
+    if (debugMode) {
+      this.add(new CircleNode({ ...this.triggerCollider, stroke: 'green', alpha: 0.5, layer: 'hud' }))
+    }
+  }
+}