Repaso capítulos I y II

Vamos a intentar hacer un poco de recapitulación sobre lo visto en los dos primeros capítulos, para ello vamos a hacer una aplicación muy sencilla que moverá una imagen 2D por pantalla.

El objetivo es utilizar un par de teclas para mover la imagen hacia delante y atrás, y otro par de teclas para rotar hacia un lado u otro.

La información que necesitamos es la posición inicial de la imagen, la rotación inicial y el vector que usaremos para mover la imagen como dirección, llamado a paritr de ahora front.

Con la información que tenemos y los conocimientos de los capítulos I y II tenemos más que suficiente para realizar todos los cálculos.

Vamos a empezar por establecer el sistema de coordenadas con el que trabajaremos, en este caso, el sistema de coordenadas 2D de XNA.

Si os fijáis, el eje X es el que estamos acostumbrados a ver en las coordenadas cartesianas, pero aquí, el eje Y está invertido, es decir, decrece hacia arriba y crece hacia abajo. Para intentar hacer las cosas un poco más complicadas y ver si nos estamos enterando de todo, vamos también a cambiar el origen de rotación de nuestra imagen, si os fijáis, en el capítulo de Ángulos siempre ponía el ángulo 0º coincidiendo con el eje X, ahora haremos lo siguiente:

Cómo abordar el problema

Si no somos muy diestros con las matemáticas, siempre podemos recurrir a técnicas manuales hasta lograr ver la relación que hay entre los valores que tenemos, por ejemplo:

–          Si queremos que nuestro circulo, se mueva solo hacia arriba, es decir, subiendo por el eje Y, lo que queremos es que solo se modifique la coordenada Y, y por las coordenas que usa XNA, querremos que lo haga negativamente.

–          Lo mismo ocurre si queremos que baje por la pantalla solo por eje Y, en este caso, tendríamos que aumentarlo.

–          Si queremos que se desplace solo hacia la derecha, tendremos que dejar quieto el eje Y y aumentar el eje X.

–          Si por el contrario, queremos moverlo solo hacia la izquierda, veremos que tenemos que decrementar el eje X.

De esta manera, suponiendo que 1 indica mover en este eje y 0 que no, tenemos que:

A continuación, veamos que ángulos formará nuestra imagen cuando queramos desplazarnos en una de estas direcciones:

Con esta información, intentemos fijarnos en un movimiento en concreto, en este caso, ir hacia arriba, si nos fijamos, cuando queremos movernos hacia arriba por la pantalla, formamos un ángulo 0 y además queremos decrementar nuestra coordenada Y y dejar intacta la X… que podríamos hacer?

Si recordamos un poco, el seno del ángulo 0 grados era 0, parece que eso podría servir para la coordenada X, además, el coseno de ese ángulo vale 1, con lo que quizás podríamos usar este valor y cambiarle el signo.

Veamos que ocurre con ir a la derecha,  el ángulo es 90º, el seno de ese ángulo es 1, el coseno de 90º es 0, justo lo que necesitamos.

Si probamos los demás ejemplos veremos que se cumple, es decir, para calcular el vector front de nuestra imagen utilizaremos la siguiente fórmula:

Coordenada X = seno del ángulo actual.

Coordenada Y = – coseno del ángulo actual.

Otro enfoque

Sin necesidad de hacer ninguna tabla también podríamos saber que esas son las coordenadas que necesitamos. Veamos las transformaciones que hemos hecho, en condiciones normales del Capítulo II, las coordenadas serían:

Componente X = coseno(ángulo)
Componente Y = seno (ángulo)

Como XNA cambia el sentido del eje Y, las nuevas coordenadas serían:

Componente X = coseno(ángulo)
Componente Y = – seno (ángulo)

Y además, como nosotros hemos cambiado el origen de la rotación de la imagen, y además en 90º, estamos cambiando el valor del seno por el del coseno, con lo que las coordenadas serían:

Componente X = seno (ángulo)
Componente Y = – coseno (ángulo)

Y como podemos comprobar, son las mismas obtenidas en el mismo análisis anterior.

Código

Todo esto queda resumido en código en una escasa línea, en mi ejemplo he creado la siguiente función:

private void UpdatePlayerFront()
{
//Actualizar en cada frame el nuevo vector de direccion segun la rotacion de la textura
playerFront = new Vector2((float)Math.Sin(rotacion), -(float)Math.Cos(rotacion));
}

Posteriormente, también tenemos el método que se encarga de actualizar el valor del ángulo actual según las teclas que pulsemos, además, controlamos que el valor del ángulo no se vaya del rango [0 , 360º]

private void UpdateKeyboard()

{

if (Keyboard.GetState().IsKeyDown(Keys.Escape))

{

this.Exit();

}

if (Keyboard.GetState().IsKeyDown(Keys.W))

{

posicion += playerFront * 2; //Actualizar posicion actual, sumandole el front multiplicado por una velocidad

}

if (Keyboard.GetState().IsKeyDown(Keys.S))

{

posicion -= playerFront * 2; //Actualizar posicion actual, sumandole el front multiplicado por una velocidad

}

if (Keyboard.GetState().IsKeyDown(Keys.D))

{

rotacion += 0.01f;

UpdatePlayerFront();

}

if (Keyboard.GetState().IsKeyDown(Keys.A))

{

rotacion -= 0.01f;

UpdatePlayerFront();

}

//Hemos dado una vuelta completa? Resetear angulos

if (rotacion > 2 * Math.PI) rotacion = 0.0f;

if (rotacion < 0) rotacion = 2 * (float)Math.PI;

}

Descarga ejemplo

 XNA 4.0 – Repaso conceptos matemáticos, capítulos I y II

Teclas:

W: ir hacia delante.

S: ir hacia detrás.

D: rotar hacia la derecha.

A: rotar hacia la izquierda.

3 pensamientos en “Repaso capítulos I y II

  1. Pingback: Nuevo ejemplo en la seria de repaso matemático | Aprendiendo XNA

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s