@inglorious/engine 0.1.1 → 0.2.0

package/src/engine/physics/bounds.js

@@ -0,0 +1,138 @@
+import {
+  angle,
+  clamp,
+  createVector,
+  fromAngle,
+  multiply,
+  zero,
+} from "@inglorious/utils/math/linear-algebra/vector.js"
+import { sum } from "@inglorious/utils/math/linear-algebra/vectors.js"
+import { abs } from "@inglorious/utils/math/numbers.js"
+
+const DOUBLE = 2
+const HALF = 2
+const X = 0
+const Z = 2
+
+export function bounce(entity, dt, [minX, minZ, maxX, maxZ]) {
+  const [x, , z] = entity.position
+
+  const velocity = createVector(entity.maxSpeed, entity.orientation)
+  if (x < minX || x >= maxX) {
+    velocity[X] = -velocity[X]
+  }
+
+  if (z < minZ || z >= maxZ) {
+    velocity[Z] = -velocity[Z]
+  }
+
+  const position = sum(entity.position, multiply(velocity, dt))
+  const orientation = angle(velocity)
+
+  return { velocity, position, orientation }
+}
+
+const ClampToBoundsByShape = {
+  rectangle(entity, [minX, minZ, maxX, maxZ], collisionGroup) {
+    const [width, height, depth] =
+      entity.collisions[collisionGroup].size ?? entity.size
+
+    const halfWidth = width / HALF
+    const halfHeight = height / HALF
+    const halfDepth = depth / HALF
+
+    return clamp(
+      entity.position,
+      [minX + halfWidth, minZ + halfHeight, minZ + halfDepth],
+      [maxX - halfWidth, maxZ - halfHeight, maxZ - halfDepth],
+    )
+  },
+
+  circle(entity, [minX, minY, maxX, maxY], collisionGroup, depthAxis = "y") {
+    const radius = entity.collisions[collisionGroup].radius ?? entity.radius
+
+    if (depthAxis === "z") {
+      return clamp(
+        entity.position,
+        [minX + radius, minY + radius, minY],
+        [maxX - radius, maxY - radius, maxY],
+      )
+    }
+
+    return clamp(
+      entity.position,
+      [minX + radius, minY, minY + radius],
+      [maxX - radius, maxY, maxY - radius],
+    )
+  },
+
+  point(entity, [minX, minZ, maxX, maxZ]) {
+    return clamp(entity.position, [minX, minZ, minZ], [maxX, maxZ, maxZ])
+  },
+}
+
+export function clampToBounds(
+  entity,
+  bounds,
+  collisionGroup = "bounds",
+  depthAxis,
+) {
+  const shape = entity.collisions[collisionGroup].shape || "rectangle"
+  const handler = ClampToBoundsByShape[shape] || ClampToBoundsByShape.point
+  return handler(entity, bounds, collisionGroup, depthAxis)
+}
+
+export function flip(entity, [minX, minZ, maxX, maxZ]) {
+  const [x, , z] = entity.position
+
+  entity.collisions ??= {}
+  entity.collisions.bounds ??= {}
+  entity.collisions.bounds.shape ??= "rectangle"
+
+  let width, height, depth
+  if (entity.collisions.bounds.shape === "circle") {
+    width = entity.collisions.bounds.radius * DOUBLE
+    height = entity.collisions.bounds.radius * DOUBLE
+    depth = entity.collisions.bounds.radius * DOUBLE
+  } else {
+    ;[width, height, depth] = entity.collisions.bounds.size ?? entity.size
+  }
+  const halfWidth = width / HALF
+  const halfHeight = height / HALF
+  const halfDepth = depth / HALF
+
+  const left = x - halfWidth
+  const right = x + halfWidth
+  const bottom = z - halfHeight
+  const top = z + halfHeight
+  const back = z - halfDepth
+  const front = z + halfDepth
+
+  const direction = fromAngle(entity.orientation)
+
+  if (
+    left < minX ||
+    right >= maxX ||
+    bottom < minZ ||
+    top >= maxZ ||
+    back < minZ ||
+    front >= maxZ
+  ) {
+    if (left < minX) {
+      direction[X] = abs(direction[X])
+    } else if (right >= maxX) {
+      direction[X] = -abs(direction[X])
+    }
+
+    if (back < minZ) {
+      direction[Z] = abs(direction[Z])
+    } else if (front >= maxZ) {
+      direction[Z] = -abs(direction[Z])
+    }
+
+    entity.acceleration = zero()
+    entity.velocity = zero()
+  }
+
+  entity.orientation = angle(direction)
+}

package/src/engine/physics/position.js

@@ -0,0 +1,43 @@
+const HALF = 2
+
+export function calculateLandingPosition(
+  entity,
+  target,
+  collisionGroup = "platform",
+) {
+  const entityShape = entity.collisions[collisionGroup]?.shape
+
+  if (CalculatePY[entityShape]) {
+    return CalculatePY[entityShape](entity, target, collisionGroup)
+  }
+
+  return calculatePYForPoint(entity, target, collisionGroup)
+}
+
+function calculatePYForPoint(entity, target, collisionGroup) {
+  const [, targetY] = target.position
+  const [, targetHeight] = target.collisions[collisionGroup].size ?? target.size
+  return targetY + targetHeight / HALF
+}
+
+function calculatePYForCircle(entity, target, collisionGroup) {
+  const entityRadius = entity.collisions[collisionGroup].radius ?? entity.radius
+
+  const [, targetY] = target.position
+  const [, targetHeight] = target.collisions[collisionGroup].size ?? target.size
+  return targetY + targetHeight / HALF + entityRadius
+}
+
+function calculatePYForRectangle(entity, target, collisionGroup) {
+  const [, entityHeight] = entity.collisions[collisionGroup].size ?? entity.size
+
+  const [, targetY] = target.position
+  const [, targetHeight] = target.collisions[collisionGroup].size ?? target.size
+  return targetY + targetHeight / HALF + entityHeight / HALF
+}
+
+const CalculatePY = {
+  point: calculatePYForPoint,
+  circle: calculatePYForCircle,
+  rectangle: calculatePYForRectangle,
+}

package/src/engine/physics/position.test.js

@@ -0,0 +1,80 @@
+import { expect, test } from "vitest"
+
+import { calculateLandingPosition } from "./position.js"
+
+test("it should calculate the landing position for a point entity on a platform", () => {
+  const entity = {
+    collisions: {
+      platform: { shape: "point" },
+    },
+  }
+  const target = {
+    position: [0, 0, 0],
+    collisions: {
+      platform: { size: [20, 10, 0] },
+    },
+  }
+  const collisionGroup = "platform"
+
+  const py = calculateLandingPosition(entity, target, collisionGroup)
+
+  expect(py).toBe(5)
+})
+
+test("it should calculate the landing position for a circular entity on a platform", () => {
+  const entity = {
+    collisions: {
+      platform: { shape: "circle", radius: 5 },
+    },
+  }
+  const target = {
+    position: [0, 0, 0],
+    collisions: {
+      platform: { size: [20, 10, 0] },
+    },
+  }
+  const collisionGroup = "platform"
+
+  const py = calculateLandingPosition(entity, target, collisionGroup)
+
+  expect(py).toBe(10)
+})
+
+test("it should calculate the landing position for a rectangular entity on a platform", () => {
+  const entity = {
+    size: [10, 10, 0],
+    collisions: {
+      platform: { shape: "rectangle" },
+    },
+  }
+  const target = {
+    position: [0, 0, 0],
+    collisions: {
+      platform: { size: [20, 10, 0] },
+    },
+  }
+  const collisionGroup = "platform"
+
+  const py = calculateLandingPosition(entity, target, collisionGroup)
+
+  expect(py).toBe(10)
+})
+
+test("it should fallback to a rectangular calculation for an unknown entity shape", () => {
+  const entity = {
+    collisions: {
+      platform: { shape: "triangle" },
+    },
+  }
+  const target = {
+    position: [0, 0, 0],
+    collisions: {
+      platform: { size: [20, 10, 0] },
+    },
+  }
+  const collisionGroup = "platform"
+
+  const py = calculateLandingPosition(entity, target, collisionGroup)
+
+  expect(py).toBe(5)
+})

package/src/engine/systems/sprite-animation.js

@@ -0,0 +1,27 @@
+import { Sprite } from "@inglorious/engine/animation/sprite.js"
+
+/**
+ * Advances sprite animations for entities that have a sprite component
+ * with an active animation state.
+ *
+ * @param {Object} state - The game state, containing all entities.
+ * @param {Object<string, Object>} state.entities - A map of entity IDs to entity objects.
+ * @param {number} dt - The delta time since the last update.
+ * @param {Object} api - The game API.
+ * @param {Function} api.notify - A function to notify about events.
+ */
+export function spriteAnimationSystem() {
+  return {
+    update(state, dt, api) {
+      for (const id in state.entities) {
+        const entity = state.entities[id]
+
+        if (!entity.sprite || !entity.sprite.state) {
+          continue
+        }
+
+        Sprite.play(entity.sprite.state, { entity, dt, notify: api.notify })
+      }
+    },
+  }
+}

package/src/main.js

@@ -1,5 +1,10 @@
-import { start } from "@inglorious/ui/canvas.js"
-import game from "game"
-
-const canvas = document.getElementById("canvas")
-window.addEventListener("load", () => start(game, canvas))
+import { Engine } from "@inglorious/engine/core/engine.js"
+import { CanvasRenderer } from "@inglorious/renderers/canvas/canvas-renderer.js"
+import game from "game"
+
+const canvas = document.getElementById("canvas")
+window.addEventListener("load", () => {
+  const renderer = new CanvasRenderer(canvas)
+  const engine = new Engine({ ...game, renderer })
+  engine.start()
+})

package/src/renderers/canvas/absolute-position.js

@@ -0,0 +1,18 @@
+import { snap, zero } from "@inglorious/utils/math/linear-algebra/vector.js"
+
+export function absolutePosition(render) {
+  return (entity, ctx, { api }) => {
+    const { position = zero() } = entity
+    const [x, y, z] = snap(position)
+
+    const game = api.getEntity("game")
+    const [, , , screenHeight] = game.bounds
+
+    ctx.save()
+
+    ctx.translate(x, screenHeight - y - z)
+    render(entity, ctx, api)
+
+    ctx.restore()
+  }
+}

package/src/renderers/canvas/camera.js

@@ -0,0 +1,13 @@
+import { renderRectangle } from "./shapes/rectangle.js"
+
+export function renderCamera(entity, ctx, api) {
+  const { devMode } = api.getEntity("game")
+
+  if (devMode) {
+    // In dev mode, we want to see the camera's viewport.
+    // We can reuse the rectangle renderer.
+    renderRectangle(entity, ctx)
+  }
+  // In non-dev mode, the camera itself is not rendered;
+  // its properties are used by the main CanvasRenderer to transform the scene.
+}

package/src/renderers/canvas/canvas-renderer.js

@@ -0,0 +1,68 @@
+import { track } from "@inglorious/engine/behaviors/input/mouse.js"
+
+import { createRenderingSystem } from "./rendering-system.js"
+
+export class CanvasRenderer {
+  _onKeyPress = null
+  _onMouseMove = null
+  _onClick = null
+  _onWheel = null
+
+  constructor(canvas) {
+    this.canvas = canvas
+    this.ctx = canvas.getContext("2d")
+  }
+
+  getSystems() {
+    return [createRenderingSystem(this.ctx)]
+  }
+
+  init(engine) {
+    const game = engine._api.getEntity("game")
+    const [, , width, height] = game.bounds
+
+    this.canvas.style.width = `${width}px`
+    this.canvas.style.height = `${height}px`
+    const dpi = window.devicePixelRatio
+    this.canvas.width = width * dpi
+    this.canvas.height = height * dpi
+    this.ctx.scale(dpi, dpi)
+
+    if (game.pixelated) {
+      this.canvas.style.imageRendering = "pixelated"
+      this.ctx.textRendering = "geometricPrecision"
+      this.ctx.imageSmoothingEnabled = false
+    }
+
+    this._onKeyPress = (event) => {
+      if (event.key === "p") {
+        engine.isRunning ? engine.stop() : engine.start()
+      }
+    }
+    document.addEventListener("keypress", this._onKeyPress)
+
+    const { onMouseMove, onClick, onWheel } = track(this.canvas, engine._api)
+    this._onMouseMove = onMouseMove
+    this._onClick = onClick
+    this._onWheel = onWheel
+
+    this.canvas.addEventListener("mousemove", this._onMouseMove)
+    this.canvas.addEventListener("click", this._onClick)
+    this.canvas.addEventListener("wheel", this._onWheel)
+  }
+
+  destroy() {
+    if (this._onKeyPress) {
+      document.removeEventListener("keypress", this._onKeyPress)
+    }
+    if (this._onMouseMove) {
+      this.canvas.removeEventListener("mousemove", this._onMouseMove)
+    }
+    if (this._onClick) {
+      this.canvas.removeEventListener("click", this._onClick)
+    }
+    if (this._onWheel) {
+      this.canvas.removeEventListener("wheel", this._onWheel)
+    }
+  }
+}

package/src/{ui → renderers}/canvas/character.js

@@ -1,35 +1,38 @@
-/* eslint-disable no-magic-numbers */
-
-import circle from "./shapes/circle.js"
-
-export default function draw(ctx, instance) {
-  const { size = 24, orientation = 0 } = instance
-
-  const radius = size * 0.5
-
-  ctx.save()
-
-  ctx.rotate(-orientation)
-  ctx.translate(radius - 1, 0)
-
-  ctx.fillStyle = "black"
-
-  ctx.beginPath()
-  ctx.moveTo(0, 6)
-  ctx.lineTo(0, -6)
-  ctx.lineTo(6, 0)
-  ctx.fill()
-  ctx.closePath()
-  ctx.restore()
-
-  ctx.save()
-
-  circle(ctx, {
-    ...instance,
-    radius,
-    position: undefined,
-    backgroundColor: "lightgrey",
-  })
-
-  ctx.restore()
-}
+/* eslint-disable no-magic-numbers */
+
+import { renderCircle } from "./shapes/circle.js"
+
+export function renderCharacter(entity, ctx) {
+  const { size = 24, orientation = 0 } = entity
+
+  const radius = size * 0.5
+
+  ctx.save()
+
+  ctx.rotate(-orientation)
+  ctx.translate(radius - 1, 0)
+
+  ctx.fillStyle = "black"
+
+  ctx.beginPath()
+  ctx.moveTo(0, 6)
+  ctx.lineTo(0, -6)
+  ctx.lineTo(6, 0)
+  ctx.fill()
+  ctx.closePath()
+  ctx.restore()
+
+  ctx.save()
+
+  renderCircle(
+    {
+      ...entity,
+      radius,
+      position: undefined,
+      backgroundColor: "lightgrey",
+    },
+    ctx,
+  )
+
+  ctx.restore()
+}

package/src/{ui → renderers}/canvas/form/button.js

@@ -1,25 +1,25 @@
-/* eslint-disable no-magic-numbers */
-
-export default function draw(ctx, instance) {
-  const { size, color = "black", thickness = 1 } = instance
-  const [width = 100, height = 50] = size
-
-  ctx.save()
-
-  ctx.lineWidth = thickness
-  ctx.strokeStyle = color
-
-  if (instance.state === "pressed") {
-    ctx.fillStyle = "white"
-  } else {
-    ctx.fillStyle = "black"
-  }
-
-  ctx.beginPath()
-  ctx.fillRect(0, 0, width, height)
-  ctx.strokeRect(0, 0, width, height)
-  ctx.stroke()
-  ctx.closePath()
-
-  ctx.restore()
-}
+/* eslint-disable no-magic-numbers */
+
+export function renderButton(entity, ctx) {
+  const { size, color = "black", thickness = 1 } = entity
+  const [width = 100, height = 50] = size
+
+  ctx.save()
+
+  ctx.lineWidth = thickness
+  ctx.strokeStyle = color
+
+  if (entity.state === "pressed") {
+    ctx.fillStyle = "white"
+  } else {
+    ctx.fillStyle = "black"
+  }
+
+  ctx.beginPath()
+  ctx.fillRect(-width / 2, -height / 2, width, height)
+  ctx.strokeRect(-width / 2, -height / 2, width, height)
+  ctx.stroke()
+  ctx.closePath()
+
+  ctx.restore()
+}

package/src/{ui → renderers}/canvas/fps.js

@@ -1,18 +1,18 @@
-const DEFAULT_PADDING = 10
-const ONE_SECOND = 1
-
-export default function draw(ctx, instance) {
-  const { accuracy, size, value } = instance.dt
-
-  ctx.save()
-
-  ctx.font = `${size}px sans serif`
-  ctx.fillStyle = "black"
-  ctx.fillText(
-    (ONE_SECOND / value).toFixed(accuracy),
-    DEFAULT_PADDING,
-    DEFAULT_PADDING + size,
-  )
-
-  ctx.restore()
-}
+const DEFAULT_PADDING = 10
+const ONE_SECOND = 1
+
+export function renderFps(entity, ctx) {
+  const { accuracy, size, value } = entity.dt
+
+  ctx.save()
+
+  ctx.font = `${size}px sans serif`
+  ctx.fillStyle = "black"
+  ctx.fillText(
+    (ONE_SECOND / value).toFixed(accuracy),
+    DEFAULT_PADDING,
+    DEFAULT_PADDING + size,
+  )
+
+  ctx.restore()
+}

package/src/renderers/canvas/image/hitmask.js

@@ -0,0 +1,51 @@
+import { renderRectangle } from "@inglorious/renderers/canvas/shapes/rectangle.js"
+import { max } from "@inglorious/utils/data-structures/array.js"
+
+const HALF = 2
+const NO_Y = 0
+const MAX_HUE = 255
+
+export function renderHitmask(entity, ctx) {
+  const { tileSize, columns, heights } = entity
+
+  const [tileWidth, tileHeight] = tileSize
+  const halfTileWidth = tileWidth / HALF
+  const halfTileHeight = tileHeight / HALF
+
+  const dRows = Math.ceil(heights.length / columns)
+  const tilemapWidth = columns * tileWidth
+  const tilemapHeight = dRows * tileHeight
+
+  const offsetX = -tilemapWidth / HALF
+  const offsetY = tilemapHeight / HALF
+
+  const minH = 0
+  const maxH = max(heights)
+
+  ctx.save()
+
+  ctx.translate(offsetX, offsetY)
+
+  heights.forEach((h, index) => {
+    const dx = (index % columns) * tileWidth
+    const dy = Math.floor(index / columns) * tileHeight - tilemapHeight
+
+    const normalizedH = (h - minH) / (maxH - minH)
+    const hue = MAX_HUE - normalizedH * MAX_HUE
+
+    ctx.save()
+
+    const entity = {
+      offset: [dx + halfTileWidth, NO_Y, -dy - halfTileHeight],
+      size: [tileWidth, NO_Y, tileHeight],
+      color: "transparent",
+      backgroundColor: `hsla(${hue}, 100%, 50%, 0.2)`,
+    }
+
+    renderRectangle(entity, ctx)
+
+    ctx.restore()
+  })
+
+  ctx.restore()
+}