mirror of
https://github.com/photonstorm/phaser
synced 2024-12-01 00:49:41 +00:00
399 lines
13 KiB
JavaScript
399 lines
13 KiB
JavaScript
/**
|
|
* @author Richard Davey <rich@photonstorm.com>
|
|
* @copyright 2016 Photon Storm Ltd.
|
|
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
|
*/
|
|
|
|
/**
|
|
* The Bounds component contains properties related to the bounds of the Game Object.
|
|
*
|
|
* @class
|
|
*/
|
|
Phaser.Component.Bounds = function () {};
|
|
|
|
Phaser.Component.Bounds.prototype = {
|
|
|
|
/**
|
|
* The amount the Game Object is visually offset from its x coordinate.
|
|
* This is the same as `width * anchor.x`.
|
|
* It will only be > 0 if anchor.x is not equal to zero.
|
|
*
|
|
* @property {number} offsetX
|
|
* @readOnly
|
|
*/
|
|
offsetX: {
|
|
|
|
get: function () {
|
|
|
|
return this.anchor.x * this.width;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* The amount the Game Object is visually offset from its y coordinate.
|
|
* This is the same as `height * anchor.y`.
|
|
* It will only be > 0 if anchor.y is not equal to zero.
|
|
*
|
|
* @property {number} offsetY
|
|
* @readOnly
|
|
*/
|
|
offsetY: {
|
|
|
|
get: function () {
|
|
|
|
return this.anchor.y * this.height;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* The center x coordinate of the Game Object.
|
|
* This is the same as `(x - offsetX) + (width / 2)`.
|
|
*
|
|
* @property {number} centerX
|
|
*/
|
|
centerX: {
|
|
|
|
get: function () {
|
|
|
|
return (this.x - this.offsetX) + (this.width * 0.5);
|
|
|
|
},
|
|
|
|
set: function (value) {
|
|
|
|
this.x = (value + this.offsetX) - (this.width * 0.5);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* The center y coordinate of the Game Object.
|
|
* This is the same as `(y - offsetY) + (height / 2)`.
|
|
*
|
|
* @property {number} centerY
|
|
*/
|
|
centerY: {
|
|
|
|
get: function () {
|
|
|
|
return (this.y - this.offsetY) + (this.height * 0.5);
|
|
|
|
},
|
|
|
|
set: function (value) {
|
|
|
|
this.y = (value + this.offsetY) - (this.height * 0.5);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* The left coordinate of the Game Object.
|
|
* This is the same as `x - offsetX`.
|
|
*
|
|
* @property {number} left
|
|
*/
|
|
left: {
|
|
|
|
get: function () {
|
|
|
|
return this.x - this.offsetX;
|
|
|
|
},
|
|
|
|
set: function (value) {
|
|
|
|
this.x = value + this.offsetX;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* The right coordinate of the Game Object.
|
|
* This is the same as `x + width - offsetX`.
|
|
*
|
|
* @property {number} right
|
|
*/
|
|
right: {
|
|
|
|
get: function () {
|
|
|
|
return (this.x + this.width) - this.offsetX;
|
|
|
|
},
|
|
|
|
set: function (value) {
|
|
|
|
this.x = value - (this.width) + this.offsetX;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* The y coordinate of the Game Object.
|
|
* This is the same as `y - offsetY`.
|
|
*
|
|
* @property {number} top
|
|
*/
|
|
top: {
|
|
|
|
get: function () {
|
|
|
|
return this.y - this.offsetY;
|
|
|
|
},
|
|
|
|
set: function (value) {
|
|
|
|
this.y = value + this.offsetY;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* The sum of the y and height properties.
|
|
* This is the same as `y + height - offsetY`.
|
|
*
|
|
* @property {number} bottom
|
|
*/
|
|
bottom: {
|
|
|
|
get: function () {
|
|
|
|
return (this.y + this.height) - this.offsetY;
|
|
|
|
},
|
|
|
|
set: function (value) {
|
|
|
|
this.y = value - (this.height) + this.offsetY;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Aligns this Game Object within another Game Object, or Rectangle, known as the
|
|
* 'container', to one of 9 possible positions.
|
|
*
|
|
* The container must be a Game Object, or Phaser.Rectangle object. This can include properties
|
|
* such as `World.bounds` or `Camera.view`, for aligning Game Objects within the world
|
|
* and camera bounds. Or it can include other Sprites, Images, Text objects, BitmapText,
|
|
* TileSprites or Buttons.
|
|
*
|
|
* Please note that aligning a Sprite to another Game Object does **not** make it a child of
|
|
* the container. It simply modifies its position coordinates so it aligns with it.
|
|
*
|
|
* The position constants you can use are:
|
|
*
|
|
* `Phaser.TOP_LEFT`, `Phaser.TOP_CENTER`, `Phaser.TOP_RIGHT`, `Phaser.LEFT_CENTER`,
|
|
* `Phaser.CENTER`, `Phaser.RIGHT_CENTER`, `Phaser.BOTTOM_LEFT`,
|
|
* `Phaser.BOTTOM_CENTER` and `Phaser.BOTTOM_RIGHT`.
|
|
*
|
|
* The Game Objects are placed in such a way that their _bounds_ align with the
|
|
* container, taking into consideration rotation, scale and the anchor property.
|
|
* This allows you to neatly align Game Objects, irrespective of their position value.
|
|
*
|
|
* The optional `offsetX` and `offsetY` arguments allow you to apply extra spacing to the final
|
|
* aligned position of the Game Object. For example:
|
|
*
|
|
* `sprite.alignIn(background, Phaser.BOTTOM_RIGHT, -20, -20)`
|
|
*
|
|
* Would align the `sprite` to the bottom-right, but moved 20 pixels in from the corner.
|
|
* Think of the offsets as applying an adjustment to the containers bounds before the alignment takes place.
|
|
* So providing a negative offset will 'shrink' the container bounds by that amount, and providing a positive
|
|
* one expands it.
|
|
*
|
|
* @method
|
|
* @param {Phaser.Rectangle|Phaser.Sprite|Phaser.Image|Phaser.Text|Phaser.BitmapText|Phaser.Button|Phaser.Graphics|Phaser.TileSprite} container - The Game Object or Rectangle with which to align this Game Object to. Can also include properties such as `World.bounds` or `Camera.view`.
|
|
* @param {integer} [position] - The position constant. One of `Phaser.TOP_LEFT` (default), `Phaser.TOP_CENTER`, `Phaser.TOP_RIGHT`, `Phaser.LEFT_CENTER`, `Phaser.CENTER`, `Phaser.RIGHT_CENTER`, `Phaser.BOTTOM_LEFT`, `Phaser.BOTTOM_CENTER` or `Phaser.BOTTOM_RIGHT`.
|
|
* @param {integer} [offsetX=0] - A horizontal adjustment of the Containers bounds, applied to the aligned position of the Game Object. Use a negative value to shrink the bounds, positive to increase it.
|
|
* @param {integer} [offsetY=0] - A vertical adjustment of the Containers bounds, applied to the aligned position of the Game Object. Use a negative value to shrink the bounds, positive to increase it.
|
|
* @return {Object} This Game Object.
|
|
*/
|
|
alignIn: function (container, position, offsetX, offsetY) {
|
|
|
|
if (offsetX === undefined) { offsetX = 0; }
|
|
if (offsetY === undefined) { offsetY = 0; }
|
|
|
|
switch (position)
|
|
{
|
|
default:
|
|
case Phaser.TOP_LEFT:
|
|
this.left = container.left - offsetX;
|
|
this.top = container.top - offsetY;
|
|
break;
|
|
|
|
case Phaser.TOP_CENTER:
|
|
this.centerX = container.centerX + offsetX;
|
|
this.top = container.top - offsetY;
|
|
break;
|
|
|
|
case Phaser.TOP_RIGHT:
|
|
this.right = container.right + offsetX;
|
|
this.top = container.top - offsetY;
|
|
break;
|
|
|
|
case Phaser.LEFT_CENTER:
|
|
this.left = container.left - offsetX;
|
|
this.centerY = container.centerY + offsetY;
|
|
break;
|
|
|
|
case Phaser.CENTER:
|
|
this.centerX = container.centerX + offsetX;
|
|
this.centerY = container.centerY + offsetY;
|
|
break;
|
|
|
|
case Phaser.RIGHT_CENTER:
|
|
this.right = container.right + offsetX;
|
|
this.centerY = container.centerY + offsetY;
|
|
break;
|
|
|
|
case Phaser.BOTTOM_LEFT:
|
|
this.left = container.left - offsetX;
|
|
this.bottom = container.bottom + offsetY;
|
|
break;
|
|
|
|
case Phaser.BOTTOM_CENTER:
|
|
this.centerX = container.centerX + offsetX;
|
|
this.bottom = container.bottom + offsetY;
|
|
break;
|
|
|
|
case Phaser.BOTTOM_RIGHT:
|
|
this.right = container.right + offsetX;
|
|
this.bottom = container.bottom + offsetY;
|
|
break;
|
|
}
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
/**
|
|
* Aligns this Game Object to the side of another Game Object, or Rectangle, known as the
|
|
* 'parent', in one of 11 possible positions.
|
|
*
|
|
* The parent must be a Game Object, or Phaser.Rectangle object. This can include properties
|
|
* such as `World.bounds` or `Camera.view`, for aligning Game Objects within the world
|
|
* and camera bounds. Or it can include other Sprites, Images, Text objects, BitmapText,
|
|
* TileSprites or Buttons.
|
|
*
|
|
* Please note that aligning a Sprite to another Game Object does **not** make it a child of
|
|
* the parent. It simply modifies its position coordinates so it aligns with it.
|
|
*
|
|
* The position constants you can use are:
|
|
*
|
|
* `Phaser.TOP_LEFT` (default), `Phaser.TOP_CENTER`, `Phaser.TOP_RIGHT`, `Phaser.LEFT_TOP`,
|
|
* `Phaser.LEFT_CENTER`, `Phaser.LEFT_BOTTOM`, `Phaser.RIGHT_TOP`, `Phaser.RIGHT_CENTER`,
|
|
* `Phaser.RIGHT_BOTTOM`, `Phaser.BOTTOM_LEFT`, `Phaser.BOTTOM_CENTER`
|
|
* and `Phaser.BOTTOM_RIGHT`.
|
|
*
|
|
* The Game Objects are placed in such a way that their _bounds_ align with the
|
|
* parent, taking into consideration rotation, scale and the anchor property.
|
|
* This allows you to neatly align Game Objects, irrespective of their position value.
|
|
*
|
|
* The optional `offsetX` and `offsetY` arguments allow you to apply extra spacing to the final
|
|
* aligned position of the Game Object. For example:
|
|
*
|
|
* `sprite.alignTo(background, Phaser.BOTTOM_RIGHT, -20, -20)`
|
|
*
|
|
* Would align the `sprite` to the bottom-right, but moved 20 pixels in from the corner.
|
|
* Think of the offsets as applying an adjustment to the parents bounds before the alignment takes place.
|
|
* So providing a negative offset will 'shrink' the parent bounds by that amount, and providing a positive
|
|
* one expands it.
|
|
*
|
|
* @method
|
|
* @param {Phaser.Rectangle|Phaser.Sprite|Phaser.Image|Phaser.Text|Phaser.BitmapText|Phaser.Button|Phaser.Graphics|Phaser.TileSprite} parent - The Game Object or Rectangle with which to align this Game Object to. Can also include properties such as `World.bounds` or `Camera.view`.
|
|
* @param {integer} [position] - The position constant. One of `Phaser.TOP_LEFT`, `Phaser.TOP_CENTER`, `Phaser.TOP_RIGHT`, `Phaser.LEFT_TOP`, `Phaser.LEFT_CENTER`, `Phaser.LEFT_BOTTOM`, `Phaser.RIGHT_TOP`, `Phaser.RIGHT_CENTER`, `Phaser.RIGHT_BOTTOM`, `Phaser.BOTTOM_LEFT`, `Phaser.BOTTOM_CENTER` or `Phaser.BOTTOM_RIGHT`.
|
|
* @param {integer} [offsetX=0] - A horizontal adjustment of the Containers bounds, applied to the aligned position of the Game Object. Use a negative value to shrink the bounds, positive to increase it.
|
|
* @param {integer} [offsetY=0] - A vertical adjustment of the Containers bounds, applied to the aligned position of the Game Object. Use a negative value to shrink the bounds, positive to increase it.
|
|
* @return {Object} This Game Object.
|
|
*/
|
|
alignTo: function (parent, position, offsetX, offsetY) {
|
|
|
|
if (offsetX === undefined) { offsetX = 0; }
|
|
if (offsetY === undefined) { offsetY = 0; }
|
|
|
|
switch (position)
|
|
{
|
|
default:
|
|
case Phaser.TOP_LEFT:
|
|
this.left = parent.left - offsetX;
|
|
this.bottom = parent.top - offsetY;
|
|
break;
|
|
|
|
case Phaser.TOP_CENTER:
|
|
this.centerX = parent.centerX + offsetX;
|
|
this.bottom = parent.top - offsetY;
|
|
break;
|
|
|
|
case Phaser.TOP_RIGHT:
|
|
this.right = parent.right + offsetX;
|
|
this.bottom = parent.top - offsetY;
|
|
break;
|
|
|
|
case Phaser.LEFT_TOP:
|
|
this.right = parent.left - offsetX;
|
|
this.top = parent.top - offsetY;
|
|
break;
|
|
|
|
case Phaser.LEFT_CENTER:
|
|
this.right = parent.left - offsetX;
|
|
this.centerY = parent.centerY + offsetY;
|
|
break;
|
|
|
|
case Phaser.LEFT_BOTTOM:
|
|
this.right = parent.left - offsetX;
|
|
this.bottom = parent.bottom + offsetY;
|
|
break;
|
|
|
|
case Phaser.RIGHT_TOP:
|
|
this.left = parent.right + offsetX;
|
|
this.top = parent.top - offsetY;
|
|
break;
|
|
|
|
case Phaser.RIGHT_CENTER:
|
|
this.left = parent.right + offsetX;
|
|
this.centerY = parent.centerY + offsetY;
|
|
break;
|
|
|
|
case Phaser.RIGHT_BOTTOM:
|
|
this.left = parent.right + offsetX;
|
|
this.bottom = parent.bottom + offsetY;
|
|
break;
|
|
|
|
case Phaser.BOTTOM_LEFT:
|
|
this.left = parent.left - offsetX;
|
|
this.top = parent.bottom + offsetY;
|
|
break;
|
|
|
|
case Phaser.BOTTOM_CENTER:
|
|
this.centerX = parent.centerX + offsetX;
|
|
this.top = parent.bottom + offsetY;
|
|
break;
|
|
|
|
case Phaser.BOTTOM_RIGHT:
|
|
this.right = parent.right + offsetX;
|
|
this.top = parent.bottom + offsetY;
|
|
break;
|
|
}
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
// Phaser.Group extensions
|
|
|
|
Phaser.Group.prototype.alignIn = Phaser.Component.Bounds.prototype.alignIn;
|
|
Phaser.Group.prototype.alignTo = Phaser.Component.Bounds.prototype.alignTo;
|