WEBVTT

00:00:00.012 --> 00:00:03.792
Now we run into an interesting concept. Is that we'd like to have our robots

00:00:03.792 --> 00:00:07.459
move around the screen, which presents a problem. Currently our canvas

00:00:07.459 --> 00:00:11.304
coordinates are the same as our map coordinates. Such that tiles 00 on the map

00:00:11.304 --> 00:00:15.269
renders to location 00 on the canvas, but as our robot moves around We want them

00:00:15.269 --> 00:00:19.242
to stay at the center of the screen and background move around accordingly. In

00:00:19.242 --> 00:00:23.070
order to properly translate to canvas we have to separate those two coordinate

00:00:23.070 --> 00:00:26.504
systems. Such that we can map the translated world value to the canvas

00:00:26.504 --> 00:00:30.672
coordinates to accurately draw. Your goal, if you choose to accept it, is to

00:00:30.672 --> 00:00:35.316
write a function that will translate the map to center around a given x, y pair.

00:00:35.316 --> 00:00:39.848
For instance, if we call center at 00, then the top left corner of the map 00,

00:00:39.848 --> 00:00:44.549
should render at the center of the canvas. Center is 256 by 256. Should put the

00:00:44.549 --> 00:00:48.875
map coordinates of 256, 256. In the world space at the center of the canvas.

00:00:48.875 --> 00:00:52.977
Now, write a function that will translate the map to center around a given x, y

00:00:52.977 --> 00:00:57.219
pair. For instance, if we call center at 00 then the top left corner of the map

00:00:57.219 --> 00:01:01.336
00, should render at the center of the canvas. Center at 256 by 256 should do

00:01:01.336 --> 00:01:05.304
the corollary thing, placing coordinates of 256, 256 in world space at the

00:01:05.304 --> 00:01:09.531
center of the canvas. Now, notice you'll actually need to know the canvas width

00:01:09.531 --> 00:01:13.500
and canvas height when computing this data so you know where is the center of

00:01:13.500 --> 00:01:14.238
the canvas.