@inglorious/renderer-2d 0.8.3 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/renderer-2d",
-  "version": "0.8.3",
+  "version": "2.0.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",
@@ -24,18 +24,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@inglorious/utils": "3.5.3",
-    "@inglorious/engine": "2.1.3"
+    "@inglorious/utils": "3.6.0",
+    "@inglorious/engine": "3.0.0"
   },
   "peerDependencies": {
-    "@inglorious/utils": "3.5.3",
-    "@inglorious/engine": "2.1.3"
+    "@inglorious/engine": "3.0.0",
+    "@inglorious/utils": "3.6.0"
   },
   "devDependencies": {
     "eslint": "^9.34.0",
     "prettier": "^3.6.2",
     "vitest": "^1.6.0",
-    "@inglorious/eslint-config": "1.0.0"
+    "@inglorious/eslint-config": "1.0.1"
   },
   "scripts": {
     "format": "prettier --write '**/*.{js,jsx}'",

package/src/absolute-position.js

@@ -1,7 +1,7 @@
 import { snap, zero } from "@inglorious/utils/math/vector.js"
 
 export function absolutePosition(render) {
-  return (entity, ctx, { api }) => {
+  return (entity, ctx, api) => {
     const { position = zero() } = entity
     const [x, y, z] = snap(position)
 

package/src/image/hitmask.js

@@ -5,7 +5,7 @@ const HALF = 2
 const NO_Y = 0
 const MAX_HUE = 255
 
-export function renderHitmask(entity, ctx) {
+export function renderHitmask(entity, ctx, api) {
   const { tileSize, columns, heights } = entity
 
   const [tileWidth, tileHeight] = tileSize
@@ -42,7 +42,7 @@ export function renderHitmask(entity, ctx) {
       backgroundColor: `hsla(${hue}, 100%, 50%, 0.2)`,
     }
 
-    renderRectangle(entity, ctx)
+    renderRectangle(entity, ctx, api)
 
     ctx.restore()
   })

package/src/image/image.js

@@ -1,10 +1,18 @@
 const DEFAULT_POSITION = 0
+const DEFAULT_ANCHOR = [DEFAULT_POSITION, DEFAULT_POSITION]
 
-export function renderImage(entity, ctx) {
+export function renderImage(entity, ctx, api) {
   const { image, sx = DEFAULT_POSITION, sy = DEFAULT_POSITION } = entity
-  const { id, src, imageSize, tileSize = imageSize } = image
+  const {
+    id,
+    src,
+    imageSize,
+    tileSize = imageSize,
+    anchor = DEFAULT_ANCHOR,
+  } = image
 
   const [tileWidth, tileHeight] = tileSize
+  const [anchorX, anchorY] = anchor
 
   const imgParams = [
     sx * tileWidth,
@@ -19,15 +27,15 @@ export function renderImage(entity, ctx) {
 
   ctx.save()
 
-  const img = document.getElementById(id)
+  ctx.translate(-tileWidth * anchorX, -tileHeight * anchorY)
+
+  const img = api.getTypes().images.get(id) || document.getElementById(id)
   if (img) {
     ctx.drawImage(img, ...imgParams)
+  } else if (src) {
+    api.getTypes().images.load(id, src)
   } else {
-    const newImg = new Image()
-    newImg.id = id
-    newImg.style.display = "none"
-    newImg.src = src
-    document.body.appendChild(newImg)
+    console.warn(`Image '${id}' not found and no src provided for lazy loading`)
   }
 
   ctx.restore()

package/src/image/sprite.js

@@ -13,7 +13,7 @@ const FLIPPED_VERTICALLY_FLAG = 0x40000000
 // const FLIPPED_DIAGONALLY_FLAG = 0x20000000
 // const ROTATED_HEXAGONAL_120_FLAG = 0x10000000
 
-export function renderSprite(entity, ctx) {
+export function renderSprite(entity, ctx, api) {
   const { image, frames, state, value, scale = DEFAULT_SCALE } = entity.sprite
   const { imageSize, tileSize } = image
 
@@ -43,7 +43,7 @@ export function renderSprite(entity, ctx) {
   )
   ctx.translate(-tileWidth / CENTER_WIDTH, -tileHeight / CENTER_HEIGHT)
 
-  renderImage({ image, sx, sy }, ctx)
+  renderImage({ image, sx, sy }, ctx, api)
 
   ctx.restore()
 }

package/src/image/tilemap.js

@@ -11,7 +11,7 @@ const FLIPPED_VERTICALLY_FLAG = 0x40000000
 // const FLIPPED_DIAGONALLY_FLAG = 0x20000000
 // const ROTATED_HEXAGONAL_120_FLAG = 0x10000000
 
-export function renderTilemap(entity, ctx) {
+export function renderTilemap(entity, ctx, api) {
   const { image, columns, scale = DEFAULT_SCALE, layers } = entity.tilemap
   const { imageSize, tileSize } = image
 
@@ -51,12 +51,14 @@ export function renderTilemap(entity, ctx) {
 
       ctx.translate(dx, dy)
 
+      ctx.translate(tileWidth / HALF, tileHeight / HALF)
       ctx.scale(
         isFlippedHorizontally ? FLIP : NO_FLIP,
         isFlippedVertically ? FLIP : NO_FLIP,
       )
+      ctx.translate(-tileWidth / HALF, -tileHeight / HALF)
 
-      renderImage({ image, sx, sy }, ctx)
+      renderImage({ image, sx, sy }, ctx, api)
 
       ctx.restore()
     })

package/src/infinite-loop.js

@@ -0,0 +1,22 @@
+import { snap } from "@inglorious/utils/math/vector.js"
+
+export function infiniteLoop(render) {
+  return (entity, ctx, api) => {
+    const { image } = entity
+    const { loop } = image || {}
+
+    if (!loop) {
+      render(entity, ctx, api)
+      return
+    }
+
+    const [loopX, loopY, loopZ] = snap(loop)
+
+    render(entity, ctx, api)
+
+    ctx.save()
+    ctx.translate(-loopX, -loopY - loopZ)
+    render(entity, ctx, api)
+    ctx.restore()
+  }
+}

package/src/rendering-system.js

@@ -1,6 +1,8 @@
+import { pipe } from "@inglorious/utils/functions/functions.js"
 import { to2D } from "@inglorious/utils/math/vector.js"
 
 import { absolutePosition } from "./absolute-position.js"
+import { infiniteLoop } from "./infinite-loop.js"
 
 const ORIGIN = 0
 const DEFAULT_ZOOM = 1
@@ -10,6 +12,8 @@ const DEFAULT_LAYER = 0
 const Y = 1
 const Z = 2
 
+const augmentRender = pipe(absolutePosition, infiniteLoop)
+
 export function renderingSystem(canvas) {
   const ctx = canvas.getContext("2d")
 
@@ -59,7 +63,8 @@ export function renderingSystem(canvas) {
           const type = types[entity.type]
           const { render } = type
           if (render) {
-            absolutePosition(render)(entity, ctx, { api })
+            const augmentedRender = augmentRender(render)
+            augmentedRender(entity, ctx, api)
           }
         })