Mouse Bug Fixes

Added PIXI.input.mouseContainer to properly scale mouse input

Author: OttCS

dev/mouse-tracking/app.js

@@ -1,6 +1,7 @@
 const app = new PIXI.Application({ width: 480, height: 270, backgroundColor: 0xffffff, antialias: false});
 app.view.id = "PIXI";
 document.body.appendChild(app.view);
+PIXI.input.mouseContainer = app.view;
 
 const sleepTex = PIXI.Texture.from('assets/sleepy.png');
 const rageTex = PIXI.Texture.from('assets/rage.png');
@@ -14,6 +15,8 @@ cursor.y = 0;
 cursor.anchor = {x: 0.5, y: 0.5};
 scene.addChild(cursor);
 
+console.log(document.getElementsByTagName("html")[0].getBoundingClientRect());
+
 app.ticker.add((deltaTime) => {
     cursor.x = (PIXI.input.getMouseX() * app.view.width + 0.5) ^ 0;
     cursor.y = (PIXI.input.getMouseY() * app.view.height + 0.5) ^ 0;

dev/notes/documentation.md

@@ -2,12 +2,30 @@
 
 ## PIXI.input
 
-PIXI.input.getKeyFired(keyStr): Returns boolean
+PIXI.input.getKeyFired(keyString): Returns boolean
  - Returns true if this is the first time it has been called since the key has been pressed.
 
-PIXI.input.getKeyDown(keyStr): Returns boolean
+PIXI.input.getKeyDown(keyString): Returns boolean
  - Returns true if the key is actively pressed down.
 
+PIXI.input.mouseContainer: [DOM Element]
+ - Is used to scale the mouse's coordinates to the desired element.
+ - USAGE: PIXI.input.mouseContainer = [DOM Element];
+
+PIXI.getMouseFired(mouseButton): Returns boolean
+ - Returns true if this is the first time it has been called since the button has been pressed.
+ - NOTE: Mouse buttons are integers 0 (primary, typically left) 1 (middle), and 2 (secondary, typically right).
+
+PIXI.getMouseDown(mouseButton): Returns boolean
+ - Returns true if the button is actively pressed down.
+ - NOTE: Mouse buttons are integers 0 (primary, typically left) 1 (middle), and 2 (secondary, typically right).
+
+PIXI.getMouseX(): Returns number
+ - Returns the last seen mouse X coordinate, where 0.0-1.0 is within the scene horizontally from left to right.
+
+PIXI.getMouseY(): Returns number
+ - Returns the last seen mouse Y coordinate, where 0.0-1.0 is within the scene vertically from top to bottom.
+
 ## PIXI.collision
 
 PIXI.collision.aabb(a, b): Returns boolean

dev/zepyhr.js

@@ -1,6 +1,6 @@
 "use strict"
 // ZEPHYR.js directly builds on top of PixiJS for ease of use
-PIXI.zephyr = "ZephyrJS version 22.5.23";
+PIXI.zephyr = "ZephyrJS version 22.5.25";
 
 PIXI.input = {
     keyMap: new Map(),
@@ -15,14 +15,15 @@ PIXI.input = {
         return PIXI.input.keyMap.has(keyStr);
     },
 
+    mouseContainer: document.getElementsByTagName("html")[0],
     mouseMap: new Map(),
-    getMouseFired: (btnStr) => {
-        let r = PIXI.input.mouseMap.get(btnStr);
-        PIXI.input.keyMap.set(btnStr, false);
+    getMouseFired: (btn) => {
+        let r = PIXI.input.mouseMap.get(btn);
+        PIXI.input.keyMap.set(btn, false);
         return r;
     },
-    getMouseDown: (btnStr) => {
-        return PIXI.input.mouseMap.has(btnStr);
+    getMouseDown: (btn) => {
+        return PIXI.input.mouseMap.has(btn);
     },
     getMouseX: () => {
         return PIXI.input.mouseMap.get('x');
@@ -63,8 +64,9 @@ window.addEventListener('keyup', (e) => {
 
 // Mouse
 window.addEventListener('mousemove', (e) => {
-    PIXI.input.mouseMap.set('x', e.x / window.innerWidth);
-    PIXI.input.mouseMap.set('y', e.y / window.innerHeight);
+    let bounds = PIXI.input.mouseContainer.getBoundingClientRect();
+    PIXI.input.mouseMap.set('x', (e.x - bounds.left) / bounds.width);
+    PIXI.input.mouseMap.set('y', (e.y - bounds.top) / bounds.height);
 });
 window.addEventListener('mousedown', (e) => {
     PIXI.input.mouseMap.set(e.button, true);