SpriteSheet¶

Overview¶

A single Canvas/texture with multiple different images (sprites) drawn internally. During rendering, this texture can be used in one draw call to render multiple different images by providing UV coordinates to each quad for each image to be drawn.

Note that the WebGL texture part is not required to be run - the Canvas-only part can be used functionally without any WebGL dependencies.

TODO: How to use custom mipmap levels? https://github.com/phetsims/scenery/issues/1581

@author Jonathan Olson <jonathan.olson@colorado.edu> @author Sam Reid (PhET Interactive Simulations)

Class SpriteSheet¶

import { SpriteSheet } from 'scenerystack/scenery';

Constructor¶

new SpriteSheet( useMipmaps : boolean )¶

Instance Methods¶

initializeContext( gl : WebGLRenderingContext )¶

Initialize (or reinitialize) ourself with a new GL context. Should be called at least once before updateTexture()

NOTE: Should be safe to call with a different context (will recreate a different texture) should this be needed for things like context loss.

updateTexture()¶

Updates a pre-existing texture with our current Canvas.

addImage( image : HTMLCanvasElement | HTMLImageElement, width : number, height : number ) : Sprite | null¶

Adds an image (if possible) to our sprite sheet. If successful, will return a {Sprite}, otherwise null.

@param image @param width - Passed in, since it may not be fully loaded yet? @param height - Passed in, since it may not be fully loaded yet?

removeImage( image : HTMLCanvasElement | HTMLImageElement )¶

Removes an image from our spritesheet. (Removes one from the amount it is used, and if it is 0, gets actually removed).

containsImage( image : HTMLCanvasElement | HTMLImageElement ) : boolean¶

Whether the sprite for the specified image is handled by this spritesheet. It can be either used or unused, but addImage() calls with the specified image should be extremely fast (no need to modify the Canvas or texture).

Instance Properties¶

texture : WebGLTexture | null¶

Static Properties¶

Sprite : typeof Sprite¶

MAX_DIMENSION¶

(readonly)

the size of a sprite sheet

Source Code¶

See the source for SpriteSheet.ts in the scenery repository.