@inglorious/renderer-2d 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/renderer-2d",
-  "version": "0.3.0",
+  "version": "0.5.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",
@@ -18,14 +18,14 @@
     "./*": "./src/*"
   },
   "files": [
-    "src/*"
+    "src"
   ],
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@inglorious/engine": "0.8.0",
-    "@inglorious/utils": "2.0.0"
+    "@inglorious/engine": "0.10.0",
+    "@inglorious/utils": "2.2.0"
   },
   "devDependencies": {
     "eslint": "^9.34.0",

package/src/absolute-position.js

@@ -6,11 +6,11 @@ export function absolutePosition(render) {
     const [x, y, z] = snap(position)
 
     const game = api.getEntity("game")
-    const [, , , screenHeight] = game.bounds
+    const [, gameHeight] = game.size
 
     ctx.save()
 
-    ctx.translate(x, screenHeight - y - z)
+    ctx.translate(x, gameHeight - y - z)
     render(entity, ctx, api)
 
     ctx.restore()

package/src/index.js

@@ -1,68 +1,10 @@
-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)
-    }
+import { rendering } from "./rendering-behavior"
+import { renderingSystem } from "./rendering-system"
+
+export function createRenderer(canvas) {
+  return {
+    types: { renderer: [rendering(canvas)] },
+    entities: { renderer: { type: "renderer" } },
+    systems: [renderingSystem(canvas)],
   }
 }

package/src/rendering-behavior.js

@@ -0,0 +1,69 @@
+import { track } from "@inglorious/engine/behaviors/input/mouse.js"
+
+const ORIGIN = 0
+const HALF = 2
+
+export function rendering(canvas) {
+  const ctx = canvas.getContext("2d")
+
+  let _onMouseMove = null
+  let _onClick = null
+  let _onWheel = null
+
+  return {
+    init(entity, event, api) {
+      const game = api.getEntity("game")
+      const [gameWidth, gameHeight] = game.size
+
+      const canvasWidth = canvas.width
+      const canvasHeight = canvas.height
+
+      const scaleX = canvasWidth / gameWidth
+      const scaleY = canvasHeight / gameHeight
+      const scale = Math.min(scaleX, scaleY)
+      const scaledGameWidth = gameWidth * scale
+      const scaledGameHeight = gameHeight * scale
+
+      const offsetX = (canvasWidth - scaledGameWidth) / HALF
+      const offsetY = (canvasHeight - scaledGameHeight) / HALF
+
+      const dpi = window.devicePixelRatio
+
+      ctx.clearRect(ORIGIN, ORIGIN, canvasWidth, canvasHeight)
+      ctx.fillStyle = "black"
+      ctx.fillRect(ORIGIN, ORIGIN, canvasWidth, canvasHeight)
+
+      ctx.translate(offsetX, offsetY)
+      ctx.scale(dpi * scale, dpi * scale)
+
+      if (game.pixelated) {
+        canvas.style.imageRendering = "pixelated"
+        ctx.textRendering = "geometricPrecision"
+        ctx.imageSmoothingEnabled = false
+      }
+
+      const { onMouseMove, onClick, onWheel } = track(canvas, api)
+      _onMouseMove = onMouseMove
+      _onClick = onClick
+      _onWheel = onWheel
+
+      canvas.addEventListener("mousemove", _onMouseMove)
+      canvas.addEventListener("click", _onClick)
+      canvas.addEventListener("wheel", _onWheel)
+    },
+
+    destroy(entity, id) {
+      if (id !== entity.id) return
+
+      if (_onMouseMove) {
+        canvas.removeEventListener("mousemove", _onMouseMove)
+      }
+      if (_onClick) {
+        canvas.removeEventListener("click", _onClick)
+      }
+      if (_onWheel) {
+        canvas.removeEventListener("wheel", _onWheel)
+      }
+    },
+  }
+}

package/src/rendering-system.js

@@ -10,30 +10,18 @@ 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 renderingSystem(canvas) {
+  const ctx = canvas.getContext("2d")
 
-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
+      const [gameWidth, gameHeight] = game.size
       ctx.fillStyle = game.backgroundColor || "lightgrey"
-      ctx.fillRect(ORIGIN, ORIGIN, width, height)
+      ctx.fillRect(ORIGIN, ORIGIN, gameWidth, gameHeight)
 
       // 2. Find active camera
       const camera = Object.values(state.entities).find(
@@ -49,11 +37,11 @@ export function createRenderingSystem(ctx) {
 
         // Center the view on the camera and apply zoom.
         // The order of operations is crucial here.
-        ctx.translate(width / HALF, height / HALF)
+        ctx.translate(gameWidth / HALF, gameHeight / HALF)
         ctx.scale(zoom, zoom)
         // This vertical translation compensates for the coordinate system flip
         // that happens inside the absolutePosition decorator.
-        ctx.translate(ORIGIN, -height)
+        ctx.translate(ORIGIN, -gameHeight)
         // This translation moves the world relative to the camera.
         ctx.translate(-cameraX, cameraZ)
       }
@@ -68,7 +56,8 @@ export function createRenderingSystem(ctx) {
             b.position[Z] - a.position[Z],
         )
         .forEach((entity) => {
-          const render = getRenderFunction(types, entity)
+          const type = types[entity.type]
+          const { render } = type
           if (render) {
             absolutePosition(render)(entity, ctx, { api })
           }