Parsing Texturepacker Output

Created on Feb. 20, 2013, 11:50 a.m. by Hevok & updated by Hevok on May 2, 2013, 5:09 p.m.

The output of texture packer is a JSON file. One need to load and parse the data in this file, in order to render all the sprites on the screen properly. For each chart in the atlas, the JSON file list a nice set of data, that allows to understand more about this chart. Primarily one is really only concerned with two things. The first, being the name of the chart, which is the name of the original loose asset before it was packed inside a atlas. Secondly, is the data in the frame parameter. The frame ahas 4 parameters that one needs to care about. The first two, x and y, represent the top left corner of the chart inside the Atlas. The next two are width and height, which represent the size of this chart in the Atlas itself. One need to use all 4 values to actually draw the char to the canvas. Given a data file one need to load the assets into a sample by filling out the parseAtlasDefinition function in the spreadsheet class.

Given the atlasJSON data that has been loaded from the xhr request. The first step that needs to be done is go through ad call JSON.parse on that. This will return the text JSON data into an actual JavaScript object with members and values that one can iterate over. This effect is used here. The parsed Object has a frames dictionary that one can actually iterate over to load all of the sprites. One need to fetch each key inside the dictionary and fetch the associated sprite Object that comes with it. From this one knows the Sprite Name and the Sprite Values. The next step is to actually define the center of the Image. So one multiplies the width as well as height times 0.5, which gives half the width and height. This Values are stored in the cx and cy as negative offset. The reason for this is that one will use the cx and cy values a little later on, during rendering, to transform the Object into proper space. Those are stored as negatives here so that one do not has to to do the mathematics later on when one draws Image. Once one has the data, on can go ahead forward and call the defSprite function passing in the Image name as a Key, then the frame.x, frame.y, width, height, center data.

var gSpriteSheets = [];
SpriteSheetClass = Class.extend({
    img: null,
    url: "",
    sprites: new Array();
    init: function(){},
    load: function(imgName){
        this.url = imgName;
        var.img = new.Image();
        img.src = imgName;
        this.img = img;
        gSpriteSheets[imgName] = this;
    defSprite: function(name, x, y, w, h, cx, cy) {
        var spt = {
            'id': name,
            'x': x,
            'y': y,
            'w': w,
            'h': h,
            'cx': cx = null ? 0 : cx,
            'cy': cy = null ? 0 : cy,
    parseAtlasDefinition: function(atlasJSON){
        var sprites JSON.parse(atlasJSON);
        for (var img in sprites['frames']){
            frame = sprites['frames'][img]['frame'];
            var cx = -frame.w * 0.5;
            var cy = -frame.w * 0.5;
           this.defSprite(img, frame['x'], y = frame['y'], frame['w'], frame['h'],  cx, cy);

Tags: conversion, coding, image
Categories: Tutorial, reST
Parent: HTML5

Update entry (Admin) | See changes

Comment on This Data Unit