The core building block in terms of optimized 2D batch rendering.

Create a SpriteSheet:

assets/gui.sheet.json              // create an empty json with '{}'
assets/gui/logo.single.png // Insert as many source files you need.
assets/gui/title.single.png // Useful naming convention avoids configuration
assets/gui/buttons.slices.aseprite // Nice format support (*)

*) Aseprite requires typesprite.config.mjs

Learn more about the Sprite Sheet generation: FIX: LINK!

Load a SpriteSheet:

export class MyComponent extends Component {

@res('sheet', 'assets/gui.sheet.json)
private guiSheet:SpriteSheeet;

onInit() {
const logoFrame = this.guiSheet.slices["logo"];


  • SpriteSheet



animations: Record<string, SpriteSheetAnimation>
fonts: Record<string, SpriteSheetFont>
ninePatches: Record<string, SpriteSheetNinePatch>
slices: Record<string, SpriteSheetFrame>


Generated using TypeDoc