kiwiengine 0.0.1-alpha → 0.5.2

package/src/collision/colliders.ts

@@ -0,0 +1,19 @@
+export enum ColliderType {
+  Rectangle,
+  Circle,
+  Ellipse,
+  Polygon,
+}
+
+type Position = { x?: number, y?: number }
+
+export type RectangleCollider = { type: ColliderType.Rectangle, width: number, height: number } & Position
+export type CircleCollider = { type: ColliderType.Circle, radius: number } & Position
+export type EllipseCollider = { type: ColliderType.Ellipse, width: number, height: number } & Position
+export type PolygonCollider = { type: ColliderType.Polygon, vertices: { x: number, y: number }[] } & Position
+
+export type Collider =
+  | RectangleCollider
+  | CircleCollider
+  | EllipseCollider
+  | PolygonCollider

package/src/debug.ts

@@ -0,0 +1,5 @@
+export let debugMode = false
+
+export function enableDebug() {
+  debugMode = true
+}

package/src/dom/dom-animated-sprite.ts

@@ -0,0 +1,153 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { SpritesheetData } from 'pixi.js'
+import { DomGameObject, DomGameObjectOptions } from './dom-game-object'
+import { domTextureLoader } from './dom-texture-loader'
+import { setStyle } from './dom-utils'
+
+export type DomAnimatedSpriteNodeOptions = {
+  src: string
+  atlas: SpritesheetData
+  animation: string
+  fps: number
+  loop?: boolean
+} & DomGameObjectOptions
+
+export class DomAnimatedSpriteNode<E extends EventMap = EventMap> extends DomGameObject<E & {
+  animationend: (animation: string) => void
+}> {
+  #src: string
+  #atlas: SpritesheetData
+  #animation: string
+  #fps: number
+  #loop: boolean
+
+  #frames: string[] = []
+  #frameDuration?: number
+  #textureScale = 1
+  #elapsedTime = 0
+  #currentFrameIdx = 0
+
+  constructor(options: DomAnimatedSpriteNodeOptions) {
+    super(options)
+    this.#src = options.src
+    this.#atlas = options.atlas
+    this.#animation = options.animation
+    this.#fps = options.fps
+    this.#loop = options.loop ?? true
+    this.#load()
+  }
+
+  async #load() {
+    let texture
+    if (domTextureLoader.checkCached(this.#src)) {
+      texture = domTextureLoader.getCached(this.#src)
+    } else {
+      console.info(`Dom texture not preloaded. Loading now: ${this.#src}`)
+      texture = await domTextureLoader.load(this.#src)
+    }
+
+    const S = this.#atlas.meta.scale === 'auto' ? 1 : Number(this.#atlas.meta.scale)
+
+    this.#frameDuration = 1 / this.#fps
+    this.#frames = this.#atlas.animations?.[this.#animation] ?? []
+    this.#textureScale = S
+
+    const frameName = this.#frames[this.#currentFrameIdx]
+    const frame = this.#atlas.frames[frameName].frame
+
+    setStyle(this.el, !frameName || !texture ? { backgroundImage: 'none' } : {
+      backgroundImage: `url(${this.#src})`,
+      width: `${frame.w * S}px`,
+      height: `${frame.h * S}px`,
+      backgroundSize: `${texture.width * S}px ${texture.height * S}px`,
+      backgroundPosition: `-${frame.x * S}px -${frame.y * S}px`
+    })
+  }
+
+  override render(dt: number) {
+    super.render(dt)
+
+    if (this.#frameDuration === undefined || this.#frames.length === 0) return
+
+    const lastIndex = this.#frames.length - 1
+    if (!this.#loop && this.#currentFrameIdx === lastIndex) return
+
+    this.#elapsedTime += dt
+    if (this.#elapsedTime < this.#frameDuration) return
+
+    while (this.#elapsedTime >= this.#frameDuration) {
+      this.#elapsedTime -= this.#frameDuration
+
+      if (this.#currentFrameIdx === lastIndex) {
+        (this as any).emit('animationend', this.#animation)
+
+        if (this.#loop) {
+          this.#currentFrameIdx = 0
+        } else {
+          this.#elapsedTime = 0
+          break
+        }
+      } else {
+        this.#currentFrameIdx++
+      }
+    }
+
+    const S = this.#textureScale
+    const frameName = this.#frames[this.#currentFrameIdx]
+    const frame = this.#atlas.frames[frameName].frame
+
+    setStyle(this.el, {
+      width: `${frame.w * S}px`,
+      height: `${frame.h * S}px`,
+      backgroundPosition: `-${frame.x * S}px -${frame.y * S}px`
+    })
+  }
+
+  set src(src) {
+    if (this.#src !== src) {
+      domTextureLoader.release(this.#src)
+      this.#src = src
+      this.#load()
+    }
+  }
+
+  get src() { return this.#src }
+
+  set atlas(atlas) {
+    if (this.#atlas !== atlas) {
+      domTextureLoader.release(this.#src)
+      this.#atlas = atlas
+      this.#load()
+    }
+  }
+
+  get atlas() { return this.#atlas }
+
+  set animation(animation) {
+    if (this.#animation !== animation) {
+      this.#animation = animation
+      this.#frames = this.#atlas.animations?.[animation] ?? []
+      this.#currentFrameIdx = 0
+      this.#elapsedTime = 0
+    }
+  }
+
+  get animation() { return this.#animation }
+
+  set fps(fps) {
+    if (this.#fps !== fps) {
+      this.#fps = fps
+      this.#frameDuration = 1 / fps
+    }
+  }
+
+  get fps() { return this.#fps }
+
+  set loop(loop) { this.#loop = loop }
+  get loop() { return this.#loop }
+
+  override remove() {
+    domTextureLoader.release(this.#src)
+    super.remove()
+  }
+}

package/src/dom/dom-game-object.ts

@@ -0,0 +1,131 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { DirtyNumber } from '../node/core/dirty-number'
+import { GameNode } from '../node/core/game-node'
+import { isRenderableNode } from '../node/core/renderable'
+import { LocalTransform, WorldTransform } from '../node/core/transform'
+import { setStyle } from './dom-utils'
+
+export type DomGameObjectOptions = {
+  x?: number
+  y?: number
+  scale?: number
+  scaleX?: number
+  scaleY?: number
+  pivotX?: number
+  pivotY?: number
+  rotation?: number
+
+  alpha?: number
+  useYSort?: boolean
+}
+
+class DomRootNode extends GameNode<EventMap> {
+  worldTransform = new WorldTransform()
+  worldAlpha = new DirtyNumber(1)
+
+  constructor() {
+    super()
+    this.worldTransform.x.v = 0
+    this.worldTransform.y.v = 0
+    this.worldTransform.resetDirty()
+  }
+}
+
+export class DomGameObject<E extends EventMap = EventMap> extends GameNode<E> {
+  protected el = document.createElement('div')
+
+  #localTransform = new LocalTransform()
+  worldTransform = new WorldTransform()
+  alpha = 1
+  worldAlpha = new DirtyNumber(1)
+  #useYSort = false
+
+  constructor(options?: DomGameObjectOptions) {
+    super()
+
+    setStyle(this.el, {
+      position: 'absolute',
+      left: '50%',
+      top: '50%',
+      zIndex: '1',
+      transform: 'translate(-50%, -50%)',
+    })
+
+    if (options) {
+      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.#useYSort = options.useYSort ?? false
+    }
+  }
+
+  render(dt: number) {
+    this.update(dt)
+    this._updateWorldTransform()
+  }
+
+  protected _updateWorldTransform() {
+    const parent = this.parent
+    if (parent && isRenderableNode(parent)) {
+      this.worldTransform.update(parent.worldTransform, this.#localTransform)
+      this.worldAlpha.v = parent.worldAlpha.v * this.alpha
+    }
+
+    if (this.worldTransform.dirty) {
+      const wt = this.worldTransform
+
+      this.el.style.transform = `
+        translate(
+          calc(-50% + ${wt.x.v}px),
+          calc(-50% + ${wt.y.v}px)
+        )
+        scale(${wt.scaleX.v}, ${wt.scaleY.v})
+        rotate(${wt.rotation.v}rad)
+      `
+    }
+    if (this.worldAlpha.dirty) this.el.style.opacity = this.worldAlpha.v.toString()
+
+    for (const child of this.children) {
+      if (isRenderableNode(child)) child._updateWorldTransform()
+    }
+    this.worldTransform.resetDirty()
+  }
+
+  attachTo(target: HTMLElement) {
+    target.appendChild(this.el)
+    this.parent = new DomRootNode()
+    this._updateWorldTransform()
+    return this
+  }
+
+  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 }
+}

package/src/dom/dom-particle.ts

@@ -0,0 +1,151 @@
+import { BLEND_MODES } from 'pixi.js'
+import { DomGameObject, DomGameObjectOptions } from './dom-game-object'
+import { domTextureLoader } from './dom-texture-loader'
+import { setStyle } from './dom-utils'
+
+type RandomRange = { min: number, max: number }
+
+export type DomParticleSystemOptions = {
+  texture: string
+
+  count: RandomRange
+  lifespan: RandomRange
+  angle: RandomRange
+  velocity: RandomRange
+  particleScale: RandomRange
+
+  startAlpha?: number
+  fadeRate: number
+  orientToVelocity: boolean
+
+  blendMode?: BLEND_MODES // ex) 'screen', 'multiply'
+} & DomGameObjectOptions
+
+interface Particle {
+  el: HTMLDivElement
+
+  age: number
+  lifespan: number
+
+  velocityX: number
+  velocityY: number
+
+  fadeRate: number
+}
+
+function random(min: number, max: number) {
+  return Math.random() * (max - min) + min
+}
+
+export class DomParticleSystem extends DomGameObject {
+  #textureSrc: string
+  #count: RandomRange
+  #lifespan: RandomRange
+  #angle: RandomRange
+  #velocity: RandomRange
+  #scale: RandomRange
+  #startAlpha?: number
+  #fadeRate: number
+  #orientToVelocity: boolean
+  #blendMode?: BLEND_MODES
+
+  #texture?: HTMLImageElement
+  #loadTexturePromise: Promise<void>
+  #particles: Particle[] = []
+
+  constructor(options: DomParticleSystemOptions) {
+    super(options)
+    this.el.style.pointerEvents = 'none'
+
+    this.#textureSrc = options.texture
+    this.#count = options.count
+    this.#lifespan = options.lifespan
+    this.#angle = options.angle
+    this.#velocity = options.velocity
+    this.#scale = options.particleScale
+    this.#startAlpha = options.startAlpha
+    this.#fadeRate = options.fadeRate
+    this.#orientToVelocity = options.orientToVelocity
+    this.#blendMode = options.blendMode
+
+    this.#loadTexturePromise = this.#loadTexture()
+  }
+
+  async #loadTexture() {
+    if (domTextureLoader.checkCached(this.#textureSrc)) {
+      this.#texture = domTextureLoader.getCached(this.#textureSrc)
+    } else {
+      console.info(`Dom texture not preloaded. Loading now: ${this.#textureSrc}`)
+      this.#texture = await domTextureLoader.load(this.#textureSrc)
+    }
+  }
+
+  async burst({ x, y }: { x: number; y: number }) {
+    if (!this.#texture) await this.#loadTexturePromise
+
+    const count = random(this.#count.min, this.#count.max)
+    for (let i = 0; i < count; i++) {
+      const lifespan = random(this.#lifespan.min, this.#lifespan.max)
+      const angle = random(this.#angle.min, this.#angle.max)
+      const sin = Math.sin(angle)
+      const cos = Math.cos(angle)
+      const velocity = random(this.#velocity.min, this.#velocity.max)
+      const scale = random(this.#scale.min, this.#scale.max)
+
+      const el = document.createElement('div')
+      setStyle(el, {
+        position: 'absolute',
+        left: `${x}px`,
+        top: `${y}px`,
+        width: `${this.#texture!.width}px`,
+        height: `${this.#texture!.height}px`,
+        transform: `translate(-50%, -50%) scale(${scale})${this.#orientToVelocity ? ` rotate(${angle}rad)` : ''}`,
+        backgroundImage: `url(${this.#textureSrc})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        opacity: `${this.#startAlpha ?? 1}`,
+        mixBlendMode: this.#blendMode ?? 'normal',
+      })
+
+      this.#particles.push({
+        el,
+        age: 0,
+        lifespan,
+        velocityX: velocity * cos,
+        velocityY: velocity * sin,
+        fadeRate: this.#fadeRate,
+      })
+
+      this.el.appendChild(el)
+    }
+  }
+
+  protected update(dt: number) {
+    super.update(dt)
+
+    const ps = this.#particles
+    for (let i = 0; i < ps.length; i++) {
+      const p = ps[i]
+      const e = p.el
+
+      p.age += dt
+      if (p.age > p.lifespan) {
+        e.remove()
+        ps.splice(i, 1)
+        i--
+        continue
+      }
+
+      const x = parseFloat(e.style.left) + p.velocityX * dt
+      const y = parseFloat(e.style.top) + p.velocityY * dt
+      const opacity = parseFloat(e.style.opacity) + p.fadeRate * dt
+
+      setStyle(e, { left: `${x}px`, top: `${y}px`, opacity: `${opacity}` })
+    }
+  }
+
+  override remove() {
+    domTextureLoader.release(this.#textureSrc)
+    super.remove()
+  }
+}

package/src/dom/dom-preload.ts

@@ -0,0 +1,54 @@
+import { audioLoader } from '../asset/loaders/audio'
+import { fontFamilyLoader } from '../asset/loaders/font'
+import { Loader } from '../asset/loaders/loader'
+import { domTextureLoader } from './dom-texture-loader'
+
+const loaderForPathMap: Array<{ check: (path: string) => boolean, loader: Loader<any> }> = [
+  { check: (p) => /\.(png|jpe?g|gif|webp)$/.test(p), loader: domTextureLoader },
+  { check: (p) => /\.(mp3|wav|ogg)$/.test(p), loader: audioLoader },
+  { check: (p) => !p.includes('.'), loader: fontFamilyLoader }
+]
+
+function getLoaderForPath(path: string): Loader<any> | undefined {
+  return loaderForPathMap.find(({ check }) => check(path))?.loader
+}
+
+async function loadAsset(asset: string): Promise<void> {
+  const loader = getLoaderForPath(asset)
+  if (!loader) {
+    console.warn(`No loader found for asset: ${asset}`)
+    return
+  }
+  await loader.load(asset)
+}
+
+function releaseAsset(asset: string): void {
+  const loader = getLoaderForPath(asset)
+  if (!loader) {
+    console.warn(`No loader found for asset: ${asset}`)
+    return
+  }
+  loader.release(asset)
+}
+
+export async function domPreload(
+  assets: string[],
+  progressCallback?: (progress: number) => void
+): Promise<() => void> {
+  let loaded = 0
+  const total = assets.length
+
+  await Promise.all(
+    assets.map(async (asset) => {
+      try {
+        await loadAsset(asset)
+        loaded++
+        progressCallback?.(loaded / total)
+      } catch (err) {
+        console.error(`Failed to load asset:`, asset, err)
+      }
+    })
+  )
+
+  return () => assets.forEach(releaseAsset)
+}

package/src/dom/dom-sprite.ts

@@ -0,0 +1,50 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { DomGameObject, DomGameObjectOptions } from './dom-game-object'
+import { domTextureLoader } from './dom-texture-loader'
+import { setStyle } from './dom-utils'
+
+export type DomSpriteNodeOptions = {
+  src: string
+} & DomGameObjectOptions
+
+export class DomSpriteNode<E extends EventMap = EventMap> extends DomGameObject<E> {
+  #src: string
+
+  constructor(options: DomSpriteNodeOptions) {
+    super(options)
+    this.#src = options.src
+    this.#load()
+  }
+
+  async #load() {
+    let texture
+    if (domTextureLoader.checkCached(this.#src)) {
+      texture = domTextureLoader.getCached(this.#src)
+    } else {
+      console.info(`Dom texture not preloaded. Loading now: ${this.#src}`)
+      texture = await domTextureLoader.load(this.#src)
+    }
+
+    setStyle(this.el, !texture ? { backgroundImage: 'none' } : {
+      backgroundImage: `url(${this.#src})`,
+      width: `${texture.width}px`,
+      height: `${texture.height}px`,
+      backgroundSize: `${texture.width}px ${texture.height}px`,
+    })
+  }
+
+  set src(src) {
+    if (this.#src !== src) {
+      domTextureLoader.release(this.#src)
+      this.#src = src
+      this.#load()
+    }
+  }
+
+  get src() { return this.#src }
+
+  override remove() {
+    domTextureLoader.release(this.#src)
+    super.remove()
+  }
+}

package/src/dom/dom-texture-loader.ts

@@ -0,0 +1,44 @@
+import { Loader } from '../asset/loaders/loader'
+
+class DomTextureLoader extends Loader<HTMLImageElement> {
+  protected override async doLoad(src: string) {
+    const loadingPromise = new Promise<HTMLImageElement | undefined>((resolve) => {
+      const image = new Image()
+      image.crossOrigin = 'anonymous'
+      image.src = src
+
+      image.onload = () => {
+        this.loadingPromises.delete(src)
+
+        if (!this.hasActiveRef(src)) {
+          resolve(undefined)
+          return
+        }
+
+        if (this.cachedAssets.has(src)) {
+          console.error(`Dom texture already loaded: ${src}`)
+          resolve(undefined)
+          return
+        }
+
+        this.cachedAssets.set(src, image)
+        resolve(image)
+      }
+
+      image.onerror = (error) => {
+        this.loadingPromises.delete(src)
+        console.error(`Failed to load dom texture: ${src}`, error)
+        resolve(undefined)
+      }
+    })
+
+    this.loadingPromises.set(src, loadingPromise)
+    return await loadingPromise
+  }
+
+  protected override cleanup(src: string, texture: HTMLImageElement) {
+    texture.remove()
+  }
+}
+
+export const domTextureLoader = new DomTextureLoader()

package/src/dom/dom-utils.ts

@@ -0,0 +1,19 @@
+export function textStroke<T extends HTMLElement>(target: T, width: number, color: string) {
+  let shadow = ''
+  for (let i = -width; i <= width; i++) {
+    for (let j = -width; j <= width; j++) {
+      if (i !== 0 || j !== 0) {
+        shadow += `${i}px ${j}px 0 ${color},`
+      }
+    }
+  }
+  shadow = shadow.slice(0, -1) // Remove last comma
+  target.style.textShadow = shadow
+  return target
+}
+
+export function setStyle(el: HTMLElement | undefined, styles: Partial<CSSStyleDeclaration>) {
+  if (!el) return
+  Object.assign(el.style, styles)
+  return el
+}

package/src/index.ts

@@ -1,14 +1,47 @@
-export { musicPlayer, sfxPlayer } from './asset/audio';
-export { AssetSource, preload } from './asset/preload';
-export { AnimatedSpriteObject } from './game-object-ext/animated-sprite';
-export { DomContainerObject } from './game-object-ext/dom-container';
-export { RectangleObject } from './game-object-ext/rect';
-export { SpineObject } from './game-object-ext/spine';
-export { SpriteObject } from './game-object-ext/sprite';
-export { TextObject } from './game-object-ext/text';
-export { GameObject, GameObjectOptions } from './game-object/game-object';
-export { Collider } from './game-object/game-object-physics';
-export { enableDebug } from './utils/debug';
-export { go } from './utils/go';
-export { World } from './world/world';
+// Core
+export { GameObject, GameObjectOptions } from './node/core/game-object'
+
+// Renderer
+export { Renderer, RendererOptions } from './renderer/renderer'
+export { Ticker } from './renderer/ticker'
+
+// Assets
+export { musicPlayer, sfxPlayer } from './asset/audio'
+export { AssetSource, preload } from './asset/preload'
+
+// Collision
+export { checkCollision } from './collision/check-collision'
+export { CircleCollider, Collider, ColliderType, EllipseCollider, PolygonCollider, RectangleCollider } from './collision/colliders'
+
+// Node Extensions
+export { AnimatedSpriteNode, AnimatedSpriteNodeOptions } from './node/ext/animated-sprite'
+export { BitmapTextNode, BitmapTextNodeOptions } from './node/ext/bitmap-text'
+export { CircleNode, CircleNodeOptions } from './node/ext/circle'
+export { DelayNode } from './node/ext/deplay'
+export { DomContainerNode, DomContainerNodeOptions } from './node/ext/dom-container'
+export { IntervalNode } from './node/ext/interval'
+export { ParticleSystem, ParticleSystemOptions } from './node/ext/particle'
+export { RectangleNode, RectangleNodeOptions } from './node/ext/rectangle'
+export { SpineNode, SpineNodeOptions } from './node/ext/spine'
+export { SpriteNode, SpriteNodeOptions } from './node/ext/sprite'
+
+// Physics
+export { PhysicsObject, PhysicsObjectOptions } from './node/physics/physics-object'
+export { PhysicsWorld } from './node/physics/physics-world'
+
+// DOM Nodes
+export { DomAnimatedSpriteNode } from './dom/dom-animated-sprite'
+export { DomParticleSystem, DomParticleSystemOptions } from './dom/dom-particle'
+export { domPreload } from './dom/dom-preload'
+export { DomSpriteNode, DomSpriteNodeOptions } from './dom/dom-sprite'
+export { setStyle, textStroke } from './dom/dom-utils'
+
+// Input
+export { Joystick } from './input/joystick'
+
+// Utils
+export { isMobile } from './utils/device'
+
+// Debug
+export { debugMode, enableDebug } from './debug'