Wrapper for a 2D context texture. A texture is a raw image element loaded for game use, sized as needed. Textures can be a single image, or a sprite sheet of images. Textures are not assignable as the fill type for sprites, instead, * texture regions must be defined. A texture region is rectangular portion of a texture. All textures will have a default 'all' region when loaded.

To simplify the process for creating textures, regions, and animations, a GUI tool will be added to the tool chain in the near future. Check back soon!


// Load image.png in 200px wide by 600px hight
var texture: Foundation.Texture = new Foundation.Texture('path/to/image.png', 200, 600);

// Create a region half the height of the texture
this.addRegion('topHalf', new Foundation.Rectangle(0, 0, 200, 300));

// ...and another for the other half
this.addRegion('bottomHalf', new Foundation.Rectangle(0, 300, 200, 300));

// Create a sprite using one of the regions
// (note the 'all' region is available by default)
var sprite = new Foundation.Sprite(new Foundation.Rectangle(0, 0, 200, 300), texture.getRegion('all'));

The following is a more real-life use of the texture type

// Create a default game prefab with callback
var game = Foundation.Game.createDefaultPrefab(800, 480, someHTMLContainerRef, function(){

  // Load textures. The game.textures array is provided for convenience, 
  // but textures can be stored wherever you feel appropriate!
  this.textures.push(new Foundation.Texture('./someFile.png'), 100, 100);

  // Create sprites at 0, 0 with size 100 * 100 
  // Filled with the full texture
  game['layers']['default'].pushBack(new Foundation.Sprite(
    new Foundation.Rectangle(0, 0, 100, 100), 

  // Auto-start the game when all textures are 'ready'

Implementation Details

Reference paths

  • '/foundation/_digest.ts'
  • '/foundation/core/utilities/_digest.ts'
  • '/foundation/core/utilities/Texture.ts'


This type does not extend from a base type.


This type implements the following interfaces:

The clone method will return a full deep copy of the texture, including all defined regions. The equals check currently only checks for object equality (shallow comparison).


(srcImage: string, width: number, height: number, readyCallback?: Function)

  • Pass path to desired image to load, and width and height to load image.
  • Optionally, pass a callback frame to execute when the texture has finished loading. Note this will be bound to the texture context in the callback.
  • Texture regions can be added before the texture has finished loading.

(srcImage: HTMLCanvasElement, width: number, height: number)

  • As per above constructor but from an existing HTML canvas element, rather than an image. As the draw will be immediate, there is not callback frame.

Public Properties

ready: boolean

  • Getter, not settable.
  • Returns true if the texture is in a state where it is ready to be drawn.

getCanvas: boolean

  • Getter, not settable.
  • Returns a reference to the texture's raw canvas element.

Instance Methods

addRegion(name: string, bounds: Rectangle, forceReplace: boolean = false): boolean

  • Add a region to the texture and store with the key name. A region is a rectangular potion of the whole texture, defined as a rectangle object where x and y are relative to the top left of the texture.
  • By default, if name already exists, the add will fail. Pass true for forceReplace to override. The current name region will be replaced.
  • Returns true / false to indicate if the region has been added.

getRegion(name: string): TextureRegion

  • Returns a clone of the region stored under name. This is a unique copy and can be modified as needed.
  • null will be returned if name does not exist.

createRegionsFromGrid(columns: number, rows: number, forceReplace: boolean = false): boolean

  • Creates a uniform grid of regions on the current texture defined by the number of rows and columns passed.
  • Columns and rows must have a minimum value of 1.
  • Each region will be give the key: N where N will be the linear position of a cell in the created grid. I.e n will be distributed as follows:
  | '0' | '1' | '2' |
  | '3' | '4' | '5' |
  • Note: N is of type string, not number.
  • If any key N already exists, by default it will not be replaced, and the function will return false (but will continue to add those regions it can). To override, pass true for forceReplace.

createAnimation(name: string, timer: GameTimeTracker, forceReplace: boolean = false): boolean

  • Creates an empty animation attached to the current texture.

getOriginalAnimationReference(name: string): TextureAnimation

  • Returns a reference to the original copy of the named animation (this should not be used as the fill for a drawable object, only to modify the original prototype).

getAnimation(name: string): TextureAnimation

  • Retrieve a copy of the named animation, or null if no animation exists with that name. Note that the returned item is a cloned copy of the animation stored in the texture.