Skip to content

Commit

Permalink
ScaleManager.bounds is a Rectangle object that holds the exact size o…
Browse files Browse the repository at this point in the history
…f the game canvas, taking DOM offset and game scale into account.

Pointer.withinGame is now accurate based on game scale and updated as the Pointer moves.
Stage.bounds is now updated if the game canvas offset changes position. Note that it gives the un-scaled game dimensions.
  • Loading branch information
photonstorm committed May 19, 2014
1 parent 2edcd1f commit 7b876d5
Show file tree
Hide file tree
Showing 8 changed files with 92 additions and 33 deletions.
13 changes: 9 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ Version 2.0.5 - "Tanchico" - in development

### Updates

* TypeScript definitions fixes and updates (thanks @luispedrofonseca @clark-stevenson @Anahkiasen @adamholdenyall @luispedrofonseca)
* TypeScript definitions fixes and updates (thanks @luispedrofonseca @clark-stevenson @Anahkiasen @adamholdenyall @luispedrofonseca @WillHuxtable)
* Input.getPointerFromIdentifier docs update to reflect where the identifier comes from. Pointer properties now set to give it fixed defaults (thanks @JirkaDellOro, #793)
* Pointer.pointerId added which is set by the DOM event (if present in the browser). Note that browsers can and do recycle pointer IDs.
* Pointer.type and Pointer.exists properties added.
Expand All @@ -69,6 +69,8 @@ Version 2.0.5 - "Tanchico" - in development
* PIXI.InteractionManager is no longer over-written if the object already exists (thanks @georgiee, #818)
* Key.justPressed and justReleased incorrectly set the delay value to 2500ms. Now defaults to 50ms (thanks @draklaw, fix #797)
* Stage.backgroundColor can now accept short-code hex values: `#222`, `#334`, etc.
* Pointer.withinGame is now accurate based on game scale and updated as the Pointer moves.
* Stage.bounds is now updated if the game canvas offset changes position. Note that it gives the un-scaled game dimensions.


### New Features
Expand All @@ -79,7 +81,7 @@ Version 2.0.5 - "Tanchico" - in development
* Input.getPointerFromId will return a pointer with a matching pointerId value, if any. pointerId is a value set by the browser in the DOM event.
* ArcadePhysics.getObjectsUnderPointer will return all children from a Group that overlap with the given Pointer.
* InputManager.minPriorityID lets you set the minimum priority level an object needs to be to be checked by a Pointer. Useful for UI layer stacking.
* New consts: Phaser.Tilemap.NORTH, SOUTH, EAST and WEST to use with the TileMapWalker Plugin.
* New consts: Phaser.Tilemap.NORTH, SOUTH, EAST and WEST to use with the TileMapWalker Plugin but generally just handy to have anyway.
* BitmapData.processPixelRGB added undefined check (thanks @muclemente, fix #808)
* Phaser.Utils.transposeArray will transpose the given array and return it.
* Phaser.Utils.rotateArray will rotate the given array by 90 or 180 degrees in either direction and return it.
Expand Down Expand Up @@ -111,6 +113,8 @@ Version 2.0.5 - "Tanchico" - in development
* Cache.checkBitmapFontKey(key) - Check if a BitmapFont key exists in the cache (thanks to @delta11 for the proposal)
* Cache.checkJSONKey(key) - Check if a JSON key exists in the cache (thanks to @delta11 for the proposal)
* New movement data added for a Pointer Locked mouse (Pointer.movementX/Y) (thanks @woutercommandeur, #831)
* ScaleManager.bounds is a Rectangle object that holds the exact size of the game canvas, taking DOM offset and game scale into account.



### New Plugins
Expand Down Expand Up @@ -178,7 +182,9 @@ Note: Some of you may not be aware, but the `phaser.min.js` file in the build fo

## Koding

You can [![clone the Phaser repo in Koding](http://learn.koding.com/btn/clone_d.png)][koding] and then start editing and previewing code right away using their web based VM development system.
![Koding](https://koding.com/Teamwork?import=https://github.com/photonstorm/phaser/archive/master.zip&c=git1)

You can [clone the Phaser repo in Koding](http://learn.koding.com/btn/clone_d.png) and then start editing and previewing code right away using their web based VM development system.

![div](http://phaser.io/images/div5.png)

Expand Down Expand Up @@ -393,6 +399,5 @@ Phaser is released under the [MIT License](http://opensource.org/licenses/MIT).
[contribute]: https://github.com/photonstorm/phaser/blob/master/CONTRIBUTING.md
[phaser]: https://github.com/photonstorm/phaser
[forum]: http://www.html5gamedevs.com/forum/14-phaser/
[koding]: https://koding.com/Teamwork?import=https://github.com/photonstorm/phaser/archive/master.zip&c=git1

[![Analytics](https://ga-beacon.appspot.com/UA-44006568-2/phaser/index)](https://github.com/igrigorik/ga-beacon)
1 change: 1 addition & 0 deletions build/phaser.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4216,6 +4216,7 @@ declare module Phaser {
static SHOW_ALL: number;

aspectRatio: number;
bounds: Phaser.Rectangle;
enterFullScreen: Phaser.Signal;
enterIncorrectOrientation: Phaser.Signal;
enterLandscape: Phaser.Signal;
Expand Down
8 changes: 8 additions & 0 deletions src/core/ScaleManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,12 @@ Phaser.ScaleManager = function (game, width, height) {
*/
this.margin = new Phaser.Point(0, 0);

/**
* @property {Phaser.Rectangle} bounds - The bounds of the scaled game. The x/y will match the offset of the canvas element and the width/height the scaled width and height.
* @readonly
*/
this.bounds = new Phaser.Rectangle(0, 0, width, height);

/**
* @property {number} aspectRatio - The aspect ratio of the scaled game.
* @readonly
Expand Down Expand Up @@ -685,6 +691,8 @@ Phaser.ScaleManager.prototype = {

Phaser.Canvas.getOffset(this.game.canvas, this.game.stage.offset);

this.bounds.setTo(this.game.stage.offset.x, this.game.stage.offset.y, this.width, this.height);

this.aspectRatio = this.width / this.height;

this.scaleFactor.x = this.game.width / this.width;
Expand Down
9 changes: 8 additions & 1 deletion src/core/Stage.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@ Phaser.Stage = function (game, width, height) {
*/
this.offset = new Phaser.Point();

/**
* @property {Phaser.Rectangle} bounds - The bounds of the Stage. Typically x/y = Stage.offset.x/y and the width/height match the game width and height.
*/
this.bounds = new Phaser.Rectangle(0, 0, width, height);

PIXI.Stage.call(this, 0x000000, false);

/**
Expand Down Expand Up @@ -177,6 +182,8 @@ Phaser.Stage.prototype.postUpdate = function () {
if (this.game.time.now > this._nextOffsetCheck)
{
Phaser.Canvas.getOffset(this.game.canvas, this.offset);
this.bounds.x = this.offset.x;
this.bounds.y = this.offset.y;
this._nextOffsetCheck = this.game.time.now + this.checkOffsetInterval;
}
}
Expand Down Expand Up @@ -245,7 +252,7 @@ Phaser.Stage.prototype.boot = function () {

Phaser.Canvas.getOffset(this.game.canvas, this.offset);

this.bounds = new Phaser.Rectangle(this.offset.x, this.offset.y, this.game.width, this.game.height);
this.bounds.setTo(this.offset.x, this.offset.y, this.game.width, this.game.height);

var _this = this;

Expand Down
46 changes: 46 additions & 0 deletions src/input/Mouse.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,11 @@ Phaser.Mouse = function (game) {
*/
this.mouseOutCallback = null;

/**
* @property {function} mouseOverCallback - A callback that can be fired when the mouse enters the game canvas (usually after a mouseout).
*/
this.mouseOverCallback = null;

/**
* @property {boolean} capture - If true the DOM mouse events will have event.preventDefault applied to them, if false they will propogate fully.
*/
Expand Down Expand Up @@ -108,6 +113,12 @@ Phaser.Mouse = function (game) {
*/
this._onMouseOut = null;

/**
* @property {function} _onMouseOver - Internal event handler reference.
* @private
*/
this._onMouseOver = null;

};

/**
Expand Down Expand Up @@ -172,9 +183,14 @@ Phaser.Mouse.prototype = {
return _this.onMouseOut(event);
};

this._onMouseOver = function (event) {
return _this.onMouseOver(event);
};

this.game.canvas.addEventListener('mousedown', this._onMouseDown, true);
this.game.canvas.addEventListener('mousemove', this._onMouseMove, true);
this.game.canvas.addEventListener('mouseup', this._onMouseUp, true);
this.game.canvas.addEventListener('mouseover', this._onMouseOver, true);
this.game.canvas.addEventListener('mouseout', this._onMouseOut, true);

},
Expand Down Expand Up @@ -309,6 +325,35 @@ Phaser.Mouse.prototype = {

},

/**
* The internal method that handles the mouse over event from the browser.
*
* @method Phaser.Mouse#onMouseOver
* @param {MouseEvent} event - The native event from the browser. This gets stored in Mouse.event.
*/
onMouseOver: function (event) {

this.event = event;

if (this.capture)
{
event.preventDefault();
}

if (this.mouseOverCallback)
{
this.mouseOverCallback.call(this.callbackContext, event);
}

if (this.game.input.disabled || this.disabled)
{
return;
}

this.game.input.mousePointer.withinGame = true;

},

/**
* If the browser supports it you can request that the pointer be locked to the browser window.
* This is classically known as 'FPS controls', where the pointer can't leave the browser until the user presses an exit key.
Expand Down Expand Up @@ -387,6 +432,7 @@ Phaser.Mouse.prototype = {
this.game.canvas.removeEventListener('mousedown', this._onMouseDown, true);
this.game.canvas.removeEventListener('mousemove', this._onMouseMove, true);
this.game.canvas.removeEventListener('mouseup', this._onMouseUp, true);
this.game.canvas.removeEventListener('mouseover', this._onMouseOver, true);
this.game.canvas.removeEventListener('mouseout', this._onMouseOut, true);

}
Expand Down
40 changes: 17 additions & 23 deletions src/input/Pointer.js
Original file line number Diff line number Diff line change
Expand Up @@ -77,90 +77,82 @@ Phaser.Pointer = function (game, id) {
/**
* @property {number} _nextDrop - Local private variable storing the time at which the next history drop should occur.
* @private
* @default
*/
this._nextDrop = 0;

/**
* @property {boolean} _stateReset - Monitor events outside of a state reset loop.
* @private
* @default
*/
this._stateReset = false;

/**
* @property {boolean} withinGame - true if the Pointer is within the game area, otherwise false.
* @property {boolean} withinGame - true if the Pointer is over the game canvas, otherwise false.
*/
this.withinGame = false;

/**
* @property {number} clientX - The horizontal coordinate of point relative to the viewport in pixels, excluding any scroll offset.
* @default
* @property {number} clientX - The horizontal coordinate of the Pointer within the application's client area at which the event occurred (as opposed to the coordinates within the page).
*/
this.clientX = -1;

/**
* @property {number} clientY - The vertical coordinate of point relative to the viewport in pixels, excluding any scroll offset.
* @default
* @property {number} clientY - The vertical coordinate of the Pointer within the application's client area at which the event occurred (as opposed to the coordinates within the page).
*/
this.clientY = -1;

/**
* @property {number} pageX - The horizontal coordinate of point relative to the viewport in pixels, including any scroll offset.
* @default
* @property {number} pageX - The horizontal coordinate of the Pointer relative to whole document.
*/
this.pageX = -1;

/**
* @property {number} pageY - The vertical coordinate of point relative to the viewport in pixels, including any scroll offset.
* @default
* @property {number} pageY - The vertical coordinate of the Pointer relative to whole document.
*/
this.pageY = -1;

/**
* @property {number} screenX - The horizontal coordinate of point relative to the screen in pixels.
* @default
* @property {number} screenX - The horizontal coordinate of the Pointer relative to the screen.
*/
this.screenX = -1;

/**
* @property {number} screenY - The vertical coordinate of point relative to the screen in pixels.
* @default
* @property {number} screenY - The vertical coordinate of the Pointer relative to the screen.
*/
this.screenY = -1;

/**
* @property {number} rawMovementX - The horizontal raw relative movement of pointer in pixels since last event.
* @property {number} rawMovementX - The horizontal raw relative movement of the Pointer in pixels since last event.
* @default
*/
this.rawMovementX = 0;

/**
* @property {number} rawMovementY - The vertical raw relative movement of pointer in pixels since last event.
* @property {number} rawMovementY - The vertical raw relative movement of the Pointer in pixels since last event.
* @default
*/
this.rawMovementY = 0;

/**
* @property {number} movementX - The horizontal processed relative movement of pointer in pixels since last event.
* @property {number} movementX - The horizontal processed relative movement of the Pointer in pixels since last event.
* @default
*/
this.movementX = 0;

/**
* @property {number} movementY - The vertical processed relative movement of pointer in pixels since last event.
* @property {number} movementY - The vertical processed relative movement of the Pointer in pixels since last event.
* @default
*/
this.movementY = 0;

/**
* @property {number} x - The horizontal coordinate of point relative to the game element. This value is automatically scaled based on game size.
* @property {number} x - The horizontal coordinate of the Pointer. This value is automatically scaled based on the game scale.
* @default
*/
this.x = -1;

/**
* @property {number} y - The vertical coordinate of point relative to the game element. This value is automatically scaled based on game size.
* @property {number} y - The vertical coordinate of the Pointer. This value is automatically scaled based on the game scale.
* @default
*/
this.y = -1;
Expand Down Expand Up @@ -208,7 +200,7 @@ Phaser.Pointer = function (game, id) {
this.totalTouches = 0;

/**
* @property {number} msSinceLastClick - The number of miliseconds since the last click.
* @property {number} msSinceLastClick - The number of milliseconds since the last click or touch event.
* @default
*/
this.msSinceLastClick = Number.MAX_VALUE;
Expand Down Expand Up @@ -401,7 +393,7 @@ Phaser.Pointer.prototype = {
this.circle.x = this.x;
this.circle.y = this.y;

if (this.game.input.multiInputOverride == Phaser.Input.MOUSE_OVERRIDES_TOUCH || this.game.input.multiInputOverride == Phaser.Input.MOUSE_TOUCH_COMBINE || (this.game.input.multiInputOverride == Phaser.Input.TOUCH_OVERRIDES_MOUSE && this.game.input.currentPointers === 0))
if (this.game.input.multiInputOverride === Phaser.Input.MOUSE_OVERRIDES_TOUCH || this.game.input.multiInputOverride === Phaser.Input.MOUSE_TOUCH_COMBINE || (this.game.input.multiInputOverride === Phaser.Input.TOUCH_OVERRIDES_MOUSE && this.game.input.currentPointers === 0))
{
this.game.input.activePointer = this;
this.game.input.x = this.x;
Expand All @@ -411,6 +403,8 @@ Phaser.Pointer.prototype = {
this.game.input.circle.y = this.game.input.y;
}

this.withinGame = this.game.scale.bounds.contains(this.pageX, this.pageY);

// If the game is paused we don't process any target objects or callbacks
if (this.game.paused)
{
Expand Down
7 changes: 2 additions & 5 deletions src/input/Touch.js
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,8 @@ Phaser.Touch.prototype = {
*/
onTouchEnter: function (event) {

console.log('touch enter', event);

this.event = event;

if (this.touchEnterCallback)
Expand Down Expand Up @@ -297,11 +299,6 @@ Phaser.Touch.prototype = {
event.preventDefault();
}

// for (var i = 0; i < event.changedTouches.length; i++)
// {
//this.game.input.updatePointer(event.changedTouches[i]);
// }

},

/**
Expand Down
1 change: 1 addition & 0 deletions src/loader/Loader.js
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ Phaser.Loader.prototype = {
* You can set a Sprite to be a "preload" sprite by passing it to this method.
* A "preload" sprite will have its width or height crop adjusted based on the percentage of the loader in real-time.
* This allows you to easily make loading bars for games. Note that Sprite.visible = true will be set when calling this.
* Note: The Sprite should use a single image and not use a texture that is part of a Texture Atlas or Sprite Sheet.
*
* @method Phaser.Loader#setPreloadSprite
* @param {Phaser.Sprite|Phaser.Image} sprite - The sprite or image that will be cropped during the load.
Expand Down

0 comments on commit 7b876d5

Please sign in to comment.