Desarrollo de juegos de video Aprendiendo a programar en C# de manera divertida Sesión 4: Introducción a los sprites y la animación

Agenda Visión de los objetivos de esta serie de webcasts Visión de esta sesión Visión de los elementos de un juego de video Demo – Implementación del juego Información para aprender más Preguntas y respuestas

Objetivos de esta serie Dar a los participantes una introducción a algunos de los conceptos fundamentales del desarrollo de juegos Introducir la programación con Visual C# 2005 Express Edition, el nuevo IDE (ambiente de desarrollo integrado) de Microsoft para programadores principiantes

Visión de esta sesión Sesión 4/8 – Introducción a los sprites y la animación: Fondo (background) Puertos de vista (viewport) Animaciones Cuadros (frames) Sprites Retraso en cuadros (frame-delay) Transparencia Implementación del juego: FondoSprites

Dimensión del mundo ¿Qué es un mundo? El medio en el que tiene lugar el juego completo El mundo es un rectángulo con un ancho y altura definidos ¿Para qué usamos un mundo? Para aplicar transformaciones matemáticas en los objetos del juego y las cámaras Las transformaciones matemáticas operan sobre estructuras de objetos del juego Todos los objetos deben existir dentro de un área definida

Puerto de vista (viewport) ¿Qué es un viewport? Un rectángulo dentro del mundo seleccionado para desplegar es llamado una ventana La ventana define lo que se ve El viewport define donde se va a desplegar Un viewport es un área rectangular de la ventana de despliegue Por omisión, es la ventana completa de la aplicación Puede configurarse a cualquier tamaño menor en pixeles

Puerto de vista (viewport)

Bitmap ¿Qué es un bitmap? Un bitmap es una imagen hecha de miles de pixeles Cada pixel tiene su propia posición y cualidades Cualidades tales como el color y el brillo se almacenan en el archivo de bitmaps Intensidad RGB Los monitores trabajan con señales rojo, verde y azul Cada pixel de color tiene un valor de rojo, verde y azul dentro suyo La intensidad de cada color básico crea un color En otras palabras, los colores se despliegan como intensidades variables de puntos rojo, verde y azul

Fondo (background) ¿Qué es un fondo? Un fondo es una imagen o bitmap que será colocado en el mundo en una cierta posición Es el área de la pantalla desplegada que no está cubierta por ningún objeto del juego Los objetos del juego se despliegan encima del background Posición El fondo debe posicionarse dentro del mundo La posición del fondo se sitúa relativo al rectángulo del mundo, no relativo al viewport

Animaciones ¿Qué es una animación? Una serie de imágenes dibujadas en secuencia con una demora específica entre cada imagen Cada imagen (cuadro) es ligeramente diferente Cuando se reproducen en sucesión, dan la apariencia de movimiento (así es como funcionan las películas en el cine) ¿Qué hacer cuando la animación termina? Empezar la animación otra vez desde el primer cuadro Definir un cierto cuadro para volver a empezar (no necesariamente el primero) Quedarse en el último cuadro

Cuadros ¿Qué es un cuadro? Un cuadro es simplemente una imagen La imagen es parte de una animación Una animación está hecha de cuadros Cuando los cuadros se presentan en secuencia, se produce la ilusión de movimiento

Cuadros y transparencia Un cuadro está hecho de un bitmap (imagen) El bitmap es una matriz de puntos que tienen una forma rectangular o cuadrada No todas las imágenes tienen una forma rectangular Las áreas no utilizadas del rectángulo se llenarán con un color específico Este color se denomina el color de transparencia El mecanismo de dibujo ignorará todos los pixeles que tengan el color de la transparencia En otras palabras, los pixeles transparentes no serán dibujados Con y sin el color de transparencia:

Sprites Los sprites son las fotos desplegadas encima del background También son llamados objetos del juego Usualmente, los sprites representan todas las partes móviles del juego Los sprites pueden ser: Enemigos Partes animadas del fondo Balas

Sprites El estado de un sprite varía en términos de su imagen, posición y valores Por esto, un sprite necesita guardar información como: Posición actual Velocidad actual Dirección actual Visibilidad actual Cuadro actual Animación actual

Sprites activos Un sprite puede ser activo o pasivo Cuando un sprite no está activo, todos sus comportamientos se deshabilitan y no es visible Un sprite inactivo no será procesado durante el lazo del juego Un sprite inactivo se usa regularmente cuando un prototipo de un sprite hace falta Un prototipo de un sprite se puede usar para crear sprites idénticos al momento de ejecución Se usa también cuando un sprite no necesita estar presente cuando un nivel empieza

Sprites visibles En cada lazo del juego, el código procesará todos los objetos del juego El procesamiento de objetos del juego incluye el manejo y el dibujado Cuando un sprite es visible, será manejado y dibujado Sin embargo, cuando el sprite es invisible, será manejado pero no dibujado Durante el proceso de creación de un sprite, una animación con uno o más cuadros debería especificarse Los sprites deben estar visibles cuando se requiere que el objeto del juego requiere que una animación sea representada visualmente

OrdenZ (ZOrder) Para entender el OrdenZ, debemos simular un eje de coordenadas 3D El eje z especifica la profundidad del eje Mientras mayor sea el valor del OrdenZ, más profundo se encuentra el objeto en la pantalla La foto del personaje tiene OrdenZ(1) mientras que la foto de la pelota tiene un OrdenZ(2) superior. Por tanto, la pelota parece estar detrás del personaje.

OrdenZ (ZOrder) Puesto que nuestro juego es una aplicación 2D, el OrdenZ solo afecta el orden de las fotos y no su tamaño Todos los objetos del juego son afectados por el eje OrdenZ

Implementación del proyecto Agregar el fondo Agregar los sprites Agregar la animación

Puerto de vista (viewport)

El sprite de fondo El fondo es especial y requiere dos sprites idénticos (la imagen de fondo) Esto permite un scroll fácil El fondo es una imagen, por lo que debe agregarse como un sprite primero

Agregando el fondo La representación visual del sprite en el juego es la animación Una animación está hecha de uno o más cuadros Cada cuadro está hecho de una foto (imagen) y una demora Una imagen es un archivo bitmap Todo nuestro código de creación de sprites se implementará como una clase llamada StarTrooper en un archivo llamado StarTrooperGame.cs

Cada foto es un objeto de la clase Picture que contiene un bitmap Donde: el primer argumento es el nombre del bitmap y el segundo argumento es el color de transparencia. El objeto Picture se agrega al juego para que se pueda usar en el cuadro. Agregando el fondo

El cuadro es un objeto de clase Frame que usa al objeto Picture Donde: el primer argumento es un objeto Picture y el segundo argumento es un retraso de cuadro La animación es un objeto de clase Animation que está compuesto de muchos cuadros Agregando el fondo

Cada cuadro es agregado al objeto Animación Crear el primer objeto Background bg que deriva de la clase Sprite Agregar el objeto animación pre-existente Agregando el fondo

Definir la posición del sprite Agregar el sprite al juego Definir el orden z del fondo a 10 Agregar el sprite al juego Agregando el fondo

Repetir el proceso con otro objeto Background En este punto, se ha creado un sprite de fondo y se lo ha agregado al juego Agregando el fondo

El código hasta este punto: Agregando el fondo

Agregando al patrullero El Trooper es animado, así que se necesitan varias imágenes Cada imagen es cargada y agregada al juego Cada imagen se usará para crear un frame

Agregando al patrullero Cada foto es usada para crear un cuadro: Cada cuadro es agregado a la animación:

Agregando al patrullero Habilitar la animación y ponerla en un lazo continuo Crear el patrullero Definir la posición del patrullero Agregar el patrullero al juego y definir un prototipo

Agregando al cóndor El cóndor es también animado, así que hay múltiples imágenes Como el patrullero, cada imagen es cargada, agregada al juego y es usada para crear un cuadro para la animación

Agregando el cóndor Cada foto es usada para crear un cuadro: Cada cuadro es agregado a una animación:

Agregando el cóndor El cóndor tiene una segunda animación (cuando explota) Definir la seguna animación es muy similar a la primera

Agregando el cóndor Cada foto se usa para crear un cuadro: Cada cuadro se agrega a una animación:

Agregando el cóndor Habilitar la animación pero *no* se pone en un lazo Agregar las animaciones (tenemos dos) Definir el prototipo

Creación de otros sprites o de un nuevo juego Nota: en este juego, por omisión, se crean clases de sprites para crear objetos a partir de ellos (Trooper, Condor y, más tarde, Fire). Por tanto, para agregar una nueva clase de sprite (por ejemplo, un auto), hay que agregar un archivo llamado Car.cs y crear una clase derivada de la clase Sprite Nota: Una vez que se entiende el flujo del juego, se puede crear otro juego. Usando este motor de juegos, se puede crear un nuevo juego con una historia totalmente distinta, simplemente agregando un archivo llamado MiJuego.cs (o algo así) en la que se define una clase llamada MiJuego que deriva de la clase Game

Resumen de la sesión Visión de los objetivos de la serie FondoViewportsAnimacionesCuadrosSprites Retraso de cuadros Transparencia Implementación del juego FondoSprites

¿Deseas aprender más? DigiPen Institute of Technology ofrece una variedad de vías para explorar una carrera en el desarrollo de juegos de video: La serie original de webcasts sobre desarrollo de juegos - Realizada en mayo del Se puede ver en px px px El código de esta sesión está en Talleres de verano – Series de clases introductorias en programación de juegos, producción de animaciones 3D y robótica. Más información en ProjectFUN Distance Learning – DigiPen tiene cursos en línea impartidos por sus instructores. Más información en

Preguntas y respuestas Proponer preguntas usando el botón Ask a Question No te olvides de llenar la encuesta Para webcasts futuros y pasados (en inglés) Para webcasts futuros y pasados (en castellano) Esta serie de webcasts está grabada en /academic.asp /academic.asp /academic.asp Este webcast fue presentado usando Microsoft Office LiveMeeting. Se puede obtener una prueba de 14 días gratuita en

¿Dónde se puede obtener MSDN? Llenar la encuesta al final del webcast y pedir a un representante de Microsoft que le contacte Convertirse en un suscriptor de los CDs/DVDs de MSDN en

Transformación y colisión de sprites Nos vemos la próxima semana para…