2016-12-06 16:18:28 +00:00
|
|
|
/**
|
|
|
|
* @author Richard Davey <rich@photonstorm.com>
|
|
|
|
* @copyright 2016 Photon Storm Ltd.
|
|
|
|
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
|
|
|
*/
|
|
|
|
|
2016-12-15 17:15:47 +00:00
|
|
|
var Extend = require('../utils/object/Extend');
|
|
|
|
|
2016-12-06 16:18:28 +00:00
|
|
|
/**
|
|
|
|
* A Frame is a section of a Texture.
|
|
|
|
*
|
2017-01-16 22:43:46 +00:00
|
|
|
* @class Phaser.Frame
|
2016-12-06 16:18:28 +00:00
|
|
|
* @constructor
|
|
|
|
* @param {Phaser.Texture} texture - The Texture this Frame belongs to.
|
|
|
|
* @param {string} name - The unique (within the Texture) name of this Frame.
|
|
|
|
* @param {number} x - X position of the frame within the Texture.
|
|
|
|
* @param {number} y - Y position of the frame within the Texture.
|
|
|
|
* @param {number} width - Width of the frame within the Texture.
|
|
|
|
* @param {number} height - Height of the frame within the Texture.
|
|
|
|
*/
|
|
|
|
var Frame = function (texture, name, sourceIndex, x, y, width, height)
|
|
|
|
{
|
|
|
|
/**
|
|
|
|
* @property {Phaser.Texture} texture - The Texture this frame belongs to.
|
|
|
|
*/
|
|
|
|
this.texture = texture;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @property {string} name - The name of this frame within the Texture.
|
|
|
|
*/
|
|
|
|
this.name = name;
|
|
|
|
|
|
|
|
this.source = texture.source[sourceIndex];
|
|
|
|
|
|
|
|
this.sourceIndex = sourceIndex;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @property {number} cutX - X position within the source image to cut from.
|
|
|
|
*/
|
|
|
|
this.cutX = x;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @property {number} cutY - Y position within the source image to cut from.
|
|
|
|
*/
|
|
|
|
this.cutY = y;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @property {number} cutWidth - The width of the area in the source image to cut.
|
|
|
|
*/
|
|
|
|
this.cutWidth = width;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @property {number} cutHeight - The height of the area in the source image to cut.
|
|
|
|
*/
|
|
|
|
this.cutHeight = height;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @property {number} x - The X rendering offset of this Frame, taking trim into account.
|
|
|
|
*/
|
|
|
|
this.x = 0;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @property {number} y - The Y rendering offset of this Frame, taking trim into account.
|
|
|
|
*/
|
|
|
|
this.y = 0;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @property {number} width - The rendering width of this Frame, taking trim into account.
|
|
|
|
*/
|
|
|
|
this.width = width;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @property {number} height - The rendering height of this Frame, taking trim into account.
|
|
|
|
*/
|
|
|
|
this.height = height;
|
|
|
|
|
2017-03-02 02:05:59 +00:00
|
|
|
/**
|
|
|
|
* @property {number} width - The rendering width of this Frame, taking trim into account.
|
|
|
|
*/
|
|
|
|
this.centerX = Math.floor(width / 2);
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @property {number} height - The rendering height of this Frame, taking trim into account.
|
|
|
|
*/
|
|
|
|
this.centerY = Math.floor(height / 2);
|
|
|
|
|
2016-12-06 16:18:28 +00:00
|
|
|
/**
|
|
|
|
* Is this frame is rotated or not in the Texture?
|
|
|
|
* Rotation allows you to use rotated frames in texture atlas packing.
|
|
|
|
* It has nothing to do with Sprite rotation.
|
|
|
|
*
|
|
|
|
* @property {boolean} rotated
|
|
|
|
* @default
|
|
|
|
*/
|
|
|
|
this.rotated = false;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Is this a tiling texture? As used by the likes of a TilingSprite.
|
|
|
|
* TODO: Try and remove this, it shouldn't be here
|
|
|
|
*
|
|
|
|
* @property {boolean} isTiling
|
|
|
|
* @default
|
|
|
|
*/
|
|
|
|
this.isTiling = false;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* This will let a renderer know that a tinted parent has updated its texture.
|
|
|
|
* TODO: Try and remove this, it shouldn't be here
|
|
|
|
*
|
|
|
|
* @property {boolean} requiresReTint
|
|
|
|
* @default
|
|
|
|
*/
|
|
|
|
this.requiresReTint = false;
|
|
|
|
|
|
|
|
// Over-rides the Renderer setting? -1 = use Renderer Setting, 0 = No rounding, 1 = Round
|
|
|
|
this.autoRound = -1;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The un-modified source frame, trim and UV data.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @property {object} data
|
|
|
|
*/
|
|
|
|
this.data = {
|
|
|
|
cut: {
|
|
|
|
x: x,
|
|
|
|
y: y,
|
|
|
|
w: width,
|
|
|
|
h: height,
|
|
|
|
r: x + width,
|
|
|
|
b: y + height
|
|
|
|
},
|
|
|
|
trim: false,
|
|
|
|
sourceSize: {
|
|
|
|
w: width,
|
|
|
|
h: height
|
|
|
|
},
|
|
|
|
spriteSourceSize: {
|
|
|
|
x: 0,
|
|
|
|
y: 0,
|
|
|
|
w: width,
|
|
|
|
h: height
|
|
|
|
},
|
|
|
|
uvs: {
|
|
|
|
x0: 0,
|
|
|
|
y0: 0,
|
|
|
|
x1: 0,
|
|
|
|
y1: 0,
|
|
|
|
x2: 0,
|
|
|
|
y2: 0,
|
|
|
|
x3: 0,
|
|
|
|
y3: 0
|
2017-01-16 22:43:46 +00:00
|
|
|
},
|
2017-01-26 04:06:10 +00:00
|
|
|
radius: 0.5 * Math.sqrt(width * width + height * height),
|
2017-01-16 22:43:46 +00:00
|
|
|
drawImage: {
|
|
|
|
sx: x,
|
|
|
|
sy: y,
|
|
|
|
sWidth: width,
|
|
|
|
sHeight: height,
|
|
|
|
dWidth: width,
|
|
|
|
dHeight: height
|
2016-12-06 16:18:28 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
this.updateUVs();
|
|
|
|
};
|
|
|
|
|
|
|
|
Frame.prototype.constructor = Frame;
|
|
|
|
|
|
|
|
Frame.prototype = {
|
|
|
|
|
|
|
|
/**
|
|
|
|
* If the frame was trimmed when added to the Texture Atlas, this records the trim and source data.
|
|
|
|
*
|
|
|
|
* @method Phaser.TextureFrame#setTrim
|
|
|
|
* @param {number} actualWidth - The width of the frame before being trimmed.
|
|
|
|
* @param {number} actualHeight - The height of the frame before being trimmed.
|
|
|
|
* @param {number} destX - The destination X position of the trimmed frame for display.
|
|
|
|
* @param {number} destY - The destination Y position of the trimmed frame for display.
|
|
|
|
* @param {number} destWidth - The destination width of the trimmed frame for display.
|
|
|
|
* @param {number} destHeight - The destination height of the trimmed frame for display.
|
|
|
|
*/
|
|
|
|
setTrim: function (actualWidth, actualHeight, destX, destY, destWidth, destHeight)
|
|
|
|
{
|
2017-01-16 22:43:46 +00:00
|
|
|
var data = this.data;
|
|
|
|
var ss = data.spriteSourceSize;
|
|
|
|
|
2016-12-06 16:18:28 +00:00
|
|
|
// Store actual values
|
|
|
|
|
2017-01-16 22:43:46 +00:00
|
|
|
data.trim = true;
|
2016-12-06 16:18:28 +00:00
|
|
|
|
2017-01-16 22:43:46 +00:00
|
|
|
data.sourceSize.w = actualWidth;
|
|
|
|
data.sourceSize.h = actualHeight;
|
2016-12-06 16:18:28 +00:00
|
|
|
|
2017-01-16 22:43:46 +00:00
|
|
|
ss.x = destX;
|
|
|
|
ss.y = destY;
|
|
|
|
ss.w = destWidth;
|
|
|
|
ss.h = destHeight;
|
2016-12-06 16:18:28 +00:00
|
|
|
|
|
|
|
// Adjust properties
|
|
|
|
this.x = destX;
|
|
|
|
this.y = destY;
|
2017-03-02 02:05:59 +00:00
|
|
|
|
2016-12-06 16:18:28 +00:00
|
|
|
this.width = destWidth;
|
|
|
|
this.height = destHeight;
|
|
|
|
|
2017-03-02 02:05:59 +00:00
|
|
|
this.centerX = Math.floor(destWidth / 2);
|
|
|
|
this.centerY = Math.floor(destHeight / 2);
|
|
|
|
|
2016-12-06 16:18:28 +00:00
|
|
|
this.updateUVs();
|
|
|
|
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Updates the internal WebGL UV cache.
|
|
|
|
*
|
|
|
|
* @method updateUVs
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
updateUVs: function ()
|
|
|
|
{
|
|
|
|
var tw = this.source.width;
|
|
|
|
var th = this.source.height;
|
|
|
|
var uvs = this.data.uvs;
|
|
|
|
|
|
|
|
uvs.x0 = this.cutX / tw;
|
|
|
|
uvs.y0 = this.cutY / th;
|
|
|
|
|
2017-01-20 17:58:41 +00:00
|
|
|
uvs.x1 = this.cutX / tw;
|
|
|
|
uvs.y1 = (this.cutY + this.cutHeight) / th;
|
2016-12-06 16:18:28 +00:00
|
|
|
|
|
|
|
uvs.x2 = (this.cutX + this.cutWidth) / tw;
|
|
|
|
uvs.y2 = (this.cutY + this.cutHeight) / th;
|
|
|
|
|
2017-01-20 17:58:41 +00:00
|
|
|
uvs.x3 = (this.cutX + this.cutWidth) / tw;
|
|
|
|
uvs.y3 = this.cutY / th;
|
2016-12-06 16:18:28 +00:00
|
|
|
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Updates the internal WebGL UV cache.
|
|
|
|
*
|
|
|
|
* @method updateUVsInverted
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
updateUVsInverted: function ()
|
|
|
|
{
|
|
|
|
var tw = this.source.width;
|
|
|
|
var th = this.source.height;
|
|
|
|
var uvs = this.data.uvs;
|
|
|
|
|
2017-01-23 18:30:25 +00:00
|
|
|
uvs.x3 = (this.cutX + this.cutHeight) / tw;
|
|
|
|
uvs.y3 = (this.cutY + this.cutWidth) / th;
|
2016-12-06 16:18:28 +00:00
|
|
|
|
2017-01-23 18:30:25 +00:00
|
|
|
uvs.x2 = this.cutX / tw;
|
2016-12-06 16:18:28 +00:00
|
|
|
uvs.y2 = (this.cutY + this.cutWidth) / th;
|
2017-01-23 18:30:25 +00:00
|
|
|
|
|
|
|
uvs.x1 = this.cutX / tw;
|
|
|
|
uvs.y1 = this.cutY / th;
|
|
|
|
|
|
|
|
uvs.x0 = (this.cutX + this.cutHeight) / tw;
|
|
|
|
uvs.y0 = this.cutY / th;
|
2016-12-06 16:18:28 +00:00
|
|
|
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
clone: function ()
|
|
|
|
{
|
2016-12-15 17:15:47 +00:00
|
|
|
var clone = new Frame(this.texture, this.name, this.sourceIndex);
|
2016-12-06 16:18:28 +00:00
|
|
|
|
|
|
|
clone.cutX = this.cutX;
|
|
|
|
clone.cutY = this.cutY;
|
|
|
|
clone.cutWidth = this.cutWidth;
|
|
|
|
clone.cutHeight = this.cutHeight;
|
|
|
|
|
|
|
|
clone.x = this.x;
|
|
|
|
clone.y = this.y;
|
2017-03-02 02:05:59 +00:00
|
|
|
|
2016-12-06 16:18:28 +00:00
|
|
|
clone.width = this.width;
|
|
|
|
clone.height = this.height;
|
|
|
|
|
2017-03-02 02:05:59 +00:00
|
|
|
clone.centerX = this.centerX;
|
|
|
|
clone.centerY = this.centerY;
|
|
|
|
|
2016-12-06 16:18:28 +00:00
|
|
|
clone.rotated = this.rotated;
|
|
|
|
|
2016-12-15 17:15:47 +00:00
|
|
|
clone.data = Extend(true, clone.data, this.data);
|
2016-12-06 16:18:28 +00:00
|
|
|
|
|
|
|
clone.updateUVs();
|
|
|
|
|
|
|
|
return clone;
|
|
|
|
},
|
|
|
|
|
|
|
|
destroy: function ()
|
|
|
|
{
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
Object.defineProperties(Frame.prototype, {
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The width of the Frame in its un-trimmed, un-padded state, as prepared in the art package,
|
|
|
|
* before being packed.
|
|
|
|
*
|
|
|
|
* @name Phaser.TextureFrame#realWidth
|
|
|
|
* @property {any} realWidth
|
|
|
|
*/
|
|
|
|
realWidth: {
|
|
|
|
|
|
|
|
enumerable: true,
|
|
|
|
|
|
|
|
get: function ()
|
|
|
|
{
|
|
|
|
return this.data.sourceSize.w;
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The height of the Frame in its un-trimmed, un-padded state, as prepared in the art package,
|
|
|
|
* before being packed.
|
|
|
|
*
|
|
|
|
* @name Phaser.TextureFrame#realHeight
|
|
|
|
* @property {any} realHeight
|
|
|
|
*/
|
|
|
|
realHeight: {
|
|
|
|
|
|
|
|
enumerable: true,
|
|
|
|
|
|
|
|
get: function ()
|
|
|
|
{
|
|
|
|
return this.data.sourceSize.h;
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* UVs
|
|
|
|
*
|
|
|
|
* @name Phaser.TextureFrame#uvs
|
|
|
|
* @property {Object} uvs
|
|
|
|
*/
|
|
|
|
uvs: {
|
|
|
|
|
|
|
|
enumerable: true,
|
|
|
|
|
|
|
|
get: function ()
|
|
|
|
{
|
|
|
|
return this.data.uvs;
|
|
|
|
}
|
|
|
|
|
2017-01-16 22:43:46 +00:00
|
|
|
},
|
|
|
|
|
2017-01-26 04:06:10 +00:00
|
|
|
/**
|
|
|
|
* The radius of the Frame (derived from sqrt(w * w + h * h) / 2)
|
|
|
|
* @name Phaser.TextureFrame#radius
|
|
|
|
* @property {number} radius
|
|
|
|
*/
|
|
|
|
radius: {
|
|
|
|
|
|
|
|
enumerable: true,
|
|
|
|
|
|
|
|
get: function ()
|
|
|
|
{
|
|
|
|
return this.data.radius;
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
2017-04-18 14:31:30 +00:00
|
|
|
/**
|
|
|
|
* Is the Frame trimmed?
|
|
|
|
* @name Phaser.TextureFrame#trimmed
|
|
|
|
* @property {boolean} trimmed
|
|
|
|
*/
|
|
|
|
trimmed: {
|
|
|
|
|
|
|
|
enumerable: true,
|
|
|
|
|
|
|
|
get: function ()
|
|
|
|
{
|
|
|
|
return this.data.trim;
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
2017-01-16 22:43:46 +00:00
|
|
|
/**
|
|
|
|
* Canvas Draw Image data
|
|
|
|
*
|
|
|
|
* @name Phaser.TextureFrame#canvasData
|
|
|
|
* @property {Object} canvasData
|
|
|
|
*/
|
|
|
|
canvasData: {
|
|
|
|
|
|
|
|
enumerable: true,
|
|
|
|
|
|
|
|
get: function ()
|
|
|
|
{
|
|
|
|
return this.data.drawImage;
|
|
|
|
}
|
|
|
|
|
2016-12-06 16:18:28 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
module.exports = Frame;
|