English subtitles

← Parsing Texturepacker Output - HTML5 Game Development

Get Embed Code
5 Languages

Showing Revision 6 created 05/24/2016 by Udacity Robot.

  1. >> Our solution for parsing the atlas definition is pretty straightforward.
  2. First, we're given atlasJSON data that's been loaded from an xhr request. The
  3. first step that we need to do is actually go through and call JSON.parse on
  4. that. This will turn the text JSON data into an actual JavaScript object with
  5. members and values that we can iterate over. We use this to affect here. The
  6. parsed object has a frames dictionary that we'll actually iterate over to load
  7. all of our sprites. We'd like to fetch each key inside of our dictionary. And
  8. then, fetch the associated sprite object that comes with it. From here, we now
  9. have the sprite name and effectively, the sprite values. The next step we take
  10. here is to actually define the center of the image. So, we actually multiply the
  11. width and the height times 0.5, which would give us the half width and half
  12. height. Now, we store this value in the cx and cy as a negative offset. The
  13. reason for this is that we'll use the cx and cy values a little later on, during
  14. rendering, to transform our object into proper space. We store them as negatives
  15. here so that we don't have to do the mathematics later on when we're drawing the
  16. image. Once we've got this data, we go ahead forward and call the defSprite
  17. function, passing in the image name as a key. And then, the frame.x, frame.y
  18. with height and center data that you've already seen before.