Sprite Sheet Renderer

Updated On: April 12, 2013

Sprite Sheet Renderer

THe Sprite Sheet Renderer derives from the Sprite Renderer and is used to renderer frames of a Sprite Sheet Component by changing the spriteIndex property. All renderers extend from the same base renderer class so most have the same properties as the Sprite Renderer with a few additions.


Since the SpriteSheet Render is just a Sprite Renderer but with additional logic to grab frames from a Sprite Sheet Component by index it has the same properties. However you can use the slider to scrub through the frames of the attached sprite sheet in the editor.

Sprite Sheets

This renderer requires a Sprite Sheet component to display anything and there are a number of pre-defined sprite sheet types that you can use with this renderer:

Code Sample

var entity : IEntity = PBE.allocateEntity();

//Load a TexturePacker JSON-Array data file of coordinates
var sheetDivider : TexturePackerDivider = new TexturePackerDivider();
sheetDivider.jsonResource = PBE.resourceManager.load("assets/imagesheet_data.json") as JSONResource;

//Create a sprite sheet of the image atlas to be divided up
//This component caches and stores each frames data. to save memory
var sheet : SpriteSheetComponent = new SpriteSheetComponent();
sheet.filename = "assets/imagesheet.png";
sheet.divider = sheetDivider;

var spriteSheetRenderer : SpriteSheetRenderer = new SpriteSheetRenderer();
spriteSheetRenderer.spriteSheet = sheet;
//Add the renderer to a scene to display it
spriteSheetRenderer.scene = scene; 
//You can changed the current frame by changing the spriteIndex.
//spriteSheetRenderer.spriteIndex = 1;

entity.addComponent(spriteSheetRenderer, "SpriteSheetRenderer");

A Sprite Sheet Renderer requires a Sprite Sheet to display anything. A Sprite Sheet requires a divider to know how to split up the image into individual frames. The best divider is the Texture Packer Divider because it allows you to use the TexturePacker application to setup your sprite sheet.

Follow Us For Updates