Hit Area is now top-left based. Pointer x/y now takes canvas position and scale into account.

This commit is contained in:
Richard Davey 2017-07-17 23:38:43 +01:00
parent f5c3ab0fcb
commit 95dea5c88a
3 changed files with 111 additions and 9 deletions

View file

@ -20,6 +20,8 @@ var GlobalInputManager = new Class({
{ {
this.game = game; this.game = game;
this.canvas;
this.config = config; this.config = config;
this.enabled = true; this.enabled = true;
@ -35,6 +37,8 @@ var GlobalInputManager = new Class({
this.activePointer = new Pointer(this); this.activePointer = new Pointer(this);
this.scale = { x: 1, y: 1 };
this._tempMatrix = new TransformMatrix(); this._tempMatrix = new TransformMatrix();
this._tempPoint = { x: 0, y: 0 }; this._tempPoint = { x: 0, y: 0 };
this._tempHitTest = []; this._tempHitTest = [];
@ -49,6 +53,8 @@ var GlobalInputManager = new Class({
*/ */
boot: function () boot: function ()
{ {
this.canvas = this.game.canvas;
this.keyboard.boot(); this.keyboard.boot();
this.mouse.boot(); this.mouse.boot();
}, },
@ -69,6 +75,9 @@ var GlobalInputManager = new Class({
return; return;
} }
this.scale.x = this.game.config.width / this.canvas.offsetWidth;
this.scale.y = this.game.config.height / this.canvas.offsetHeight;
// Clears the queue array, and also means we don't work on array data that could potentially // Clears the queue array, and also means we don't work on array data that could potentially
// be modified during the processing phase // be modified during the processing phase
var queue = this.queue.splice(0, len); var queue = this.queue.splice(0, len);
@ -120,6 +129,36 @@ var GlobalInputManager = new Class({
pointScreenToWorldHitTest: function (gameObjects, x, y, camera) pointScreenToWorldHitTest: function (gameObjects, x, y, camera)
{ {
return PointScreenToWorldHitTest(this._tempMatrix, x, y, gameObjects, camera, this._tempHitTest); return PointScreenToWorldHitTest(this._tempMatrix, x, y, gameObjects, camera, this._tempHitTest);
},
transformX: function (pageX)
{
return (pageX - this.canvas.offsetLeft) * this.scale.x;
},
transformY: function (pageY)
{
return (pageY - this.canvas.offsetTop) * this.scale.y;
},
getOffsetX: function ()
{
return this.canvas.offsetLeft;
},
getOffsetY: function ()
{
return this.canvas.offsetTop;
},
getScaleX: function ()
{
return this.game.config.width / this.canvas.offsetWidth;
},
getScaleY: function ()
{
return this.game.config.height / this.canvas.offsetHeight;
} }
}); });

View file

@ -10,9 +10,20 @@ var Pointer = new Class({
{ {
this.manager = manager; this.manager = manager;
this.button = 0;
this.x = 0; this.x = 0;
this.y = 0; this.y = 0;
this.clientX = 0;
this.clientY = 0;
this.pageX = 0;
this.pageY = 0;
this.screenX = 0;
this.screenY = 0;
this.isDown = false; this.isDown = false;
this.dirty = false; this.dirty = false;
@ -32,11 +43,24 @@ var Pointer = new Class({
move: function (event) move: function (event)
{ {
if (event.button !== undefined)
{
this.button = event.button;
}
this.clientX = event.clientX;
this.clientY = event.clientY;
this.pageX = event.pageX;
this.pageY = event.pageY;
this.screenX = event.screenX;
this.screenY = event.screenY;
this.x = this.manager.transformX(event.pageX);
this.y = this.manager.transformY(event.pageY);
this.dirty = true; this.dirty = true;
this.x = event.x;
this.y = event.y;
this.justMoved = true; this.justMoved = true;
}, },

View file

@ -240,6 +240,15 @@ var InputManager = new Class({
{ {
this._pendingInsertion.push(child); this._pendingInsertion.push(child);
} }
return this;
},
remove: function (child)
{
this._pendingRemoval.push(child);
return this;
}, },
setHitArea: function (gameObject, shape, callback) setHitArea: function (gameObject, shape, callback)
@ -281,12 +290,14 @@ var InputManager = new Class({
for (var i = 0; i < gameObject.length; i++) for (var i = 0; i < gameObject.length; i++)
{ {
if (gameObject.frame) var entity = gameObject[i];
{
gameObject[i].hitArea = new Rectangle(0, 0, gameObject.frame.width, gameObject.frame.height);
gameObject[i].hitAreaCallback = callback;
this.add(gameObject[i]); if (entity.frame)
{
entity.hitArea = new Rectangle(0, 0, entity.frame.width, entity.frame.height);
entity.hitAreaCallback = callback;
this.add(entity);
} }
} }
@ -327,6 +338,34 @@ var InputManager = new Class({
var shape = new Triangle(x1, y1, x2, y2, x3, y3); var shape = new Triangle(x1, y1, x2, y2, x3, y3);
return this.setHitArea(gameObject, shape, callback); return this.setHitArea(gameObject, shape, callback);
},
// Drag Events
// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
// DRAG_START, DRAG (mouse move), DRAG_END
// Scene that owns this is shutting down
shutdown: function ()
{
this._list = [];
this._over = [];
this._pendingRemoval = [];
this._pendingInsertion = [];
},
// Game level nuke
destroy: function ()
{
this.shutdown();
this.scene = undefined;
this.cameras = undefined;
this.manager = undefined;
this.events = undefined;
this.keyboard = undefined;
this.mouse = undefined;
} }
}); });