Hasta ahora tenemos una aeronave que se puede mover a lo largo de la pantalla, pero sin ninguna animación, no se ve interesante ni llamativo para el usuario. Eso lo vamos arreglar ahora. Utilizaremos la clase “Animacion” que importamos desde la parte 1 de este tutorial. En caso que no hiciste el tutorial de animación en este blog, es recomendable que lo leas para que entiendas el mecanismo utilizado para desplegar objetos animados en la pantalla. Accede dicho tutorial dando click en el siguiente enlace: Despliegue de sprites animados 2D.
En la clase jugador
En esta clase Jugador, lo primero que haremos es reemplazar la variable
public Textured2D PlayerTexture
Por esta variable:
public Animation PlayerAnimation;
Esto es necesario ya que no trabajaremos desplegando una Textura estatica de la nave. Trabajaremos con la clase animacion para trabajar con el mecanismo de animacion de sprites. Debido a este cambio de atributo, debemos modificar unas cuantas instrucciones en otros metodos. Ve al metodo Initialize, y reemplazalo por el siguiente:
public void Initialize(Animation animation, Vector2 position)
{
PlayerAnimation = animation;
Position = position;
// Set the player to be active
Active = true;
// Set the player health
Health = 100;
}
Aquí lo que hicimos fue asignar el atributo Animacion que nos fue pasado por parámetro, al igual que la posición. Hacemos true al atributo active para que sea desplegado por defecto, y le inicializamos la vida de la nave a 100. También debemos modificar los atributos Width y Height en la clase jugador. Reemplázalas con lo siguiente:
// Get the width of the player ship
public int Width
{
get { return PlayerAnimation.FrameWidth; }
}
// Get the height of the player ship
public int Height
{
get { return PlayerAnimation.FrameHeight; }
}
Ya que no nos interesa saber el alto ni ancho de la imagen Texture2d que teníamos antes, sino el ancho y alto de una imagen en nuestra clase Animacion. Con respecto a Update, debemos actualizar la posición e invocar el método Update de PlayerAnimation para desplazar el sprite a lo largo de la pantalla con el campo Position, e invocamos Update para el efecto de animación. El método Update queda de la siguiente manera:
public void Update(GameTime gameTime)
{
PlayerAnimation.Position = Position;
PlayerAnimation.Update(gameTime);
}
Finalmente, reemplazamos el método Draw que nos desplegaba la Textura2D estática, llamando al método Draw de PlayerAnimation para que despliegue el sprite animado. El método Draw quedaría de la siguiente manera:
public void Draw(SpriteBatch spriteBatch)
{
PlayerAnimation.Draw(spriteBatch);
}
En la clase Game1
Por último nos queda modificar la clase principal, que involucra la carga de las imágenes de animación, y mandarlas al objeto Jugador por el método Initialize. Dirígete a LoadContent, y reemplaza el método completo por este:
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
Animation playerAnimation = new Animation();
Texture2D playerTexture = Content.Load<Texture2D>("Imagenes/animacionNave");
playerAnimation.Initialize(playerTexture,
Vector2.Zero, 115, 69, 8, 30, Color.White, 1f, true);
Vector2 playerPosition = new Vector2(
GraphicsDevice.Viewport.TitleSafeArea.X +
GraphicsDevice.Viewport.TitleSafeArea.Width / 2,
GraphicsDevice.Viewport.TitleSafeArea.Y +
GraphicsDevice.Viewport.TitleSafeArea.Height / 2);
jugador.Initialize(playerAnimation, playerPosition);
}
Nada de otro mundo, simplemente instanciamos un objeto local de la clase Animacion, cargamos la tira de imágenes de la nave en playerTexture, e invocamos el método Initialize de playerAnimation, enviándole por parámetros:
- playerTexture, el cual es la tira completa de imágenes de la nave
- Vector2.Zero para la inicializar la posición
- 115, que es el ancho de una sola imagen expresados en pixeles
- 69, es el alto de una sola imagen expresados en pixeles
- 8, representa el numero de imágenes que componen la animación
- 30, tiempo de despliegue por imagen expresados en milisegundos
- Color.White, para desplegar la imagen en sus colores reales
- 1f, para el valor de escala del elemento
- true, para especificar si queremos que se repita la animación múltiples veces
Se instancia un Vector2 para la posición, para desplegar la nave en el centro de la pantalla, y finalmente se invoca el Initialize de jugador, enviandole playerAnimation y playerPosition. Ahora busca el método UpdatePlayer, y al comienzo del método, agrega la siguiente línea:
jugador.Update(gameTime);
Esto invoca el Update de jugador, que este a su vez hace Update a su atributo playerAnimation para refrescar las imágenes de despliegue para dar el efecto de animación de nuestra nave. Ahora no queda más sino armar la solución y ejecutar la aplicación. Ahora veras la nave animada en el centro de la pantalla, con un efecto de movimiento en las alas y el propulsor en la parte trasera. También observa que lo puedes controlar con las teclas de dirección del teclado.
Hasta este punto de nuestro juego de ejemplo, hemos logrado desplegar una nave animada, e interactiva con el usuario. De la misma manera como animamos el sprite del jugador, se harán con los demás elementos animados, como los enemigos. Puede descargar nuestro proyecto de ejemplo hasta este punto dando clic en el siguiente enlace:
Windows Phone Land 