@inglorious/renderer-2d 0.6.0 → 0.8.0

package/package.json

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

package/src/fps.js

@@ -7,7 +7,7 @@ export function renderFps(entity, ctx) {
 
   renderText(
     {
-      ...entity.dt,
+      ...entity,
       value: `FPS: ${(ONE_SECOND / value).toFixed(accuracy)}`,
     },
     ctx,

package/src/rendering-behavior.js

@@ -1,4 +1,5 @@
-import { track } from "@inglorious/engine/behaviors/input/mouse.js"
+import { trackMouse } from "@inglorious/engine/behaviors/input/mouse.js"
+import { trackTouch } from "@inglorious/engine/behaviors/input/touch.js"
 
 const ORIGIN = 0
 const HALF = 2
@@ -10,6 +11,10 @@ export function rendering(canvas) {
   let _onClick = null
   let _onWheel = null
 
+  let _onTouchStart = null
+  let _onTouchMove = null
+  let _onTouchEnd = null
+
   return {
     init(entity, event, api) {
       const game = api.getEntity("game")
@@ -17,6 +22,10 @@ export function rendering(canvas) {
 
       const canvasWidth = canvas.width
       const canvasHeight = canvas.height
+      const dpi = window.devicePixelRatio
+
+      canvas.width = canvasWidth * dpi
+      canvas.height = canvasHeight * dpi
 
       const scaleX = canvasWidth / gameWidth
       const scaleY = canvasHeight / gameHeight
@@ -24,17 +33,15 @@ export function rendering(canvas) {
       const scaledGameWidth = gameWidth * scale
       const scaledGameHeight = gameHeight * scale
 
-      const offsetX = (canvasWidth - scaledGameWidth) / HALF
-      const offsetY = (canvasHeight - scaledGameHeight) / HALF
+      const offsetX = (canvas.width - scaledGameWidth * dpi) / HALF
+      const offsetY = (canvas.height - scaledGameHeight * dpi) / HALF
 
-      const dpi = window.devicePixelRatio
-
-      ctx.clearRect(ORIGIN, ORIGIN, canvasWidth, canvasHeight)
+      ctx.clearRect(ORIGIN, ORIGIN, canvas.width, canvas.height)
       ctx.fillStyle = "black"
-      ctx.fillRect(ORIGIN, ORIGIN, canvasWidth, canvasHeight)
+      ctx.fillRect(ORIGIN, ORIGIN, canvas.width, canvas.height)
 
       ctx.translate(offsetX, offsetY)
-      ctx.scale(dpi * scale, dpi * scale)
+      ctx.scale(scale * dpi, scale * dpi)
 
       if (game.pixelated) {
         canvas.style.imageRendering = "pixelated"
@@ -42,7 +49,7 @@ export function rendering(canvas) {
         ctx.imageSmoothingEnabled = false
       }
 
-      const { onMouseMove, onClick, onWheel } = track(canvas, api)
+      const { onMouseMove, onClick, onWheel } = trackMouse(canvas, api)
       _onMouseMove = onMouseMove
       _onClick = onClick
       _onWheel = onWheel
@@ -50,6 +57,15 @@ export function rendering(canvas) {
       canvas.addEventListener("mousemove", _onMouseMove)
       canvas.addEventListener("click", _onClick)
       canvas.addEventListener("wheel", _onWheel)
+
+      const { onTouchStart, onTouchMove, onTouchEnd } = trackTouch(canvas, api)
+      _onTouchStart = onTouchStart
+      _onTouchMove = onTouchMove
+      _onTouchEnd = onTouchEnd
+
+      canvas.addEventListener("touchstart", _onTouchStart)
+      canvas.addEventListener("touchmove", _onTouchMove)
+      canvas.addEventListener("touchend", _onTouchEnd)
     },
 
     destroy(entity, id) {
@@ -64,6 +80,16 @@ export function rendering(canvas) {
       if (_onWheel) {
         canvas.removeEventListener("wheel", _onWheel)
       }
+
+      if (_onTouchStart) {
+        canvas.removeEventListener("touchstart", _onTouchStart)
+      }
+      if (_onTouchMove) {
+        canvas.removeEventListener("touchmove", _onTouchMove)
+      }
+      if (_onTouchEnd) {
+        canvas.removeEventListener("touchend", _onTouchEnd)
+      }
     },
   }
 }

package/src/text.js

@@ -1,14 +1,26 @@
 const DEFAULT_SIZE = 16
-const DEFAULT_PADDING = 10
+const DEFAULT_PADDING = 0
 
 export function renderText(entity, ctx) {
-  const { size = DEFAULT_SIZE, value = "" } = entity
+  const {
+    size = DEFAULT_SIZE,
+    lineHeight = size,
+    color = "black",
+    font = "sans-serif",
+    textAlign = "left",
+    value = "",
+  } = entity
 
   ctx.save()
 
-  ctx.font = `${size}px sans serif`
-  ctx.fillStyle = "black"
-  ctx.fillText(value, DEFAULT_PADDING, DEFAULT_PADDING + size)
+  ctx.font = `${size}px ${font}`
+  ctx.fillStyle = color
+  ctx.textAlign = textAlign
+
+  const tokens = value.split("\n")
+  tokens.forEach((token, index) => {
+    ctx.fillText(token, DEFAULT_PADDING, size + lineHeight * index)
+  })
 
   ctx.restore()
 }