Filter

Hide inherited members:

show private members:

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

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)

<readonly> canvasData: object

Description:

The Canvas drawImage data object.

Type:

object

Since: 3.0.0

Source: src/textures/Frame.js (Line 952)

centerX: number

Description:

The x center of this frame, floored.

Type:

number

Since: 3.0.0

Source: src/textures/Frame.js (Line 165)

centerY: number

Description:

The y center of this frame, floored.

Type:

number

Since: 3.0.0

Source: src/textures/Frame.js (Line 174)

customData: object

Description:

Any Frame specific custom data can be stored here.

Type:

object

Since: 3.0.0

Source: src/textures/Frame.js (Line 240)

customPivot: boolean

Description:

Does this Frame have a custom pivot point?

Type:

boolean

Default: false

Since: 3.0.0

Source: src/textures/Frame.js (Line 203)

cutHeight: number

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)

cutWidth: number

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)

cutX: number

Description:

X position within the source image to cut from.

Type:

number

Since: 3.0.0

Source: src/textures/Frame.js (Line 71)

cutY: number

Description:

Y position within the source image to cut from.

Type:

number

Since: 3.0.0

Source: src/textures/Frame.js (Line 80)

<private> data: object

Description:

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

Type:

object

Since: 3.0.0

Source: src/textures/Frame.js (Line 289)

<readonly> glTexture: Phaser.Renderer.WebGL.Wrappers.WebGLTextureWrapper

Description:

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

Type:

Phaser.Renderer.WebGL.Wrappers.WebGLTextureWrapper

Since: 3.11.0

Source: src/textures/Frame.js (Line 832)

halfHeight: number

Description:

Half the height, floored. Precalculated for the renderer.

Type:

number

Since: 3.0.0

Source: src/textures/Frame.js (Line 155)

halfWidth: number

Description:

Half the width, floored. Precalculated for the renderer.

Type:

number

Since: 3.0.0

Source: src/textures/Frame.js (Line 145)

height: number

Description:

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

Type:

number

Since: 3.0.0

Source: src/textures/Frame.js (Line 136)

<readonly> is3Slice: boolean

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)

name: string

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)

pivotX: number

Description:

The horizontal pivot point of this Frame.

Type:

number

Default: 0

Since: 3.0.0

Source: src/textures/Frame.js (Line 183)

pivotY: number

Description:

The vertical pivot point of this Frame.

Type:

number

Default: 0

Since: 3.0.0

Source: src/textures/Frame.js (Line 193)

<readonly> radius: number

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)

<readonly> realHeight: number

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)

<readonly> realWidth: number

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)

rotated: boolean

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)

<readonly> scale9: boolean

Description:

Does the Frame have scale9 border data?

Type:

boolean

Since: 3.70.0

Source: src/textures/Frame.js (Line 918)

source: Phaser.Textures.TextureSource

Description:

The TextureSource this Frame is part of.

Type:

Phaser.Textures.TextureSource

Since: 3.0.0

Source: src/textures/Frame.js (Line 53)

sourceIndex: number

Description:

The index of the TextureSource in the Texture sources array.

Type:

number

Since: 3.0.0

Source: src/textures/Frame.js (Line 62)

texture: Phaser.Textures.Texture

Description:

The Texture this Frame is a part of.

Type:

Phaser.Textures.Texture

Since: 3.0.0

Source: src/textures/Frame.js (Line 34)

<readonly> trimmed: boolean

Description:

Is the Frame trimmed or not?

Type:

boolean

Since: 3.0.0

Source: src/textures/Frame.js (Line 901)

u0: number

Description:

WebGL UV u0 value.

Type:

number

Default: 0

Since: 3.11.0

Source: src/textures/Frame.js (Line 249)

u1: number

Description:

WebGL UV u1 value.

Type:

number

Default: 0

Since: 3.11.0

Source: src/textures/Frame.js (Line 269)

v0: number

Description:

WebGL UV v0 value.

Type:

number

Default: 0

Since: 3.11.0

Source: src/textures/Frame.js (Line 259)

v1: number

Description:

WebGL UV v1 value.

Type:

number

Default: 0

Since: 3.11.0

Source: src/textures/Frame.js (Line 279)

width: number

Description:

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

Type:

number

Since: 3.0.0

Source: src/textures/Frame.js (Line 127)

x: number

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)

y: number

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)

Methods

clone()

Description:

Clones this Frame into a new Frame object.

Returns:

Description:

A clone of this Frame.

Type:

Phaser.Textures.Frame

Since: 3.0.0

Source: src/textures/Frame.js (Line 780)

destroy()

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)

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

setCutPosition([x], [y])

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.

Type:

Phaser.Textures.Frame

Since: 3.85.0

Source: src/textures/Frame.js (Line 339)

setCutSize(width, height)

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.

Type:

Phaser.Textures.Frame

Since: 3.85.0

Source: src/textures/Frame.js (Line 361)

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

Type:

Phaser.Textures.Frame

Since: 3.70.0

Source: src/textures/Frame.js (Line 491)

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	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:

Phaser.Textures.Frame

Since: 3.7.0

Source: src/textures/Frame.js (Line 380)

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	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:

Phaser.Textures.Frame

Since: 3.0.0

Source: src/textures/Frame.js (Line 441)

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	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:

Phaser.Textures.Frame

Since: 3.50.0

Source: src/textures/Frame.js (Line 684)

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

updateUVs()

Description:

Updates the internal WebGL UV cache and the drawImage cache.

Returns:

Description:

This Frame object.

Type:

Phaser.Textures.Frame

Since: 3.0.0

Source: src/textures/Frame.js (Line 722)

updateUVsInverted()

Description:

Updates the internal WebGL UV cache.

Returns:

Description:

This Frame object.

Type:

Phaser.Textures.Frame

Since: 3.0.0

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

Possible examples