kiwiengine 0.0.1-alpha → 0.5.2

package/src/node/ext/animated-sprite.ts

@@ -0,0 +1,123 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { AnimatedSprite as PixiAnimatedSprite, Spritesheet, SpritesheetData } from 'pixi.js'
+import { getCachedAtlasId, spritesheetLoader } from '../../asset/loaders/spritesheet'
+import { GameObject, GameObjectOptions } from '../core/game-object'
+
+export type AnimatedSpriteNodeOptions = {
+  src: string
+  atlas: SpritesheetData
+  animation: string
+  fps: number
+  loop?: boolean
+} & GameObjectOptions
+
+export class AnimatedSpriteNode<E extends EventMap = EventMap> extends GameObject<E & {
+  animationend: (animation: string) => void
+}> {
+  #src: string
+  #atlas: SpritesheetData
+  #animation: string
+  #fps: number
+  #loop: boolean
+
+  #atlasId!: string
+  #sheet?: Spritesheet
+  #sprite?: PixiAnimatedSprite
+
+  constructor(options: AnimatedSpriteNodeOptions) {
+    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() {
+    this.#atlasId = getCachedAtlasId(this.#src, this.#atlas)
+
+    if (spritesheetLoader.checkCached(this.#atlasId)) {
+      this.#sheet = spritesheetLoader.getCached(this.#atlasId)
+    } else {
+      console.info(`Spritesheet not preloaded. Loading now: ${this.#atlasId}`)
+      this.#sheet = await spritesheetLoader.load(this.#atlasId, this.#src, this.#atlas)
+    }
+
+    this.#updateAnimation()
+  }
+
+  #updateAnimation() {
+    this.#sprite?.destroy()
+    this.#sprite = undefined
+
+    if (this.#sheet) {
+      if (!this.#sheet.animations[this.#animation]) {
+        console.error(`Animation not found: ${this.#animation}`)
+        return
+      }
+
+      const s = new PixiAnimatedSprite(this.#sheet.animations[this.#animation])
+      s.anchor.set(0.5, 0.5)
+      s.loop = this.#loop
+      s.animationSpeed = (this.#fps ?? 0) / 60
+      s.play()
+      s.onLoop = () => (this as any).emit('animationend', this.#animation)
+      s.onComplete = () => (this as any).emit('animationend', this.#animation)
+      this._pixiContainer.addChild(s)
+      this.#sprite = s
+    }
+  }
+
+  set src(src) {
+    if (this.#src !== src) {
+      spritesheetLoader.release(this.#atlasId)
+      this.#src = src
+      this.#load()
+    }
+  }
+
+  get src() { return this.#src }
+
+  set atlas(atlas) {
+    if (this.#atlas !== atlas) {
+      spritesheetLoader.release(this.#atlasId)
+      this.#atlas = atlas
+      this.#load()
+    }
+  }
+
+  get atlas() { return this.#atlas }
+
+  set animation(animation) {
+    if (this.#animation !== animation) {
+      this.#animation = animation
+      this.#updateAnimation()
+    }
+  }
+
+  get animation() { return this.#animation }
+
+  set fps(fps) {
+    if (this.#fps !== fps) {
+      this.#fps = fps
+      if (this.#sprite) this.#sprite.animationSpeed = (fps ?? 0) / 60
+    }
+  }
+
+  get fps() { return this.#fps }
+
+  set loop(loop) {
+    if (this.#loop !== loop) {
+      this.#loop = loop
+      if (this.#sprite) this.#sprite.loop = loop
+    }
+  }
+
+  get loop() { return this.#loop }
+
+  remove() {
+    spritesheetLoader.release(this.#atlasId)
+    super.remove()
+  }
+}

package/src/node/ext/bitmap-text.ts

@@ -0,0 +1,109 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { Rectangle as PixiRectangle, Sprite as PixiSprite, Texture as PixiTexture } from 'pixi.js'
+import { bitmapFontLoader } from '../../asset/loaders/bitmap-font'
+import { GameObject, GameObjectOptions } from '../core/game-object'
+
+export type BitmapTextNodeOptions = {
+  fnt: string
+  src: string
+  text: string
+} & GameObjectOptions
+
+export class BitmapTextNode<E extends EventMap = EventMap> extends GameObject<E> {
+  #fnt: string
+  #src: string
+  #text: string
+
+  constructor(options: BitmapTextNodeOptions) {
+    super(options)
+    this.#fnt = options.fnt
+    this.#src = options.src
+    this.#text = options.text
+    this.#load()
+  }
+
+  async #load() {
+    let font
+    if (bitmapFontLoader.checkCached(this.#fnt)) {
+      font = bitmapFontLoader.getCached(this.#fnt)
+    } else {
+      console.info(`Bitmap font not preloaded. Loading now: ${this.#fnt}`)
+      font = await bitmapFontLoader.load(this.#fnt, this.#src)
+    }
+    if (!font) return
+
+    const sprites: PixiSprite[] = []
+
+    let xPos = 0, yPos = 0
+    let minX = Infinity, minY = Infinity
+    let maxX = -Infinity, maxY = -Infinity
+
+    for (let i = 0; i < this.#text.length; i++) {
+      const charCode = this.#text.charCodeAt(i)
+
+      if (charCode === 10) {
+        xPos = 0
+        yPos += font.lineHeight
+        continue
+      }
+
+      const c = font.chars[charCode]
+      if (!c) continue
+
+      const frame = new PixiRectangle(c.x, c.y, c.width, c.height)
+      const texture = new PixiTexture({ source: font.texture.source, frame })
+      const sprite = new PixiSprite(texture)
+
+      const x0 = xPos + c.xoffset
+      const y0 = yPos + c.yoffset
+
+      sprite.x = x0
+      sprite.y = y0
+
+      sprites.push(sprite)
+
+      const x1 = x0 + c.width
+      const y1 = y0 + c.height
+
+      if (x0 < minX) minX = x0
+      if (y0 < minY) minY = y0
+      if (x1 > maxX) maxX = x1
+      if (y1 > maxY) maxY = y1
+
+      xPos += c.xadvance
+    }
+
+    if (minX === Infinity) {
+      minX = 0
+      minY = 0
+    }
+
+    if (maxX === -Infinity) {
+      maxX = 0
+      maxY = 0
+    }
+
+    const width = maxX - minX
+    const height = maxY - minY
+
+    for (const s of sprites) {
+      s.x -= width / 2
+      s.y -= height / 2
+      this._pixiContainer.addChild(s)
+    }
+  }
+
+  changeFont(fnt: string, src: string) {
+    if (this.#fnt !== fnt || this.#src !== src) {
+      bitmapFontLoader.release(this.#fnt)
+      this.#fnt = fnt
+      this.#src = src
+      this.#load()
+    }
+  }
+
+  override remove() {
+    bitmapFontLoader.release(this.#fnt)
+    super.remove()
+  }
+}

package/src/node/ext/circle.ts

@@ -0,0 +1,40 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { FillInput, Graphics, StrokeInput } from 'pixi.js'
+import { TransformableNode, TransformableNodeOptions } from '../core/transformable'
+
+export type CircleNodeOptions = {
+  radius: number
+  fill?: FillInput
+  stroke?: StrokeInput
+} & TransformableNodeOptions
+
+export class CircleNode extends TransformableNode<Graphics, EventMap> {
+  #radius: number
+  #fill?: FillInput
+  #stroke?: StrokeInput
+
+  constructor(options: CircleNodeOptions) {
+    super(new Graphics({ sortableChildren: true }), options)
+
+    this.#radius = options.radius
+    this.#fill = options.fill
+    this.#stroke = options.stroke
+
+    this.#draw()
+  }
+
+  #draw() {
+    this._pixiContainer.clear().circle(0, 0, this.#radius)
+    if (this.#fill) this._pixiContainer.fill(this.#fill)
+    if (this.#stroke) this._pixiContainer.stroke(this.#stroke)
+  }
+
+  get radius() { return this.#radius }
+  set radius(v) { this.#radius = v; this.#draw() }
+
+  get fill() { return this.#fill }
+  set fill(v) { this.#fill = v; this.#draw() }
+
+  get stroke() { return this.#stroke }
+  set stroke(v) { this.#stroke = v; this.#draw() }
+}

package/src/node/ext/deplay.ts

@@ -0,0 +1,24 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { GameNode } from '../core/game-node'
+
+export class DelayNode extends GameNode<EventMap> {
+  #delay: number
+  #accumulated = 0
+  #callback: () => void
+
+  constructor(delay: number, callback: () => void) {
+    super()
+    this.#delay = delay
+    this.#callback = callback
+  }
+
+  protected override update(dt: number) {
+    super.update(dt)
+
+    this.#accumulated += dt
+    if (this.#accumulated >= this.#delay) {
+      this.#callback()
+      this.remove()
+    }
+  }
+}

package/src/node/ext/dom-container.ts

@@ -0,0 +1,62 @@
+import { Renderer } from '../../renderer/renderer'
+import { GameObject, GameObjectOptions } from '../core/game-object'
+
+export type DomContainerNodeOptions = {} & GameObjectOptions
+
+export class DomContainerNode extends GameObject {
+  #el: HTMLElement
+
+  constructor(el: HTMLElement, options?: DomContainerNodeOptions) {
+    super(options)
+    el.style.position = 'absolute'
+    el.style.left = '0'
+    el.style.top = '0'
+    el.style.zIndex = '1'
+    this.#el = el
+  }
+
+  #syncTransform() {
+    const renderer = this.renderer
+    if (renderer) {
+      const wt = this.worldTransform
+      const S = renderer.viewportScale
+
+      this.#el.style.transform = `
+        translate(
+          calc(-50% + ${wt.x.v * S + renderer.canvasLeft + renderer.centerX * S}px),
+          calc(-50% + ${wt.y.v * S + renderer.canvasTop + renderer.centerY * S}px)
+        )
+        scale(${wt.scaleX.v * S}, ${wt.scaleY.v * S})
+        rotate(${wt.rotation.v}rad)
+      `
+    }
+  }
+
+  protected override set renderer(renderer: Renderer | undefined) {
+    super.renderer = renderer
+
+    if (renderer) {
+      renderer.container.appendChild(this.#el)
+      this.#syncTransform()
+    }
+  }
+
+  protected override get renderer() {
+    return super.renderer
+  }
+
+  protected update(dt: number): void {
+    super.update(dt)
+
+    const renderer = this.renderer
+    if (renderer && (renderer._isSizeDirty || this.worldTransform.dirty)) {
+      this.#syncTransform()
+    }
+    if (this.worldAlpha.dirty) this.#el.style.opacity = this.worldAlpha.v.toString()
+  }
+
+  override remove() {
+    this.#el.remove()
+    super.remove()
+  }
+}

package/src/node/ext/interval.ts

@@ -0,0 +1,24 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { GameNode } from '../core/game-node'
+
+export class IntervalNode extends GameNode<EventMap> {
+  interval: number
+  #accumulated = 0
+  #callback: () => void
+
+  constructor(interval: number, callback: () => void) {
+    super()
+    this.interval = interval
+    this.#callback = callback
+  }
+
+  protected override update(dt: number) {
+    super.update(dt)
+
+    this.#accumulated += dt
+    if (this.#accumulated >= this.interval) {
+      this.#accumulated %= this.interval
+      this.#callback()
+    }
+  }
+}

package/src/node/ext/particle.ts

@@ -0,0 +1,142 @@
+import { BLEND_MODES, Sprite as PixiSprite, Texture as PixiTexture } from 'pixi.js'
+import { textureLoader } from '../../asset/loaders/texture'
+import { GameObject, GameObjectOptions } from '../core/game-object'
+
+type RandomRange = { min: number, max: number }
+
+export type ParticleSystemOptions = {
+  texture: string
+
+  count: RandomRange
+  lifespan: RandomRange
+  angle: RandomRange
+  velocity: RandomRange
+  particleScale: RandomRange
+
+  startAlpha?: number
+  fadeRate: number
+  orientToVelocity: boolean
+
+  blendMode?: BLEND_MODES // ex) 'screen', 'multiply'
+} & GameObjectOptions
+
+interface Particle {
+  sprite: PixiSprite
+
+  age: number
+  lifespan: number
+
+  velocityX: number
+  velocityY: number
+
+  fadeRate: number
+}
+
+function random(min: number, max: number) {
+  return Math.random() * (max - min) + min
+}
+
+export class ParticleSystem extends GameObject {
+  #textureSrc: string
+  #count: RandomRange
+  #lifespan: RandomRange
+  #angle: RandomRange
+  #velocity: RandomRange
+  #scale: RandomRange
+  #startAlpha?: number
+  #fadeRate: number
+  #orientToVelocity: boolean
+  #blendMode?: BLEND_MODES
+
+  #texture?: PixiTexture
+  #loadTexturePromise: Promise<void>
+  #particles: Particle[] = []
+
+  constructor(options: ParticleSystemOptions) {
+    super(options)
+
+    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 (textureLoader.checkCached(this.#textureSrc)) {
+      this.#texture = textureLoader.getCached(this.#textureSrc)
+    } else {
+      console.info(`Texture not preloaded. Loading now: ${this.#textureSrc}`)
+      this.#texture = await textureLoader.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 sprite = new PixiSprite({
+        x, y,
+        texture: this.#texture,
+        anchor: { x: 0.5, y: 0.5 },
+        scale: { x: scale, y: scale },
+        alpha: this.#startAlpha,
+        blendMode: this.#blendMode,
+        rotation: this.#orientToVelocity ? angle : undefined,
+      })
+
+      this.#particles.push({
+        sprite,
+        age: 0,
+        lifespan,
+        velocityX: velocity * cos,
+        velocityY: velocity * sin,
+        fadeRate: this.#fadeRate,
+      })
+
+      this._pixiContainer.addChild(sprite)
+    }
+  }
+
+  protected update(dt: number) {
+    super.update(dt)
+
+    const ps = this.#particles
+    for (let i = 0; i < ps.length; i++) {
+      const p = ps[i]
+      const g = p.sprite
+
+      p.age += dt
+      if (p.age > p.lifespan) {
+        g.destroy({ children: true })
+        ps.splice(i, 1)
+        i--
+        continue
+      }
+
+      g.x += p.velocityX * dt
+      g.y += p.velocityY * dt
+      g.alpha += p.fadeRate * dt
+    }
+  }
+
+  override remove() {
+    textureLoader.release(this.#textureSrc)
+    super.remove()
+  }
+}

package/src/node/ext/rectangle.ts

@@ -0,0 +1,51 @@
+import { EventMap } from '@webtaku/event-emitter'
+import { FillInput, Graphics, StrokeInput } from 'pixi.js'
+import { TransformableNode, TransformableNodeOptions } from '../core/transformable'
+
+export type RectangleNodeOptions = {
+  width: number
+  height: number
+  fill?: FillInput
+  stroke?: StrokeInput
+} & TransformableNodeOptions
+
+export class RectangleNode extends TransformableNode<Graphics, EventMap> {
+  #width: number
+  #height: number
+  #fill?: FillInput
+  #stroke?: StrokeInput
+
+  constructor(options: RectangleNodeOptions) {
+    super(new Graphics({ sortableChildren: true }), options)
+
+    this.#width = options.width
+    this.#height = options.height
+    this.#fill = options.fill
+    this.#stroke = options.stroke
+
+    this.#draw()
+  }
+
+  #draw() {
+    this._pixiContainer.clear().rect(
+      -this.#width / 2,
+      -this.#height / 2,
+      this.#width,
+      this.#height,
+    )
+    if (this.#fill) this._pixiContainer.fill(this.#fill)
+    if (this.#stroke) this._pixiContainer.stroke(this.#stroke)
+  }
+
+  get width() { return this.#width }
+  set width(v) { this.#width = v; this.#draw() }
+
+  get height() { return this.#height }
+  set height(v) { this.#height = v; this.#draw() }
+
+  get fill() { return this.#fill }
+  set fill(v) { this.#fill = v; this.#draw() }
+
+  get stroke() { return this.#stroke }
+  set stroke(v) { this.#stroke = v; this.#draw() }
+}