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

For images that were Trimmed the parseAltasDefinition function need to be updated to take into account if a sprite has been trimmed. This data is used to modify the corner x and y offeset values.

This is important because the Coordinate System in the Canvas will place an image according to its top left corner. The trimming precess in texture packer can move the top left corner to the new trimmed location. As such, one need to refer to the trim data against the source data to figure out what the proper offset is to draw the sprite in the correct location. Considering this one need to update the pasre Atlas definition to take into account the differences between the framed version and the source version to properly update the offset values so that the sprite draws in the right location.

In order to update the cx and cy offset for trimmed sprites, one firstly need to understand that the texture packer will only do a smart trim fro the edges to the center. For instance, if one is in situation where one has a box and pixels in the top left quadrat, it would not trim that sprite because it can not trim it to the center. Because of this, one do not actually need any of the information from the from in order to create the new cx and cy values. Instead all what one has to do is to figure out the half dimensions for the sprite and create an inverse of that, which represents the offset. One stores the cx and cy here, which means if the sprite is or is not trimmed, it does not really matter in the drawing function that uses these values later.

parseAtlasDefinition: function (atlasJSON) {
    var parsed = JSON.parse(altasJSON);
    for(var key in parsed.frames) {
        var sprite = parsed.frames[key];
        // Define the center of the sprite as an offset
        var cx = -sprite.frame.w * 0.5;
        var cy = -sprite.frame.h * 0.5;
        // If the sprite s trimmed, then one need to update the offset
       if(sprite.trimmed) {
            cx = sprite.spriteSourceSize.x - (sprite.sourceSize.w * 0.5);
            cy = sprite.spriteSourceSize.y - (sprite.sourceSize.h * 0.5);
        // Define the sprite for this sheet.
        this.defSprite(key, sprite.frame.x, sprite.frame.y, sprite.frame.w, sprite.frame.h, cx, cy);

Tags: manipulation, coding, image, media
Categories: Tutorial, reST
Parent: HTML5

Update entry (Admin) | See changes

Comment on This Data Unit