Gamificación, serious game, game-based learning, Gestión del tiempo
Xna game studio presentación 02
-
Upload
juan-cardona -
Category
Technology
-
view
127 -
download
2
Transcript of Xna game studio presentación 02
![Page 1: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/1.jpg)
Despliegue de sprites animados 2D
Juan Carlos Zuluaga
![Page 2: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/2.jpg)
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.
![Page 3: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/3.jpg)
Sprites Animados y Mensajes
Proyecto #2
![Page 4: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/4.jpg)
Sprites AnimadosProyecto #2 – Parte #1
![Page 5: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/5.jpg)
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;
![Page 6: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/6.jpg)
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();
![Page 7: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/7.jpg)
// 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
![Page 8: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/8.jpg)
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:
![Page 9: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/9.jpg)
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));
}
![Page 10: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/10.jpg)
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);
![Page 11: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/11.jpg)
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 hereplayerAnimation.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:
![Page 12: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/12.jpg)
spriteBatch.Begin(); playerAnimation.Draw(spriteBatch); spriteBatch.End();
Ya puedes probar el proyecto y ver a Ken corriendo como un
condenado
![Page 13: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/13.jpg)
Mensajes de TextoProyecto #2 – Parte #2
![Page 14: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/14.jpg)
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.
![Page 15: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/15.jpg)
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
![Page 16: Xna game studio presentación 02](https://reader035.fdocuments.ec/reader035/viewer/2022071821/55b7075ebb61ebb8458b4634/html5/thumbnails/16.jpg)
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