SlideShare una empresa de Scribd logo
Despliegue de sprites
animados 2D
Juan Carlos Zuluaga
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.
Sprites Animados y
Mensajes
Proyecto #2
Sprites Animados
Proyecto #2 – Parte #1
 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;
 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();
// 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
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:
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));
}
 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);
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:
spriteBatch.Begin();
playerAnimation.Draw(spriteBatch);
spriteBatch.End();
 Ya puedes probar el proyecto y ver a Ken corriendo como un condenado
Mensajes de Texto
Proyecto #2 – Parte #2
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.
 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
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

Más contenido relacionado

La actualidad más candente

Creando juegos con game maker 8
Creando juegos con game maker 8Creando juegos con game maker 8
Creando juegos con game maker 8
Henrydarklite
 
Elementos de la interfaz de flash
Elementos de la interfaz de flashElementos de la interfaz de flash
Elementos de la interfaz de flash
Tomas Garcia
 
Tutorial game maker
Tutorial game makerTutorial game maker
Tutorial game maker
Joserichi
 
Game Maker Primera parte
Game Maker Primera parteGame Maker Primera parte
Game Maker Primera parte
www.areatecnologia.com
 
6. revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame
6.  revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame6.  revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame
6. revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame
Victor Aravena
 
Tutorial Game Maker segunda parte
Tutorial Game Maker segunda parteTutorial Game Maker segunda parte
Tutorial Game Maker segunda parte
www.areatecnologia.com
 
Guia de programaciвn corregida
Guia de programaciвn corregidaGuia de programaciвn corregida
Guia de programaciвn corregida
semilleroingpuj
 
Manual de practicas segundo parcial
Manual de practicas segundo parcialManual de practicas segundo parcial
Manual de practicas segundo parcial
Guillermo Mendoza
 
GAME MAKER
GAME MAKERGAME MAKER
GAME MAKER
manuyvalen
 
Tutorial unity3d 1_español
Tutorial unity3d 1_españolTutorial unity3d 1_español
Tutorial unity3d 1_español
Omar Eduardo Sojo Romero
 
TUTORIAL DE ELABORACION DE DEMS, CURVAS DE NIVEL Y TINS
TUTORIAL DE ELABORACION DE DEMS, CURVAS DE NIVEL Y TINSTUTORIAL DE ELABORACION DE DEMS, CURVAS DE NIVEL Y TINS
TUTORIAL DE ELABORACION DE DEMS, CURVAS DE NIVEL Y TINS
Laura Maruri
 
Scratch en el aula primaria desde cero. Pensamiento computacional y algorítmi...
Scratch en el aula primaria desde cero. Pensamiento computacional y algorítmi...Scratch en el aula primaria desde cero. Pensamiento computacional y algorítmi...
Scratch en el aula primaria desde cero. Pensamiento computacional y algorítmi...
Luis Miguel Iglesias Albarrán
 
Scratch tangram-
Scratch  tangram-Scratch  tangram-
Scratch tangram-
ctepay
 
Guía paso a paso curso scratch (Parte I - 2016)
Guía paso a paso curso scratch (Parte I - 2016)Guía paso a paso curso scratch (Parte I - 2016)
Guía paso a paso curso scratch (Parte I - 2016)
Agneta Gallardo
 
Programación de Videojuegos con Python y Pilas (IX)
Programación de Videojuegos con Python y Pilas (IX)Programación de Videojuegos con Python y Pilas (IX)
Programación de Videojuegos con Python y Pilas (IX)
Fernando Salamero
 
Vray14520
Vray14520Vray14520
Vray14520
Arturo Serpas
 
Makeblock bloques de_programacion
Makeblock bloques de_programacionMakeblock bloques de_programacion
Makeblock bloques de_programacion
Joesclajo Garcia
 
Manual de-flash-cs5
Manual de-flash-cs5Manual de-flash-cs5
Manual de-flash-cs5
Luis Jaya
 

La actualidad más candente (18)

Creando juegos con game maker 8
Creando juegos con game maker 8Creando juegos con game maker 8
Creando juegos con game maker 8
 
Elementos de la interfaz de flash
Elementos de la interfaz de flashElementos de la interfaz de flash
Elementos de la interfaz de flash
 
Tutorial game maker
Tutorial game makerTutorial game maker
Tutorial game maker
 
Game Maker Primera parte
Game Maker Primera parteGame Maker Primera parte
Game Maker Primera parte
 
6. revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame
6.  revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame6.  revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame
6. revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame
 
Tutorial Game Maker segunda parte
Tutorial Game Maker segunda parteTutorial Game Maker segunda parte
Tutorial Game Maker segunda parte
 
Guia de programaciвn corregida
Guia de programaciвn corregidaGuia de programaciвn corregida
Guia de programaciвn corregida
 
Manual de practicas segundo parcial
Manual de practicas segundo parcialManual de practicas segundo parcial
Manual de practicas segundo parcial
 
GAME MAKER
GAME MAKERGAME MAKER
GAME MAKER
 
Tutorial unity3d 1_español
Tutorial unity3d 1_españolTutorial unity3d 1_español
Tutorial unity3d 1_español
 
TUTORIAL DE ELABORACION DE DEMS, CURVAS DE NIVEL Y TINS
TUTORIAL DE ELABORACION DE DEMS, CURVAS DE NIVEL Y TINSTUTORIAL DE ELABORACION DE DEMS, CURVAS DE NIVEL Y TINS
TUTORIAL DE ELABORACION DE DEMS, CURVAS DE NIVEL Y TINS
 
Scratch en el aula primaria desde cero. Pensamiento computacional y algorítmi...
Scratch en el aula primaria desde cero. Pensamiento computacional y algorítmi...Scratch en el aula primaria desde cero. Pensamiento computacional y algorítmi...
Scratch en el aula primaria desde cero. Pensamiento computacional y algorítmi...
 
Scratch tangram-
Scratch  tangram-Scratch  tangram-
Scratch tangram-
 
Guía paso a paso curso scratch (Parte I - 2016)
Guía paso a paso curso scratch (Parte I - 2016)Guía paso a paso curso scratch (Parte I - 2016)
Guía paso a paso curso scratch (Parte I - 2016)
 
Programación de Videojuegos con Python y Pilas (IX)
Programación de Videojuegos con Python y Pilas (IX)Programación de Videojuegos con Python y Pilas (IX)
Programación de Videojuegos con Python y Pilas (IX)
 
Vray14520
Vray14520Vray14520
Vray14520
 
Makeblock bloques de_programacion
Makeblock bloques de_programacionMakeblock bloques de_programacion
Makeblock bloques de_programacion
 
Manual de-flash-cs5
Manual de-flash-cs5Manual de-flash-cs5
Manual de-flash-cs5
 

Destacado

Viniacom - Les bonnes raisons de passer au mobile.
Viniacom - Les bonnes raisons de passer au mobile.Viniacom - Les bonnes raisons de passer au mobile.
Viniacom - Les bonnes raisons de passer au mobile.
Viniacom
 
Mantenimiento del vehiculo
Mantenimiento del vehiculoMantenimiento del vehiculo
Mantenimiento del vehiculo
Saris Moncada Lopera
 
Les principales lignes de force de l'avis du cnt
Les principales lignes de force de l'avis du cntLes principales lignes de force de l'avis du cnt
Les principales lignes de force de l'avis du cnt
t-groep NV
 
Grupo y equipo
Grupo y equipoGrupo y equipo
Grupo y equipo
Balwant Chauhan
 
Organizad..[1]
Organizad..[1]Organizad..[1]
Organizad..[1]
Karmensilla Roubillar
 
La deserción escolar
La deserción escolarLa deserción escolar
La deserción escolar
Diego Olivares
 
14 miopatmetab
14 miopatmetab14 miopatmetab
Netscope présidentielle 2012 dominique de villepin laisse sceptique en franc...
Netscope présidentielle 2012  dominique de villepin laisse sceptique en franc...Netscope présidentielle 2012  dominique de villepin laisse sceptique en franc...
Netscope présidentielle 2012 dominique de villepin laisse sceptique en franc...
Institut Netscope
 
Expo ambiente
Expo ambienteExpo ambiente
Expo ambiente
marluzjo
 
Desastre en japon
Desastre en japonDesastre en japon
Desastre en japon
Lucero Arreguin
 
RUC DE SUNAT DE MAX
RUC DE SUNAT DE MAXRUC DE SUNAT DE MAX
RUC DE SUNAT DE MAX
Maxi Ordoñez Cabanillas
 
Matix cooperativsmo y asociatividad
Matix cooperativsmo y asociatividadMatix cooperativsmo y asociatividad
Matix cooperativsmo y asociatividad
tathyeliza
 
Presentación1
Presentación1Presentación1
Presentación1
Rienzi
 
Communication online ivy agency
Communication online ivy agency Communication online ivy agency
Communication online ivy agency
Virginie Bapaume
 
2014's Top 10 Antioxidant Supplements
2014's Top 10 Antioxidant Supplements2014's Top 10 Antioxidant Supplements
2014's Top 10 Antioxidant Supplements
Top10Supplements.com
 
Análisis fundamental métodos 7
Análisis fundamental   métodos 7Análisis fundamental   métodos 7
Análisis fundamental métodos 7
Franco Ramirez
 
Extrait des Offres d'emploi et stages à l'étranger
Extrait des Offres d'emploi et stages à l'étrangerExtrait des Offres d'emploi et stages à l'étranger
Extrait des Offres d'emploi et stages à l'étranger
Club TELI
 
Portafolio de servicios abril2011
Portafolio de servicios abril2011Portafolio de servicios abril2011
Portafolio de servicios abril2011
UNIVERSIDAD DEL TEPEYAC
 

Destacado (20)

Parlons tourisme plénière webcreatif et mediart 360 - 2.1
Parlons tourisme plénière   webcreatif et mediart 360 - 2.1Parlons tourisme plénière   webcreatif et mediart 360 - 2.1
Parlons tourisme plénière webcreatif et mediart 360 - 2.1
 
Viniacom - Les bonnes raisons de passer au mobile.
Viniacom - Les bonnes raisons de passer au mobile.Viniacom - Les bonnes raisons de passer au mobile.
Viniacom - Les bonnes raisons de passer au mobile.
 
Mantenimiento del vehiculo
Mantenimiento del vehiculoMantenimiento del vehiculo
Mantenimiento del vehiculo
 
Les principales lignes de force de l'avis du cnt
Les principales lignes de force de l'avis du cntLes principales lignes de force de l'avis du cnt
Les principales lignes de force de l'avis du cnt
 
Grupo y equipo
Grupo y equipoGrupo y equipo
Grupo y equipo
 
Organizad..[1]
Organizad..[1]Organizad..[1]
Organizad..[1]
 
La deserción escolar
La deserción escolarLa deserción escolar
La deserción escolar
 
14 miopatmetab
14 miopatmetab14 miopatmetab
14 miopatmetab
 
Netscope présidentielle 2012 dominique de villepin laisse sceptique en franc...
Netscope présidentielle 2012  dominique de villepin laisse sceptique en franc...Netscope présidentielle 2012  dominique de villepin laisse sceptique en franc...
Netscope présidentielle 2012 dominique de villepin laisse sceptique en franc...
 
Expo ambiente
Expo ambienteExpo ambiente
Expo ambiente
 
Desastre en japon
Desastre en japonDesastre en japon
Desastre en japon
 
RUC DE SUNAT DE MAX
RUC DE SUNAT DE MAXRUC DE SUNAT DE MAX
RUC DE SUNAT DE MAX
 
Matix cooperativsmo y asociatividad
Matix cooperativsmo y asociatividadMatix cooperativsmo y asociatividad
Matix cooperativsmo y asociatividad
 
Presentación1
Presentación1Presentación1
Presentación1
 
Communication online ivy agency
Communication online ivy agency Communication online ivy agency
Communication online ivy agency
 
2014's Top 10 Antioxidant Supplements
2014's Top 10 Antioxidant Supplements2014's Top 10 Antioxidant Supplements
2014's Top 10 Antioxidant Supplements
 
Análisis fundamental métodos 7
Análisis fundamental   métodos 7Análisis fundamental   métodos 7
Análisis fundamental métodos 7
 
Extrait des Offres d'emploi et stages à l'étranger
Extrait des Offres d'emploi et stages à l'étrangerExtrait des Offres d'emploi et stages à l'étranger
Extrait des Offres d'emploi et stages à l'étranger
 
Portafolio de servicios abril2011
Portafolio de servicios abril2011Portafolio de servicios abril2011
Portafolio de servicios abril2011
 
Rivière caristales
Rivière caristalesRivière caristales
Rivière caristales
 

Similar a Xna game studio presentación 02

Programación con Pygame IV
Programación con Pygame IVProgramación con Pygame IV
Programación con Pygame IV
Fernando Salamero
 
Presentacion420
Presentacion420Presentacion420
Presentacion420
Titiushko Jazz
 
Presentacion420
Presentacion420Presentacion420
Presentacion420
Titiushko Jazz
 
Programación i
Programación iProgramación i
HTML Tour - Programación de Videojuegos HTML5
HTML Tour - Programación de Videojuegos HTML5HTML Tour - Programación de Videojuegos HTML5
HTML Tour - Programación de Videojuegos HTML5
Plain Concepts
 
Unidad 2
Unidad 2Unidad 2
Entrega 3
Entrega 3Entrega 3
Entrega 3
sick007
 
Unidad 2 Manipular el Dibujo Utilizando Herramientas de Diseño
Unidad 2 Manipular el Dibujo Utilizando Herramientas de DiseñoUnidad 2 Manipular el Dibujo Utilizando Herramientas de Diseño
Unidad 2 Manipular el Dibujo Utilizando Herramientas de Diseño
Cesar Govea Rodriguez
 
Manipular el dibujo utilizando herramientas de diseño.
Manipular el dibujo utilizando herramientas de diseño.Manipular el dibujo utilizando herramientas de diseño.
Manipular el dibujo utilizando herramientas de diseño.
Oswaldo Díaz
 
Canvas
CanvasCanvas
Canvas
Julio Alfaro
 
PresentacióN2
PresentacióN2PresentacióN2
PresentacióN2
guestb57108
 
PresentacióN2
PresentacióN2PresentacióN2
PresentacióN2
guestb57108
 
Multimedia en android
Multimedia en androidMultimedia en android
Multimedia en android
Rafa González Jiménez
 
Animación con Adobe Flash CS3
Animación con Adobe Flash CS3Animación con Adobe Flash CS3
Animación con Adobe Flash CS3
Magali Mejía
 
Entorno visual p2
Entorno visual p2Entorno visual p2
Entorno visual p2
Jean Pierre Hernández
 
Unidad 2 gaem
Unidad 2 gaemUnidad 2 gaem
Unidad 2 gaem
betsaidiadelangel
 
Unidad 2 gaem
Unidad 2 gaemUnidad 2 gaem
Unidad 2 gaem
Pati Hernandez
 
Mobilessss
MobilessssMobilessss
Mobilessss
Juan Strongman
 
Xna game studio presentación 03
Xna game studio   presentación 03Xna game studio   presentación 03
Xna game studio presentación 03
Juan Cardona
 
Unidad 2
Unidad 2Unidad 2

Similar a Xna game studio presentación 02 (20)

Programación con Pygame IV
Programación con Pygame IVProgramación con Pygame IV
Programación con Pygame IV
 
Presentacion420
Presentacion420Presentacion420
Presentacion420
 
Presentacion420
Presentacion420Presentacion420
Presentacion420
 
Programación i
Programación iProgramación i
Programación i
 
HTML Tour - Programación de Videojuegos HTML5
HTML Tour - Programación de Videojuegos HTML5HTML Tour - Programación de Videojuegos HTML5
HTML Tour - Programación de Videojuegos HTML5
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Entrega 3
Entrega 3Entrega 3
Entrega 3
 
Unidad 2 Manipular el Dibujo Utilizando Herramientas de Diseño
Unidad 2 Manipular el Dibujo Utilizando Herramientas de DiseñoUnidad 2 Manipular el Dibujo Utilizando Herramientas de Diseño
Unidad 2 Manipular el Dibujo Utilizando Herramientas de Diseño
 
Manipular el dibujo utilizando herramientas de diseño.
Manipular el dibujo utilizando herramientas de diseño.Manipular el dibujo utilizando herramientas de diseño.
Manipular el dibujo utilizando herramientas de diseño.
 
Canvas
CanvasCanvas
Canvas
 
PresentacióN2
PresentacióN2PresentacióN2
PresentacióN2
 
PresentacióN2
PresentacióN2PresentacióN2
PresentacióN2
 
Multimedia en android
Multimedia en androidMultimedia en android
Multimedia en android
 
Animación con Adobe Flash CS3
Animación con Adobe Flash CS3Animación con Adobe Flash CS3
Animación con Adobe Flash CS3
 
Entorno visual p2
Entorno visual p2Entorno visual p2
Entorno visual p2
 
Unidad 2 gaem
Unidad 2 gaemUnidad 2 gaem
Unidad 2 gaem
 
Unidad 2 gaem
Unidad 2 gaemUnidad 2 gaem
Unidad 2 gaem
 
Mobilessss
MobilessssMobilessss
Mobilessss
 
Xna game studio presentación 03
Xna game studio   presentación 03Xna game studio   presentación 03
Xna game studio presentación 03
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 

Más de Juan Cardona

Xna game studio presentación 07
Xna game studio   presentación 07Xna game studio   presentación 07
Xna game studio presentación 07
Juan Cardona
 
Xna game studio presentación 06
Xna game studio   presentación 06Xna game studio   presentación 06
Xna game studio presentación 06
Juan Cardona
 
Xna game studio presentación 04
Xna game studio   presentación 04Xna game studio   presentación 04
Xna game studio presentación 04
Juan Cardona
 
Diplomado edumatica sesión #2
Diplomado edumatica   sesión #2Diplomado edumatica   sesión #2
Diplomado edumatica sesión #2
Juan Cardona
 
Diplomado edumatica sesión #1
Diplomado edumatica   sesión #1Diplomado edumatica   sesión #1
Diplomado edumatica sesión #1
Juan Cardona
 
Taller de programación clase #5
Taller de programación   clase #5Taller de programación   clase #5
Taller de programación clase #5
Juan Cardona
 
Taller de programación clase #4
Taller de programación   clase #4Taller de programación   clase #4
Taller de programación clase #4
Juan Cardona
 
Taller de programación clase #3
Taller de programación   clase #3Taller de programación   clase #3
Taller de programación clase #3
Juan Cardona
 
Taller de programación clase #2
Taller de programación   clase #2Taller de programación   clase #2
Taller de programación clase #2
Juan Cardona
 
Taller de programación clase #1
Taller de programación   clase #1Taller de programación   clase #1
Taller de programación clase #1
Juan Cardona
 

Más de Juan Cardona (10)

Xna game studio presentación 07
Xna game studio   presentación 07Xna game studio   presentación 07
Xna game studio presentación 07
 
Xna game studio presentación 06
Xna game studio   presentación 06Xna game studio   presentación 06
Xna game studio presentación 06
 
Xna game studio presentación 04
Xna game studio   presentación 04Xna game studio   presentación 04
Xna game studio presentación 04
 
Diplomado edumatica sesión #2
Diplomado edumatica   sesión #2Diplomado edumatica   sesión #2
Diplomado edumatica sesión #2
 
Diplomado edumatica sesión #1
Diplomado edumatica   sesión #1Diplomado edumatica   sesión #1
Diplomado edumatica sesión #1
 
Taller de programación clase #5
Taller de programación   clase #5Taller de programación   clase #5
Taller de programación clase #5
 
Taller de programación clase #4
Taller de programación   clase #4Taller de programación   clase #4
Taller de programación clase #4
 
Taller de programación clase #3
Taller de programación   clase #3Taller de programación   clase #3
Taller de programación clase #3
 
Taller de programación clase #2
Taller de programación   clase #2Taller de programación   clase #2
Taller de programación clase #2
 
Taller de programación clase #1
Taller de programación   clase #1Taller de programación   clase #1
Taller de programación clase #1
 

Último

Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdfInforme de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
KEVINYOICIAQUINOSORI
 
_Manejo de Riesgos en el Laboratorio.pdf
_Manejo de Riesgos en el Laboratorio.pdf_Manejo de Riesgos en el Laboratorio.pdf
_Manejo de Riesgos en el Laboratorio.pdf
correodetareas
 
"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra
"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra
"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra
241578066
 
Diapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptx
Diapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptxDiapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptx
Diapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptx
GnesisOrtegaDeLen
 
Conceptos y definiciones de Antenas y propagación
Conceptos y definiciones de Antenas y propagaciónConceptos y definiciones de Antenas y propagación
Conceptos y definiciones de Antenas y propagación
edgarcalle8
 
bomba-koomey -Todo sobre sus istema y conexiones
bomba-koomey -Todo sobre sus istema y conexionesbomba-koomey -Todo sobre sus istema y conexiones
bomba-koomey -Todo sobre sus istema y conexiones
JessAdrinGonzlezCade
 
DN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en PerúDN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en Perú
estudios22
 
11. Legislación Aplicada a la Informática.pdf
11. Legislación Aplicada a la Informática.pdf11. Legislación Aplicada a la Informática.pdf
11. Legislación Aplicada a la Informática.pdf
PanchoChangue
 
Transporte a través del tiempo en el perú.pdf
Transporte a través del tiempo en el perú.pdfTransporte a través del tiempo en el perú.pdf
Transporte a través del tiempo en el perú.pdf
milagrosAlbanPacherr
 
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdfBIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
sunwndniel
 
Generaciones de Computadoras .
Generaciones de Computadoras                 .Generaciones de Computadoras                 .
Generaciones de Computadoras .
gregory760891
 
2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx
2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx
2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx
bellomiguelangel68
 
Evolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TICEvolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TIC
Henry W. Zavala
 
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
sunwndniel
 
El uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptxEl uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptx
Katia Reyes
 
aplicaciones de sistema de informacion geografico
aplicaciones de sistema de informacion geograficoaplicaciones de sistema de informacion geografico
aplicaciones de sistema de informacion geografico
cyberquiximies
 
Catalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdfCatalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdf
walter729637
 
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
MenaOlortinYherlyEli
 
SEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docx
SEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docxSEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docx
SEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docx
Eddy Nathaly Jaimes Villamizar
 
Informe_mc_bombas_Warman_001-WEIR vulco.pdf
Informe_mc_bombas_Warman_001-WEIR vulco.pdfInforme_mc_bombas_Warman_001-WEIR vulco.pdf
Informe_mc_bombas_Warman_001-WEIR vulco.pdf
Rubén Cortes Zavala
 

Último (20)

Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdfInforme de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
 
_Manejo de Riesgos en el Laboratorio.pdf
_Manejo de Riesgos en el Laboratorio.pdf_Manejo de Riesgos en el Laboratorio.pdf
_Manejo de Riesgos en el Laboratorio.pdf
 
"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra
"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra
"El uso de las TIC en la vida cotidiana". SantanaMartinez_Alejandra
 
Diapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptx
Diapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptxDiapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptx
Diapositiva sobre Tecnologia de la Información y Telecomunicaciones.pptx
 
Conceptos y definiciones de Antenas y propagación
Conceptos y definiciones de Antenas y propagaciónConceptos y definiciones de Antenas y propagación
Conceptos y definiciones de Antenas y propagación
 
bomba-koomey -Todo sobre sus istema y conexiones
bomba-koomey -Todo sobre sus istema y conexionesbomba-koomey -Todo sobre sus istema y conexiones
bomba-koomey -Todo sobre sus istema y conexiones
 
DN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en PerúDN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en Perú
 
11. Legislación Aplicada a la Informática.pdf
11. Legislación Aplicada a la Informática.pdf11. Legislación Aplicada a la Informática.pdf
11. Legislación Aplicada a la Informática.pdf
 
Transporte a través del tiempo en el perú.pdf
Transporte a través del tiempo en el perú.pdfTransporte a través del tiempo en el perú.pdf
Transporte a través del tiempo en el perú.pdf
 
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdfBIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
 
Generaciones de Computadoras .
Generaciones de Computadoras                 .Generaciones de Computadoras                 .
Generaciones de Computadoras .
 
2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx
2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx
2 FIBRA OPTICA COMO MEDIO DE RED DE ACCESO.pptx
 
Evolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TICEvolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TIC
 
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
 
El uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptxEl uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptx
 
aplicaciones de sistema de informacion geografico
aplicaciones de sistema de informacion geograficoaplicaciones de sistema de informacion geografico
aplicaciones de sistema de informacion geografico
 
Catalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdfCatalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdf
 
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
 
SEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docx
SEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docxSEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docx
SEGUNDA GENERACIÓN xxxxxxxxxxxxxxxx.docx
 
Informe_mc_bombas_Warman_001-WEIR vulco.pdf
Informe_mc_bombas_Warman_001-WEIR vulco.pdfInforme_mc_bombas_Warman_001-WEIR vulco.pdf
Informe_mc_bombas_Warman_001-WEIR vulco.pdf
 

Xna game studio presentación 02

  • 1. Despliegue de sprites animados 2D Juan Carlos Zuluaga
  • 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.
  • 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.  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. // 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. 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. 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.  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. 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. spriteBatch.Begin(); playerAnimation.Draw(spriteBatch); spriteBatch.End();  Ya puedes probar el proyecto y ver a Ken corriendo como un condenado
  • 13. Mensajes de Texto Proyecto #2 – Parte #2
  • 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.  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. 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