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.