title: How to read center of trimmed sprite from TexturePacker generated JSON?
body: <p>In <a href="https://www.udacity.com/course/viewer#!/c-cs255/l-49464373/e-73862323/m-73162948" rel="nofollow noreferrer">this Udacity course</a>, we have to read a JSON file generated by <a href="https://www.codeandweb.com/texturepacker?_ga=1.154321534.710542885.1443333044" rel="nofollow noreferrer">TexturePacker</a> to compute the center of a sprite from a spritesheet. We have to consider whether the sprite is trimmed or not.</p>
  
  <p>An spritesheet with untrimmed sprites looks like this (empty pixels in green):</p>
  
  <p><a href="https://i.stack.imgur.com/1JEz4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1JEz4.png" alt="enter image description here"></a></p>
  
  <p>While an spritesheet with trimmed sprites looks like this (empty pixels in green):</p>
  
  <p><a href="https://i.stack.imgur.com/Y88Vf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y88Vf.png" alt="enter image description here"></a></p>
  
  <p>The difference, as you can probably tell, is that empty pixels are removed from the final spritesheet file. </p>
  
  <p>So, if I add a <code>circle.png</code> file of 32x32 pixels to my TexturePacker spritesheet, and the image's dimensions were only 24x24, TexturePacker would trim the image down to 24x24 and generate a png file of this size (assuming there was only one sprite) and the following JSON file:</p>
  
  <pre><code>{"frames": [
  
  {
      "filename": "circle.png",
      "frame": {"x":0,"y":0,"w":24,"h":24},
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {"x":5,"y":5,"w":24,"h":24},
      "sourceSize": {"w":34,"h":34},
      "pivot": {"x":0.5,"y":0.5}
  }],
  ...
  }
  </code></pre>
  
  <p>It details the following information:</p>
  
  <ul>
  <li><strong>frame</strong>: the coordinates, width and height of the sprite inside the spritesheet.</li>
  <li><strong>trimmed</strong>: whether the empty pixels were removed or not.</li>
  <li><strong>spriteSourceSize</strong>: the coordinates and size of the trimmed sprite inside the original image.</li>
  <li><strong>sourceSize</strong>: the size of the original image.</li>
  </ul>
  
  <p>I thought that, in order to get the center of the image, it was enough to calculate <code>sprite.frame.w/2</code> and <code>sprite.frame.h/2</code>, but, according to the course, this javascript is supposed to calculate the center:</p>
  
  <pre><code>//sprite is a javascript object that represents a sprite inside the 'frames' array
  if (sprite.trimmed) {
              cx = sprite.spriteSourceSize.x - (sprite.sourceSize.w * 0.5);
              cy = sprite.spriteSourceSize.y - (sprite.sourceSize.h * 0.5);
  }
  </code></pre>
  
  <p>Maybe it's something really simple, but I haven't been able to understand why they are using <code>spriteSourceSize</code>, since we will be reading the spritesheet and not the original image. </p>