kiwiengine 0.0.1-alpha → 0.5.2

package/src/input/joystick.ts

@@ -0,0 +1,316 @@
+import { setStyle } from '../dom/dom-utils'
+import { GameObject } from '../node/core/game-object'
+import { Renderer } from '../renderer/renderer'
+
+const ARROW_CODES = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'])
+
+function isArrow(code: string): boolean {
+  return ARROW_CODES.has(code)
+}
+
+function clampVector(dx: number, dy: number, maxR: number) {
+  const dist = Math.hypot(dx, dy)
+  if (dist <= maxR || dist === 0) return { x: dx, y: dy, dist }
+  const s = maxR / dist
+  return { x: dx * s, y: dy * s, dist: maxR }
+}
+
+function setPosition(el: HTMLElement | undefined, left: number, top: number) {
+  if (!el) return
+  el.style.left = `${left}px`
+  el.style.top = `${top}px`
+}
+
+export type JoystickOptions = {
+  // 공통 필수 콜백
+  onMove: (radian: number, strength: number) => void // 키보드일 때 strength=1
+  onRelease: () => void
+
+  // 선택 콜백
+  onKeyDown?: (code: string) => void
+
+  // (선택) 터치 전용 리소스/옵션
+  joystickImage?: HTMLElement         // 조이스틱 배경
+  knobImage?: HTMLElement             // 노브(스틱)
+  maxKnobDistance?: number            // px (기본 80)
+  moveThreshold?: number              // px (기본 0)
+  idlePosition?: { left: number; top: number } // 이미지 기본 위치 (기본값은 숨김 위치 -999999, -999999)
+}
+
+export class Joystick extends GameObject {
+  // 키보드 상태
+  #codesPressed = new Set<string>()
+  #arrowCodesPressed = new Set<string>()
+
+  // 터치 상태
+  #activeTouchId?: number
+  #touchStartX = 0
+  #touchStartY = 0
+  #moving = false
+
+  // DOM (터치용)
+  #joystickImage?: HTMLElement
+  #knobImage?: HTMLElement
+  #maxKnobDistance: number
+  #moveThreshold: number
+  #idlePosition: { left: number; top: number }
+
+  // 콜백
+  #onMove: (radian: number, strength: number) => void
+  #onRelease: () => void
+  #onKeydown?: (code: string) => void
+
+  constructor(options: JoystickOptions) {
+    super()
+
+    this.#onMove = options.onMove
+    this.#onRelease = options.onRelease
+    this.#onKeydown = options.onKeyDown
+    this.#joystickImage = options.joystickImage
+    this.#knobImage = options.knobImage
+    this.#maxKnobDistance = options.maxKnobDistance ?? 80
+    this.#moveThreshold = options.moveThreshold ?? 0
+    this.#idlePosition = options.idlePosition ?? { left: -999999, top: -999999 }
+
+    window.addEventListener('keydown', this.#onKeyDown)
+    window.addEventListener('keyup', this.#onKeyUp)
+    window.addEventListener('blur', this.#onBlur)
+  }
+
+  protected override set renderer(renderer: Renderer | undefined) {
+    const prev = super.renderer
+    if (prev) {
+      const pc = prev.container
+      pc.removeEventListener('touchstart', this.#onTouchStart)
+      pc.removeEventListener('touchmove', this.#onTouchMove)
+      pc.removeEventListener('touchend', this.#onTouchEnd)
+      pc.removeEventListener('touchcancel', this.#onTouchEnd)
+    }
+
+    super.renderer = renderer
+    if (renderer) {
+      const c = renderer.container
+      c.addEventListener('touchstart', this.#onTouchStart, { passive: false })
+      c.addEventListener('touchmove', this.#onTouchMove, { passive: false })
+      c.addEventListener('touchend', this.#onTouchEnd)
+      c.addEventListener('touchcancel', this.#onTouchEnd)
+
+      if (this.#joystickImage) {
+        setStyle(this.#joystickImage, {
+          position: 'absolute',
+          left: `${this.#idlePosition.left}px`,
+          top: `${this.#idlePosition.top}px`,
+          zIndex: '999998',
+          transform: 'translate(-50%, -50%)',
+          pointerEvents: 'none',
+        })
+        c.appendChild(this.#joystickImage)
+      }
+
+      if (this.#knobImage) {
+        setStyle(this.#knobImage, {
+          position: 'absolute',
+          left: `${this.#idlePosition.left}px`,
+          top: `${this.#idlePosition.top}px`,
+          zIndex: '999999',
+          transform: 'translate(-50%, -50%)',
+          pointerEvents: 'none',
+        })
+        c.appendChild(this.#knobImage)
+      }
+    }
+  }
+
+  protected override get renderer() {
+    return super.renderer
+  }
+
+  #onTouchStart = (event: TouchEvent) => {
+    if (this.paused) return
+    event.preventDefault()
+
+    if (this.#activeTouchId !== undefined) return
+
+    const touch = event.changedTouches[0]
+    this.#activeTouchId = touch.identifier
+    this.#touchStartX = touch.clientX
+    this.#touchStartY = touch.clientY
+    this.#moving = false
+
+    if (!this.renderer) return
+
+    const r = this.renderer.container.getBoundingClientRect()
+    const left = this.#touchStartX - r.left
+    const top = this.#touchStartY - r.top
+
+    setPosition(this.#joystickImage, left, top)
+    setPosition(this.#knobImage, left, top)
+  }
+
+  #onTouchMove = (event: TouchEvent) => {
+    if (this.paused) return
+    event.preventDefault()
+
+    if (this.#activeTouchId === undefined) return
+
+    for (let i = 0; i < event.changedTouches.length; i++) {
+      const t = event.changedTouches[i]
+      if (t.identifier !== this.#activeTouchId) continue
+
+      const dx = t.clientX - this.#touchStartX
+      const dy = t.clientY - this.#touchStartY
+
+      const { x: cx, y: cy, dist } = clampVector(dx, dy, this.#maxKnobDistance)
+
+      if (this.renderer) {
+        const r = this.renderer.container.getBoundingClientRect()
+        const left = this.#touchStartX - r.left + cx
+        const top = this.#touchStartY - r.top + cy
+        setPosition(this.#knobImage, left, top)
+      }
+
+      if (this.#moving || dist >= this.#moveThreshold) {
+        this.#moving = true
+        if (cx !== 0 || cy !== 0) {
+          const radian = Math.atan2(cy, cx)
+          const normalized = this.#maxKnobDistance === 0 ? 0 : dist / this.#maxKnobDistance
+          this.#onMove(radian, normalized)
+        }
+      }
+      break
+    }
+  }
+
+  #onTouchEnd = (event: TouchEvent) => {
+    if (this.paused || this.#activeTouchId === undefined) return
+
+    let ended = false
+    for (let i = 0; i < event.changedTouches.length; i++) {
+      if (event.changedTouches[i].identifier === this.#activeTouchId) {
+        ended = true
+        break
+      }
+    }
+    if (!ended) return
+
+    this.#activeTouchId = undefined
+
+    // 기본 위치로 복귀
+    const { left, top } = this.#idlePosition
+    setPosition(this.#joystickImage, left, top)
+    setPosition(this.#knobImage, left, top)
+
+    if (this.#moving) {
+      this.#moving = false
+      this.#onRelease()
+    }
+  }
+
+  #emitFromArrowKeys() {
+    let dx = 0
+    let dy = 0
+
+    if (this.#arrowCodesPressed.has('ArrowUp')) dy -= 1
+    if (this.#arrowCodesPressed.has('ArrowDown')) dy += 1
+    if (this.#arrowCodesPressed.has('ArrowLeft')) dx -= 1
+    if (this.#arrowCodesPressed.has('ArrowRight')) dx += 1
+
+    if (dx !== 0 || dy !== 0) {
+      const radian = Math.atan2(dy, dx)
+      // 키보드: strength=1 로 일관 전달
+      this.#onMove(radian, 1)
+    }
+  }
+
+  #onKeyDown = (event: KeyboardEvent) => {
+    if (this.paused) return
+
+    const code = event.code
+    if (this.#codesPressed.has(code)) return
+
+    this.#codesPressed.add(code)
+    this.#onKeydown?.(code)
+
+    if (isArrow(code)) {
+      const target = event.target as HTMLElement | null
+      const isEditing =
+        !!target?.closest('input, textarea, [contenteditable]:not([contenteditable="false"])')
+      if (!isEditing) event.preventDefault()
+
+      this.#arrowCodesPressed.add(code)
+      this.#emitFromArrowKeys()
+    }
+  }
+
+  #onKeyUp = (event: KeyboardEvent) => {
+    if (this.paused) return
+
+    const code = event.code
+    this.#codesPressed.delete(code)
+
+    if (isArrow(code)) {
+      this.#arrowCodesPressed.delete(code)
+
+      if (this.#arrowCodesPressed.size === 0) {
+        this.#onRelease()
+      } else {
+        this.#emitFromArrowKeys()
+      }
+    }
+  }
+
+  #onBlur = () => {
+    if (this.paused) return
+
+    // 키보드/터치 공통 릴리즈
+    this.#codesPressed.clear()
+    this.#arrowCodesPressed.clear()
+    this.#activeTouchId = undefined
+    this.#moving = false
+
+    // 기본 위치로 복귀
+    const { left, top } = this.#idlePosition
+    setPosition(this.#joystickImage, left, top)
+    setPosition(this.#knobImage, left, top)
+
+    this.#onRelease()
+  }
+
+  override pause() {
+    this.#onBlur()
+    super.pause()
+  }
+
+  // 조이스틱 이미지의 기본 위치(숨김 좌표) 설정
+  setIdlePosition(p: { left: number; top: number }): void {
+    this.#idlePosition = p
+
+    // 드래그 중이면 즉시 반영하지 않음
+    if (this.#activeTouchId !== undefined) return
+
+    setPosition(this.#joystickImage, p.left, p.top)
+    setPosition(this.#knobImage, p.left, p.top)
+  }
+
+  override remove() {
+    const renderer = this.renderer
+    if (renderer) {
+      const c = renderer.container
+      c.removeEventListener('touchstart', this.#onTouchStart)
+      c.removeEventListener('touchmove', this.#onTouchMove)
+      c.removeEventListener('touchend', this.#onTouchEnd)
+      c.removeEventListener('touchcancel', this.#onTouchEnd)
+    }
+
+    // 윈도우 리스너 정리
+    window.removeEventListener('keydown', this.#onKeyDown)
+    window.removeEventListener('keyup', this.#onKeyUp)
+    window.removeEventListener('blur', this.#onBlur)
+
+    // DOM 노드 제거
+    this.#joystickImage?.remove()
+    this.#knobImage?.remove()
+
+    super.remove()
+  }
+}

package/src/node/core/dirty-number.ts

@@ -0,0 +1,45 @@
+export class DirtyNumber {
+  #value: number
+  #isDirty: boolean
+
+  constructor(initialValue: number) {
+    this.#value = initialValue
+    this.#isDirty = false
+  }
+
+  get dirty() { return this.#isDirty }
+  get v() { return this.#value }
+
+  set v(newValue: number) {
+    if (this.#value !== newValue) this.#isDirty = true
+    this.#value = newValue
+  }
+
+  resetDirty() {
+    this.#isDirty = false
+  }
+}
+
+export class DirtyRadian extends DirtyNumber {
+  #cos: number
+  #sin: number
+
+  constructor(initialValue: number) {
+    super(initialValue)
+    this.#cos = Math.cos(initialValue)
+    this.#sin = Math.sin(initialValue)
+  }
+
+  get cos() { return this.#cos }
+  get sin() { return this.#sin }
+
+  override set v(newValue: number) {
+    if (super.v !== newValue) {
+      this.#cos = Math.cos(newValue)
+      this.#sin = Math.sin(newValue)
+    }
+    super.v = newValue
+  }
+
+  override get v() { return super.v }
+}

package/src/node/core/game-node.ts

@@ -0,0 +1,74 @@
+import { EventEmitter, EventMap } from '@webtaku/event-emitter'
+
+export abstract class GameNode<E extends EventMap> extends EventEmitter<E & {
+  update: (dt: number) => void
+}> {
+  #parent?: GameNode<EventMap>
+  protected children: GameNode<EventMap>[] = [];
+  paused = false
+
+  protected set parent(parent: GameNode<EventMap> | undefined) {
+    this.#parent = parent
+  }
+
+  protected get parent() {
+    return this.#parent
+  }
+
+  add(...children: GameNode<EventMap>[]) {
+    for (const child of children) {
+
+      // 기존 부모로부터 제거
+      if (child.#parent) {
+        const idx = child.#parent.children.indexOf(child)
+        if (idx !== -1) child.#parent.children.splice(idx, 1)
+      }
+
+      // 새로운 부모 설정
+      child.parent = this
+      this.children.push(child)
+    }
+  }
+
+  remove() {
+    super.remove()
+
+    // 부모로부터 제거
+    if (this.#parent) {
+      const idx = this.#parent.children.indexOf(this)
+      if (idx !== -1) this.#parent.children.splice(idx, 1)
+      this.#parent = undefined
+    }
+
+    // 자식 노드 제거
+    for (const child of this.children) {
+      child.parent = undefined
+      child.remove()
+    }
+    this.children.length = 0
+  }
+
+  pause() {
+    this.paused = true
+    for (const child of this.children) {
+      child.pause()
+    }
+  }
+
+  resume() {
+    this.paused = false
+    for (const child of this.children) {
+      child.resume()
+    }
+  }
+
+  protected update(dt: number) {
+    if (this.paused) return
+
+    for (const child of this.children) {
+      if (!child.paused) child.update(dt)
+    }
+
+    (this as any).emit('update', dt)
+  }
+}

package/src/node/core/game-object.ts

@@ -0,0 +1,11 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { Container as PixiContainer } from 'pixi.js'
+import { TransformableNode, TransformableNodeOptions } from './transformable'
+
+export type GameObjectOptions = {} & TransformableNodeOptions
+
+export class GameObject<E extends EventMap = EventMap> extends TransformableNode<PixiContainer, E> {
+  constructor(options?: GameObjectOptions) {
+    super(new PixiContainer({ sortableChildren: true }), options ?? {})
+  }
+}

package/src/node/core/renderable.ts

@@ -0,0 +1,65 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { Container as PixiContainer } from 'pixi.js'
+import { Renderer } from '../../renderer/renderer'
+import { DirtyNumber } from './dirty-number'
+import { GameNode } from './game-node'
+import { WorldTransform } from './transform'
+
+export function isRenderableNode(v: unknown): v is RenderableNode<PixiContainer, EventMap> {
+  return (v as RenderableNode<PixiContainer, EventMap>).worldTransform !== undefined
+}
+
+export abstract class RenderableNode<C extends PixiContainer, E extends EventMap> extends GameNode<E> {
+  #renderer?: Renderer
+  _pixiContainer: C
+
+  worldTransform = new WorldTransform()
+  worldAlpha = new DirtyNumber(1)
+
+  constructor(pixiContainer: C) {
+    super()
+    this._pixiContainer = pixiContainer
+  }
+
+  protected set renderer(renderer: Renderer | undefined) {
+    this.#renderer = renderer
+
+    for (const child of this.children) {
+      if (isRenderableNode(child)) {
+        child.renderer = renderer
+      }
+    }
+  }
+
+  protected get renderer() {
+    return this.#renderer
+  }
+
+  override add(...children: GameNode<EventMap>[]) {
+    super.add(...children)
+
+    for (const child of children) {
+      if (isRenderableNode(child)) {
+        this._pixiContainer.addChild(child._pixiContainer)
+
+        // 렌더러 설정
+        if (this.#renderer) child.renderer = this.#renderer
+      }
+    }
+  }
+
+  override remove() {
+    this._pixiContainer.destroy({ children: true })
+    super.remove()
+  }
+
+  _updateWorldTransform() {
+    for (const child of this.children) {
+      if (isRenderableNode(child)) child._updateWorldTransform()
+    }
+    this.worldTransform.resetDirty()
+  }
+
+  set tint(t) { this._pixiContainer.tint = t }
+  get tint() { return this._pixiContainer.tint }
+}

package/src/node/core/transform.ts

@@ -0,0 +1,70 @@
+import { DirtyNumber, DirtyRadian } from './dirty-number'
+
+export class LocalTransform {
+  x = 0
+  y = 0
+  scaleX = 1
+  scaleY = 1
+  pivotX = 0
+  pivotY = 0
+
+  #rotation = 0
+  #cos = 1
+  #sin = 0
+
+  get cos() { return this.#cos }
+  get sin() { return this.#sin }
+  get rotation() { return this.#rotation }
+
+  set rotation(v) {
+    if (this.#rotation !== v) {
+      this.#rotation = v
+      this.#cos = Math.cos(v)
+      this.#sin = Math.sin(v)
+    }
+  }
+}
+
+export class WorldTransform {
+  x = new DirtyNumber(Number.NEGATIVE_INFINITY)
+  y = new DirtyNumber(Number.NEGATIVE_INFINITY)
+  scaleX = new DirtyNumber(1)
+  scaleY = new DirtyNumber(1)
+  rotation = new DirtyRadian(0)
+
+  update(parent: WorldTransform, local: LocalTransform) {
+    const rx = local.x * parent.scaleX.v
+    const ry = local.y * parent.scaleY.v
+    const pCos = parent.rotation.cos
+    const pSin = parent.rotation.sin
+
+    this.scaleX.v = parent.scaleX.v * local.scaleX
+    this.scaleY.v = parent.scaleY.v * local.scaleY
+
+    const pivotX = local.pivotX * this.scaleX.v
+    const pivotY = local.pivotY * this.scaleY.v
+    const cos = local.cos
+    const sin = local.sin
+
+    this.x.v = parent.x.v + (rx * pCos - ry * pSin) - (pivotX * cos - pivotY * sin)
+    this.y.v = parent.y.v + (rx * pSin + ry * pCos) - (pivotX * sin + pivotY * cos)
+
+    this.rotation.v = parent.rotation.v + local.rotation
+  }
+
+  get dirty() {
+    return this.x.dirty ||
+      this.y.dirty ||
+      this.scaleX.dirty ||
+      this.scaleY.dirty ||
+      this.rotation.dirty
+  }
+
+  resetDirty() {
+    this.x.resetDirty()
+    this.y.resetDirty()
+    this.scaleX.resetDirty()
+    this.scaleY.resetDirty()
+    this.rotation.resetDirty()
+  }
+}

package/src/node/core/transformable.ts

@@ -0,0 +1,111 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { Container as PixiContainer } from 'pixi.js'
+import { Renderer } from '../../renderer/renderer'
+import { isRenderableNode, RenderableNode } from './renderable'
+import { LocalTransform } from './transform'
+
+export type TransformableNodeOptions = {
+  x?: number
+  y?: number
+  scale?: number
+  scaleX?: number
+  scaleY?: number
+  pivotX?: number
+  pivotY?: number
+  rotation?: number
+
+  alpha?: number
+  layer?: string
+  useYSort?: boolean
+}
+
+export abstract class TransformableNode<C extends PixiContainer, E extends EventMap> extends RenderableNode<C, E> {
+  protected localTransform = new LocalTransform()
+
+  alpha = 1
+  #layer?: string
+  #useYSort = false
+
+  constructor(pixiContainer: C, options: TransformableNodeOptions) {
+    super(pixiContainer)
+
+    if (options.x !== undefined) this.x = options.x
+    if (options.y !== undefined) this.y = options.y
+    if (options.scale !== undefined) this.scale = options.scale
+    if (options.scaleX !== undefined) this.scaleX = options.scaleX
+    if (options.scaleY !== undefined) this.scaleY = options.scaleY
+    if (options.pivotX !== undefined) this.pivotX = options.pivotX
+    if (options.pivotY !== undefined) this.pivotY = options.pivotY
+    if (options.rotation !== undefined) this.rotation = options.rotation
+    if (options.alpha !== undefined) this.alpha = options.alpha
+
+    this.#layer = options.layer
+    this.#useYSort = options.useYSort ?? false
+  }
+
+  protected override set renderer(renderer: Renderer | undefined) {
+    super.renderer = renderer
+
+    if (this.#layer && renderer) {
+      renderer._addToLayer(this, this.#layer)
+    }
+  }
+
+  protected override get renderer() {
+    return super.renderer
+  }
+
+  override _updateWorldTransform() {
+    const parent = this.parent
+    if (parent && isRenderableNode(parent)) {
+      this.worldTransform.update(parent.worldTransform, this.localTransform)
+      this.worldAlpha.v = parent.worldAlpha.v * this.alpha
+    }
+
+    const pc = this._pixiContainer
+    const renderer = this.renderer
+
+    // 레이어 상에 있는 경우, 독립적으로 업데이트
+    if (this.#layer && renderer) {
+      const wt = this.worldTransform
+      pc.position.set(wt.x.v, wt.y.v)
+      pc.scale.set(wt.scaleX.v, wt.scaleY.v)
+      pc.rotation = wt.rotation.v
+      pc.alpha = this.worldAlpha.v
+    } else {
+      const lt = this.localTransform
+      pc.position.set(lt.x, lt.y)
+      if (this.#useYSort) pc.zIndex = lt.y
+      pc.pivot.set(lt.pivotX, lt.pivotY)
+      pc.scale.set(lt.scaleX, lt.scaleY)
+      pc.rotation = lt.rotation
+      pc.alpha = this.alpha
+    }
+
+    super._updateWorldTransform()
+  }
+
+  set x(v) { this.localTransform.x = v }
+  get x() { return this.localTransform.x }
+
+  set y(v) { this.localTransform.y = v }
+  get y() { return this.localTransform.y }
+
+  set scale(v) { this.localTransform.scaleX = v; this.localTransform.scaleY = v }
+  get scale() { return this.localTransform.scaleX }
+
+  set scaleX(v) { this.localTransform.scaleX = v }
+  get scaleX() { return this.localTransform.scaleX }
+
+  set scaleY(v) { this.localTransform.scaleY = v }
+  get scaleY() { return this.localTransform.scaleY }
+
+  set pivotX(v) { this.localTransform.pivotX = v }
+  get pivotX() { return this.localTransform.pivotX }
+
+  set pivotY(v) { this.localTransform.pivotY = v }
+  get pivotY() { return this.localTransform.pivotY }
+
+  set rotation(v) { this.localTransform.rotation = v }
+  get rotation() { return this.localTransform.rotation }
+}