Frame
A Frame is a section of a Texture. It defines a rectangular sub-region within a Texture Source, storing its position, dimensions, UV coordinates, and optional trim data (for packed atlas frames with whitespace removed). Frames are the primary unit of texture addressing used by Game Objects -- when a Sprite displays a particular image, it references a Frame.
Constructor
new Frame(texture, name, sourceIndex, x, y, width, height)
Parameters
| name | type | optional | description |
|---|---|---|---|
| texture | Phaser.Textures.Texture | No | The Texture this Frame is a part of. |
| name | number | string | No | The name of this Frame. The name is unique within the Texture. |
| sourceIndex | number | No | The index of the TextureSource that this Frame is a part of. |
| x | number | No | The x coordinate of the top-left of this Frame. |
| y | number | No | The y coordinate of the top-left of this Frame. |
| width | number | No | The width of this Frame. |
| height | number | No | The height of this Frame. |
Scope: static
Source: src/textures/Frame.js#L11
Since: 3.0.0
Public Members
autoRound
autoRound: number
Description:
Overrides the Renderer setting. -1 = use Renderer Setting 0 = No rounding 1 = Round
Source: src/textures/Frame.js#L231
Since: 3.0.0
canvasData
canvasData: object
Description:
The Canvas drawImage data object.
Source: src/textures/Frame.js#L958
Since: 3.0.0
centerX
centerX: number
Description:
The x center of this frame, floored.
Source: src/textures/Frame.js#L169
Since: 3.0.0
centerY
centerY: number
Description:
The y center of this frame, floored.
Source: src/textures/Frame.js#L178
Since: 3.0.0
customData
customData: object
Description:
Any Frame specific custom data can be stored here.
Source: src/textures/Frame.js#L244
Since: 3.0.0
customPivot
customPivot: boolean
Description:
Does this Frame have a custom pivot point?
Source: src/textures/Frame.js#L207
Since: 3.0.0
cutHeight
cutHeight: number
Description:
The height of the area in the source image to cut.
Source: src/textures/Frame.js#L102
Since: 3.0.0
cutWidth
cutWidth: number
Description:
The width of the area in the source image to cut.
Source: src/textures/Frame.js#L93
Since: 3.0.0
cutX
cutX: number
Description:
X position within the source image to cut from.
Source: src/textures/Frame.js#L75
Since: 3.0.0
cutY
cutY: number
Description:
Y position within the source image to cut from.
Source: src/textures/Frame.js#L84
Since: 3.0.0
glTexture
glTexture: Phaser.Renderer.WebGL.Wrappers.WebGLTextureWrapper
Description:
A reference to the Texture Source WebGL Texture that this Frame is using.
Source: src/textures/Frame.js#L838
Since: 3.11.0
halfHeight
halfHeight: number
Description:
Half the height, floored. Precalculated for the renderer.
Source: src/textures/Frame.js#L159
Since: 3.0.0
halfWidth
halfWidth: number
Description:
Half the width, floored. Precalculated for the renderer.
Source: src/textures/Frame.js#L149
Since: 3.0.0
height
height: number
Description:
The rendering height of this Frame, taking trim into account.
Source: src/textures/Frame.js#L140
Since: 3.0.0
is3Slice
is3Slice: boolean
Description:
If the Frame has scale9 border data, is it 3-slice or 9-slice data?
Source: src/textures/Frame.js#L941
Since: 3.70.0
name
name: string
Description:
The name of this Frame. The name is unique within the Texture.
Source: src/textures/Frame.js#L47
Since: 3.0.0
pivotX
pivotX: number
Description:
The horizontal pivot point of this Frame.
Source: src/textures/Frame.js#L187
Since: 3.0.0
pivotY
pivotY: number
Description:
The vertical pivot point of this Frame.
Source: src/textures/Frame.js#L197
Since: 3.0.0
radius
radius: number
Description:
The radius of the Frame (derived from sqrt(w * w + h * h) / 2)
Source: src/textures/Frame.js#L890
Since: 3.0.0
realHeight
realHeight: number
Description:
The height of the Frame in its un-trimmed, un-padded state, as prepared in the art package, before being packed.
Source: src/textures/Frame.js#L872
Since: 3.0.0
realWidth
realWidth: number
Description:
The width of the Frame in its un-trimmed, un-padded state, as prepared in the art package, before being packed.
Source: src/textures/Frame.js#L854
Since: 3.0.0
rotated
rotated: boolean
Description:
CURRENTLY UNSUPPORTED
Is this frame 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.
Source: src/textures/Frame.js#L217
Since: 3.0.0
scale9
scale9: boolean
Description:
Does the Frame have scale9 border data?
Source: src/textures/Frame.js#L924
Since: 3.70.0
source
source: Phaser.Textures.TextureSource
Description:
The TextureSource this Frame is part of.
Source: src/textures/Frame.js#L57
Since: 3.0.0
sourceIndex
sourceIndex: number
Description:
The index of the TextureSource in the Texture sources array.
Source: src/textures/Frame.js#L66
Since: 3.0.0
texture
texture: Phaser.Textures.Texture
Description:
The Texture this Frame is a part of.
Source: src/textures/Frame.js#L38
Since: 3.0.0
trimmed
trimmed: boolean
Description:
Is the Frame trimmed or not?
Source: src/textures/Frame.js#L907
Since: 3.0.0
u0
u0: number
Description:
WebGL UV u0 value.
Source: src/textures/Frame.js#L253
Since: 3.11.0
u1
u1: number
Description:
WebGL UV u1 value.
Source: src/textures/Frame.js#L273
Since: 3.11.0
v0
v0: number
Description:
WebGL UV v0 value.
Source: src/textures/Frame.js#L263
Since: 3.11.0
v1
v1: number
Description:
WebGL UV v1 value.
Source: src/textures/Frame.js#L283
Since: 3.11.0
width
width: number
Description:
The rendering width of this Frame, taking trim into account.
Source: src/textures/Frame.js#L131
Since: 3.0.0
x
x: number
Description:
The X rendering offset of this Frame, taking trim into account.
Source: src/textures/Frame.js#L111
Since: 3.0.0
y
y: number
Description:
The Y rendering offset of this Frame, taking trim into account.
Source: src/textures/Frame.js#L121
Since: 3.0.0
Public Methods
clone
<instance> clone()
Description:
Clones this Frame into a new Frame object.
Returns: Phaser.Textures.Frame - A clone of this Frame.
Source: src/textures/Frame.js#L786
Since: 3.0.0
destroy
<instance> destroy()
Description:
Destroys this Frame by nulling its reference to the parent Texture and data objects.
Source: src/textures/Frame.js#L824
Since: 3.0.0
setCropUVs
<instance> setCropUVs(crop, x, y, width, height, flipX, flipY)
Description:
Takes a crop data object and, based on the rectangular region given, calculates the required UV coordinates in order to crop this Frame for WebGL and Canvas rendering.
The crop size as well as coordinates can not exceed the size of the frame.
This is called directly by the Game Object Texture Components setCrop method. Please use that method to crop a Game Object.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| crop | object | No | The crop data object. This is the GameObject._crop property. |
| x | number | No | The x coordinate to start the crop from. Cannot be negative or exceed the Frame width. |
| y | number | No | The y coordinate to start the crop from. Cannot be negative or exceed the Frame height. |
| width | number | No | The width of the crop rectangle. Cannot exceed the Frame width. |
| height | number | No | The height of the crop rectangle. Cannot exceed the Frame height. |
| flipX | boolean | No | Does the parent Game Object have flipX set? |
| flipY | boolean | No | Does the parent Game Object have flipY set? |
Returns: object - The updated crop data object.
Source: src/textures/Frame.js#L527
Since: 3.11.0
setCutPosition
<instance> setCutPosition([x], [y])
Description:
Sets the x and y position within the source image to cut from.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| x | number | Yes | 0 | X position within the source image to cut from. |
| y | number | Yes | 0 | Y position within the source image to cut from. |
Returns: Phaser.Textures.Frame - This Frame object.
Source: src/textures/Frame.js#L343
Since: 3.85.0
setCutSize
<instance> setCutSize(width, height)
Description:
Sets the width and height of the area in the source image to cut.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| width | number | No | The width of the area in the source image to cut. |
| height | number | No | The height of the area in the source image to cut. |
Returns: Phaser.Textures.Frame - This Frame object.
Source: src/textures/Frame.js#L365
Since: 3.85.0
setScale9
<instance> setScale9(x, y, width, height)
Description:
Sets the scale9 center rectangle values.
Scale9 is a feature of Texture Packer, allowing you to define a nine-slice scaling grid.
This is set automatically by the JSONArray and JSONHash parsers.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| x | number | No | The left coordinate of the center scale9 rectangle. |
| y | number | No | The top coordinate of the center scale9 rectangle. |
| width | number | No | The width of the center scale9 rectangle. |
| height | number | No | The height of the center scale9 rectangle. |
Returns: Phaser.Textures.Frame - This Frame object.
Source: src/textures/Frame.js#L495
Since: 3.70.0
setSize
<instance> setSize(width, height, [x], [y])
Description:
Sets the width, height, x and y of this Frame.
This is called automatically by the constructor and should rarely be changed on-the-fly.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| width | number | No | The width of the frame before being trimmed. | |
| height | number | No | The height of the frame before being trimmed. | |
| x | number | Yes | 0 | The x coordinate of the top-left of this Frame. |
| y | number | Yes | 0 | The y coordinate of the top-left of this Frame. |
Returns: Phaser.Textures.Frame - This Frame object.
Source: src/textures/Frame.js#L384
Since: 3.7.0
setTrim
<instance> setTrim(actualWidth, actualHeight, destX, destY, destWidth, destHeight)
Description:
If the frame was trimmed when added to the Texture Atlas, this records the trim and source data.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| actualWidth | number | No | The width of the frame before being trimmed. |
| actualHeight | number | No | The height of the frame before being trimmed. |
| destX | number | No | The destination X position of the trimmed frame for display. |
| destY | number | No | The destination Y position of the trimmed frame for display. |
| destWidth | number | No | The destination width of the trimmed frame for display. |
| destHeight | number | No | The destination height of the trimmed frame for display. |
Returns: Phaser.Textures.Frame - This Frame object.
Source: src/textures/Frame.js#L445
Since: 3.0.0
setUVs
<instance> setUVs(width, height, u0, v0, u1, v1)
Description:
Directly sets the canvas and WebGL UV data for this frame.
Use this if you need to override the values that are generated automatically when the Frame is created.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| width | number | No | Width of this frame for the Canvas data. |
| height | number | No | Height of this frame for the Canvas data. |
| u0 | number | No | UV u0 value. |
| v0 | number | No | UV v0 value. |
| u1 | number | No | UV u1 value. |
| v1 | number | No | UV v1 value. |
Returns: Phaser.Textures.Frame - This Frame object.
Source: src/textures/Frame.js#L688
Since: 3.50.0
updateCropUVs
<instance> updateCropUVs(crop, flipX, flipY)
Description:
Takes a crop data object and recalculates the UVs based on the dimensions inside the crop object. Called automatically by setFrame.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| crop | object | No | The crop data object. This is the GameObject._crop property. |
| flipX | boolean | No | Does the parent Game Object have flipX set? |
| flipY | boolean | No | Does the parent Game Object have flipY set? |
Returns: object - The updated crop data object.
Source: src/textures/Frame.js#L670
Since: 3.11.0
updateUVs
<instance> updateUVs()
Description:
Updates the internal WebGL UV cache and the drawImage cache.
Returns: Phaser.Textures.Frame - This Frame object.
Source: src/textures/Frame.js#L726
Since: 3.0.0
updateUVsInverted
<instance> updateUVsInverted()
Description:
Updates the internal WebGL UV cache for a rotated frame, swapping the width and height axes so that the UV coordinates map correctly to a frame that has been rotated 90 degrees in the texture atlas.
Returns: Phaser.Textures.Frame - This Frame object.
Source: src/textures/Frame.js#L762
Since: 3.0.0