Lots of fixes and updates to the Button class, InputHandler for snap offsets, Sound looping and Stage scaling.

This commit is contained in:
photonstorm
2013-12-31 17:03:09 +00:00
parent 86f6ddcbc8
commit d1cd1df9a5
13 changed files with 377 additions and 149 deletions
+182 -90
View File
@@ -19,16 +19,17 @@
* @constructor
*
* @param {Phaser.Game} game Current game instance.
* @param {number} [x] - X position of the Button.
* @param {number} [y] - Y position of the Button.
* @param {number} [x=0] - X position of the Button.
* @param {number} [y=0] - Y position of the Button.
* @param {string} [key] - The image key as defined in the Game.Cache to use as the texture for this Button.
* @param {function} [callback] - The function to call when this Button is pressed.
* @param {object} [callbackContext] - The context in which the callback will be called (usually 'this').
* @param {string|number} [overFrame] - This is the frame or frameName that will be set when this button is in an over state. Give either a number to use a frame ID or a string for a frame name.
* @param {string|number} [outFrame] - This is the frame or frameName that will be set when this button is in an out state. Give either a number to use a frame ID or a string for a frame name.
* @param {string|number} [downFrame] - This is the frame or frameName that will be set when this button is in a down state. Give either a number to use a frame ID or a string for a frame name.
* @param {string|number} [upFrame] - This is the frame or frameName that will be set when this button is in an up state. Give either a number to use a frame ID or a string for a frame name.
*/
Phaser.Button = function (game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame) {
Phaser.Button = function (game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame) {
x = x || 0;
y = y || 0;
@@ -63,7 +64,7 @@ Phaser.Button = function (game, x, y, key, callback, callbackContext, overFrame,
* @default
*/
this._onDownFrameName = null;
/**
* @property {string} _onUpFrameName - Internal variable.
* @private
@@ -91,7 +92,7 @@ Phaser.Button = function (game, x, y, key, callback, callbackContext, overFrame,
* @default
*/
this._onDownFrameID = null;
/**
* @property {number} _onUpFrameID - Internal variable.
* @private
@@ -173,13 +174,13 @@ Phaser.Button = function (game, x, y, key, callback, callbackContext, overFrame,
this.freezeFrames = false;
/**
* When the Button is clicked you can optionally force the state to "out".
* When the Button is touched / clicked and then released you can force it to enter a state of "out" instead of "up".
* @property {boolean} forceOut
* @default
*/
this.forceOut = true;
this.forceOut = false;
this.setFrames(overFrame, outFrame, downFrame);
this.setFrames(overFrame, outFrame, downFrame, upFrame);
if (callback !== null)
{
@@ -201,15 +202,38 @@ Phaser.Button.prototype = Phaser.Utils.extend(true, Phaser.Button.prototype, Pha
Phaser.Button.prototype.constructor = Phaser.Button;
/**
* Used to manually set the frames that will be used for the different states of the button
* exactly like setting them in the constructor.
* Clears all of the frames set on this Button.
*
* @method Phaser.Button.prototype.clearFrames
*/
Phaser.Button.prototype.clearFrames = function () {
this._onOverFrameName = null;
this._onOverFrameID = null;
this._onOutFrameName = null;
this._onOutFrameID = null;
this._onDownFrameName = null;
this._onDownFrameID = null;
this._onUpFrameName = null;
this._onUpFrameID = null;
}
/**
* Used to manually set the frames that will be used for the different states of the Button.
*
* @method Phaser.Button.prototype.setFrames
* @param {string|number} [overFrame] - This is the frame or frameName that will be set when this button is in an over state. Give either a number to use a frame ID or a string for a frame name.
* @param {string|number} [outFrame] - This is the frame or frameName that will be set when this button is in an out state. Give either a number to use a frame ID or a string for a frame name.
* @param {string|number} [downFrame] - This is the frame or frameName that will be set when this button is in a down state. Give either a number to use a frame ID or a string for a frame name.
* @param {string|number} [upFrame] - This is the frame or frameName that will be set when this button is in an up state. Give either a number to use a frame ID or a string for a frame name.
*/
Phaser.Button.prototype.setFrames = function (overFrame, outFrame, downFrame) {
Phaser.Button.prototype.setFrames = function (overFrame, outFrame, downFrame, upFrame) {
this.clearFrames();
if (overFrame !== null)
{
@@ -238,7 +262,6 @@ Phaser.Button.prototype.setFrames = function (overFrame, outFrame, downFrame) {
if (typeof outFrame === 'string')
{
this._onOutFrameName = outFrame;
this._onUpFrameName = outFrame;
if (this.input.pointerOver() === false)
{
@@ -248,7 +271,6 @@ Phaser.Button.prototype.setFrames = function (overFrame, outFrame, downFrame) {
else
{
this._onOutFrameID = outFrame;
this._onUpFrameID = outFrame;
if (this.input.pointerOver() === false)
{
@@ -279,6 +301,28 @@ Phaser.Button.prototype.setFrames = function (overFrame, outFrame, downFrame) {
}
}
if (upFrame !== null)
{
if (typeof upFrame === 'string')
{
this._onUpFrameName = upFrame;
if (this.input.pointerUp())
{
this.frameName = upFrame;
}
}
else
{
this._onUpFrameID = upFrame;
if (this.input.pointerUp())
{
this.frame = upFrame;
}
}
}
};
/**
@@ -300,8 +344,8 @@ Phaser.Button.prototype.setSounds = function (overSound, overMarker, downSound,
this.setOverSound(overSound, overMarker);
this.setOutSound(outSound, outMarker);
this.setUpSound(upSound, upMarker);
this.setDownSound(downSound, downMarker);
this.setUpSound(upSound, upMarker);
}
@@ -354,31 +398,7 @@ Phaser.Button.prototype.setOutSound = function (sound, marker) {
}
/**
* The Sound to be played when a Pointer clicks on this Button.
*
* @method Phaser.Button.prototype.setUpSound
* @param {Phaser.Sound} sound - The Sound that will be played.
* @param {string} [marker] - A Sound Marker that will be used in the playback.
*/
Phaser.Button.prototype.setUpSound = function (sound, marker) {
this.onUpSound = null;
this.onUpSoundMarker = '';
if (sound instanceof Phaser.Sound)
{
this.onUpSound = sound;
}
if (typeof marker === 'string')
{
this.onUpSoundMarker = marker;
}
}
/**
* The Sound to be played when a Pointer clicks on this Button.
* The Sound to be played when a Pointer presses down on this Button.
*
* @method Phaser.Button.prototype.setDownSound
* @param {Phaser.Sound} sound - The Sound that will be played.
@@ -401,25 +421,43 @@ Phaser.Button.prototype.setDownSound = function (sound, marker) {
}
/**
* The Sound to be played when a Pointer has pressed down and is released from this Button.
*
* @method Phaser.Button.prototype.setUpSound
* @param {Phaser.Sound} sound - The Sound that will be played.
* @param {string} [marker] - A Sound Marker that will be used in the playback.
*/
Phaser.Button.prototype.setUpSound = function (sound, marker) {
this.onUpSound = null;
this.onUpSoundMarker = '';
if (sound instanceof Phaser.Sound)
{
this.onUpSound = sound;
}
if (typeof marker === 'string')
{
this.onUpSoundMarker = marker;
}
}
/**
* Internal function that handles input events.
*
* @protected
* @method Phaser.Button.prototype.onInputOverHandler
* @param {Phaser.Button} sprite - The Button that the event occured on.
* @param {Phaser.Pointer} pointer - The Pointer that activated the Button.
*/
Phaser.Button.prototype.onInputOverHandler = function (pointer) {
Phaser.Button.prototype.onInputOverHandler = function (sprite, pointer) {
if (this.freezeFrames === false)
{
if (this._onOverFrameName != null)
{
this.frameName = this._onOverFrameName;
}
else if (this._onOverFrameID != null)
{
this.frame = this._onOverFrameID;
}
this.setState(1);
}
if (this.onOverSound)
@@ -438,20 +476,14 @@ Phaser.Button.prototype.onInputOverHandler = function (pointer) {
*
* @protected
* @method Phaser.Button.prototype.onInputOverHandler
* @param {Phaser.Button} sprite - The Button that the event occured on.
* @param {Phaser.Pointer} pointer - The Pointer that activated the Button.
*/
Phaser.Button.prototype.onInputOutHandler = function (pointer) {
Phaser.Button.prototype.onInputOutHandler = function (sprite, pointer) {
if (this.freezeFrames === false)
{
if (this._onOutFrameName != null)
{
this.frameName = this._onOutFrameName;
}
else if (this._onOutFrameID != null)
{
this.frame = this._onOutFrameID;
}
this.setState(2);
}
if (this.onOutSound)
@@ -470,20 +502,14 @@ Phaser.Button.prototype.onInputOutHandler = function (pointer) {
*
* @protected
* @method Phaser.Button.prototype.onInputOverHandler
* @param {Phaser.Button} sprite - The Button that the event occured on.
* @param {Phaser.Pointer} pointer - The Pointer that activated the Button.
*/
Phaser.Button.prototype.onInputDownHandler = function (pointer) {
Phaser.Button.prototype.onInputDownHandler = function (sprite, pointer) {
if (this.freezeFrames === false)
{
if (this._onDownFrameName != null)
{
this.frameName = this._onDownFrameName;
}
else if (this._onDownFrameID != null)
{
this.frame = this._onDownFrameID;
}
this.setState(3);
}
if (this.onDownSound)
@@ -502,12 +528,100 @@ Phaser.Button.prototype.onInputDownHandler = function (pointer) {
*
* @protected
* @method Phaser.Button.prototype.onInputOverHandler
* @param {Phaser.Button} sprite - The Button that the event occured on.
* @param {Phaser.Pointer} pointer - The Pointer that activated the Button.
*/
Phaser.Button.prototype.onInputUpHandler = function (pointer) {
Phaser.Button.prototype.onInputUpHandler = function (sprite, pointer, isOver) {
if (this.freezeFrames === false)
if (this.onUpSound)
{
this.onUpSound.play(this.onUpSoundMarker);
}
if (this.onInputUp)
{
this.onInputUp.dispatch(this, pointer, isOver);
}
if (this.freezeFrames)
{
return;
}
if (this.forceOut)
{
// Button should be forced to the Out frame when released.
this.setState(2);
}
else
{
if (this._onUpFrameName || this._onUpFrameID)
{
this.setState(4);
}
else
{
if (isOver)
{
this.setState(1);
}
else
{
this.setState(2);
}
}
}
};
/**
* Internal function that handles Button state changes.
*
* @protected
* @method Phaser.Button.prototype.setState
* @param {number} newState - The new State of the Button.
*/
Phaser.Button.prototype.setState = function (newState) {
if (newState === 1)
{
// Over
if (this._onOverFrameName != null)
{
this.frameName = this._onOverFrameName;
}
else if (this._onOverFrameID != null)
{
this.frame = this._onOverFrameID;
}
}
else if (newState === 2)
{
// Out
if (this._onOutFrameName != null)
{
this.frameName = this._onOutFrameName;
}
else if (this._onOutFrameID != null)
{
this.frame = this._onOutFrameID;
}
}
else if (newState === 3)
{
// Down
if (this._onDownFrameName != null)
{
this.frameName = this._onDownFrameName;
}
else if (this._onDownFrameID != null)
{
this.frame = this._onDownFrameID;
}
}
else if (newState === 4)
{
// Up
if (this._onUpFrameName != null)
{
this.frameName = this._onUpFrameName;
@@ -518,26 +632,4 @@ Phaser.Button.prototype.onInputUpHandler = function (pointer) {
}
}
if (this.onUpSound)
{
this.onUpSound.play(this.onUpSoundMarker);
}
if (this.forceOut && this.freezeFrames === false)
{
if (this._onOutFrameName != null)
{
this.frameName = this._onOutFrameName;
}
else if (this._onOutFrameID != null)
{
this.frame = this._onOutFrameID;
}
}
if (this.onInputUp)
{
this.onInputUp.dispatch(this, pointer);
}
};
+3 -2
View File
@@ -187,14 +187,15 @@ Phaser.GameObjectFactory.prototype = {
* @param {string|number} [overFrame] This is the frame or frameName that will be set when this button is in an over state. Give either a number to use a frame ID or a string for a frame name.
* @param {string|number} [outFrame] This is the frame or frameName that will be set when this button is in an out state. Give either a number to use a frame ID or a string for a frame name.
* @param {string|number} [downFrame] This is the frame or frameName that will be set when this button is in a down state. Give either a number to use a frame ID or a string for a frame name.
* @param {string|number} [upFrame] This is the frame or frameName that will be set when this button is in an up state. Give either a number to use a frame ID or a string for a frame name.
* @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group.
* @return {Phaser.Button} The newly created button object.
*/
button: function (x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, group) {
button: function (x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame, group) {
if (typeof group === 'undefined') { group = this.world; }
return group.add(new Phaser.Button(this.game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame));
return group.add(new Phaser.Button(this.game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame));
},
+102 -35
View File
@@ -94,6 +94,18 @@ Phaser.InputHandler = function (sprite) {
*/
this.snapY = 0;
/**
* @property {number} snapOffsetX - This defines the top-left X coordinate of the snap grid.
* @default
*/
this.snapOffsetX = 0;
/**
* @property {number} snapOffsetY - This defines the top-left Y coordinate of the snap grid..
* @default
*/
this.snapOffsetY = 0;
/**
* @property {number} pixelPerfect - Should we use pixel perfect hit detection? Warning: expensive. Only enable if you really need it!
* @default
@@ -666,11 +678,14 @@ Phaser.InputHandler.prototype = {
// Only release the InputUp signal if the pointer is still over this sprite
if (this.checkPointerOver(pointer))
{
//console.log('releasedHandler: ' + Date.now());
this.sprite.events.onInputUp.dispatch(this.sprite, pointer);
// Release the inputUp signal and provide optional parameter if pointer is still over the sprite or not
this.sprite.events.onInputUp.dispatch(this.sprite, pointer, true);
}
else
{
// Release the inputUp signal and provide optional parameter if pointer is still over the sprite or not
this.sprite.events.onInputUp.dispatch(this.sprite, pointer, false);
// Pointer outside the sprite? Reset the cursor
if (this.useHandCursor)
{
@@ -725,8 +740,8 @@ Phaser.InputHandler.prototype = {
if (this.snapOnDrag)
{
this.sprite.cameraOffset.x = Math.round(this.sprite.x / this.snapX) * this.snapX;
this.sprite.cameraOffset.y = Math.round(this.sprite.y / this.snapY) * this.snapY;
this.sprite.cameraOffset.x = Math.round((this.sprite.cameraOffset.x - (this.snapOffsetX % this.snapX)) / this.snapX) * this.snapX + (this.snapOffsetX % this.snapX);
this.sprite.cameraOffset.y = Math.round((this.sprite.cameraOffset.y - (this.snapOffsetY % this.snapY)) / this.snapY) * this.snapY + (this.snapOffsetY % this.snapY);
}
}
else
@@ -753,8 +768,8 @@ Phaser.InputHandler.prototype = {
if (this.snapOnDrag)
{
this.sprite.x = Math.round(this.sprite.x / this.snapX) * this.snapX;
this.sprite.y = Math.round(this.sprite.y / this.snapY) * this.snapY;
this.sprite.x = Math.round((this.sprite.x - (this.snapOffsetX % this.snapX)) / this.snapX) * this.snapX + (this.snapOffsetX % this.snapX);
this.sprite.y = Math.round((this.sprite.y - (this.snapOffsetY % this.snapY)) / this.snapY) * this.snapY + (this.snapOffsetY % this.snapY);
}
}
@@ -986,13 +1001,13 @@ Phaser.InputHandler.prototype = {
{
if (this.sprite.fixedToCamera)
{
this.sprite.cameraOffset.x = Math.round(this.sprite.cameraOffset.x / this.snapX) * this.snapX;
this.sprite.cameraOffset.y = Math.round(this.sprite.cameraOffset.y / this.snapY) * this.snapY;
this.sprite.cameraOffset.x = Math.round((this.sprite.cameraOffset.x - (this.snapOffsetX % this.snapX)) / this.snapX) * this.snapX + (this.snapOffsetX % this.snapX);
this.sprite.cameraOffset.y = Math.round((this.sprite.cameraOffset.y - (this.snapOffsetY % this.snapY)) / this.snapY) * this.snapY + (this.snapOffsetY % this.snapY);
}
else
{
this.sprite.x = Math.round(this.sprite.x / this.snapX) * this.snapX;
this.sprite.y = Math.round(this.sprite.y / this.snapY) * this.snapY;
this.sprite.x = Math.round((this.sprite.x - (this.snapOffsetX % this.snapX)) / this.snapX) * this.snapX + (this.snapOffsetX % this.snapX);
this.sprite.y = Math.round((this.sprite.y - (this.snapOffsetY % this.snapY)) / this.snapY) * this.snapY + (this.snapOffsetY % this.snapY);
}
}
@@ -1030,14 +1045,20 @@ Phaser.InputHandler.prototype = {
* @param {number} snapY - The height of the grid cell to snap to.
* @param {boolean} [onDrag=true] - If true the sprite will snap to the grid while being dragged.
* @param {boolean} [onRelease=false] - If true the sprite will snap to the grid when released.
* @param {number} [snapOffsetX=0] - Used to offset the top-left starting point of the snap grid.
* @param {number} [snapOffsetX=0] - Used to offset the top-left starting point of the snap grid.
*/
enableSnap: function (snapX, snapY, onDrag, onRelease) {
enableSnap: function (snapX, snapY, onDrag, onRelease, snappOffsetX, snappOffsetY) {
if (typeof onDrag == 'undefined') { onDrag = true; }
if (typeof onRelease == 'undefined') { onRelease = false; }
if (typeof snapOffsetX == 'undefined') { snapOffsetX = 0; }
if (typeof snapOffsetY == 'undefined') { snapOffsetY = 0; }
this.snapX = snapX;
this.snapY = snapY;
this.snapOffsetX = snapOffsetX;
this.snapOffsetY = snapOffsetY;
this.snapOnDrag = onDrag;
this.snapOnRelease = onRelease;
@@ -1060,22 +1081,45 @@ Phaser.InputHandler.prototype = {
*/
checkBoundsRect: function () {
if (this.sprite.x < this.boundsRect.left)
if (this.sprite.fixedToCamera)
{
this.sprite.x = this.boundsRect.x;
}
else if ((this.sprite.x + this.sprite.width) > this.boundsRect.right)
{
this.sprite.x = this.boundsRect.right - this.sprite.width;
}
if (this.sprite.cameraOffset.x < this.boundsRect.left)
{
this.sprite.cameraOffset.x = this.boundsRect.cameraOffset.x;
}
else if ((this.sprite.cameraOffset.x + this.sprite.width) > this.boundsRect.right)
{
this.sprite.cameraOffset.x = this.boundsRect.right - this.sprite.width;
}
if (this.sprite.y < this.boundsRect.top)
{
this.sprite.y = this.boundsRect.top;
if (this.sprite.cameraOffset.y < this.boundsRect.top)
{
this.sprite.cameraOffset.y = this.boundsRect.top;
}
else if ((this.sprite.cameraOffset.y + this.sprite.height) > this.boundsRect.bottom)
{
this.sprite.cameraOffset.y = this.boundsRect.bottom - this.sprite.height;
}
}
else if ((this.sprite.y + this.sprite.height) > this.boundsRect.bottom)
else
{
this.sprite.y = this.boundsRect.bottom - this.sprite.height;
if (this.sprite.x < this.boundsRect.left)
{
this.sprite.x = this.boundsRect.x;
}
else if ((this.sprite.x + this.sprite.width) > this.boundsRect.right)
{
this.sprite.x = this.boundsRect.right - this.sprite.width;
}
if (this.sprite.y < this.boundsRect.top)
{
this.sprite.y = this.boundsRect.top;
}
else if ((this.sprite.y + this.sprite.height) > this.boundsRect.bottom)
{
this.sprite.y = this.boundsRect.bottom - this.sprite.height;
}
}
},
@@ -1086,22 +1130,45 @@ Phaser.InputHandler.prototype = {
*/
checkBoundsSprite: function () {
if (this.sprite.x < this.boundsSprite.x)
if (this.sprite.fixedToCamera && this.boundsSprite.fixedToCamera)
{
this.sprite.x = this.boundsSprite.x;
}
else if ((this.sprite.x + this.sprite.width) > (this.boundsSprite.x + this.boundsSprite.width))
{
this.sprite.x = (this.boundsSprite.x + this.boundsSprite.width) - this.sprite.width;
}
if (this.sprite.cameraOffset.x < this.boundsSprite.camerOffset.x)
{
this.sprite.cameraOffset.x = this.boundsSprite.camerOffset.x;
}
else if ((this.sprite.cameraOffset.x + this.sprite.width) > (this.boundsSprite.camerOffset.x + this.boundsSprite.width))
{
this.sprite.cameraOffset.x = (this.boundsSprite.camerOffset.x + this.boundsSprite.width) - this.sprite.width;
}
if (this.sprite.y < this.boundsSprite.y)
{
this.sprite.y = this.boundsSprite.y;
if (this.sprite.cameraOffset.y < this.boundsSprite.camerOffset.y)
{
this.sprite.cameraOffset.y = this.boundsSprite.camerOffset.y;
}
else if ((this.sprite.cameraOffset.y + this.sprite.height) > (this.boundsSprite.camerOffset.y + this.boundsSprite.height))
{
this.sprite.cameraOffset.y = (this.boundsSprite.camerOffset.y + this.boundsSprite.height) - this.sprite.height;
}
}
else if ((this.sprite.y + this.sprite.height) > (this.boundsSprite.y + this.boundsSprite.height))
else
{
this.sprite.y = (this.boundsSprite.y + this.boundsSprite.height) - this.sprite.height;
if (this.sprite.x < this.boundsSprite.x)
{
this.sprite.x = this.boundsSprite.x;
}
else if ((this.sprite.x + this.sprite.width) > (this.boundsSprite.x + this.boundsSprite.width))
{
this.sprite.x = (this.boundsSprite.x + this.boundsSprite.width) - this.sprite.width;
}
if (this.sprite.y < this.boundsSprite.y)
{
this.sprite.y = this.boundsSprite.y;
}
else if ((this.sprite.y + this.sprite.height) > (this.boundsSprite.y + this.boundsSprite.height))
{
this.sprite.y = (this.boundsSprite.y + this.boundsSprite.height) - this.sprite.height;
}
}
}
+18 -5
View File
@@ -346,25 +346,25 @@ Phaser.Sound.prototype = {
{
if (this.loop)
{
//console.log('loop1');
// console.log('loop1');
// won't work with markers, needs to reset the position
this.onLoop.dispatch(this);
if (this.currentMarker === '')
{
//console.log('loop2');
// console.log('loop2');
this.currentTime = 0;
this.startTime = this.game.time.now;
}
else
{
//console.log('loop3');
// console.log('loop3');
this.play(this.currentMarker, 0, this.volume, true, true);
}
}
else
{
//console.log('stopping, no loop for marker');
// console.log('stopping, no loop for marker');
this.stop();
}
}
@@ -642,7 +642,20 @@ Phaser.Sound.prototype = {
this._sound = this.context.createBufferSource();
this._sound.buffer = this._buffer;
this._sound.connect(this.gainNode);
if (this.externalNode)
{
this._sound.connect(this.externalNode.input);
}
else
{
this._sound.connect(this.gainNode);
}
if (this.loop)
{
this._sound.loop = true;
}
if (typeof this._sound.start === 'undefined')
{
+1 -2
View File
@@ -260,7 +260,7 @@ Phaser.StageScaleMode.prototype = {
this._width = this.width;
this._height = this.height;
console.log('startFullScreen', this._width, this._height);
// console.log('startFullScreen', this._width, this._height);
if (element['requestFullScreen'])
{
@@ -328,7 +328,6 @@ Phaser.StageScaleMode.prototype = {
this.game.stage.scale.setShowAll();
this.game.stage.scale.refresh();
}
}
else
{