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)
loadTiles packs separate tile images, or several tile sheets, into one tile set for tile layers and maps

Functions

loadAtlas(imageSrc, jsonSrc, padding) → Object<string, TileInfo>textureSheet.js:356

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
The same atlas loaded again by its paths, with the same padding, gives back what the first load did, packed once, unless that load failed

imageSrc string: Atlas image path
jsonSrc string|Object: Atlas json path, or already parsed json data
padding number optional: How many pixels padding around each frame

Returns: Object mapping frame and animation names to TileInfos

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

loadSprite(src, frameSize, padding, sourcePadding) → TileInfotextureSheet.js:210

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
The same image loaded again with the same settings gives back what the first load did, packed once, unless that load failed

src string: Image source path
frameSize Vector2|number optional: Size of each animation frame in pixels, or the whole image less its source padding if not passed
padding number optional: How many pixels padding around each frame
sourcePadding number|Vector2 optional, default 0: How many pixels padding around each frame in the source image

const playerTile = loadSprite('player.png');     // a single sprite
const runTile = loadSprite('run.png', vec2(16)); // a 16x16 frame animation

loadTiles(sources, tileSize, padding) → TileInfotextureSheet.js:293

Load tile images and pack them into texture sheets as one tile set, for tile layers and maps

Each image is cut into tiles of tileSize, left to right then down, so an image of one tile is one tile and a sheet is all of its tiles; the tiles are numbered from 0 in the order the images are given
Returns a tile set at once, a TileInfo whose tiles fill in as the images load; wait for them with spritesReady
Give it to tileLayersLoad, a TileLayer or a TileCollisionLayer as its tile info: tile n draws tiles[n], wherever it was packed, and the level editor's palette offers each of them; frame and index do not read the list, use set.tiles[n] for one tile; make the layers after spritesReady, a layer made before draws nothing
An image that is not a whole number of tiles gives the whole tiles in it; a sheet with gaps between its tiles is not read, cut it into its tiles first
An image that fails to load, or that no sheet can hold, adds no tiles and says so in the console, so the tiles of the images after it move up
The same images loaded again with the same settings give back what the first load did, packed once, unless an image of it failed

sources Array<string>: Image source paths
tileSize Vector2|number optional: Size of a tile in pixels
padding number optional: How many pixels padding around each tile on the sheet

const tiles = loadTiles(['grass.png', 'dirt.png', 'water.png', 'props.png'], 16);
await spritesReady();
tileLayersLoad(map, tiles); // tile 0 is grass, 1 dirt, 2 water, then the tiles of props.png

parseAtlas(data) → Array<{name: string, frames: Array<Object>}>textureSheet.js:470

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

data Object: Parsed atlas json data

Returns: List of {name, frames} groups in atlas order

spritesReady() → PromiseasynctextureSheet.js:554

Wait for everything started by loadSprite and loadAtlas to finish packing

async function gameInit()
{
    playerTile = loadSprite('player.png');
    runTile = loadSprite('run.png', vec2(16));
    await spritesReady();
}

Members

textureSheets : Array<TextureSheet>textureSheet.js:31

Array of texture sheets created by loadSprite

Constants

loadAtlas.atlas : Object<string, TileInfo>textureSheet.js:369

TextureSheets

Classes

Functions

Members

Constants

Functions

Members

Constants