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 3: Visión de los elementos de un Sesión 3: Visión de los elementos de un juegojuego

edgar.sanchez@logicstudio.netedgar.sanchez@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 videoInformació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 3/8 – Visión de los elementos de un Sesión 3/8 – Visión de los elementos de un juego de video:juego de video:

Componentes de un juegoComponentes de un juego

Gráficos bidimensionalesGráficos bidimensionales

Gráficos tridimensionalesGráficos tridimensionales

Rotaciones en 3DRotaciones en 3D

Gráficos basados en vectoresGráficos basados en vectores

Gráficos basados en bitmapsGráficos basados en bitmaps

Escalamiento de un gráficoEscalamiento de un gráfico

Fonts de bitmapFonts de bitmap

Fonts de vectorFonts de vector

Gráficos basados en bitmapsGráficos basados en bitmaps

Visión de esta sesión (cont.)Visión de esta sesión (cont.)

Sesión 3/8 – Visión de los elementos de un Sesión 3/8 – Visión de los elementos de un juego de video (continuación):juego de video (continuación):

Dispositivos de entradaDispositivos de entradaTecladosTecladosRatónRatónJoystick y gamepadJoystick y gamepad

SonidoSonidoFormato de audio no comprimidoFormato de audio no comprimidoFormato de audio comprimidoFormato de audio comprimidoAudio 3DAudio 3DAudio para juegos interactivosAudio para juegos interactivos

RedRedProblemas multijugadorProblemas multijugadorModelo cliente/servidorModelo cliente/servidorModelo igual-a-igual (peer-to-peer)Modelo igual-a-igual (peer-to-peer)

Componentes de un juegoComponentes de un juego

Gráficos (2D, 3D, bitmap vs. vector)Gráficos (2D, 3D, bitmap vs. vector)

Entrada (teclado, ratón, joystick)Entrada (teclado, ratón, joystick)

Sonido (WAV, MIDI, MP3, Ogg Vorbis)Sonido (WAV, MIDI, MP3, Ogg Vorbis)

Red (multijugador, cliente/servidor, Red (multijugador, cliente/servidor, igual-a-igual)igual-a-igual)

Gráficos bidimensionalesGráficos bidimensionales

Los gráficos bidimensionales (2D) se basan en Los gráficos bidimensionales (2D) se basan en modelos 2D (texto, dibujos, mapas, etc.)modelos 2D (texto, dibujos, mapas, etc.)Las imágenes 2D se mueven en dos ejes: x y Las imágenes 2D se mueven en dos ejes: x y yyGráficos basados en vectores vs. gráficos Gráficos basados en vectores vs. gráficos basados en bitmaps (también conocidos basados en bitmaps (también conocidos como gráficos raster)como gráficos raster)La cantidad de información almacenada para La cantidad de información almacenada para imágenes 2D varía con la técnicaimágenes 2D varía con la técnicaLos datos vectoriales pueden requerir solo Los datos vectoriales pueden requerir solo 1/1.000 de los datos requeridos por los 1/1.000 de los datos requeridos por los bitmapsbitmapsLos datos vectoriales son más flexibles puesto Los datos vectoriales son más flexibles puesto que escalan mejorque escalan mejorLa mayoría de pantallas de computador son La mayoría de pantallas de computador son basadas en bitmapsbasadas en bitmaps

Gráficos tridimensionalesGráficos tridimensionales

Los gráficos tridimensionales Los gráficos tridimensionales (3D) se usan para modelar… (3D) se usan para modelar… objetos 3Dobjetos 3DLos gráficos 3D requieren Los gráficos 3D requieren más información porque más información porque aparece una tercera aparece una tercera dimensión (profundidad)dimensión (profundidad)En general, crear gráficos 3D En general, crear gráficos 3D es similar a esculpir, es similar a esculpir, mientras que crear gráficos mientras que crear gráficos 2D es similar a pintar2D es similar a pintarLas imágenes 3D se pueden Las imágenes 3D se pueden mover libremente en tres mover libremente en tres ejes: x, y y zejes: x, y y zLa rotación puede ocurrir en La rotación puede ocurrir en cualquiera de los tres ejescualquiera de los tres ejesEstas rotaciones son Estas rotaciones son llamadas pitch, yaw y rollllamadas pitch, yaw y roll

Rotación en 3DRotación en 3D

Pitch – rotación alrededor del Pitch – rotación alrededor del eje xeje x

Yaw – rotación alrededor del Yaw – rotación alrededor del eje yeje y

Roll – rotación alrededor del Roll – rotación alrededor del eje zeje z

YawYawYawYawPitchPitchPitchPitch RollRollRollRoll

Gráficos basados en vectoresGráficos basados en vectores

Guardan la información como primitivas Guardan la información como primitivas geométricas: puntos, líneas, polígonos y geométricas: puntos, líneas, polígonos y curvascurvas

Muy bueno para textos y diagramasMuy bueno para textos y diagramas

Escala fácilmente y permite un control Escala fácilmente y permite un control muy preciso sobre el tamaño de la muy preciso sobre el tamaño de la imagenimagen

Gráficos basados en bitmapsGráficos basados en bitmaps

Representa una grilla de pixeles (picture Representa una grilla de pixeles (picture elements) en el monitor del computadorelements) en el monitor del computador

Cada pixel tiene un color definido en el Cada pixel tiene un color definido en el espacio de color RGB (rojo, verde, azul)espacio de color RGB (rojo, verde, azul)

La intensidad de cada color es almacenada La intensidad de cada color es almacenada como un byte, de manera que se necesitan como un byte, de manera que se necesitan tres bytes para definir un pixeltres bytes para definir un pixel

Las imágenes menos coloridas requieren Las imágenes menos coloridas requieren menos informaciónmenos información

Las imágenes blanco y negro son las que Las imágenes blanco y negro son las que menos requieren, pues hace falta un solo bit menos requieren, pues hace falta un solo bit para determinar el “color” (prendido o para determinar el “color” (prendido o apagado)apagado)

Gráficos basados en bitmapsGráficos basados en bitmaps

La calidad es determinada por la La calidad es determinada por la resolución (que es el número total de resolución (que es el número total de pixeles) y la profundidad del color (la pixeles) y la profundidad del color (la cantidad de información para cada cantidad de información para cada pixel)pixel)

A más bits por pixel, más suave el A más bits por pixel, más suave el sombreado entre coloressombreado entre colores

A más resolución, la imagen se ve A más resolución, la imagen se ve menos “cuadriculada”menos “cuadriculada”

Escalamiento de un gráficoEscalamiento de un gráfico

Aumentar el tamaño de una letra ‘a’ en Aumentar el tamaño de una letra ‘a’ en este gráficoeste gráfico

Un font de bitmapsUn font de bitmaps

Un font de vectoresUn font de vectores

Gráficos basados en bitmapsGráficos basados en bitmaps

Una imagen de 640x480 contiene Una imagen de 640x480 contiene 307.200 pixels307.200 pixelsUna imagen de 1.280x1.024 contiene Una imagen de 1.280x1.024 contiene 1’310.720 pixeles1’310.720 pixelesEn el modo de color de 24 bits, la En el modo de color de 24 bits, la imagen de 640x480 requerirá 921.600 imagen de 640x480 requerirá 921.600 bytes de datosbytes de datosEn color de 48 bits, requerirá 1’843.200 En color de 48 bits, requerirá 1’843.200 bytesbytesUna foto de un monitor de alta Una foto de un monitor de alta resolución que corra a 1.600x1.200 con resolución que corra a 1.600x1.200 con una profundidad de color de 32 bits una profundidad de color de 32 bits requerirá 7’680.000 bytes. ¡Esto es requerirá 7’680.000 bytes. ¡Esto es unos 7,6 MB para una sola foto!unos 7,6 MB para una sola foto!

Gráficos basados en bitmapsGráficos basados en bitmaps

Dado que las imágenes de bitmaps Dado que las imágenes de bitmaps requieren tanto espacio, usualmente se requieren tanto espacio, usualmente se comprimen, lo que suele resultar en comprimen, lo que suele resultar en una pérdida de calidaduna pérdida de calidad

Hay muchos formatos y esquemas de Hay muchos formatos y esquemas de compresión de imágenes (tales como compresión de imágenes (tales como JPEG y PNG) y con frecuencia la pérdida JPEG y PNG) y con frecuencia la pérdida de calidad apenas se notade calidad apenas se nota

Dispositivos de entradaDispositivos de entrada

TecladoTeclado

RatónRatón

Joystick y gamepadJoystick y gamepad

Dispositivos de entradaDispositivos de entradaTecladosTeclados

El teclado es el dispositivo de entrada primario de un El teclado es el dispositivo de entrada primario de un computadorcomputador

Casi todos los computadores tienen unoCasi todos los computadores tienen uno

Juegos diferentes usan teclas distintas para manipular los Juegos diferentes usan teclas distintas para manipular los objetosobjetos

Muchos juegos permiten al usuario personalizar las teclas Muchos juegos permiten al usuario personalizar las teclas que este usaráque este usará

El teclado es el dispositivo ideal para ingresar textoEl teclado es el dispositivo ideal para ingresar texto

Dispositivos de entradaDispositivos de entradaRatónRatón

Como el teclado, el ratón es otro Como el teclado, el ratón es otro dispositivo popular que está presente en dispositivo popular que está presente en casi todos los computadorescasi todos los computadores

Permite al usuario apuntar a cosas en la Permite al usuario apuntar a cosas en la pantalla y hacer click en objetospantalla y hacer click en objetos

Para muchas operaciones (tales como Para muchas operaciones (tales como dibujar o señalar), el ratón es más dibujar o señalar), el ratón es más conveniente que el tecladoconveniente que el teclado

Dispositivos de entradaDispositivos de entradaJoystick y gamepadJoystick y gamepad

El joystick es un tipo de El joystick es un tipo de dispositivo de entrada que dispositivo de entrada que es realmente natural para es realmente natural para juegosjuegos

Dependiendo del tipo de Dependiendo del tipo de juego, el joystick puede juego, el joystick puede ser el más conveniente ser el más conveniente (por ejemplo, vuelo de (por ejemplo, vuelo de aviones)aviones)

Un gamepad es algo Un gamepad es algo similar a un joystick, que similar a un joystick, que es usado sobretodo en es usado sobretodo en consolas de juegoconsolas de juego

Dispositivos de entradaDispositivos de entradaJoystick y gamepadJoystick y gamepad

Los controladores de juegos como los Los controladores de juegos como los joysticks y gamepads pueden tener joysticks y gamepads pueden tener “retroalimentación de fuerza”“retroalimentación de fuerza”

Les permite “sentir” lo que está Les permite “sentir” lo que está ocurriendo dentro del juegoocurriendo dentro del juego

Por ejemplo: disparar un arma, volar un Por ejemplo: disparar un arma, volar un helicóptero, manejar en un camino con helicóptero, manejar en un camino con huecos, etc.huecos, etc.

SonidoSonido

El sonido es usado para tener El sonido es usado para tener retroalimentación de sonido en el juegoretroalimentación de sonido en el juegoEfectos de sonido, música, diálogos, etc.Efectos de sonido, música, diálogos, etc.El audio ha ido mejorando junto con los El audio ha ido mejorando junto con los gráficos en los juegosgráficos en los juegosAl igual que las imágenes de alta resolución, Al igual que las imágenes de alta resolución, los datos de sonido pueden también requerir los datos de sonido pueden también requerir gran cantidad de espaciogran cantidad de espacioLa producción de sonido de alta calidad en un La producción de sonido de alta calidad en un juego puede tener impacto en el rendimientojuego puede tener impacto en el rendimientoComo las imágenes, los datos de sonido Como las imágenes, los datos de sonido pueden ser comprimidos para ahorrar espaciopueden ser comprimidos para ahorrar espacioLos archivos no comprimidos pueden ser 10 y Los archivos no comprimidos pueden ser 10 y hasta 20 veces más grandes que los archivos hasta 20 veces más grandes que los archivos comprimidoscomprimidos

SonidoSonidoFormato de audio no comprimidoFormato de audio no comprimido

Un formato de audio popular es el formato WAV Un formato de audio popular es el formato WAV (archivos con extensión .wav)(archivos con extensión .wav)

Todos los computadores pueden tocar este tipo Todos los computadores pueden tocar este tipo de archivosde archivos

Los archivos WAV son como una grabación del Los archivos WAV son como una grabación del sonidosonido

Los archivos WAV son archivos de sonido no Los archivos WAV son archivos de sonido no procesados y sin compresiónprocesados y sin compresión

La calidad del sonido es excelente, pero el La calidad del sonido es excelente, pero el tamaño de los archivos es muy grandetamaño de los archivos es muy grande

La típica canción de cinco minutos requiere La típica canción de cinco minutos requiere entre 40 y 60 MB de almacenamientoentre 40 y 60 MB de almacenamiento

SonidoSonidoFormato de audio no comprimidoFormato de audio no comprimido

Musical Instrument Digital Interface (MIDI) es Musical Instrument Digital Interface (MIDI) es otro tipo de formato de audio popular en los otro tipo de formato de audio popular en los juegosjuegosCreado originalmente para grabar y tocar Creado originalmente para grabar y tocar música en sintetizadores digitalesmúsica en sintetizadores digitalesLos archivos MIDI son muy pequeñosLos archivos MIDI son muy pequeñosLos archivos MIDI no contienen los “sonidos” Los archivos MIDI no contienen los “sonidos” originalesoriginalesSolo contienen información sobre como producir Solo contienen información sobre como producir la música (por ejemplo, notas, duraciones, etc.)la música (por ejemplo, notas, duraciones, etc.)La tarjeta de sonido toma esta información y la La tarjeta de sonido toma esta información y la convierte en música que se puede escucharconvierte en música que se puede escucharEsto permite tomar una canción y tocarla Esto permite tomar una canción y tocarla usando un piano una vez y tocarla otra vez con usando un piano una vez y tocarla otra vez con una guitarrauna guitarra

SonidoSonidoFormato de audio comprimidoFormato de audio comprimido

MP3 es un formato de audio comprimido popularMP3 es un formato de audio comprimido popular

Abreviatura de MPEG-1/MPEG-2 Layer 3Abreviatura de MPEG-1/MPEG-2 Layer 3

Guarda audio en un formato muy comprimidoGuarda audio en un formato muy comprimido

Los archivos comprimidos usualmente son entre Los archivos comprimidos usualmente son entre 1/10 y 1/20 del tamaño original1/10 y 1/20 del tamaño original

Los archivos comprimidos tienen menos calidad Los archivos comprimidos tienen menos calidad que los no comprimidosque los no comprimidos

La diferencia es usualmente muy pequeña y La diferencia es usualmente muy pequeña y puede ser difícil de detectarpuede ser difícil de detectar

El truco es eliminar los sonidos que el oido El truco es eliminar los sonidos que el oido humano no puede detectarhumano no puede detectar

SonidoSonidoFormato de audio comprimidoFormato de audio comprimido

Ogg Vorbis es otro formato de alta Ogg Vorbis es otro formato de alta compresión para comprimir contenido de compresión para comprimir contenido de audio, bastante como MP3audio, bastante como MP3

Tiene mejor rendimiento que MP3Tiene mejor rendimiento que MP3

Ha ganado mucha popularidad y es una Ha ganado mucha popularidad y es una buena solución para audio de juegosbuena solución para audio de juegos

SonidoSonidoAudio 3DAudio 3D

Una nueva tecnología de audio Una nueva tecnología de audio correctamente llamada “audio 3D correctamente llamada “audio 3D posicional”posicional”

Muy similar a los gráficos 3D en el sentido Muy similar a los gráficos 3D en el sentido de que se tiene sonido en tres de que se tiene sonido en tres dimensionesdimensiones

Esto permite a los escuchas oír sonidos Esto permite a los escuchas oír sonidos detrás de ellos o sobre ellosdetrás de ellos o sobre ellos

Esto agrega gran profundidad al realismo Esto agrega gran profundidad al realismo de los juegosde los juegos

SonidoSonidoAudio para juegos interactivosAudio para juegos interactivos

El audio no interactivo es estático, no El audio no interactivo es estático, no cambio a lo largo del juego o nivelcambio a lo largo del juego o nivelEsto puede aburrir rápidamenteEsto puede aburrir rápidamenteEl audio de juego interactivo cambia El audio de juego interactivo cambia basado en lo que el jugador (u otros basado en lo que el jugador (u otros caracteres) están haciendo en el juegocaracteres) están haciendo en el juegoSe puede estar escapando de unos Se puede estar escapando de unos enemigos y la música empieza a sonar enemigos y la música empieza a sonar más alto y más rápidomás alto y más rápidoEscurrirse en un calabozo, acercarse a un Escurrirse en un calabozo, acercarse a un pasadizo oscuro produce una música pasadizo oscuro produce una música tenebrosa, justo como en las películastenebrosa, justo como en las películas

RedesRedes

Los juegos fuera de la red son a menudo Los juegos fuera de la red son a menudo llamados de modo “jugador solitario”, dado llamados de modo “jugador solitario”, dado que hay un solo jugadorque hay un solo jugadorLos juegos de red llamados “multijugador” Los juegos de red llamados “multijugador” permiten a dos o más personas jugar en la permiten a dos o más personas jugar en la redredLos juegos multijugador permiten un juego Los juegos multijugador permiten un juego más desafiante puesto que los oponentes más desafiante puesto que los oponentes humanos a menudo son más listos (y menos humanos a menudo son más listos (y menos predecibles) que los oponentes predecibles) que los oponentes computarizados (IA = inteligencia artificial)computarizados (IA = inteligencia artificial)Requiere mucho esfuerzo hacer que los Requiere mucho esfuerzo hacer que los juegos parezcan tener oponentes humanos y juegos parezcan tener oponentes humanos y no computarizadosno computarizados

RedesRedesProblemas multijugadorProblemas multijugador

Retrasos/sincronización – El retraso de Retrasos/sincronización – El retraso de comunicación entre los computadores en comunicación entre los computadores en la red afecta al juego (arrastres). El la red afecta al juego (arrastres). El desafío es mantener a las varias PCs desafío es mantener a las varias PCs sincronizadassincronizadasPérdida de paquetes – es inevitable que Pérdida de paquetes – es inevitable que se pierdan datos durante las se pierdan datos durante las transmisionestransmisionesFiabilidad – la comunicación entre Fiabilidad – la comunicación entre computadores puede ser intermitentecomputadores puede ser intermitenteEl objetivo es tener un juego fluido de El objetivo es tener un juego fluido de manera que los jugadores no noten que manera que los jugadores no noten que sus computadores están hablando con sus computadores están hablando con otros computadoresotros computadores

RedesRedesCliente/servidorCliente/servidor

A veces llamado A veces llamado configuración estrella configuración estrella (porque el diagrama de red (porque el diagrama de red parece una estrella)parece una estrella)

Un computador central actúa Un computador central actúa como el “anfitrión” (servidor)como el “anfitrión” (servidor)

Este computador usualmente Este computador usualmente no tiene ningún usuario no tiene ningún usuario sentado frente suyo jugando sentado frente suyo jugando el juegoel juego

Todos los jugadores (clientes) Todos los jugadores (clientes) se conectan al anfitrión para se conectan al anfitrión para jugar el juegojugar el juego

RedesRedesCliente/servidorCliente/servidor

Típicamente, el servidor solo recibe Típicamente, el servidor solo recibe mensajes de cada jugador y los envía a mensajes de cada jugador y los envía a todos los demás jugadorestodos los demás jugadores

Los clientes solicitan unirse a un juego Los clientes solicitan unirse a un juego que corre en un servidor (o iniciar un que corre en un servidor (o iniciar un nuevo juego en el servidor)nuevo juego en el servidor)

El cliente se une y empieza a jugarEl cliente se une y empieza a jugar

Cuando el usuario deja de jugar, el cliente Cuando el usuario deja de jugar, el cliente sale del juegosale del juego

RedesRedesModelo igual-a-igualModelo igual-a-igual

No hay un servidor No hay un servidor centralcentral

Cada cliente (jugador) se Cada cliente (jugador) se comunica con todos los comunica con todos los otros jugadoresotros jugadores

Todos los computadores Todos los computadores clientes mantienen clientes mantienen información acerca del información acerca del estado del juego en estado del juego en cualquier momentocualquier momento

Resumen de la sesiónResumen de la sesión

Visión de los objetivos de la serieVisión de los objetivos de la serie

Vision de la sesiónVision de la sesión

Visión de los elementos de un juegoVisión de los elementos de un juegoGráficosGráficos

SonidoSonido

RedRed

¿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

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

Introducción a los Introducción a los sprites y la animaciónsprites y la animación

Nos vemos la próxima semana Nos vemos la próxima semana para…para…