Phaser API Documentation

  Version: 
Filter

A Frame is a section of a Texture.

Constructor:

new Frame(texture, name, sourceIndex, x, y, width, height)

Parameters:

name type description
texture Phaser.Textures.Texture

The Texture this Frame is a part of.

name number | string

The name of this Frame. The name is unique within the Texture.

sourceIndex number

The index of the TextureSource that this Frame is a part of.

x number

The x coordinate of the top-left of this Frame.

y number

The y coordinate of the top-left of this Frame.

width number

The width of this Frame.

height number

The height of this Frame.

Since: 3.0.0
Source: src/textures/Frame.js (Line 11)

Members

autoRound: number
Focus
Focus

Description:

Over-rides the Renderer setting. -1 = use Renderer Setting 0 = No rounding 1 = Round

Type:
number
Default: -1
Since: 3.0.0
Source: src/textures/Frame.js (Line 227)
Focus
Focus
<readonly> canvasData: object
Focus
Focus

Description:

The Canvas drawImage data object.

Type:
object
Since: 3.0.0
Source: src/textures/Frame.js (Line 952)
Focus
Focus
centerX: number
Focus
Focus

Description:

The x center of this frame, floored.

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 165)
Focus
Focus
centerY: number
Focus
Focus

Description:

The y center of this frame, floored.

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 174)
Focus
Focus
customData: object
Focus
Focus

Description:

Any Frame specific custom data can be stored here.

Type:
object
Since: 3.0.0
Source: src/textures/Frame.js (Line 240)
Focus
Focus
customPivot: boolean
Focus
Focus

Description:

Does this Frame have a custom pivot point?

Type:
boolean
Default: false
Since: 3.0.0
Source: src/textures/Frame.js (Line 203)
Focus
Focus
cutHeight: number
Focus
Focus

Description:

The height of the area in the source image to cut.

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 98)
Focus
Focus
cutWidth: number
Focus
Focus

Description:

The width of the area in the source image to cut.

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 89)
Focus
Focus
cutX: number
Focus
Focus

Description:

X position within the source image to cut from.

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 71)
Focus
Focus
cutY: number
Focus
Focus

Description:

Y position within the source image to cut from.

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 80)
Focus
Focus
<private> data: object
Focus
Focus

Description:

The un-modified source frame, trim and UV data.

Type:
object
Since: 3.0.0
Source: src/textures/Frame.js (Line 289)
Focus
Focus

Description:

A reference to the Texture Source WebGL Texture that this Frame is using.

Type:
Since: 3.11.0
Source: src/textures/Frame.js (Line 832)
Focus
Focus
halfHeight: number
Focus
Focus

Description:

Half the height, floored. Precalculated for the renderer.

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 155)
Focus
Focus
halfWidth: number
Focus
Focus

Description:

Half the width, floored. Precalculated for the renderer.

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 145)
Focus
Focus
height: number
Focus
Focus

Description:

The rendering height of this Frame, taking trim into account.

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 136)
Focus
Focus
<readonly> is3Slice: boolean
Focus
Focus

Description:

If the Frame has scale9 border data, is it 3-slice or 9-slice data?

Type:
boolean
Since: 3.70.0
Source: src/textures/Frame.js (Line 935)
Focus
Focus
name: string
Focus
Focus

Description:

The name of this Frame. The name is unique within the Texture.

Type:
string
Since: 3.0.0
Source: src/textures/Frame.js (Line 43)
Focus
Focus
pivotX: number
Focus
Focus

Description:

The horizontal pivot point of this Frame.

Type:
number
Default: 0
Since: 3.0.0
Source: src/textures/Frame.js (Line 183)
Focus
Focus
pivotY: number
Focus
Focus

Description:

The vertical pivot point of this Frame.

Type:
number
Default: 0
Since: 3.0.0
Source: src/textures/Frame.js (Line 193)
Focus
Focus
<readonly> radius: number
Focus
Focus

Description:

The radius of the Frame (derived from sqrt(w * w + h * h) / 2)

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 884)
Focus
Focus
<readonly> realHeight: number
Focus
Focus

Description:

The height of the Frame in its un-trimmed, un-padded state, as prepared in the art package, before being packed.

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 866)
Focus
Focus
<readonly> realWidth: number
Focus
Focus

Description:

The width of the Frame in its un-trimmed, un-padded state, as prepared in the art package, before being packed.

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 848)
Focus
Focus
rotated: boolean
Focus
Focus

Description:

CURRENTLY UNSUPPORTED

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.

Type:
boolean
Default: false
Since: 3.0.0
Source: src/textures/Frame.js (Line 213)
Focus
Focus
<readonly> scale9: boolean
Focus
Focus

Description:

Does the Frame have scale9 border data?

Type:
boolean
Since: 3.70.0
Source: src/textures/Frame.js (Line 918)
Focus
Focus

Description:

The TextureSource this Frame is part of.

Type:
Since: 3.0.0
Source: src/textures/Frame.js (Line 53)
Focus
Focus
sourceIndex: number
Focus
Focus

Description:

The index of the TextureSource in the Texture sources array.

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 62)
Focus
Focus

Description:

The Texture this Frame is a part of.

Type:
Since: 3.0.0
Source: src/textures/Frame.js (Line 34)
Focus
Focus
<readonly> trimmed: boolean
Focus
Focus

Description:

Is the Frame trimmed or not?

Type:
boolean
Since: 3.0.0
Source: src/textures/Frame.js (Line 901)
Focus
Focus
u0: number
Focus
Focus

Description:

WebGL UV u0 value.

Type:
number
Default: 0
Since: 3.11.0
Source: src/textures/Frame.js (Line 249)
Focus
Focus
u1: number
Focus
Focus

Description:

WebGL UV u1 value.

Type:
number
Default: 0
Since: 3.11.0
Source: src/textures/Frame.js (Line 269)
Focus
Focus
v0: number
Focus
Focus

Description:

WebGL UV v0 value.

Type:
number
Default: 0
Since: 3.11.0
Source: src/textures/Frame.js (Line 259)
Focus
Focus
v1: number
Focus
Focus

Description:

WebGL UV v1 value.

Type:
number
Default: 0
Since: 3.11.0
Source: src/textures/Frame.js (Line 279)
Focus
Focus
width: number
Focus
Focus

Description:

The rendering width of this Frame, taking trim into account.

Type:
number
Since: 3.0.0
Source: src/textures/Frame.js (Line 127)
Focus
Focus
x: number
Focus
Focus

Description:

The X rendering offset of this Frame, taking trim into account.

Type:
number
Default: 0
Since: 3.0.0
Source: src/textures/Frame.js (Line 107)
Focus
Focus
y: number
Focus
Focus

Description:

The Y rendering offset of this Frame, taking trim into account.

Type:
number
Default: 0
Since: 3.0.0
Source: src/textures/Frame.js (Line 117)
Focus
Focus

Methods

clone()
Focus
Focus

Description:

Clones this Frame into a new Frame object.

Returns:
Description:

A clone of this Frame.

Since: 3.0.0
Source: src/textures/Frame.js (Line 780)
Focus
Focus
destroy()
Focus
Focus

Description:

Destroys this Frame by nulling its reference to the parent Texture and and data objects.

Since: 3.0.0
Source: src/textures/Frame.js (Line 818)
Focus
Focus
setCropUVs(crop, x, y, width, height, flipX, flipY)
Focus
Focus

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 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 description
crop object

The crop data object. This is the GameObject._crop property.

x number

The x coordinate to start the crop from. Cannot be negative or exceed the Frame width.

y number

The y coordinate to start the crop from. Cannot be negative or exceed the Frame height.

width number

The width of the crop rectangle. Cannot exceed the Frame width.

height number

The height of the crop rectangle. Cannot exceed the Frame height.

flipX boolean

Does the parent Game Object have flipX set?

flipY boolean

Does the parent Game Object have flipY set?

Returns:
Description:

The updated crop data object.

Type:
  • object
Since: 3.11.0
Source: src/textures/Frame.js (Line 523)
Focus
Focus
setCutPosition([x], [y])
Focus
Focus

Description:

Sets the x and y position within the source image to cut from.

Parameters:

name type arguments description
x number <optional>

X position within the source image to cut from.

y number <optional>

Y position within the source image to cut from.

Returns:
Description:

This Frame object.

Since: 3.85.0
Source: src/textures/Frame.js (Line 339)
Focus
Focus
setCutSize(width, height)
Focus
Focus

Description:

Sets the width, and height of the area in the source image to cut.

Parameters:

name type description
width number

The width of the area in the source image to cut.

height number

The height of the area in the source image to cut.

Returns:
Description:

This Frame object.

Since: 3.85.0
Source: src/textures/Frame.js (Line 361)
Focus
Focus
setScale9(x, y, width, height)
Focus
Focus

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 description
x number

The left coordinate of the center scale9 rectangle.

y number

The top coordinate of the center scale9 rectangle.

width number

The width of the center scale9 rectangle.

height number

The height coordinate of the center scale9 rectangle.

Returns:
Description:

This Frame object.

Since: 3.70.0
Source: src/textures/Frame.js (Line 491)
Focus
Focus
setSize(width, height, [x], [y])
Focus
Focus

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 arguments description
width number

The width of the frame before being trimmed.

height number

The height of the frame before being trimmed.

x number <optional>

The x coordinate of the top-left of this Frame.

y number <optional>

The y coordinate of the top-left of this Frame.

Returns:
Description:

This Frame object.

Since: 3.7.0
Source: src/textures/Frame.js (Line 380)
Focus
Focus
setTrim(actualWidth, actualHeight, destX, destY, destWidth, destHeight)
Focus
Focus

Description:

If the frame was trimmed when added to the Texture Atlas, this records the trim and source data.

Parameters:

name type description
actualWidth number

The width of the frame before being trimmed.

actualHeight number

The height of the frame before being trimmed.

destX number

The destination X position of the trimmed frame for display.

destY number

The destination Y position of the trimmed frame for display.

destWidth number

The destination width of the trimmed frame for display.

destHeight number

The destination height of the trimmed frame for display.

Returns:
Description:

This Frame object.

Since: 3.0.0
Source: src/textures/Frame.js (Line 441)
Focus
Focus
setUVs(width, height, u0, v0, u1, v1)
Focus
Focus

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 description
width number

Width of this frame for the Canvas data.

height number

Height of this frame for the Canvas data.

u0 number

UV u0 value.

v0 number

UV v0 value.

u1 number

UV u1 value.

v1 number

UV v1 value.

Returns:
Description:

This Frame object.

Since: 3.50.0
Source: src/textures/Frame.js (Line 684)
Focus
Focus
updateCropUVs(crop, flipX, flipY)
Focus
Focus

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 description
crop object

The crop data object. This is the GameObject._crop property.

flipX boolean

Does the parent Game Object have flipX set?

flipY boolean

Does the parent Game Object have flipY set?

Returns:
Description:

The updated crop data object.

Type:
  • object
Since: 3.11.0
Source: src/textures/Frame.js (Line 666)
Focus
Focus
updateUVs()
Focus
Focus

Description:

Updates the internal WebGL UV cache and the drawImage cache.

Returns:
Description:

This Frame object.

Since: 3.0.0
Source: src/textures/Frame.js (Line 722)
Focus
Focus
updateUVsInverted()
Focus
Focus

Description:

Updates the internal WebGL UV cache.

Returns:
Description:

This Frame object.

Since: 3.0.0
Source: src/textures/Frame.js (Line 758)
Focus
Focus