@inglorious/engine 0.1.1 → 0.2.0

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

@@ -1,37 +1,34 @@
-const DEFAULT_POSITION = 0
-
-export default function draw(ctx, instance) {
-  const { image, sx = DEFAULT_POSITION, sy = DEFAULT_POSITION } = instance
-  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 img = new Image()
-    img.id = id
-    img.style.display = "none"
-    img.onload = () => {
-      ctx.drawImage(img, ...imgParams)
-    }
-    img.src = src
-    document.body.appendChild(img)
-  }
-
-  ctx.restore()
-}
+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/{ui → renderers}/canvas/image/sprite.js

@@ -1,49 +1,49 @@
-import imageDraw 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 default function draw(ctx, instance, options) {
-  const { image, frames, state, value } = instance.sprite
-  const { imageSize, tileSize, scale = DEFAULT_SCALE } = 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)
-
-  imageDraw(ctx, { image, sx, sy }, options)
-
-  ctx.restore()
-}
+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/{ui → renderers}/canvas/image/tilemap.js

@@ -1,64 +1,66 @@
-import imageDraw 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 default function draw(ctx, instance, options) {
-  const { tilemap } = instance
-  const { image, layers } = tilemap
-  const { imageSize, tileSize, columns, scale = DEFAULT_SCALE } = image
-
-  const [imageWidth] = imageSize
-  const [tileWidth, tileHeight] = tileSize
-  const sCols = imageWidth / tileWidth
-
-  ctx.save()
-
-  layers.forEach(({ tiles }) => {
-    const dRows = Math.ceil(tiles.length / columns)
-    const height = dRows * tileHeight
-
-    tiles.forEach((flaggedTile, index) => {
-      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)
-
-      const dx = (index % columns) * tileWidth
-      const dy = Math.floor(index / columns) * tileHeight - height
-
-      ctx.save()
-
-      ctx.scale(scale, scale)
-      ctx.translate(dx, dy)
-
-      ctx.translate(tileWidth / CENTER_WIDTH, tileHeight / CENTER_HEIGHT)
-      ctx.scale(
-        isFlippedHorizontally ? FLIP : NO_FLIP,
-        isFlippedVertically ? FLIP : NO_FLIP,
-      )
-      ctx.translate(-tileWidth / CENTER_WIDTH, -tileHeight / CENTER_HEIGHT)
-
-      imageDraw(ctx, { image, sx, sy }, options)
-
-      ctx.restore()
-    })
-  })
-
-  ctx.restore()
-}
+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/{ui → renderers}/canvas/mouse.js

@@ -1,37 +1,37 @@
-/* eslint-disable no-magic-numbers */
-
-export default function draw(ctx, instance) {
-  const { color = "black", thickness = 1, orientation = 0 } = instance
-
-  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()
-}
+/* 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/renderers/canvas/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/{ui → renderers}/canvas/shapes/circle.js

@@ -1,31 +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 default function draw(ctx, instance) {
-  const {
-    position = zero(),
-    radius = 24,
-    color = "black",
-    backgroundColor = "transparent",
-    thickness = 1,
-  } = instance
-  const [x, , z] = position
-
-  ctx.save()
-
-  ctx.lineWidth = thickness
-  ctx.strokeStyle = color
-  ctx.fillStyle = backgroundColor
-
-  ctx.translate(x, z)
-
-  ctx.beginPath()
-  ctx.arc(0, 0, radius, 0, 2 * pi())
-  ctx.fill()
-  ctx.stroke()
-  ctx.closePath()
-
-  ctx.restore()
-}
+/* 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/{ui → renderers}/canvas/shapes/rectangle.js

@@ -1,31 +1,27 @@
-/* eslint-disable no-magic-numbers */
-
-import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
-
-export default function draw(ctx, instance) {
-  const {
-    offset = zero(),
-    size,
-    color = "black",
-    backgroundColor = "transparent",
-    thickness = 1,
-  } = instance
-  const [x, , z] = offset
-  const [width = 100, height = 50, depth = 0] = size
-
-  ctx.save()
-
-  ctx.lineWidth = thickness
-  ctx.strokeStyle = color
-  ctx.fillStyle = backgroundColor
-
-  ctx.translate(x, z)
-
-  ctx.beginPath()
-  ctx.fillRect(0, 0, width, height + depth)
-  ctx.strokeRect(0, 0, width, height + depth)
-  ctx.stroke()
-  ctx.closePath()
-
-  ctx.restore()
-}
+/* 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()
+}

package/src/renderers/react/game/character/index.jsx

@@ -0,0 +1,20 @@
+import classes from "./character.module.scss"
+
+const DEFAULT_SIZE = 24
+const DEFAULT_ORIENTATION = 0
+
+export default function Character({ type, entity, className, style }) {
+  const size = type.size ?? DEFAULT_SIZE
+  const { orientation = DEFAULT_ORIENTATION } = entity
+
+  return (
+    <div
+      className={`${classes.character} ${className}`}
+      style={{
+        ...style,
+        "--size": `${size}px`,
+        "--angle": `${-orientation}rad`,
+      }}
+    />
+  )
+}

package/src/{ui → renderers}/react/game/cursor/index.jsx

@@ -1,20 +1,20 @@
-import classes from "./cursor.module.scss"
-
-export default function Cursor({ instance, className, style }) {
-  const { orientation } = instance
-
-  return (
-    <div
-      className={`${classes.cursor} ${className}`}
-      style={{
-        ...style,
-        "--angle": `${-orientation}rad`,
-      }}
-    >
-      <div className={classes.top} />
-      <div className={classes.bottom} />
-      <div className={classes.left} />
-      <div className={classes.right} />
-    </div>
-  )
-}
+import classes from "./cursor.module.scss"
+
+export default function Cursor({ entity, className, style }) {
+  const { orientation } = entity
+
+  return (
+    <div
+      className={`${classes.cursor} ${className}`}
+      style={{
+        ...style,
+        "--angle": `${-orientation}rad`,
+      }}
+    >
+      <div className={classes.top} />
+      <div className={classes.bottom} />
+      <div className={classes.left} />
+      <div className={classes.right} />
+    </div>
+  )
+}