Rendering Texturepacker Output

Created on Feb. 20, 2013, 12:48 p.m. by Hevok & updated by Hevok on May 2, 2013, 5:09 p.m.

Use the parsed data file to render the few images on the screen.

Artists are generating assets referencing loose files. An artists creates some sort of texture, they put it on disk and then they reference an Object to that texture. There is a post-process and all has been crammed that all into small little box. There is now missing correlation. The artist file still is going to reference the loose asset, but it is no sitting around in a large texture. To make a connection between the two a drawSprite function is needed to fix it. It assumes that it is given a sprite name, which represents the name of the loose asset file as well as the position x and y on where it wants to render it on the Canvas. Since one is given a sprite name, one need to map where that sprite name exists inside of the Atlases that one as loaded. For this a global dictionary Object is defined that represents every sprite sheet that has been loaded. In the load function for sprite sheet, one goes ahead adds this sprite sheet into the global array, setting the sheet name as the key for the dictionary element. This allows to do when on is given the sprite name inside the draw function, one can iterate through all of sprite sheets and for each sprite sheet determine whether or not the given sprite name exists in the Sprites that have been defined for that sheet. Once the drawSprite function figures out what Atlas this given sprite is actually in, it can pass that data to drawSpriteInternal, handling off the Sprite information, what Atlas sheet it is coming from, as well as the position x and y that was given from the drawSprite. drawSpriteInternal should actually do the heavy lifting of positioning the element, and drawing it to the world, taking advantage of the draw Image API.

function drawSprite(spritename, posX, posY) {

for (var sheetName in gSpriteSheets) {
    var sheet = gSpriteSheets[sheetName];
    var sprite = sheet.getStats(spritename);
    if(sprite != null) {
        __drawSpriteInternal(sprite, sheet, posX, posY);

function __drawSpriteInternal(spt, sheet, posX, posY) {
    if (!(spt || sheet) ){
    ctx.drawImage(sheet.img,  spt.x, spt.y, spt.w, spt.h,,, spt.w, spt.h);

Tags: rendering, coding, iamge
Categories: Tutorial, reST
Parent: HTML5

Update entry (Admin) | See changes

Comment on This Data Unit