This page is work-in-progress. You can reach me on twitter or mail to

Playground - Atlases

Playground supports loading texture atlas format (JSON Array) used by software like Flash or TexturePacker

this.loadAtlases("hero", "explosion", "...");

This will look for an image and atlas definition:



/* then for each frame */

var frame = this.atlases.hero.frames[0];

frame.region  /* source region [x, y, w, h] */
frame.offset  /* trim position [x, y] */
frame.width   /* original width of a frame */
frame.height  /* original height of a frame */


If you are using default renderer (layer) - you can utilize layer.drawAtlasFrame(atlas, frame, x, y) to draw a certain frame from an atlas.

var app = playground({

  create: function() {



  render: function() {

    var atlas = this.atlases.planet;
    var current = (this.lifetime % 2 / 2) * atlas.frames.length | 0;

      .drawAtlasFrame(atlas, current, 0, 0); 


  container: exampleContainer


Ask question:

Fork me on GitHub