@inglorious/renderer-2d 0.7.0 → 0.8.0

package/package.json

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

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,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()
 }