chore: use gfx.viewport pos to calculate the mousePos

src/app/app.ts

@@ -21,6 +21,7 @@ import {
 } from "../utils";
 
 import GAMEPAD_MAP from "../data/gamepad.json";
+import { gfx } from "../kaplay";
 import {
     type ButtonBinding,
     type ButtonsDef,
@@ -867,7 +868,10 @@ export const initApp = (opt: {
     const pd = opt.pixelDensity || 1;
 
     canvasEvents.mousemove = (e) => {
-        const mousePos = new Vec2(e.offsetX, e.offsetY);
+        const mousePos = new Vec2(
+            e.offsetX - gfx.viewport.x,
+            e.offsetY - gfx.viewport.y,
+        );
         const mouseDeltaPos = new Vec2(e.movementX, e.movementY);
 
         if (isFullscreen()) {

src/components/transform/pos.ts

@@ -130,10 +130,8 @@ export function pos(...args: Vec2Args): PosComp {
         // Transform a world point (relative to the root) to a local point (relative to this)
         fromWorld(this: GameObj<PosComp>, p: Vec2): Vec2 {
             return this.parent
-                ? this.parent.transform.invert().multVec2(
-                    p.scale(1 / getViewportScale()),
-                ).sub(this.pos)
-                : p.sub(this.pos).scale(1 / getViewportScale());
+                ? this.parent.transform.invert().multVec2(p).sub(this.pos)
+                : p.sub(this.pos);
         },
 
         // Transform a screen point (relative to the camera) to a local point (relative to this)
@@ -169,7 +167,7 @@ export function pos(...args: Vec2Args): PosComp {
             const pos = this.toWorld(p);
             return isFixed(this)
                 ? pos
-                : k.toScreen(pos.scale(1 / getViewportScale()));
+                : k.toScreen(pos);
         },
 
         // Transform a screen point (relative to the camera) to a local point (relative to this)

src/game/camera.ts

@@ -1,5 +1,5 @@
 import { color, fixed, opacity, rect } from "../components";
-import { center, height, width } from "../gfx";
+import { center, getViewportScale, height, width } from "../gfx";
 import { game } from "../kaplay";
 import { type Color, rgb } from "../math/color";
 import { type Mat4, type Vec2, vec2, type Vec2Args } from "../math/math";
@@ -50,9 +50,13 @@ export function shake(intensity: number = 12) {
 }
 
 export function toScreen(p: Vec2): Vec2 {
-    return game.cam.transform.multVec2(p);
+    const viewportScale = getViewportScale();
+
+    return game.cam.transform.multVec2(p).scale(viewportScale);
 }
 
 export function toWorld(p: Vec2): Vec2 {
-    return game.cam.transform.invert().multVec2(p);
+    const viewportFactor = 1 / getViewportScale();
+
+    return game.cam.transform.invert().multVec2(p).scale(viewportFactor);
 }