TextureSheets

LittleJS Texture Sheet Plugin

  • Packs images into texture sheets as they are loaded
  • Sprites are placed automatically, callers get a TileInfo
  • Sheets are created and filled as needed
  • Sheets fill in call order, images decode in parallel
  • Animation frames keep layout and wrap across rows as needed
  • WebGL textures upload once per batch of loads
  • loadAtlas imports pre-packed atlases (TexturePacker and Aseprite json)
Source

Classes

TextureSheet

Members

(static) textureSheets :Array.<TextureSheet>

Array of texture sheets created by loadSprite

Type:
  • Array.<TextureSheet>
Source

Methods

(static) loadAtlas(imageSrc, jsonSrc, paddingopt) → {Object}

Load a pre-packed texture atlas and repack it onto texture sheets

  • Supports TexturePacker json (hash and array) and Aseprite json
  • Returns an empty object which is filled with TileInfos when loaded
  • Frames are named by the json, animations are grouped automatically
  • Aseprite frame tags become animations, so do names like run_0, run_1
  • Trimmed frames are restored to their full source size when packed
  • Rotated frames are rotated back upright when packed
Parameters:
NameTypeAttributesDescription
imageSrcstring

Atlas image path

jsonSrcstring | Object

Atlas json path, or already parsed json data

paddingnumber<optional>

How many pixels padding around each frame

Source
Returns:

Object mapping frame and animation names to TileInfos

Type: 
Object
Example
const atlas = loadAtlas('sprites.png', 'sprites.json');
 await spritesReady();
 drawTile(pos, size, atlas.player);          // a single frame
 drawTile(pos, size, atlas.run.frame(2));    // frame 2 of the run animation

(static) loadSprite(src, frameSizeopt, paddingopt, sourcePaddingopt) → {TileInfo}

Load an image and pack it into a texture sheet

  • Returns a TileInfo immediately which is filled in when the image loads
  • Nothing is visible until it loads, use spritesReady to wait for it
  • Pass frameSize for animations, then step through them with TileInfo.frame
  • Grid images keep their layout and frames wrap down to the next row
  • Pass sourcePadding if the source image has padding baked in around frames
Parameters:
NameTypeAttributesDefaultDescription
srcstring

Image source path

frameSizeVector2 | number<optional>

Size of each animation frame in pixels

paddingnumber<optional>

How many pixels padding around each frame

sourcePaddingnumber | Vector2<optional>
0

How many pixels padding around each frame in the source image

Source
Returns:
Type: 
TileInfo
Example
const playerTile = loadSprite('player.png');     // a single sprite
 const runTile = loadSprite('run.png', vec2(16)); // a 16x16 frame animation

(static) parseAtlas(data) → {Array.<Object>}

Parse atlas json into a list of named frame groups, used by loadAtlas

  • Accepts TexturePacker json (hash and array) and Aseprite json
  • Frames tagged in Aseprite or named like run_0, run_1 group into animations
Parameters:
NameTypeDescription
dataObject

Parsed atlas json data

Source
Returns:

List of {name, frames} groups in atlas order

Type: 
Array.<Object>

(async, static) spritesReady() → {Promise}

Wait for everything started by loadSprite and loadAtlas to finish packing

Source
Returns:
Type: 
Promise
Example
async function gameInit()
 {
     playerTile = loadSprite('player.png');
     runTile = loadSprite('run.png', vec2(16));
     await spritesReady();
 }