@inglorious/renderer-2d 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/renderer-2d",
-  "version": "0.4.0",
+  "version": "0.6.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,8 +24,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@inglorious/engine": "0.9.0",
-    "@inglorious/utils": "2.1.0"
+    "@inglorious/engine": "0.11.0",
+    "@inglorious/utils": "3.0.0"
   },
   "devDependencies": {
     "eslint": "^9.34.0",

package/src/absolute-position.js

@@ -1,4 +1,4 @@
-import { snap, zero } from "@inglorious/utils/math/linear-algebra/vector.js"
+import { snap, zero } from "@inglorious/utils/math/vector.js"
 
 export function absolutePosition(render) {
   return (entity, ctx, { api }) => {
@@ -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/rendering-behavior.js

@@ -1,5 +1,8 @@
 import { track } from "@inglorious/engine/behaviors/input/mouse.js"
 
+const ORIGIN = 0
+const HALF = 2
+
 export function rendering(canvas) {
   const ctx = canvas.getContext("2d")
 
@@ -10,14 +13,28 @@ export function rendering(canvas) {
   return {
     init(entity, event, api) {
       const game = api.getEntity("game")
-      const [, , width, height] = game.bounds
+      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
 
-      canvas.style.width = `${width}px`
-      canvas.style.height = `${height}px`
       const dpi = window.devicePixelRatio
-      canvas.width = width * dpi
-      canvas.height = height * dpi
-      ctx.scale(dpi, dpi)
+
+      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"
@@ -35,7 +52,9 @@ export function rendering(canvas) {
       canvas.addEventListener("wheel", _onWheel)
     },
 
-    destroy() {
+    destroy(entity, id) {
+      if (id !== entity.id) return
+
       if (_onMouseMove) {
         canvas.removeEventListener("mousemove", _onMouseMove)
       }

package/src/rendering-system.js

@@ -1,4 +1,4 @@
-import { to2D } from "@inglorious/utils/math/linear-algebra/2d.js"
+import { to2D } from "@inglorious/utils/math/vector.js"
 
 import { absolutePosition } from "./absolute-position.js"
 
@@ -19,9 +19,9 @@ export function renderingSystem(canvas) {
       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(
@@ -37,11 +37,11 @@ export function renderingSystem(canvas) {
 
         // 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)
       }

package/src/shapes/circle.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-magic-numbers */
 
-import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
 import { pi } from "@inglorious/utils/math/trigonometry.js"
+import { zero } from "@inglorious/utils/math/vector.js"
 
 export function renderCircle(entity, ctx) {
   const {

package/src/shapes/rectangle.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-magic-numbers */
 
-import { zero } from "@inglorious/utils/math/linear-algebra/vector.js"
+import { zero } from "@inglorious/utils/math/vector.js"
 
 export function renderRectangle(entity, ctx) {
   const {