Now we run into an interesting concept. Is that we'd like to have our robots
move around the screen, which presents a problem. Currently our canvas
coordinates are the same as our map coordinates. Such that tiles 00 on the map
renders to location 00 on the canvas, but as our robot moves around We want them
to stay at the center of the screen and background move around accordingly. In
order to properly translate to canvas we have to separate those two coordinate
systems. Such that we can map the translated world value to the canvas
coordinates to accurately draw. Your goal, if you choose to accept it, is to
write a function that will translate the map to center around a given x, y pair.
For instance, if we call center at 00, then the top left corner of the map 00,
should render at the center of the canvas. Center is 256 by 256. Should put the
map coordinates of 256, 256. In the world space at the center of the canvas.
Now, write a function that will translate the map to center around a given x, y
pair. For instance, if we call center at 00 then the top left corner of the map
00, should render at the center of the canvas. Center at 256 by 256 should do
the corollary thing, placing coordinates of 256, 256 in world space at the
center of the canvas. Now, notice you'll actually need to know the canvas width
and canvas height when computing this data so you know where is the center of
the canvas.
Ahora, nos adentramos en un concepto interesante.
Es el que hará que nuestros robots se muevan alrededor de la pantalla
lo que presenta un problema.
Actualmente, las coordenadas de nuestro lienzo
son iguales a las coordenadas de nuestro mapa.
De modo tal que patrón 0,0 en el mapa se muestra en la ubicación 0,0 del lienzo,
pero a medida que nuestros robots se mueven alrededor.
queremos que se queden en el centro de la pantalla
y el fondo se mueva de forma consistente.
Con la intención de traducir esto apropiadamente en el lienzo,
tenemos que separar esos dos sistemas de coordenadas.
De modo que podamos mapear el valor traducido del mundo
a las coordenadas del lienzo para dibujar de manera precisa.
Tu objetivo es, si lo aceptas, escribir la función
que traducirá el mapa a un centro en torno a un par de valores x, y dados.
Por ejemplo, si llamamos al centro en 0,0,
entonces el borde superior izquierdo del mapa 0,0
debería mostrarse al centro del lienzo.
Si el centro es 256 por256, ubica las coordenadas del mapa 256, 256
en el espacio del mundo al centro del lienzo,
Ahora, escribe una función que traduzca el mapa al centro
en base a un par de valores x, y dados.
Por ejemplo, si llamamos centro en 0,0
entonces el borde superior izquierdo del mapa 0,0
debería remitir al centro del lienzo.
Un centro en 256 por 256 debería producir la consecuencia natural,
de ubicar las coordenadas 256, 256
en el espacio del mundo al centro del lienzo.
Ahora, nota que realmente necesitas saber
el ancho del lienzo y el alto del lienzo cuando calculas estos datos,
así podrás saber donde está el centro del lienzo.
Agora encontramos um conceito interessante. Vamos fazer com que nossos robôs
se movam pela tela, o que supõe um problema. Atualmente, as nossas coordenadas
do canvas são as mesmas que as coordenadas do mapa. Assim que o bloco 00 no mapa
corresponde a localização 00 no canvas, mas quando nosso robô se mover, queremos
que ele se mantenha no centro da tela e o fundo da tela se movam de acordo com ele.
Para poder trasladar o canvas da forma correta temos que separar estes dois sistemas de
coordenadas. Para que podamos mapear o valor trasladado do mapa para as coordenadas
do canvas, e poder efetivamente desenhar. O seu objetivo, se quiser fazê-lo,
é escrever uma função que translade o centro do mapa ao redor de um par x,y específicos.
Por exemplo, se definimos o centro em 00, então o canto superior esquerdo do mapa 00,
deveria corresponder ao centro do canvas, que é 256 por 256. Você deve colocar as coordenadas
do mapa em 256, 256 no espaço do world, no centro do canvas.
Agora, escreva a função que centrará o mapa ao redor do par x, y especificado.
Por exemplo, se localizamos o centro em 00, então o canto superior esquerdo do mapa 00
deveria corresponder ao centro do canvas. O centro em 256 por 256 deveria criar um efeito
corolário, colocando as coordenadas 256, 256 no espaço do world no centro do canvas.
Repare, que você terá que saber a largura e altura do canvas
para calcular estes dados, para que você possa saber onde está o centro do canvas.