You are browsing legacy Phaser documentation that is 4+ years out of date. Please see https://newdocs.phaser.io

Class: Frame

Phaser.Textures. Frame

A Frame is a section of a Texture.

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

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

Type:
  • number
Since: 3.0.0
Default Value:
  • -1
Source: src/textures/Frame.js (Line 237)

<readonly> canvasData :object

The Canvas drawImage data object.

Type:
  • object
Since: 3.0.0
Source: src/textures/Frame.js (Line 832)

centerX :number

The x center of this frame, floored.

Type:
  • number
Since: 3.0.0
Source: src/textures/Frame.js (Line 175)

centerY :number

The y center of this frame, floored.

Type:
  • number
Since: 3.0.0
Source: src/textures/Frame.js (Line 184)

customData :object

Any Frame specific custom data can be stored here.

Type:
  • object
Since: 3.0.0
Source: src/textures/Frame.js (Line 250)

customPivot :boolean

Does this Frame have a custom pivot point?

Type:
  • boolean
Since: 3.0.0
Default Value:
  • false
Source: src/textures/Frame.js (Line 213)

cutHeight :number

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

Type:
  • number
Since: 3.0.0
Source: src/textures/Frame.js (Line 108)

cutWidth :number

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

Type:
  • number
Since: 3.0.0
Source: src/textures/Frame.js (Line 99)

cutX :number

X position within the source image to cut from.

Type:
  • number
Since: 3.0.0
Source: src/textures/Frame.js (Line 81)

cutY :number

Y position within the source image to cut from.

Type:
  • number
Since: 3.0.0
Source: src/textures/Frame.js (Line 90)

<nullable> glTexture :WebGLTexture

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

Type:
  • WebGLTexture
Since: 3.11.0
Default Value:
  • null
Source: src/textures/Frame.js (Line 71)

halfHeight :number

Half the height, floored. Precalculated for the renderer.

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

halfWidth :number

Half the width, floored. Precalculated for the renderer.

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

height :number

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

Type:
  • number
Since: 3.0.0
Source: src/textures/Frame.js (Line 146)

name :string

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

The horizontal pivot point of this Frame.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/textures/Frame.js (Line 193)

pivotY :number

The vertical pivot point of this Frame.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/textures/Frame.js (Line 203)

<readonly> radius :number

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)

<readonly> realHeight :number

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)

<readonly> realWidth :number

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)

rotated :boolean

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
Since: 3.0.0
Default Value:
  • false
Source: src/textures/Frame.js (Line 223)

source :Phaser.Textures.TextureSource

The TextureSource this Frame is part of.

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

sourceIndex :number

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

The Texture this Frame is a part of.

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

<readonly> trimmed :boolean

Is the Frame trimmed or not?

Type:
  • boolean
Since: 3.0.0
Source: src/textures/Frame.js (Line 815)

u0 :number

WebGL UV u0 value.

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

u1 :number

WebGL UV u1 value.

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

v0 :number

WebGL UV v0 value.

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

v1 :number

WebGL UV v1 value.

Type:
  • number
Since: 3.11.0
Default Value:
  • 0
Source: src/textures/Frame.js (Line 289)

width :number

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

Type:
  • number
Since: 3.0.0
Source: src/textures/Frame.js (Line 137)

x :number

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

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

y :number

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

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/textures/Frame.js (Line 127)

Methods

clone()

Clones this Frame into a new Frame object.

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

A clone of this Frame.

Type
Phaser.Textures.Frame

destroy()

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)

setCropUVs(crop, x, y, width, height, flipX, flipY)

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?
Since: 3.11.0
Source: src/textures/Frame.js (Line 454)
Returns:

The updated crop data object.

Type
object

setSize(width, height [, x] [, y])

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 Argument Default Description
width number

The width of the frame before being trimmed.
height number

The height of the frame before being trimmed.
x number <optional>
 0

The x coordinate of the top-left of this Frame.
y number <optional>
 0

The y coordinate of the top-left of this Frame.
Since: 3.7.0
Source: src/textures/Frame.js (Line 341)
Returns:

This Frame object.

Type
Phaser.Textures.Frame

setTrim(actualWidth, actualHeight, destX, destY, destWidth, destHeight)

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

This Frame object.

Type
Phaser.Textures.Frame

setUVs(width, height, u0, v0, u1, v1)

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

This Frame object.

Type
Phaser.Textures.Frame

updateCropUVs(crop, flipX, flipY)

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?
Since: 3.11.0
Source: src/textures/Frame.js (Line 595)
Returns:

The updated crop data object.

Type
object

updateUVs()

Updates the internal WebGL UV cache and the drawImage cache.

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

This Frame object.

Type
Phaser.Textures.Frame

updateUVsInverted()

Updates the internal WebGL UV cache.

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

This Frame object.

Type
Phaser.Textures.Frame