Phaser API Documentation

  Version: 
Filter

Phaser . Textures . Frame

Phaser . Textures . Frame

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 237)
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 832)
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 175)
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 184)
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 250)
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 213)
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 108)
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 99)
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 81)
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 90)
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 299)
Focus
Focus
<nullable> glTexture: WebGLTexture
Focus
Focus

Description:

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

Type:
WebGLTexture
Default: null
Since: 3.11.0
Source: src/textures/Frame.js (Line 71)
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 165)
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 155)
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 146)
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 193)
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 203)
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 798)
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 780)
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 762)
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 223)
Focus
Focus
source: Phaser.Textures.TextureSource
Focus
Focus

Description:

The TextureSource this Frame is part of.

Type:
Phaser.Textures.TextureSource
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
texture: Phaser.Textures.Texture
Focus
Focus

Description:

The Texture this Frame is a part of.

Type:
Phaser.Textures.Texture
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 815)
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 259)
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 279)
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 269)
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 289)
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 137)
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 117)
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 127)
Focus
Focus

Methods

clone()
Focus
Focus

Description:

Clones this Frame into a new Frame object.

Returns:
Description:

A clone of this Frame.

Type:
Since: 3.0.0
Source: src/textures/Frame.js (Line 709)
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 747)
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.

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 454)
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.

Type:
Since: 3.7.0
Source: src/textures/Frame.js (Line 341)
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.

Type:
Since: 3.0.0
Source: src/textures/Frame.js (Line 404)
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.

Type:
Since: 3.50.0
Source: src/textures/Frame.js (Line 613)
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 595)
Focus
Focus
updateUVs()
Focus
Focus

Description:

Updates the internal WebGL UV cache and the drawImage cache.

Returns:
Description:

This Frame object.

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

Description:

Updates the internal WebGL UV cache.

Returns:
Description:

This Frame object.

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