@inglorious/renderer-2d 0.1.0

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2025 Inglorious Coderz Srl.
+
+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.

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@inglorious/renderer-2d",
+  "version": "0.1.0",
+  "description": "A renderer for the Inglorious Engine, using the Context2D of the Canvas API.",
+  "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IngloriousCoderz/inglorious-engine.git"
+  },
+  "homepage": "https://inglorious-engine.vercel.app/",
+  "bugs": {
+    "url": "https://github.com/IngloriousCoderz/inglorious-engine/issues"
+  },
+  "type": "module",
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": "./src/index.js",
+    "./*": "./src/*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@inglorious/engine": "0.3.0",
+    "@inglorious/utils": "1.1.0"
+  },
+  "devDependencies": {
+    "eslint": "^9.34.0",
+    "prettier": "^3.6.2",
+    "vitest": "^1.6.0"
+  },
+  "scripts": {
+    "format": "prettier --write '**/*.{js,jsx}'",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0"
+  }
+}

package/src/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/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/character.js

@@ -0,0 +1,38 @@
+/* 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/form/button.js

@@ -0,0 +1,25 @@
+/* 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/fps.js

@@ -0,0 +1,18 @@
+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/image/hitmask.js

@@ -0,0 +1,51 @@
+import { renderRectangle } from "@inglorious/renderer-2d/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()
+}

package/src/image/image.js

@@ -0,0 +1,34 @@
+const DEFAULT_POSITION = 0
+
+export function renderImage(entity, ctx) {
+  const { image, sx = DEFAULT_POSITION, sy = DEFAULT_POSITION } = entity
+  const { id, src, imageSize, tileSize = imageSize } = image
+
+  const [tileWidth, tileHeight] = tileSize
+
+  const imgParams = [
+    sx * tileWidth,
+    sy * tileHeight,
+    tileWidth,
+    tileHeight,
+    DEFAULT_POSITION,
+    DEFAULT_POSITION,
+    tileWidth,
+    tileHeight,
+  ]
+
+  ctx.save()
+
+  const img = document.getElementById(id)
+  if (img) {
+    ctx.drawImage(img, ...imgParams)
+  } else {
+    const newImg = new Image()
+    newImg.id = id
+    newImg.style.display = "none"
+    newImg.src = src
+    document.body.appendChild(newImg)
+  }
+
+  ctx.restore()
+}

package/src/image/sprite.js

@@ -0,0 +1,49 @@
+import { renderImage } from "./image.js"
+
+const DEFAULT_SCALE = 1
+
+const FLIP = -1
+const NO_FLIP = 1
+
+const CENTER_WIDTH = 2
+const CENTER_HEIGHT = 2
+
+const FLIPPED_HORIZONTALLY_FLAG = 0x80000000
+const FLIPPED_VERTICALLY_FLAG = 0x40000000
+// const FLIPPED_DIAGONALLY_FLAG = 0x20000000
+// const ROTATED_HEXAGONAL_120_FLAG = 0x10000000
+
+export function renderSprite(entity, ctx) {
+  const { image, frames, state, value, scale = DEFAULT_SCALE } = entity.sprite
+  const { imageSize, tileSize } = image
+
+  const [imageWidth] = imageSize
+  const [tileWidth, tileHeight] = tileSize
+  const cols = imageWidth / tileWidth
+
+  const flaggedTile = frames[state][value]
+
+  const isFlippedHorizontally = !!(flaggedTile & FLIPPED_HORIZONTALLY_FLAG)
+  const isFlippedVertically = !!(flaggedTile & FLIPPED_VERTICALLY_FLAG)
+
+  let tile = flaggedTile
+  tile &= ~FLIPPED_HORIZONTALLY_FLAG
+  tile &= ~FLIPPED_VERTICALLY_FLAG
+
+  const sx = tile % cols
+  const sy = Math.floor(tile / cols)
+
+  ctx.save()
+
+  ctx.scale(scale, scale)
+
+  ctx.scale(
+    isFlippedHorizontally ? FLIP : NO_FLIP,
+    isFlippedVertically ? FLIP : NO_FLIP,
+  )
+  ctx.translate(-tileWidth / CENTER_WIDTH, -tileHeight / CENTER_HEIGHT)
+
+  renderImage({ image, sx, sy }, ctx)
+
+  ctx.restore()
+}

package/src/image/tilemap.js

@@ -0,0 +1,66 @@
+import { renderImage } from "./image.js"
+
+const HALF = 2
+const DEFAULT_SCALE = 1
+
+const FLIP = -1
+const NO_FLIP = 1
+
+const FLIPPED_HORIZONTALLY_FLAG = 0x80000000
+const FLIPPED_VERTICALLY_FLAG = 0x40000000
+// const FLIPPED_DIAGONALLY_FLAG = 0x20000000
+// const ROTATED_HEXAGONAL_120_FLAG = 0x10000000
+
+export function renderTilemap(entity, ctx) {
+  const { image, columns, scale = DEFAULT_SCALE, layers } = entity.tilemap
+  const { imageSize, tileSize } = image
+
+  const [imageWidth] = imageSize
+  const [tileWidth, tileHeight] = tileSize
+  const sCols = imageWidth / tileWidth
+
+  const [firstLayer] = layers
+  const dRows = Math.ceil(firstLayer.tiles.length / columns)
+  const tilemapWidth = columns * tileWidth
+  const tilemapHeight = dRows * tileHeight
+
+  const offsetX = -tilemapWidth / HALF
+  const offsetY = tilemapHeight / HALF
+
+  ctx.save()
+
+  ctx.scale(scale, scale)
+  ctx.translate(offsetX, offsetY)
+
+  layers.forEach(({ tiles }) => {
+    tiles.forEach((flaggedTile, index) => {
+      const dx = (index % columns) * tileWidth
+      const dy = Math.floor(index / columns) * tileHeight - tilemapHeight
+
+      const isFlippedHorizontally = !!(flaggedTile & FLIPPED_HORIZONTALLY_FLAG)
+      const isFlippedVertically = !!(flaggedTile & FLIPPED_VERTICALLY_FLAG)
+
+      let tile = flaggedTile
+      tile &= ~FLIPPED_HORIZONTALLY_FLAG
+      tile &= ~FLIPPED_VERTICALLY_FLAG
+
+      const sx = tile % sCols
+      const sy = Math.floor(tile / sCols)
+
+      ctx.save()
+
+      ctx.translate(dx, dy)
+
+      ctx.scale(
+        isFlippedHorizontally ? FLIP : NO_FLIP,
+        isFlippedVertically ? FLIP : NO_FLIP,
+      )
+
+      renderImage({ image, sx, sy }, ctx)
+
+      ctx.restore()
+    })
+  })
+
+  ctx.restore()
+}

package/src/index.js

@@ -0,0 +1,68 @@
+import { track } from "@inglorious/engine/behaviors/input/mouse.js"
+
+import { createRenderingSystem } from "./rendering-system.js"
+
+export class Renderer2D {
+  _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/mouse.js

@@ -0,0 +1,37 @@
+/* eslint-disable no-magic-numbers */
+
+export function renderMouse(entity, ctx) {
+  const { color = "black", thickness = 1, orientation = 0 } = entity
+
+  ctx.save()
+
+  ctx.strokeStyle = color
+  ctx.fillStyle = color
+  ctx.lineWidth = thickness
+
+  ctx.rotate(-orientation)
+
+  ctx.beginPath()
+  ctx.moveTo(-6, 0)
+  ctx.lineTo(-3, 0)
+  ctx.stroke()
+
+  ctx.moveTo(4, 0)
+  ctx.lineTo(7, 0)
+  ctx.stroke()
+
+  ctx.moveTo(0, -6)
+  ctx.lineTo(0, -3)
+  ctx.stroke()
+
+  ctx.moveTo(0, 4)
+  ctx.lineTo(0, 7)
+  ctx.stroke()
+  ctx.closePath()
+
+  ctx.beginPath()
+  ctx.fillRect(0, 0, 1, 1)
+  ctx.closePath()
+
+  ctx.restore()
+}

package/src/rendering-system.js

@@ -0,0 +1,79 @@
+import { to2D } from "@inglorious/utils/math/linear-algebra/2d.js"
+
+import { absolutePosition } from "./absolute-position.js"
+
+const ORIGIN = 0
+const DEFAULT_ZOOM = 1
+const HALF = 2
+
+const DEFAULT_LAYER = 0
+const Y = 1
+const Z = 2
+
+function getRenderFunction(types, entity) {
+  const typeInfo = types[entity.type]
+  if (!typeInfo) {
+    return null
+  }
+
+  // A type can be a single object or an array of behaviors
+  const behaviorWithRender = Array.isArray(typeInfo)
+    ? typeInfo.find((b) => b.render)
+    : typeInfo
+
+  return behaviorWithRender?.render
+}
+
+export function createRenderingSystem(ctx) {
+  return {
+    update(state, dt, api) {
+      const types = api.getTypes()
+      const { game, ...worldEntities } = state.entities
+
+      // 1. Clear canvas
+      const [, , width, height] = game.bounds
+      ctx.fillStyle = game.backgroundColor || "lightgrey"
+      ctx.fillRect(ORIGIN, ORIGIN, width, height)
+
+      // 2. Find active camera
+      const camera = Object.values(state.entities).find(
+        (entity) => entity.type === "camera" && entity.isActive,
+      )
+
+      // 3. Render world entities with camera transform
+      ctx.save()
+
+      if (camera && !game.devMode) {
+        const [cameraX, cameraZ] = to2D(camera.position)
+        const zoom = camera.zoom ?? DEFAULT_ZOOM
+
+        // Center the view on the camera and apply zoom.
+        // The order of operations is crucial here.
+        ctx.translate(width / HALF, height / HALF)
+        ctx.scale(zoom, zoom)
+        // This vertical translation compensates for the coordinate system flip
+        // that happens inside the absolutePosition decorator.
+        ctx.translate(ORIGIN, -height)
+        // This translation moves the world relative to the camera.
+        ctx.translate(-cameraX, cameraZ)
+      }
+
+      Object.values(worldEntities)
+        .filter(({ position }) => position)
+        .toSorted(
+          (a, b) =>
+            (a.layer ?? DEFAULT_LAYER) - (b.layer ?? DEFAULT_LAYER) ||
+            a.position[Y] - b.position[Y] ||
+            b.position[Z] - a.position[Z],
+        )
+        .forEach((entity) => {
+          const render = getRenderFunction(types, entity)
+          if (render) {
+            absolutePosition(render)(entity, ctx, { api })
+          }
+        })
+
+      ctx.restore()
+    },
+  }
+}

package/src/shapes/circle.js

@@ -0,0 +1,29 @@
+/* eslint-disable no-magic-numbers */
+
+import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
+import { pi } from "@inglorious/utils/math/trigonometry.js"
+
+export function renderCircle(entity, ctx) {
+  const {
+    offset = zero(),
+    radius = 24,
+    color = "black",
+    backgroundColor = "transparent",
+    thickness = 1,
+  } = entity
+  const [x, y, z] = offset
+
+  ctx.save()
+
+  ctx.lineWidth = thickness
+  ctx.strokeStyle = color
+  ctx.fillStyle = backgroundColor
+
+  ctx.beginPath()
+  ctx.arc(x, -y - z, radius, 0, 2 * pi())
+  ctx.fill()
+  ctx.stroke()
+  ctx.closePath()
+
+  ctx.restore()
+}

package/src/shapes/rectangle.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-magic-numbers */
+
+import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
+
+export function renderRectangle(entity, ctx) {
+  const {
+    offset = zero(),
+    size,
+    color = "black",
+    backgroundColor = "transparent",
+    thickness = 1,
+  } = entity
+  const [x, y, z] = offset
+  const [width = 100, height = 50, depth = 0] = size
+  const rectHeight = height + depth
+
+  ctx.save()
+
+  ctx.lineWidth = thickness
+  ctx.strokeStyle = color
+  ctx.fillStyle = backgroundColor
+
+  ctx.fillRect(x - width / 2, -y - z - rectHeight / 2, width, rectHeight)
+  ctx.strokeRect(x - width / 2, -y - z - rectHeight / 2, width, rectHeight)
+
+  ctx.restore()
+}