@inglorious/renderer-2d 0.7.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/renderer-2d",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "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,12 +24,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@inglorious/utils": "3.4.0",
-    "@inglorious/engine": "1.1.0"
+    "@inglorious/engine": "2.1.1",
+    "@inglorious/utils": "3.5.1"
   },
   "peerDependencies": {
-    "@inglorious/utils": "3.4.0",
-    "@inglorious/engine": "1.1.0"
+    "@inglorious/engine": "2.1.1",
+    "@inglorious/utils": "3.5.1"
   },
   "devDependencies": {
     "eslint": "^9.34.0",

package/src/coordinates.js

@@ -0,0 +1,33 @@
+import { v } from "@inglorious/utils/v.js"
+
+const NO_Y = 0
+const HALF = 2
+
+export function createCoordinateConverter(canvas, api) {
+  return (clientX, clientY) => {
+    const {
+      left,
+      bottom,
+      width: canvasWidth,
+      height: canvasHeight,
+    } = canvas.getBoundingClientRect()
+
+    const x = clientX - left
+    const y = bottom - clientY
+
+    const game = api.getEntity("game")
+    const [gameWidth, gameHeight] = game.size
+
+    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
+
+    return v((x - offsetX) / scale, NO_Y, (y - offsetY) / scale)
+  }
+}

package/src/rendering-behavior.js

@@ -1,15 +1,24 @@
-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"
+
+import { createCoordinateConverter } from "./coordinates.js"
 
 const ORIGIN = 0
 const HALF = 2
 
 export function rendering(canvas) {
+  canvas.style.touchAction = "none"
+
   const ctx = canvas.getContext("2d")
 
   let _onMouseMove = null
   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 +26,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 +37,15 @@ export function rendering(canvas) {
       const scaledGameWidth = gameWidth * scale
       const scaledGameHeight = gameHeight * scale
 
-      const offsetX = (canvasWidth - scaledGameWidth) / HALF
-      const offsetY = (canvasHeight - scaledGameHeight) / HALF
-
-      const dpi = window.devicePixelRatio
+      const offsetX = (canvas.width - scaledGameWidth * dpi) / HALF
+      const offsetY = (canvas.height - scaledGameHeight * dpi) / HALF
 
-      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 +53,13 @@ export function rendering(canvas) {
         ctx.imageSmoothingEnabled = false
       }
 
-      const { onMouseMove, onClick, onWheel } = track(canvas, api)
+      const toGamePosition = createCoordinateConverter(canvas, api)
+
+      const { onMouseMove, onClick, onWheel } = trackMouse(
+        canvas,
+        api,
+        toGamePosition,
+      )
       _onMouseMove = onMouseMove
       _onClick = onClick
       _onWheel = onWheel
@@ -50,6 +67,19 @@ export function rendering(canvas) {
       canvas.addEventListener("mousemove", _onMouseMove)
       canvas.addEventListener("click", _onClick)
       canvas.addEventListener("wheel", _onWheel)
+
+      const { onTouchStart, onTouchMove, onTouchEnd } = trackTouch(
+        canvas,
+        api,
+        toGamePosition,
+      )
+      _onTouchStart = onTouchStart
+      _onTouchMove = onTouchMove
+      _onTouchEnd = onTouchEnd
+
+      canvas.addEventListener("touchstart", _onTouchStart)
+      canvas.addEventListener("touchmove", _onTouchMove)
+      canvas.addEventListener("touchend", _onTouchEnd)
     },
 
     destroy(entity, id) {
@@ -64,6 +94,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,10 +1,10 @@
 const DEFAULT_SIZE = 16
-const DEFAULT_PADDING = 10
+const DEFAULT_PADDING = 0
 
 export function renderText(entity, ctx) {
   const {
     size = DEFAULT_SIZE,
-    padding = DEFAULT_PADDING,
+    lineHeight = size,
     color = "black",
     font = "sans-serif",
     textAlign = "left",
@@ -16,7 +16,11 @@ export function renderText(entity, ctx) {
   ctx.font = `${size}px ${font}`
   ctx.fillStyle = color
   ctx.textAlign = textAlign
-  ctx.fillText(value, padding, padding + size)
+
+  const tokens = value.split("\n")
+  tokens.forEach((token, index) => {
+    ctx.fillText(token, DEFAULT_PADDING, size + lineHeight * index)
+  })
 
   ctx.restore()
 }