English subtitles

← Rendering Texturepacker Output - HTML5 Game Development

Get Embed Code
6 Languages

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

  1. >> With this in mind, your next assignment requires you to use the data file
  2. you've parsed to render the few images on the screen. You're going to need to
  3. fill out the two functions below to properly draw images on the screen. Now,
  4. before you get started, let's talk about something real quick. Note that, before
  5. now, your artists were actually generating assets referencing loose files. And
  6. artists create some sort of texture, they put it on disk, and then they
  7. reference an object to that texture. Well, of course, there's a post-process.
  8. We've all crammed that all into a small little box, and we now have a missing
  9. correlation. The artist file still is going to reference the loose asset. But
  10. we've got it sitting around in a larger texture. How do we make a connection
  11. between the two? The drawSprite function needs to fix this. It assumes that it's
  12. going to be given a spritename, which represents the name of the loose asset
  13. file as well as the position X and position Y on where it wants to render it on
  14. the canvas. Since we're just given a spitename, we need to map where that
  15. spritename exists inside of the atlases that we've loaded. Now, for your
  16. benefit, we're going to help you out with this. Taking a look at the top of the
  17. file, we define a global dictionary object that represents every sprite sheet
  18. that's been loaded. In the load function for sprite sheet, we go ahead and add
  19. this sprite sheet into the global array, setting the sheet name as the key for
  20. the dictionary element. What this will allow you to do is when you're given the
  21. spritename inside of the draw function, you can iterate through all of the
  22. sprite sheets and for each sprite sheet, determine whether or not the given
  23. spritename exists in the sprites that have been defined for that sheet. This
  24. should be pretty straightforward since we've already covered the defined sprite
  25. function and you already have a list that includes a name. Once the drawSprite
  26. function figures out what atlas this given sprite is actually in, it can pass
  27. that data to drawSpriteInternal, handing off the sprite information, what atlas
  28. sheet its coming from, as well as the position X and Y that was given to us from
  29. drawSprite. Drawspriteinternal should actually do the heavy lifting of
  30. positioning the element, and drawing it to the world, taking advantage of the
  31. draw image API that we just covered with all of its new fancy bells and whistle
  32. parameters.