desarrollo de juegos de video aprendiendo a programar en c# de manera divertida sesión 4:...
TRANSCRIPT
Desarrollo de juegos de Desarrollo de juegos de videovideoAprendiendo a programar en C# de manera Aprendiendo a programar en C# de manera divertidadivertida
Sesión 4: Introducción a los sprites y la Sesión 4: Introducción a los sprites y la animaciónanimación
[email protected]@logicstudio.net
AgendaAgendaVisión de los objetivos de esta serie de Visión de los objetivos de esta serie de webcastswebcastsVisión de esta sesiónVisión de esta sesiónVisión de los elementos de un juego de videoVisión de los elementos de un juego de videoDemo – Implementación del juegoDemo – Implementación del juegoInformación para aprender másInformación para aprender másPreguntas y respuestasPreguntas y respuestas
Objetivos de esta serieObjetivos de esta serie
Dar a los participantes una introducción a Dar a los participantes una introducción a algunos de los conceptos fundamentales del algunos de los conceptos fundamentales del desarrollo de juegosdesarrollo de juegos
Introducir la programación con Visual C# 2005 Introducir la programación con Visual C# 2005 Express Edition, el nuevo IDE (ambiente de Express Edition, el nuevo IDE (ambiente de desarrollo integrado) de Microsoft para desarrollo integrado) de Microsoft para programadores principiantesprogramadores principiantes
Visión de esta sesiónVisión de esta sesión
Sesión 4/8 – Introducción a los sprites y la Sesión 4/8 – Introducción a los sprites y la animación:animación:
Fondo (background)Fondo (background)
Puertos de vista (viewport)Puertos de vista (viewport)
AnimacionesAnimaciones
Cuadros (frames)Cuadros (frames)
SpritesSprites
Retraso en cuadros (frame-delay)Retraso en cuadros (frame-delay)
TransparenciaTransparencia
Implementación del juego:Implementación del juego:FondoFondo
SpritesSprites
Dimensión del mundoDimensión del mundo
¿Qué es un mundo?¿Qué es un mundo?El medio en el que tiene lugar el juego El medio en el que tiene lugar el juego completocompleto
El mundo es un rectángulo con un ancho y El mundo es un rectángulo con un ancho y altura definidosaltura definidos
¿Para qué usamos un mundo?¿Para qué usamos un mundo?Para aplicar transformaciones matemáticas Para aplicar transformaciones matemáticas en los objetos del juego y las cámarasen los objetos del juego y las cámaras
Las transformaciones matemáticas operan Las transformaciones matemáticas operan sobre estructuras de objetos del juegosobre estructuras de objetos del juego
Todos los objetos deben existir dentro de Todos los objetos deben existir dentro de un área definidaun área definida
Puerto de vista (viewport)Puerto de vista (viewport)
¿Qué es un viewport?¿Qué es un viewport?Un rectángulo dentro del mundo Un rectángulo dentro del mundo seleccionado para desplegar es llamado seleccionado para desplegar es llamado una ventanauna ventana
La ventana define lo que se veLa ventana define lo que se ve
El viewport define donde se va a desplegarEl viewport define donde se va a desplegar
Un viewport es un área rectangular de la Un viewport es un área rectangular de la ventana de despliegueventana de despliegue
Por omisión, es la ventana completa de la Por omisión, es la ventana completa de la aplicaciónaplicación
Puede configurarse a cualquier tamaño Puede configurarse a cualquier tamaño menor en pixelesmenor en pixeles
Puerto de vista (viewport)Puerto de vista (viewport)
BitmapBitmap
¿Qué es un bitmap?¿Qué es un bitmap?Un bitmap es una imagen hecha de miles de Un bitmap es una imagen hecha de miles de pixelespixeles
Cada pixel tiene su propia posición y cualidadesCada pixel tiene su propia posición y cualidades
Cualidades tales como el color y el brillo se Cualidades tales como el color y el brillo se almacenan en el archivo de bitmapsalmacenan en el archivo de bitmaps
Intensidad RGBIntensidad RGBLos monitores trabajan con señales rojo, verde y Los monitores trabajan con señales rojo, verde y azulazul
Cada pixel de color tiene un valor de rojo, verde y Cada pixel de color tiene un valor de rojo, verde y azul dentro suyoazul dentro suyo
La intensidad de cada color básico crea un colorLa intensidad de cada color básico crea un color
En otras palabras, los colores se despliegan como En otras palabras, los colores se despliegan como intensidades variables de puntos rojo, verde y azulintensidades variables de puntos rojo, verde y azul
Fondo (background)Fondo (background)
¿Qué es un fondo?¿Qué es un fondo?Un fondo es una imagen o bitmap que será Un fondo es una imagen o bitmap que será colocado en el mundo en una cierta colocado en el mundo en una cierta posiciónposición
Es el área de la pantalla desplegada que no Es el área de la pantalla desplegada que no está cubierta por ningún objeto del juegoestá cubierta por ningún objeto del juego
Los objetos del juego se despliegan encima Los objetos del juego se despliegan encima del backgrounddel background
PosiciónPosiciónEl fondo debe posicionarse dentro del El fondo debe posicionarse dentro del mundomundo
La posición del fondo se sitúa relativo al La posición del fondo se sitúa relativo al rectángulo del mundo, no relativo al rectángulo del mundo, no relativo al viewportviewport
AnimacionesAnimaciones
¿Qué es una animación?¿Qué es una animación?Una serie de imágenes dibujadas en secuencia con Una serie de imágenes dibujadas en secuencia con una demora específica entre cada imagenuna demora específica entre cada imagen
Cada imagen (cuadro) es ligeramente diferenteCada imagen (cuadro) es ligeramente diferente
Cuando se reproducen en sucesión, dan la Cuando se reproducen en sucesión, dan la apariencia de movimiento (así es como funcionan apariencia de movimiento (así es como funcionan las películas en el cine)las películas en el cine)
¿Qué hacer cuando la animación termina?¿Qué hacer cuando la animación termina?Empezar la animación otra vez desde el primer Empezar la animación otra vez desde el primer cuadrocuadro
Definir un cierto cuadro para volver a empezar (no Definir un cierto cuadro para volver a empezar (no necesariamente el primero)necesariamente el primero)
Quedarse en el último cuadroQuedarse en el último cuadro
CuadrosCuadros
¿Qué es un cuadro?¿Qué es un cuadro?Un cuadro es simplemente una imagenUn cuadro es simplemente una imagen
La imagen es parte de una animaciónLa imagen es parte de una animación
Una animación está hecha de cuadrosUna animación está hecha de cuadros
Cuando los cuadros se presentan en Cuando los cuadros se presentan en secuencia, se produce la ilusión de secuencia, se produce la ilusión de movimientomovimiento
Cuadros y transparenciaCuadros y transparenciaUn cuadro está hecho de un bitmap (imagen)Un cuadro está hecho de un bitmap (imagen)El bitmap es una matriz de puntos que tienen una El bitmap es una matriz de puntos que tienen una forma rectangular o cuadradaforma rectangular o cuadradaNo todas las imágenes tienen una forma rectangularNo todas las imágenes tienen una forma rectangularLas áreas no utilizadas del rectángulo se llenarán con Las áreas no utilizadas del rectángulo se llenarán con un color específicoun color específicoEste color se denomina el color de transparenciaEste color se denomina el color de transparenciaEl mecanismo de dibujo ignorará todos los pixeles El mecanismo de dibujo ignorará todos los pixeles que tengan el color de la transparenciaque tengan el color de la transparenciaEn otras palabras, los pixeles transparentes no serán En otras palabras, los pixeles transparentes no serán dibujadosdibujadosCon y sin el color de transparencia:Con y sin el color de transparencia:
SpritesSprites
Los sprites son las fotos desplegadas Los sprites son las fotos desplegadas encima del backgroundencima del background
También son llamados objetos del juegoTambién son llamados objetos del juego
Usualmente, los sprites representan Usualmente, los sprites representan todas las partes móviles del juegotodas las partes móviles del juego
Los sprites pueden ser:Los sprites pueden ser:EnemigosEnemigos
Partes animadas del fondoPartes animadas del fondo
BalasBalas
SpritesSprites
El estado de un sprite varía en términos El estado de un sprite varía en términos de su imagen, posición y valoresde su imagen, posición y valores
Por esto, un sprite necesita guardar Por esto, un sprite necesita guardar información como:información como:
Posición actualPosición actual
Velocidad actualVelocidad actual
Dirección actualDirección actual
Visibilidad actualVisibilidad actual
Cuadro actualCuadro actual
Animación actualAnimación actual
Sprites activosSprites activos
Un sprite puede ser activo o pasivoUn sprite puede ser activo o pasivo
Cuando un sprite no está activo, todos sus Cuando un sprite no está activo, todos sus comportamientos se deshabilitan y no es comportamientos se deshabilitan y no es visiblevisible
Un sprite inactivo no será procesado durante Un sprite inactivo no será procesado durante el lazo del juegoel lazo del juego
Un sprite inactivo se usa regularmente Un sprite inactivo se usa regularmente cuando un prototipo de un sprite hace faltacuando un prototipo de un sprite hace falta
Un prototipo de un sprite se puede usar para Un prototipo de un sprite se puede usar para crear sprites idénticos al momento de crear sprites idénticos al momento de ejecuciónejecución
Se usa también cuando un sprite no necesita Se usa también cuando un sprite no necesita estar presente cuando un nivel empiezaestar presente cuando un nivel empieza
Sprites visiblesSprites visibles
En cada lazo del juego, el código procesará En cada lazo del juego, el código procesará todos los objetos del juegotodos los objetos del juegoEl procesamiento de objetos del juego incluye El procesamiento de objetos del juego incluye el manejo y el dibujadoel manejo y el dibujadoCuando un sprite es visible, será manejado y Cuando un sprite es visible, será manejado y dibujadodibujadoSin embargo, cuando el sprite es invisible, Sin embargo, cuando el sprite es invisible, será manejado pero no dibujadoserá manejado pero no dibujadoDurante el proceso de creación de un sprite, Durante el proceso de creación de un sprite, una animación con uno o más cuadros una animación con uno o más cuadros debería especificarsedebería especificarseLos sprites deben estar visibles cuando se Los sprites deben estar visibles cuando se requiere que el objeto del juego requiere que requiere que el objeto del juego requiere que una animación sea representada visualmenteuna animación sea representada visualmente
OrdenZ (ZOrder)OrdenZ (ZOrder)
Para entender el Para entender el OrdenZ, debemos OrdenZ, debemos simular un eje de simular un eje de coordenadas 3Dcoordenadas 3DEl eje z especifica la El eje z especifica la profundidad del ejeprofundidad del ejeMientras mayor sea el Mientras mayor sea el valor del OrdenZ, más valor del OrdenZ, más “profundo” se “profundo” se encuentra el objeto en encuentra el objeto en la pantallala pantallaLa foto del personaje La foto del personaje tiene OrdenZ(1) tiene OrdenZ(1) mientras que la foto mientras que la foto de la pelota tiene un de la pelota tiene un OrdenZ(2) superior. OrdenZ(2) superior. Por tanto, la pelota Por tanto, la pelota parece estar detrás parece estar detrás del personaje.del personaje.
OrdenZ (ZOrder)OrdenZ (ZOrder)
Puesto que nuestro Puesto que nuestro juego es una juego es una aplicación 2D, el aplicación 2D, el OrdenZ solo afecta OrdenZ solo afecta el orden de las el orden de las fotos y no su fotos y no su tamañotamaño
Todos los objetos Todos los objetos del juego son del juego son afectados por el eje afectados por el eje OrdenZOrdenZ
Implementación del proyectoImplementación del proyecto
Agregar el fondoAgregar el fondo
Agregar los spritesAgregar los sprites
Agregar la Agregar la animaciónanimación
Puerto de vista (viewport)Puerto de vista (viewport)
El sprite de fondoEl sprite de fondo
El fondo es especial y El fondo es especial y requiere dos sprites requiere dos sprites idénticos (la imagen de idénticos (la imagen de fondo)fondo)
Esto permite un scroll Esto permite un scroll fácilfácil
El fondo es una imagen, El fondo es una imagen, por lo que debe por lo que debe agregarse como un sprite agregarse como un sprite primeroprimero
Agregando el fondoAgregando el fondo
La representación visual del sprite en el La representación visual del sprite en el juego es la animaciónjuego es la animaciónUna animación está hecha de uno o Una animación está hecha de uno o más cuadrosmás cuadrosCada cuadro está hecho de una foto Cada cuadro está hecho de una foto (imagen) y una demora(imagen) y una demoraUna imagen es un archivo bitmapUna imagen es un archivo bitmapTodo nuestro código de creación de Todo nuestro código de creación de sprites se implementará como una clase sprites se implementará como una clase llamada StarTrooper en un archivo llamada StarTrooper en un archivo llamado StarTrooperGame.csllamado StarTrooperGame.cs
Cada foto es un objeto de la clase Cada foto es un objeto de la clase Picture que contiene un bitmapPicture que contiene un bitmap
Donde: el primer argumento es el Donde: el primer argumento es el nombre del bitmap y el segundo nombre del bitmap y el segundo argumento es el color de transparencia.argumento es el color de transparencia.
El objeto Picture se agrega al juego El objeto Picture se agrega al juego para que se pueda usar en el cuadro.para que se pueda usar en el cuadro.
Agregando el fondoAgregando el fondo
El cuadro es un objeto de clase Frame El cuadro es un objeto de clase Frame que usa al objeto Pictureque usa al objeto Picture
Donde: el primer argumento es un Donde: el primer argumento es un objeto Picture y el segundo argumento objeto Picture y el segundo argumento es un retraso de cuadroes un retraso de cuadro
La animación es un objeto de clase La animación es un objeto de clase Animation que está compuesto de Animation que está compuesto de muchos cuadrosmuchos cuadros
Agregando el fondoAgregando el fondo
Cada cuadro es agregado al objeto Cada cuadro es agregado al objeto AnimaciónAnimación
Crear el primer objeto Background ‘bg’ Crear el primer objeto Background ‘bg’ que deriva de la clase Spriteque deriva de la clase Sprite
Agregar el objeto animación pre-Agregar el objeto animación pre-existenteexistente
Agregando el fondoAgregando el fondo
Definir la posición del spriteDefinir la posición del sprite
Agregar el sprite al juegoAgregar el sprite al juego
Definir el orden z del fondo a 10Definir el orden z del fondo a 10
Agregar el sprite al juegoAgregar el sprite al juego
Agregando el fondoAgregando el fondo
Repetir el proceso con otro objeto Repetir el proceso con otro objeto BackgroundBackground
En este punto, se ha creado un sprite En este punto, se ha creado un sprite de fondo y se lo ha agregado al juegode fondo y se lo ha agregado al juego
Agregando el fondoAgregando el fondo
El código hasta este punto:El código hasta este punto:
Agregando el fondoAgregando el fondo
Agregando al patrulleroAgregando al patrullero
El Trooper es animado, así que se El Trooper es animado, así que se necesitan varias imágenesnecesitan varias imágenes
Cada imagen es cargada y agregada al Cada imagen es cargada y agregada al juegojuego
Cada imagen se usará para crear un Cada imagen se usará para crear un frameframe
Agregando al patrulleroAgregando al patrullero
Cada foto es usada para crear un Cada foto es usada para crear un cuadro:cuadro:
Cada cuadro es agregado a la Cada cuadro es agregado a la animación:animación:
Agregando al patrulleroAgregando al patrullero
Habilitar la animación y ponerla en un Habilitar la animación y ponerla en un lazo continuolazo continuo
Crear el patrulleroCrear el patrullero
Definir la posición del patrulleroDefinir la posición del patrullero
Agregar el patrullero al juego y definir Agregar el patrullero al juego y definir un prototipoun prototipo
Agregando al cóndorAgregando al cóndor
El cóndor es también animado, así que El cóndor es también animado, así que hay múltiples imágeneshay múltiples imágenes
Como el patrullero, cada imagen es Como el patrullero, cada imagen es cargada, agregada al juego y es usada cargada, agregada al juego y es usada para crear un cuadro para la animaciónpara crear un cuadro para la animación
Agregando el cóndorAgregando el cóndor
Cada foto es usada para crear un Cada foto es usada para crear un cuadro:cuadro:
Cada cuadro es agregado a una Cada cuadro es agregado a una animación:animación:
Agregando el cóndorAgregando el cóndor
El cóndor tiene una segunda animación El cóndor tiene una segunda animación (cuando explota)(cuando explota)
Definir la seguna animación es muy Definir la seguna animación es muy similar a la primerasimilar a la primera
Agregando el cóndorAgregando el cóndor
Cada foto se usa para crear un cuadro:Cada foto se usa para crear un cuadro:
Cada cuadro se agrega a una Cada cuadro se agrega a una animación:animación:
Agregando el cóndorAgregando el cóndor
Habilitar la animación pero *no* se Habilitar la animación pero *no* se pone en un lazopone en un lazo
Agregar las animaciones (tenemos dos)Agregar las animaciones (tenemos dos)
Definir el prototipoDefinir el prototipo
Creación de otros sprites o de Creación de otros sprites o de un nuevo juegoun nuevo juego
Nota: en este juego, por omisión, se crean Nota: en este juego, por omisión, se crean clases de sprites para crear objetos a partir clases de sprites para crear objetos a partir de ellos (Trooper, Condor y, más tarde, Fire). de ellos (Trooper, Condor y, más tarde, Fire). Por tanto, para agregar una nueva clase de Por tanto, para agregar una nueva clase de sprite (por ejemplo, un auto), hay que sprite (por ejemplo, un auto), hay que agregar un archivo llamado ‘Car.cs’ y crear agregar un archivo llamado ‘Car.cs’ y crear una clase derivada de la clase Spriteuna clase derivada de la clase Sprite
Nota: Una vez que se entiende el flujo del Nota: Una vez que se entiende el flujo del juego, se puede crear otro juego. Usando este juego, se puede crear otro juego. Usando este motor de juegos, se puede crear un nuevo motor de juegos, se puede crear un nuevo juego con una historia totalmente distinta, juego con una historia totalmente distinta, simplemente agregando un archivo llamado simplemente agregando un archivo llamado ‘MiJuego.cs’ (o algo así) en la que se define ‘MiJuego.cs’ (o algo así) en la que se define una clase llamada ‘MiJuego’ que deriva de la una clase llamada ‘MiJuego’ que deriva de la clase Gameclase Game
Resumen de la sesiónResumen de la sesión
Visión de los objetivos de la serieVisión de los objetivos de la serieFondoFondoViewportsViewportsAnimacionesAnimacionesCuadrosCuadrosSpritesSpritesRetraso de cuadrosRetraso de cuadrosTransparenciaTransparenciaImplementación del juegoImplementación del juego
FondoFondoSpritesSprites
¿Deseas aprender más?¿Deseas aprender más?
DigiPen Institute of Technology ofrece una DigiPen Institute of Technology ofrece una variedad de vías para explorar una carrera en variedad de vías para explorar una carrera en el desarrollo de juegos de video:el desarrollo de juegos de video:
La serie original de webcasts sobre desarrollo de La serie original de webcasts sobre desarrollo de juegos - Realizada en mayo del 2005. Se puede ver juegos - Realizada en mayo del 2005. Se puede ver en en http://www.microsoft.com/events/series/msdnvideohttp://www.microsoft.com/events/series/msdnvideodev.mspxdev.mspx El código de esta sesión está en El código de esta sesión está en http://www.digipen.edu/webcast/http://www.digipen.edu/webcast/ Talleres de verano – Series de clases introductorias Talleres de verano – Series de clases introductorias en programación de juegos, producción de en programación de juegos, producción de animaciones 3D y robótica. Más información en animaciones 3D y robótica. Más información en http://workshops.digipen.eduhttp://workshops.digipen.edu ProjectFUN Distance Learning – DigiPen tiene ProjectFUN Distance Learning – DigiPen tiene cursos en línea impartidos por sus instructores. cursos en línea impartidos por sus instructores. Más información en http://projectfun.digipen.eduMás información en http://projectfun.digipen.edu
Preguntas y respuestasPreguntas y respuestas
Proponer preguntas usando el botón “Ask a Proponer preguntas usando el botón “Ask a Question”Question”No te olvides de llenar la encuestaNo te olvides de llenar la encuestaPara webcasts futuros y pasados (en inglés) Para webcasts futuros y pasados (en inglés) http://www.microsoft.com/webcastshttp://www.microsoft.com/webcastsPara webcasts futuros y pasados (en Para webcasts futuros y pasados (en castellano) castellano) http://www.microsoft.com/spanish/msdn/latahttp://www.microsoft.com/spanish/msdn/latam/videom/video Esta serie de webcasts está grabada en Esta serie de webcasts está grabada en http://www.microsoft.com/http://www.microsoft.com/spanish/msdn/latam/video/academic.aspspanish/msdn/latam/video/academic.asp Este webcast fue presentado usando Este webcast fue presentado usando Microsoft Office LiveMeeting. Se puede Microsoft Office LiveMeeting. Se puede obtener una prueba de 14 días gratuita en obtener una prueba de 14 días gratuita en http://www.microsoft.com/presentlivehttp://www.microsoft.com/presentlive
¿Dónde se puede obtener ¿Dónde se puede obtener MSDN?MSDN?
Llenar la encuesta al final del webcast y Llenar la encuesta al final del webcast y pedir a un representante de Microsoft pedir a un representante de Microsoft que le contacteque le contacte
Convertirse en un suscriptor de los Convertirse en un suscriptor de los CDs/DVDs de MSDN en CDs/DVDs de MSDN en http://msdn.microsoft.com/subscriptionshttp://msdn.microsoft.com/subscriptions
Transformación y Transformación y colisión de spritescolisión de sprites
Nos vemos la próxima semana Nos vemos la próxima semana para…para…