Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Xna game studio presentación 02

441 views

Published on

Creación de juegos mediante la plataforma XNA de Microsoft Visual Studio

Links para descargar material:
Parte 01: https://www.dropbox.com/s/2b3f27izg3wfqws/01.XNA.zip
Parte 02: https://www.dropbox.com/s/ep3634jsjullkbs/02.XNA.zip
Parte 03: https://www.dropbox.com/s/9e3q068t6mlkted/03.XNA.zip
Parte 04: https://www.dropbox.com/s/u4navlzlhtecjm0/04.XNA.zip
Parte 05: https://www.dropbox.com/s/oqjll5c73kbvu1j/05.XNA.zip

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Xna game studio presentación 02

  1. 1. Despliegue de sprites animados 2D Juan Carlos Zuluaga
  2. 2. Dinámica de animación  En principio contamos de una tira de imágenes que representan una animación. Lo que queremos implementaremos es una función capaz de desplegar una sola imagen, y trasladando la imagen, desplegamos la siguiente imagen consecutiva, y así sucesivamente, dándonos la ilusión de una imagen animada, como el efecto StopMotion.
  3. 3. Sprites Animados y Mensajes Proyecto #2
  4. 4. Sprites Animados Proyecto #2 – Parte #1
  5. 5.  Crear un nuevo proyecto XNA Game  Si ejecuta el programa verá una pantalla azul, Felicitaciones ya haz hecho el primer juego en XNA  Agregar la capeta Imágenes, y dentro de esta colocar la imgen (sprite) que deseamos mostrar en el juego, la cual es una tira de imágenes:  Vamos a agregar la clase Animation, la cual utilizaremos en múltiples proyectos. Como es una clase genérica, de alto reuso, la vamos a entender muy bien.  Lo primero que debes hacer es reemplazar los using, por estos: using System; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.Graphics;
  6. 6.  Ahora agregamos los siguientes atributos a la clase: // La imagen animada representada por un grupo de imágenes Texture2D spriteStrip; // Valor para escalar el sprite float scale; // Tiempo desde la ultima vez que se actualizo la imagen int elapsedTime; // Tiempo de despliegue por imagen int frameTime; // Numero de imágenes que conforman la animación int frameCount; // Indice de la imagen actual int currentFrame; // Color de la imagen a desplegar Color color; // El área de la imagen que vamos a desplegar Rectangle sourceRect = new Rectangle(); // El área donde queremos desplegar la imagen Rectangle destinationRect = new Rectangle();
  7. 7. // Ancho de la una imagen public int FrameWidth; // Alto de una imagen public int FrameHeight; // Estado de la animacion public bool Active; // Repetir animación public bool Looping; // Posición del sprite public Vector2 Position;  Para esta clase, utilizara tres métodos muy importantes: Initialize, Update y Draw. Para el método Initialize, evidentemente inicializaremos todos los atributos para luego desplegar la imagen
  8. 8. public void Initialize(Texture2D texture, Vector2 position, int frameWidth, int frameHeight, int frameCount, int frametime, Color color, float scale, bool looping) { // Mantener copias locales de los valores pasados this.color = color; this.FrameWidth = frameWidth; this.FrameHeight = frameHeight; this.frameCount = frameCount; this.frameTime = frametime; this.scale = scale; Looping = looping; Position = position; spriteStrip = texture; // Hacer reset a los tiempos elapsedTime = 0; currentFrame = 0; // Activar la animación por defecto Active = true; }  En cuanto al método Update, como ya se explicó la mecánica para animar sprites, aquí se implementa la lógica para desplegar la tira de imágenes, mostrándola una a una para dar la sensación de movimiento de los sprites. La lógica del método Update es el siguiente:
  9. 9. public void Update(GameTime gameTime) { // No actualizar si la imagen esta desactivada if (!Active) return; // Actualizar tiempo transcurrido elapsedTime += (int)gameTime.ElapsedGameTime.TotalMilliseconds; // Si elapsedTime es mayor que frame time debemos cambiar de imagen if (elapsedTime > frameTime) { // Movemos a la siguiente imagen currentFrame++; // Si currentFrame es igual al frameCount hacemos reset currentFrame a cero if (currentFrame == frameCount) { currentFrame = 0; // Si no queremos repetir la animacion asignamos Active a falso if (!Looping) Active = false; } // Reiniciamos elapsedTime a cero elapsedTime = 0; } // Tomamos la imagen correcta multiplicando el currentFrame por el ancho de la imagen sourceRect = new Rectangle(currentFrame * FrameWidth, 0, FrameWidth, FrameHeight); // Actualizamos la posicion de la imagen en caso que esta se desplace por la pantalla destinationRect = new Rectangle( (int)Position.X - (int)(FrameWidth * scale) / 2, (int)Position.Y - (int)(FrameHeight * scale) / 2, (int)(FrameWidth * scale), (int)(FrameHeight * scale)); }
  10. 10.  Finalmente llegamos en el método Draw, donde simplemente invocamos el método spriteBatch.Draw SIEMPRE y cuando active este en verdadero. Aquí esta el método Draw: public void Draw(SpriteBatch spriteBatch) { if (Active) { spriteBatch.Draw(spriteStrip, destinationRect, sourceRect, color); } }  En la clase Game1, comenzaremos agregando los siguientes atributos: Animation playerAnimation; Vector2 spritePos;  Proseguimos a dirigirnos al método LoadContent, donde cargaremos la imagen del Content a la variable playerTexture e instanciar la posición inicial del sprite, y se la enviamos por parámetros al método Initialize a nuestro objeto playerAnimation. Agreguemos estás líneas, luego de la línea: spriteBatch = new SpriteBatch(GraphicsDevice);
  11. 11. playerAnimation = new Animation(); Texture2D playerTexture = Content.Load<Texture2D>("Imagenes/ken"); spritePos = new Vector2( GraphicsDevice.Viewport.TitleSafeArea.X + GraphicsDevice.Viewport.TitleSafeArea.Width / 2, GraphicsDevice.Viewport.TitleSafeArea.Y + GraphicsDevice.Viewport.TitleSafeArea.Height / 2); playerAnimation.Initialize(playerTexture, spritePos, 101, 110, 6, 80, Color.White, 1f, true);  Ahora en el método Update, basta con solo invocar el método Update de nuestro objeto playerAnimation, luego del comentario: // TODO: Add your update logic here playerAnimation.Update(gameTime);  Y Finalmente, en el método Draw, invocamos el método Draw de nuestro objeto playerAnimation. Recuerda que debes encapsular esta instrucción con los metodos spriteBatch.Begin(); y spriteBatch.End(); de lo contrario, no veras ningún elemento desplegado en escena. Luego del comentario: // TODO: Add your drawing code here, agregamos:
  12. 12. spriteBatch.Begin(); playerAnimation.Draw(spriteBatch); spriteBatch.End();  Ya puedes probar el proyecto y ver a Ken corriendo como un condenado
  13. 13. Mensajes de Texto Proyecto #2 – Parte #2
  14. 14. SpriteFont  Esta clase representa una Fuente o Tipografía a nivel de código. Será necesario crear una instancia de la misma a través de un archivo de tipo XML con la configuración del tipo de letra, tamaño y características (negrita, cursiva, etc.) El Archivo SpriteFont  La estructura del archivo es bastante sencilla, como podremos ver a continuación tiene campos que son clave para la definición de la fuente:  Size: Tamaño de la fuente en puntos  Font Name: Nombre de la fuente (ver Fuentes Disponibles)  Spacing: Espaciado entre caracteres  Style: Bold (Negrita), Regular (Común) e Italic (cursiva)  Los campos restantes del archivo serán vistos en profundidad en el nivel Intermedio de la carrera.
  15. 15.  Cree la carpeta Fuente en el proyecto de contenido  Luego agregue un nuevo elemento tipo SpriteFont, llamado Fuente  Cambie los siguientes parámetros: <FontName>Segoe UI Mono</FontName> <Size>34</Size> <Spacing>0</Spacing> <Style>Bold</Style>  Agregue el siguiente atributo a la clase Game1: SpriteFont miFuente;  En el método Load, agregue la siguiente línea al final: miFuente = Content.Load<SpriteFont>("Fuentes/Fuente");  En el método Draw, agregue la siguiente línea antes de la línea del playerAnimation: spriteBatch.DrawString(miFuente, "Corre Forrest, Corre!", new Vector2(0, 0), Color.Orange);  Prueba tu juego, ahora con el mensaje escrito
  16. 16. Taller #2  Con las diferentes tiras de imágenes, construya un juego en el cual se muestren las animaciones  Tenga en cuenta que algunas imágenes son JPG, debe convertirlas a imágenes PNG sin fondo, para que el efecto se vea bien  Coloque varios mensajes con diferentes tipos de letra en diferentes partes de la pantalla

×