Class: Texture

Tiny. Texture

A texture stores the information that represents an image or part of an image. It cannot be added to the display list directly. Instead use it as the texture for a Sprite. If no frame is provided then the whole image is used.

You can directly create a texture from an image and then reuse it multiple times like this :

let texture = Tiny.Texture.fromImage('assets/image.png');
let sprite1 = new Tiny.Sprite(texture);
let sprite2 = new Tiny.Sprite(texture);

Textures made from SVGs, loaded or not, cannot be used before the file finishes processing.
You can check for this by checking the sprite's _textureID property.

var texture = Tiny.Texture.fromImage('assets/image.svg');
var sprite1 = new Tiny.Sprite(texture);
//sprite1._textureID should not be undefined if the texture has finished processing the SVG file

You can use a ticker or rAF to ensure your sprites load the finished textures after processing. See issue #3068.

new Tiny.Texture(baseTexture, frame, orig, trim, rotate, anchor)

tiny/core/textures/Texture.js, line 36

Name	Type	Description
`baseTexture`	Tiny.BaseTexture	The base texture source to create the texture from
`frame`	Tiny.Rectangle	optional The rectangle frame of the texture to show
`orig`	Tiny.Rectangle	optional The area of original texture
`trim`	Tiny.Rectangle	optional Trimmed rectangle of original texture
`rotate`	number	optional indicates how the texture was rotated by texture packer. See Tiny.GroupD8
`anchor`	Tiny.Point	optional Default anchor point used for sprite placement / rotation

Extends

EventEmitter

Members

static,constantTiny.Texture.EMPTY

An empty texture, used often to not have to create multiple empty textures.
Can not be destroyed.

static,constantTiny.Texture.WHITE

A white texture of 10x10 size, used for graphics and other things
Can not be destroyed.

_frameTiny.Rectangle

This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering, irrespective of the actual frame size or placement (which can be influenced by trimmed texture atlases)

baseTextureTiny.BaseTexture

The base texture that this texture uses.

defaultAnchorTiny.Point

Anchor point that is used as default if sprite is created with this texture.
Changing the defaultAnchor at a later point of time will not update Sprite's anchor point.

Version:

1.2.0

Default Value:

{0,0}

frameTiny.Rectangle

The frame specifies the region of the base texture that this texture uses.
Please call _updateUvs() after you change coordinates of frame manually.

heightnumber

The height of the Texture in pixels.

noFrameboolean

Does this Texture have any frame data assigned to it?

origTiny.Rectangle

This is the area of original texture, before it was put in atlas

requiresUpdateboolean

This will let a renderer know that a texture has been updated (used mainly for webGL uv updates)

rotatenumber

Indicates whether the texture is rotated inside the atlas, set to 2 to compensate for texture packer rotation, set to 6 to compensate for spine packer rotation, can be used to rotate or mirror sprites
See Tiny.GroupD8 for explanation

textureCacheIdsArray.<string>

The ids under which this Texture has been added to the texture cache. This is automatically set as long as Texture.addToCache is used, but may not be set if a
Texture is added directly to the TextureCache array.

transformTiny.TextureTransform

Contains data for uvs. May contain clamp settings and some matrices.
Its a bit heavy, so by default that object is not created.

Default Value:

null

trimTiny.Rectangle

This is the trimmed area of original texture, before it was put in atlas
Please call _updateUvs() after you change coordinates of trim manually.

validboolean

This will let the renderer know if the texture is valid. If it's not then it cannot be rendered.

widthnumber

The width of the Texture in pixels.

Methods

staticTiny.Texture.addToCache(texture, id) tiny/core/textures/Texture.js, line 438

Adds a Texture to the global TextureCache. This cache is shared across the whole Tiny object.

Name	Type	Description
`texture`	Tiny.Texture	The Texture to add to the cache.
`id`	string	The id that the Texture will be stored against.

staticTiny.Texture.from(source) ❯ {Tiny.Texture} tiny/core/textures/Texture.js, line 366

Helper function that creates a new Texture based on the source you provide.
The source can be - frame id, image url, video url, canvas element, video element, base texture

Name	Type	Description
`source`	number \| string \| Tiny.BaseTexture \| HTMLCanvasElement \| HTMLVideoElement	Source to create texture from

Returns:

Type	Description
Tiny.Texture	The newly created texture

staticTiny.Texture.fromCanvas(canvas, scaleMode, origin) ❯ {Tiny.Texture} tiny/core/textures/Texture.js, line 322

Helper function that creates a new Texture based on the given canvas element.

Name	Type	Default	Description
`canvas`	HTMLCanvasElement		The canvas element source of the texture
`scaleMode`	number	Tiny.settings.SCALE_MODE	optional See Tiny.SCALE_MODES for possible values
`origin`	string	'canvas'	optional A string origin of who created the base texture

Returns:

Type	Description
Tiny.Texture	The newly created texture

staticTiny.Texture.fromFrame(frameId) ❯ {Tiny.Texture} tiny/core/textures/Texture.js, line 303

Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId
The frame ids are created when a Texture packer file has been loaded

Name	Type	Description
`frameId`	string	The frame Id of the texture in the cache

Returns:

Type	Description
Tiny.Texture	The newly created texture

staticTiny.Texture.fromImage(imageUrl, crossorigin, scaleMode, sourceScale) ❯ {Tiny.Texture} tiny/core/textures/Texture.js, line 284

Helper function that creates a Texture object from the given image url.
If the image is not in the texture cache it will be created and loaded.

Name	Type	Default	Description
`imageUrl`	string		The image url of the texture
`crossorigin`	boolean		optional Whether requests should be treated as crossorigin
`scaleMode`	number	Tiny.settings.SCALE_MODE	optional See Tiny.SCALE_MODES for possible values
`sourceScale`	number	(auto)	optional Scale for the original image, used with SVG images.

Returns:

Type	Description
Tiny.Texture	The newly created texture

staticTiny.Texture.fromLoader(source, imageUrl, name) ❯ {Tiny.Texture} tiny/core/textures/Texture.js, line 407

Create a texture from a source and add to the cache.

Name	Type	Description
`source`	HTMLImageElement \| HTMLCanvasElement	The input source.
`imageUrl`	string	File name of texture, for cache and resolving resolution.
`name`	string	optional Human readible name for the texture cache. If no name is specified, only `imageUrl` will be used as the cache ID.

Returns:

Type	Description
Tiny.Texture	Output texture

staticTiny.Texture.fromVideo(video, scaleMode, crossorigin, autoPlay) ❯ {Tiny.Texture} tiny/core/textures/Texture.js, line 336

Helper function that creates a new Texture based on the given video element.

Name	Type	Default	Description
`video`	HTMLVideoElement \| string		The URL or actual element of the video
`scaleMode`	number	Tiny.settings.SCALE_MODE	optional See Tiny.SCALE_MODES for possible values
`crossorigin`	boolean	(auto)	optional Should use anonymous CORS? Defaults to true if the URL is not a data-URI.
`autoPlay`	boolean	true	optional Start playing video as soon as it is loaded

Returns:

Type	Description
Tiny.Texture	The newly created texture

staticTiny.Texture.fromVideoUrl(videoUrl, scaleMode, crossorigin, autoPlay) ❯ {Tiny.Texture} tiny/core/textures/Texture.js, line 354

Helper function that creates a new Texture based on the video url.

Name	Type	Default	Description
`videoUrl`	string		URL of the video
`scaleMode`	number	Tiny.settings.SCALE_MODE	optional See Tiny.SCALE_MODES for possible values
`crossorigin`	boolean	(auto)	optional Should use anonymous CORS? Defaults to true if the URL is not a data-URI.
`autoPlay`	boolean	true	optional Start playing video as soon as it is loaded

Returns:

Type	Description
Tiny.Texture	The newly created texture

staticTiny.Texture.removeFromCache(texture) ❯ {Tiny.Texture|null} tiny/core/textures/Texture.js, line 461

Remove a Texture from the global TextureCache.

Name	Type	Description
`texture`	string \| Tiny.Texture	id of a Texture to be removed, or a Texture instance itself

Returns:

Type	Description
Tiny.Texture \| null	The Texture that was removed

_updateUvs() tiny/core/textures/Texture.js, line 263

Updates the internal WebGL UV cache. Use it after you change frame or trim of the texture.

clone() ❯ {Tiny.Texture} tiny/core/textures/Texture.js, line 256

Creates a new texture object that acts the same as this one.

Returns:

Type	Description
Tiny.Texture	The new texture

destroy(destroyBase) tiny/core/textures/Texture.js, line 222

Destroys this texture

Name	Type	Default	Description
`destroyBase`	boolean	false	optional Whether to destroy the base texture as well

update() tiny/core/textures/Texture.js, line 178

Updates this texture on the gpu.

Events

update tiny/core/textures/Texture.js, line 146

Fired when the texture is updated. This happens if the frame or the baseTexture is updated.