@inglorious/renderer-2d 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/renderer-2d",
-  "version": "0.2.0",
+  "version": "0.4.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,16 +18,14 @@
     "./*": "./src/*"
   },
   "files": [
-    "src",
-    "README.md",
-    "LICENSE"
+    "src"
   ],
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@inglorious/engine": "0.6.0",
-    "@inglorious/utils": "1.1.0"
+    "@inglorious/engine": "0.9.0",
+    "@inglorious/utils": "2.1.0"
   },
   "devDependencies": {
     "eslint": "^9.34.0",

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,50 @@
+import { track } from "@inglorious/engine/behaviors/input/mouse.js"
+
+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 [, , width, height] = game.bounds
+
+      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)
+
+      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() {
+      if (_onMouseMove) {
+        canvas.removeEventListener("mousemove", _onMouseMove)
+      }
+      if (_onClick) {
+        canvas.removeEventListener("click", _onClick)
+      }
+      if (_onWheel) {
+        canvas.removeEventListener("wheel", _onWheel)
+      }
+    },
+  }
+}

package/src/rendering-system.js

@@ -10,21 +10,9 @@ 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()
@@ -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 })
           }