YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← Center ViewRect - HTML5 Game Development

Get Embed Code
3 Languages

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

  1. Now we run into an interesting concept. Is that we'd like to have our robots
  2. move around the screen, which presents a problem. Currently our canvas
  3. coordinates are the same as our map coordinates. Such that tiles 00 on the map
  4. renders to location 00 on the canvas, but as our robot moves around We want them
  5. to stay at the center of the screen and background move around accordingly. In
  6. order to properly translate to canvas we have to separate those two coordinate
  7. systems. Such that we can map the translated world value to the canvas
  8. coordinates to accurately draw. Your goal, if you choose to accept it, is to
  9. write a function that will translate the map to center around a given x, y pair.
  10. For instance, if we call center at 00, then the top left corner of the map 00,
  11. should render at the center of the canvas. Center is 256 by 256. Should put the
  12. map coordinates of 256, 256. In the world space at the center of the canvas.
  13. Now, write a function that will translate the map to center around a given x, y
  14. pair. For instance, if we call center at 00 then the top left corner of the map
  15. 00, should render at the center of the canvas. Center at 256 by 256 should do
  16. the corollary thing, placing coordinates of 256, 256 in world space at the
  17. center of the canvas. Now, notice you'll actually need to know the canvas width
  18. and canvas height when computing this data so you know where is the center of
  19. the canvas.