Rotar Sprites

Hola a todos, vamos a continuar esta vez con otro tutorial sobre 2D, el último que hice fue el fondo con desplazamiento, esta vez, utilizaremos ese proyecto también para combinarlo con la rotación de sprites, en este caso, será la nave la que rote según las teclas que pulsemos. Pues bien, la idea es sencilla, pero esta vez hay que modificar ciertas cosas del proyecto de desplazamiento de fondo, si véis lo que os comentaba en ese tutorial, decía que mi idea era que el fondo no tuviese por que saber donde se encontraba la nave, pero ahora si nos hará falta, con lo que hay que cambiar un poco las cosas. Para empezar, el fondo se moverá dependiendo de donde se encuentra la nave, con lo que será la clase Nave la que dirija al fondo indicándole cuando hay que desplazarse hacia arriba, abajo, izquierda o derecha. A parte de eso, también hay que saber la dirección hacia donde me tengo que desplazar, antes era fácil ya que nos movíamos sin rotar el sprite, pero ahora depende de donde apunte la nave, tendré que desplazarme en el eje X y en el Y, en las siguientes imágenes se muestra lo que quiero decir: Básicamente estas son las dos complicaciones de todo esto, pero como veremos ahora es bastante sencillo. Empecemos por el problema de saber a donde tenemos que ir según donde apunte la dirección de la nave. Esto lo podemos calcular sabiendo el ángulo de rotación de la nave, para ello utilizaremos los senos y los cosenos de ese ángulo:

• Situación inicial: la nave apunta hacia arriba, el ángulo es 0.0, si queremos acelerar, deberemos subir solo por el eje Y, con lo que el vector de la dirección de la nave debería ser el (0,1), pero como en XNA los ejes decrecen hacia arriba, es decir, si queremos subir hacia arriba por la pantalla, tendremos que decrementar la coordenada Y, se nos queda que el vector de dirección es el (0,-1) y si recordamos algo del colegio, el coseno de 0 es 1 con lo que para calcular la posición Y del objeto la calcularemos como – cos (angDeRotacion)
• Para calcular la X podemos hacer algo parecido, imaginad la nave tumbada apuntando hacia la derecha, en esta ocasión solo queremos que se desplace por el eje X y no por el Y, si la nave apunta hacia la derecha, su ángulo será ahora de 90º, si recordamos, el seno de 90º es 1, justo lo que queremos, obteniendo el vector de direccion (1,0) que indica que solo habrá desplazamiento en el eje X, así pues, la coordenada X se calculará como sen (angDeRotación)

A la hora de codificarlo quedaría como se ve acontuniación:

if (teclado.IsKeyDown(Keys.Up))
 {
 Vector2 direccionNave = Vector2.Zero;

 //calculamos la direccion de hacia la que apunta la avioneta

 direccionNave.X = (float)Math.Sin(rotacion);
 direccionNave.Y = -(float)Math.Cos(rotacion);

 velocidad = velocidad + direccionNave*new Vector2(0.15f,0.15f);
 }

Ahí está todo lo que hemos comentado, en la última línea se calcula la velocidad final de la nave, que será la suma de la velocidad actual mas la nueva dirección, obteniéndose así la resultante de sumar ambos vectores, a la direccion de la nave le aplico una reduccióm multiplicándo cada componente por 0.15 para que la nave sea un poco más manejable. El otro punto a tratar era como indicar al fondo cuando desplazarse y cuando no, para ello, he dividido la pantalla en sectores, de tal forma que cuando la nave se encuentra en la parte superior de la pantalla o la inferior, o la parte izquierda o derecha, voy indicando al fondo que debe desplazarse hacia ese sitio:

/*Desplazar el fondo si es necesario*/
 if (Math.Abs(velocidad.X) > 0.1 || Math.Abs(velocidad.Y) > 0.1) {

 if (posicion.X < pantalla.Width * 0.4)
 {
 fondo.desplazarIzquierda();
 }
 if (posicion.X > 0.6 * pantalla.Width)
 {
 fondo.desplazarDerecha();
 }
 if (posicion.Y < pantalla.Height * 0.4)
 {
 fondo.desplazarArriba();
 }
 if (posicion.Y > pantalla.Height * 0.6)
 {
 fondo.desplazarAbajo();
 }
 }

Básicamente eso son los detalles distintos que teníamos que tratar ahora, no quiero extenderme más porque podéis verlo todo en el código fuente adjunto para trastear con él todo lo que queráis, por último os dejo un video para que veáis como queda todo 🙂 Espero que os resulte últil y si tenéis dudas, como siempre, espero vuestros comentarios, hasta la próxima!

Descargar código fuente

Rotar Sprites (1,3Mb) XNA 3.1

Rotar Sprites (1,3Mb) XNA 4.0

Flecha arriba para acelerar, flecha izquierda y derecha para rotar la nave

VIDEO

Anuncio publicitario