Working through trying to fix SpriteSheetFromAtlas

Author: photonstorm

v3/src/textures/Frame.js

@@ -66,9 +66,9 @@ var Frame = new Class({
         this.height = height;
 
         //  The half sizes of this frame (to save in constant calculations in the renderer)
-        this.halfWidth = width * 0.5;
+        this.halfWidth = Math.floor(width * 0.5);
 
-        this.halfHeight = height * 0.5;
+        this.halfHeight = Math.floor(height * 0.5);
 
         /**
         * @property {number} width - The rendering width of this Frame, taking trim into account.
@@ -143,6 +143,17 @@ var Frame = new Class({
         this.updateUVs();
     },
 
+    setCut: function (x, y, width, height)
+    {
+        this.cutX = x;
+        this.cutY = y;
+
+        this.cutWidth = width;
+        this.cutHeight = height;
+
+        return this.updateUVs();
+    },
+
     /**
     * If the frame was trimmed when added to the Texture Atlas, this records the trim and source data.
     *
@@ -184,9 +195,7 @@ var Frame = new Class({
         this.centerX = Math.floor(destWidth / 2);
         this.centerY = Math.floor(destHeight / 2);
 
-        this.updateUVs();
-
-        return this;
+        return this.updateUVs();
     },
 
     /**

v3/src/textures/TextureManager.js

@@ -176,6 +176,8 @@ var TextureManager = new Class({
 
     addSpriteSheetFromAtlas: function (key, config)
     {
+        console.log('addSpriteSheetFromAtlas', key);
+
         var atlasKey = GetValue(config, 'atlas', null);
         var atlasFrame = GetValue(config, 'frame', null);
 
@@ -191,16 +193,6 @@ var TextureManager = new Class({
         {
             var texture = this.create(key, sheet.source.image);
 
-            // {
-            //     "filename": "explosion",
-            //     "frame": {"x":2,"y":2,"w":319,"h":312}, = cutX, Y, W, H
-            //     "rotated": false,
-            //     "trimmed": true,
-            //     "spriteSourceSize": {"x":1,"y":6,"w":319,"h":312},
-            //     "sourceSize": {"w":320,"h":320},
-            //     "pivot": {"x":0.5,"y":0.5}
-            // },
-
             //  If trimmed we need to help the parser adjust
 
             console.log(sheet);
@@ -211,6 +203,7 @@ var TextureManager = new Class({
             }
             else
             {
+                // Parser.SpriteSheetFromAtlas(texture, sheet, config);
                 Parser.SpriteSheet(texture, 0, sheet.cutX, sheet.cutY, sheet.cutWidth, sheet.cutHeight, config);
             }
 

v3/src/textures/parsers/SpriteSheetFromAtlas.js

@@ -1,37 +1,80 @@
-var GetValue = require('../../utils/object/GetValue');
+var GetFastValue = require('../../utils/object/GetFastValue');
 
 var SpriteSheetFromAtlas = function (texture, frame, config)
 {
-    var frameWidth = GetValue(config, 'frameWidth', null);
-    var frameHeight = GetValue(config, 'frameHeight', frameWidth);
+    var frameWidth = GetFastValue(config, 'frameWidth', null);
+    var frameHeight = GetFastValue(config, 'frameHeight', frameWidth);
 
     //  If missing we can't proceed
     if (!frameWidth)
     {
         throw new Error('TextureManager.SpriteSheetFromAtlas: Invalid frameWidth given.');
     }
 
+/*
+{
+    "filename": "boomtest-notrim",
+    "frame": {"x":4,"y":4,"w":320,"h":320},
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": {"x":0,"y":0,"w":320,"h":320},
+    "sourceSize": {"w":320,"h":320},
+    "pivot": {"x":0.5,"y":0.5}
+},
+{
+    "filename": "boomtest",
+    "frame": {"x":976,"y":4,"w":306,"h":305},
+    "rotated": false,
+    "trimmed": true,
+    "spriteSourceSize": {"x":6,"y":5,"w":306,"h":305},
+    "sourceSize": {"w":320,"h":320},
+    "pivot": {"x":0.5,"y":0.5}
+},
+*/
+
+    //  The notrim version is smaller than sourceSize
+
     //  Add in a __BASE entry (for the entire atlas)
-    // var source = texture.source[0];
-    // texture.add('__BASE', 0, 0, 0, source.width, source.height);
+    // var source = texture.source[sourceIndex];
+    // texture.add('__BASE', sourceIndex, 0, 0, source.width, source.height);
 
-    var startFrame = GetValue(config, 'startFrame', 0);
-    var endFrame = GetValue(config, 'endFrame', -1);
-    var margin = GetValue(config, 'margin', 0);
-    var spacing = GetValue(config, 'spacing', 0);
+    var startFrame = GetFastValue(config, 'startFrame', 0);
+    var endFrame = GetFastValue(config, 'endFrame', -1);
+    var margin = GetFastValue(config, 'margin', 0);
+    var spacing = GetFastValue(config, 'spacing', 0);
 
     var x = frame.cutX;
     var y = frame.cutY;
+
     var cutWidth = frame.cutWidth;
     var cutHeight = frame.cutHeight;
     var sheetWidth = frame.realWidth;
     var sheetHeight = frame.realHeight;
 
+    console.log('x / y', x, y);
+    console.log('cutW / H', cutWidth, cutHeight);
+    console.log('sheetW / H', sheetWidth, sheetHeight);
+
     var row = Math.floor((sheetWidth - margin) / (frameWidth + spacing));
     var column = Math.floor((sheetHeight - margin) / (frameHeight + spacing));
     var total = row * column;
 
-    console.log('split sheet into rows/cols:', row, column, 'total frames:', total);
+    console.log('row', row, 'column', column, 'total', total);
+
+    //  trim offset
+
+    var leftPad = frame.x;
+    var leftWidth = frameWidth - leftPad;
+
+    var rightWidth = frameWidth - ((sheetWidth - cutWidth) - leftPad);
+
+    var topPad = frame.y;
+    var topHeight = frameHeight - topPad;
+
+    var bottomHeight = frameHeight - ((sheetHeight - cutHeight) - topPad);
+
+    // console.log('padding x', leftPad, 'y', topPad, 'right', rightPad, 'bottom', bottomPad);
+    console.log('LW', leftWidth, 'RW', rightWidth, 'TH', topHeight, 'BH', bottomHeight);
 
     if (startFrame > total || startFrame < -total)
     {
@@ -49,14 +92,142 @@ var SpriteSheetFromAtlas = function (texture, frame, config)
         total = startFrame + (endFrame + 1);
     }
 
-    var fx = margin;
-    var fy = margin;
-    var ax = 0;
-    var ay = 0;
     var sheetFrame;
 
+    var width = frame.cutWidth;
+    var height = frame.cutHeight;
+    var sourceIndex = frame.sourceIndex;
+
+    var frameX = margin;
+    var frameY = margin;
+    var frameIndex = 0;
+
+    for (var sheetY = 0; sheetY < column; sheetY++)
+    {
+        var topRow = (sheetY === 0);
+        var bottomRow = (sheetY === column - 1);
+
+        // var fy = margin + ((frameHeight + spacing) * sheetY);
+
+        for (var sheetX = 0; sheetX < row; sheetX++)
+        {
+            // var fx = margin + ((frameWidth + spacing) * sheetX);
+            var leftRow = (sheetX === 0);
+            var rightRow = (sheetX === row - 1);
+
+            //  fx / fy is wrong
+
+            // var frame = new Frame(this, name, sourceIndex, x, y, width, height);
+            // x/y/w/h = set to the CUT values AND normal values
+            // we need to override the cut values and setTime does NOT do that
+
+            sheetFrame = texture.add(frameIndex, sourceIndex, x + frameX, y + frameY, frameWidth, frameHeight);
+
+            if (leftRow || topRow || rightRow || bottomRow)
+            {
+                var destWidth = frameWidth;
+                var destHeight = frameHeight;
+
+                if (leftRow)
+                {
+                    destWidth = leftWidth;
+                }
+                else if (rightRow)
+                {
+                    destWidth = rightWidth;
+                }
+
+                if (topRow)
+                {
+                    destHeight = topHeight;
+                }
+                else if (bottomRow)
+                {
+                    destHeight = bottomHeight;
+                }
+
+                sheetFrame.cutWidth = destWidth;
+                sheetFrame.cutHeight = destHeight;
+            }
+
+            frameX += spacing;
+
+            if (leftRow)
+            {
+                frameX += leftWidth;
+            }
+            else if (rightRow)
+            {
+                frameX += rightRow;
+            }
+            else
+            {
+                frameX += frameWidth;
+            }
+
+            /*
+            if (leftRow || topRow || rightRow || bottomRow)
+            {
+                var actualWidth = frameWidth;
+                var actualHeight = frameHeight;
+                var destX = (leftRow) ? leftPad : 0;
+                var destY = (topRow) ? topPad : 0;
+
+                var destWidth = frameWidth;
+                var destHeight = frameHeight;
+
+                if (leftRow)
+                {
+                    destWidth = leftWidth;
+                }
+                else if (rightRow)
+                {
+                    destWidth = rightWidth;
+                }
+
+                if (topRow)
+                {
+                    destHeight = topHeight;
+                }
+                else if (bottomRow)
+                {
+                    destHeight = bottomHeight;
+                }
+
+                // sheetFrame.cutWidth = destWidth;
+                // sheetFrame.cutHeight = destHeight;
+                // sheetFrame.updateUVs();
+
+                // sheetFrame.setTrim(actualWidth, actualHeight, destX, destY, destWidth, destHeight);
+            }
+            */
+
+            // console.log(sheetFrame);
+
+            frameIndex++;
+        }
+
+        frameX = margin;
+        frameY += spacing;
+
+        if (topRow)
+        {
+            frameY += topHeight;
+        }
+        else if (bottomRow)
+        {
+            frameY += bottomHeight;
+        }
+        else
+        {
+            frameY += frameHeight;
+        }
+    }
+
+    /*
     for (var i = 0; i < total; i++)
     {
+
         ax = 0;
         ay = 0;
 
@@ -73,12 +244,14 @@ var SpriteSheetFromAtlas = function (texture, frame, config)
             ay = h - height;
         }
 
-        sheetFrame = texture.add(i, sourceIndex, x + fx, y + fy, frameWidth - ax, frameHeight - ay);
+        // console.log('Add frame', i);
+        // console.log('x', (x + fx), 'y', (y + fy), 'w', (frameWidth - ax), 'h', (frameHeight - ay));
 
-        // sheetFrame.setTrim(sheetWidth, sheetHeight, )
+        sheetFrame = texture.add(i, sourceIndex, x + fx, y + fy, frameWidth - ax, frameHeight - ay);
 
         // setTrim: function (actualWidth, actualHeight, destX, destY, destWidth, destHeight)
 
+        // sheetFrame.setTrim(sheetWidth, sheetHeight, )
 
         fx += frameWidth + spacing;
 
@@ -88,6 +261,7 @@ var SpriteSheetFromAtlas = function (texture, frame, config)
             fy += frameHeight + spacing;
         }
     }
+    */
 
     return texture;
 };