Desarrollo de Videojuegos

Conceptos Bsicos para

Desarrollo de Videojuegos 2D










Roberto Albornoz Figueroa 2006-2007
[email protected]
http://www.blogrcaf.com
Desarrollo de Videojuegos

Licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 2.5





Usted es libre de:
copiar, distribuir y comunicar pblicamente la obra.

Bajo las condiciones siguientes:

Reconocimiento. Debe reconocer los crditos de la obra de la manera
especificada por el autor o el licenciador.


No comercial. No puede utilizar esta obra para fines comerciales.


Sin obras derivadas. No se puede alterar, transformar o generar una obra
derivada a partir de esta obra.

Al reutilizar o distribuir la obra, tiene que dejar bien claro los trminos de la
licencia de esta obra.

Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del
titular de los derechos de autor


2
Desarrollo de Videojuegos

Contenidos



Introduccin_________________________________________________________________5
Conceptos bsicos __________________________________________________________6
Monitor _________________________________________________________________________ 6
Tarjeta de video _________________________________________________________________ 6
Frecuencia de refrescado ________________________________________________________ 6
Vertical retrace __________________________________________________________________ 6
Pixel ____________________________________________________________________________ 7
Bitmap __________________________________________________________________________ 7
Profundidad de Color (BPP) ______________________________________________________ 7
Cantidad de colores _____________________________________________________________ 7
Modelo RGB_____________________________________________________________________ 8
Paleta___________________________________________________________________________ 8
Modo indexado __________________________________________________________________ 8
Cantidad de bits en un pixel ______________________________________________________ 9
Resolucin ______________________________________________________________________ 9
Modo de video___________________________________________________________________ 9
Video RAM _____________________________________________________________________ 10
Tcnicas 2D ________________________________________________________________12
Sprites _________________________________________________________________________ 12
Animacin de Sprites ___________________________________________________________ 12
Transparencias _________________________________________________________________ 14
Color keys____________________________________________________________________________14
Mscara______________________________________________________________________________15
Transformaciones ______________________________________________________________ 16
Translation ___________________________________________________________________________16
Rotation______________________________________________________________________________16
Scaling_______________________________________________________________________________17
Flipping ______________________________________________________________________________18
Alpha blending _________________________________________________________________ 18
Screen buffer ___________________________________________________________________ 19
Surface ________________________________________________________________________ 21
Blitting_________________________________________________________________________ 21
Double Buffering _______________________________________________________________ 22


3
Desarrollo de Videojuegos

Dirty Rectangles ________________________________________________________________ 24
Clipping________________________________________________________________________ 24
Sistema de coordenadas 2D_____________________________________________________ 24
Sincronizacin en los videojuegos ___________________________________________26
Sincronizacin por Framerate ___________________________________________________ 26
Sincronizacin por Tiempo ______________________________________________________ 27
Resumen___________________________________________________________________29





4
Desarrollo de Videojuegos

Introduccin



Una de las razones para comenzar a desarrollar primero videojuegos 2D, es que los
conceptos involucrados son mucho ms simples y fciles de asimilar.

Adems lo ms probable es que varios de estos conceptos ya sean conocidos por
quienes lleven un tiempo programando o trabajando con computadores.

Otra ventaja, es que obtendremos resultados ms rpidos, a diferencia del desarrollo de
videojuegos 3D, que involucra conocer tpicos ms avanzados de matemticas y de
programacin. Pero tampoco hay que asustarse, si queremos luego dar el prximo paso
a las 3D, ya que hay que recordar siempre que todo lo podemos estudiar y aprender,
nada es imposible.

En las prximas pginas conoceremos la terminologa bsica, que nos har comprender
de mejor forma los conceptos grficos involucrados en un videojuego.



5
Desarrollo de Videojuegos

Conceptos bsicos



Partiremos hablando del dispositivo externo ms comn y que
todos ya conocemos, el Monitor. Este dispositivo de salida es
uno de los ms importantes que posee nuestro computador, ya
que nos permite visualizar la informacin con la que estamos
trabajando.



El monitor se conecta al
computador a travs de una Tarjeta de video. Esta
tarjeta es un circuito integrado que nos permite
transformar las seales digitales con las que trabaja, en
seales anlogas para que puedan ser visualizadas en
el monitor. Este proceso es realizado a travs de un
conversor analgico-digital que toma la informacin
que se encuentra en la memoria de video y luego la
lleva al monitor. Este conversor se conoce como
RAMDAC (Random Access Memory Digital Analog Converter).

La superficie de la pantalla de un monitor es fluorescente
y esta compuesta por lneas horizontales. El hardware del
monitor actualiza de arriba hacia abajo cada una de estas
lneas. Para dibujar una imagen completa el monitor lo
hace a una cierta velocidad, a esto se le conoce como
Frecuencia de refrescado y se mide en Hz. Los valores
frecuentes son de 60/70 Hz, incluso frecuencias mayores.
Es preferible que supere los 70 Hz para que la vista no se
canse tanto y no aparezcan los molestos parpadeos
(flickering). El valor de la frecuencia depende de la
resolucin usada.



El tiempo que existe entre dos refrescos de pantalla se conoce como Vertical retrace, y
corresponde al momento en que el haz de electrones del monitor regresa a la parte
superior de la pantalla.


6
Desarrollo de Videojuegos


El concepto ms bsico usado en la
programacin grfica es el de Pixel,
significa Picture Element, es decir, un
elemento de una imagen que
corresponde a la unidad mnima que esta
puede contener. Tambin lo podramos
definir como un simple punto que es
parte de una imagen determinada, que
podemos mostrar en pantalla y que tiene
asociado un color.

Esta imagen que est formada por un
arreglo ordenado de pixeles en forma de
grilla o cuadricula, se conoce con el
nombre de Bitmap. Un bitmap posee
dimensiones: ancho y alto (que se miden en nmero de pixeles) y adems tiene
asociado un formato, que puede ser alguno de los ya conocidos: bmp, png, jpg, gif, etc.

La diferencia entre formatos grficos, viene dada por algunos parmetros que
esperamos tener, como la calidad o tamao del archivo. Por ejemplo si queremos
mantener un equilibrio en tamao/calidad, un formato que se ajusta a estos parmetros
son los formatos jpg o png, no as el formato bmp, que casi no posee ningn tipo de
compresin.

Una imagen tiene otras caractersticas, aparte de sus dimensiones, una de estas es la
Profundidad de color. Esto corresponde al nmero de bits necesarios para poder
representar un color, es conocido por las siglas BPP (Bits Per Pixel).

El nmero de bits que podemos utilizar es de 1, 8, 16, 24 o 32. Con este dato podemos
saber cual ser el nmero mximo de colores que puede representar una imagen en
pantalla. El nmero de combinaciones se calcula mediante la siguiente frmula:


Cantidad de Colores = 2
bpp


Ahora podemos resumir en una tabla cada una de estas combinaciones:


Nmero de bits Cantidad de colores Nombre
1 2 Monocromo
8 256 Indexado
16 65.536 Color de alta densidad (High Color)
24 16.777.216 Color real (True Color)
32 4.294.967.296 Color real (True Color)


7
Desarrollo de Videojuegos

El color se representa en pantalla utilizando el Modelo RGB (Red, Green, Blue), es
decir, para formar un color necesitamos conocer la intensidad de estos colores
primarios. Cada una de estas intensidades corresponde a un nmero que se encuentra
en el rango: 0 a 255.

Cuando se utilizan 8 bits para mostrar un pixel, como ya sabemos, tenemos como
mximo 256 colores, pero no se representan directamente utilizando las intensidades
RGB, sino que se mantiene una Paleta o Colormap (un arreglo de tamao igual a 256
bytes), donde cada posicin apunta a un color con las 3 componentes (Rojo, Verde,
Azul). Esta paleta puede ser modificada para implementar algunos efectos, ya que si
cambiamos por ejemplo las componentes de un color, se vern modificados
inmediatamente todos los pixeles que hagan referencia a dicho color. El modo de 8 bits,
se conoce tambin como Modo indexado y ofrece un alto rendimiento, pero como ya
sabemos con la desventaja de tener pocos colores disponibles.

Para profundidades ms altas, esta paleta ya no existe, y esto nos permite tener un
abanico ms grande de colores. En la actualidad ya no usamos modos de video a 8
bits, normalmente usaremos 16 o 32, siendo el modo de 32 bits el ms eficiente, ya
que los procesadores de 32 bits trabajan con datos empaquetados en bloques de 4
bytes.

Todas las componentes que forman un color se empaquetan en un entero, donde se
asigna una cantidad fija de bits para cada una de ellas.

El orden en que se empaquetan las componentes de un color, depende de la
arquitectura en la que se est trabajando, podemos usar el formato RGB (Big Endian) o
BGR (Little Endian).

En arquitecturas x86 (Windows, Linux) se usa el formato Little Endian (el byte de menor
peso se almacena en la direccin ms baja de memoria y el byte de mayor peso en la
ms alta) y en PowerPC (Mac), Big Endian (el byte de mayor peso se almacena en la
direccin ms baja de memoria y el byte de menor peso en la direccin ms alta).



8
Desarrollo de Videojuegos

La cantidad de bits usada para cada componente de un pixel, la podemos ver
resumida en la siguiente tabla:

8 bits 16 bits 24 bits 32 bits

1:5:5:5

El primer bit indica la
transparencia, si es 0, la
transparencia ser total, si es 1
habr opacidad total.

5 bits para cada componente
RGB.




Se utiliza una paleta,
donde cada posicin
apunta a un color que
posee las
intensidades RGB.

5:6:5

5 bits para componente Red
6 bits para componente Green
5 bits para componente Blue


8:8:8


8 bits para cada
componente RGB

8:8:8:8

El primer byte
corresponde al canal
alpha (componente que
almacena el grado de
transparencia)

Los ltimos 3 bytes son
las componentes RGB del
color.



Anteriormente mencionamos que una imagen tiene dimensiones y a esta dimensin
(ancho y alto) tambin se le conoce como Resolucin. La resolucin nos permite
conocer cuanto detalle existe en una imagen, esto quiere decir que a mayor resolucin
obtendremos mayor calidad. La resolucin no solo se aplica a una imagen, sino que
tambin a la pantalla o monitor. Existen algunas resoluciones estndar:

320x200
320x240
640x480
800x600
1024x768
1152x864
1280x720
Etc.

El Modo de video es la unin de la resolucin con la profundidad de color y se denota
como AnchoxAltoxBpp.

Por ejemplo podramos trabajar con los siguientes modos de video:

640x480x8 (640 pixeles de ancho x 480 pixeles de alto a 8 bits por pixel)
640x480x16 (640 pixeles de ancho x 480 pixeles de alto a 16 bits por pixel)
800x600x32 (800 pixeles de ancho x 600 pixeles de alto a 32 bits por pixel)
Etc.



9
Desarrollo de Videojuegos

La eleccin de un modo de video u otro, es un factor importante a la hora de comenzar
a desarrollar un videojuego, ya que con estos datos sabremos cual ser el flujo de
informacin (medido en bytes) que existir. Adems las imgenes que se muestren en
pantalla debern tener algn tamao determinado, que debe ajustarse a la resolucin
elegida.

Por ejemplo supongamos que estamos trabajando con el siguiente modo de video,
800x600x32 y queremos conocer cuando memoria ocupa una imagen con las mismas
dimensiones que la resolucin seleccionada, entonces el tamao que ocupar ser de:


Tamao = 800 x 600 x 4 = 1.920.000 bytes = 1.83 Mb


Multiplicamos por 4, ya que 32/8 =4 bytes, es decir para mostrar un solo color en
pantalla o pxel necesitamos 4 bytes.

El resultado anterior no es un tamao despreciable, imaginemos el tamao que
podramos obtener a resoluciones mayores.

En los primeros juegos que aparecieron para PC, se utilizaban resoluciones muy bajas
como 320x200 (tambin conocido como modo 13h) o 320x240 (modo x) y a 8 bits por
pxel, o sea como ya sabemos disponamos de un mximo de 256 colores.

A medida que pasaron los aos se empezaron a utilizar resoluciones de 640x480 o
800x600 y a profundidades de color ms altas, de 16 o 32 bits, todo esto gracias a que
aumentaron las capacidades de las tarjetas de video.

Hoy en da, en la mayora de los juegos tenemos la posibilidad de elegir el modo de
video que mejor se adapte a nuestro equipo. Existen algunos casos tpicos, como
cuando queremos tener el mejor rendimiento en nuestro videojuego, bajamos la
resolucin al mnimo o a una resolucin intermedia. Al contrario, cuando disponemos de
un buen equipo y una buena tarjeta de video, lo ms probable es que seleccionemos un
modo de video ms alto, para disfrutar de unos grficos de mejor calidad.

Otro concepto importantsimo es el de Video RAM, bsicamente es la memoria o buffer
que se encuentra en la tarjeta de video. Toda tarjeta de video tiene como mnimo una
memoria, un microprocesador, una cach y un bus de datos, que normalmente es AGP.

En la Video RAM se almacenan los datos que sern mostrados posteriormente en la
pantalla, estos datos pueden ser texturas, vrtices, etc.

Para el desarrollo de videojuegos 2D, esto se simplifica ya que solo tendremos en la
memoria cada uno de los pxeles que forman la imagen.



10
Desarrollo de Videojuegos

En el caso de juegos 3D, en la memoria se pueden almacenar algunas rutinas o
procedimientos que ejecutan algunas instrucciones para generar normalmente algn
efecto, a estas rutinas se les conoce como Shaders.

Adems, el microprocesador tambin conocido como GPU (Graphics Processing Unit),
se comunica con la memoria a travs de un bus interno, ejecuta instrucciones y
actualiza el cach de instrucciones, de texturas y geometra. El proceso de llenar la
memoria de video con datos se hace posible a la existencia de la GPU, el cual lo hace a
travs de un bus de puerto acelerado, conocido como AGP. Despus el monitor lee
peridicamente desde el buffer de video (Video RAM) los datos y refresca la pantalla, lo
que nos permite ver una imagen en el monitor. No importa la velocidad con que se
modifiquen los datos del buffer, el monitor no actualizar nada hasta el prximo
refresco.





11
Desarrollo de Videojuegos

Tcnicas 2D


Ahora continuaremos viendo otros conceptos, que llamaremos tcnicas 2D. Estos
trminos son aplicados bsicamente al desarrollo de aplicaciones 2D y algunos son la
base para las 3D.


Sprites

Un sprite es cualquier objeto que aparece en nuestro
videojuego. Normalmente tiene asociado algunos
atributos, siendo los ms bsicos una imagen y una
posicin.

Los sprites pueden ser estticos o dinmicos. Al hablar de
sprite esttico, nos referimos a un objeto que no cambiar
su posicin durante el videojuego, por ejemplo la imagen
de una llama, piedra, etc. En cambio un sprite dinmico,
es aquel que tendr algn tipo de movimiento, el cual puede ser realizado por el usuario
o por el computador, por ejemplo el sprite de un jugador o de los enemigos.

Representar un sprite en memoria puede ser realizado de muchsimas formas, y puede
depender mucho del gusto del programador y su experiencia. Normalmente se
almacenan sus atributos en una estructura o clase.


Animacin de Sprites


Esto es bastante simple, aqu aparece el
concepto de frame o cuadro, que
corresponde a una de las imgenes que
forman la animacin completa de un sprite.
Podemos pensar en una secuencia de
imgenes que son dibujadas rpidamente,
que engaan al ojo humano dando el
efecto de un movimiento fluido. Es el mismo mtodo que se utiliza para los dibujos
animados.

El nmero de frames dibujados en un periodo de tiempo se conoce como frame rate
(tasa de frames), siendo un aspecto muy importante en la animacin, ya que de esto
depende la calidad de animacin que obtendremos. Si cada uno de los frames se
muestra muy rpido o muy lento, la ilusin del movimiento se perder y el usuario ver
cada uno de los frames como una imagen separada.



12
Desarrollo de Videojuegos

Una animacin muy comn puede ser la de un personaje caminando, saltando, o
realizando cualquier otra accin.

Esto tambin debe ser representado de alguna forma inteligente en nuestro videojuego,
utilizando algn tipo de estructura de datos adecuada, como un vector o lista.

Normalmente el sprite tendr como atributo una lista de animaciones (las acciones del
personaje, enemigo, etc.), donde cada animacin corresponder a otra lista con cada
uno de los frames.

La totalidad de los frames que forman un personaje, suele almacenarse en un solo
archivo de imagen, a esto se le llama sprite sheet, es decir, una imagen donde
tenemos secuencias de frames para las diferentes acciones que puede realizar un
personaje en un videojuego. La siguiente imagen lo ilustra claramente.







13
Desarrollo de Videojuegos

Transparencias


Color keys

Cuando mostramos una imagen en pantalla, esta siempre se ver como un
cuadrado o rectngulo, pero sabemos que dentro tiene la representacin de un
objeto, personaje, enemigo, tem, etc. Al dibujar esta imagen queremos ver solo
la forma que representa, para esto debemos elegir algn color transparente,
pintar con ese color las zonas que no queremos que aparezcan y luego dibujar la
imagen ignorando dicho color.

Normalmente se utiliza el color magenta (255, 0, 255), como color de
transparencia, ya que es poco probable que se encuentre en una imagen.





Dependiendo de la API grfica que utilicemos para desarrollar nuestro
videojuego, tendremos una funcin que realice esta tarea, la de descartar un
color determinado al dibujar la imagen.

Pero no solo usar un color como el magenta es la solucin para no ver una
imagen en su forma original, tambin podemos hacer uso de las propiedades del
formato grfico PNG (Portable Network Graphics), ya que este formato guarda un
canal alpha con las partes transparentes de la imagen.

















14
Desarrollo de Videojuegos

Mscara

Existe otro mtodo para ignorar un color en una imagen, el uso de una mscara
que se antepone al bitmap original, es decir, debemos tener otro bitmap que
indica cuales son los pixeles transparentes. El color que indica la transparencia
es el negro, y el color blanco la figura que queremos mostrar. Por lo tanto, al
dibujar la imagen, recorreremos cada pixel de la mscara, y si este color es
blanco, mostraremos el pixel del bitmap original que se encuentra en esa
posicin.







15
Desarrollo de Videojuegos

Transformaciones

Cuando dibujamos un sprite en pantalla, tenemos la posibilidad de aplicar algunas
transformaciones, las ms usadas son las siguientes:


Translation

Esta es la transformacin ms simple, corresponde a cambiar la posicin del
sprite para luego dibujarla en otro lugar de la pantalla, dando el efecto de
movimiento, sin duda lo ms usado en cualquier videojuego. Y se resume en
asignar una nueva posicin a las coordenadas (x, y) del sprite.

Por ejemplo si las variables x e y son las coordenadas de la esquina superior
izquierda del sprite, y vx, vy las velocidades en cada eje, con una simple suma
en cada componente cambiaremos la posicin del sprite.

x = x + vx;
y = y + vy;


Rotation

Otra transformacin tpica, que consiste en girar el sprite un nmero determinado
de grados. Se usa para mostrar objetos vistos desde otro ngulo, por ejemplo en
el videojuego Micro Machines, cuando doblamos cambiamos el ngulo del auto y
luego este cambio lo vemos reflejado en la pantalla gracias a la rotacin.

Tambin lo podramos usar para realizar efectos para una presentacin, efectos
durante el videojuego, etc. Adems al rotar una imagen debemos saber con
respecto a que punto lo haremos (pivote), por ejemplo en la siguiente imagen
realizamos unas rotaciones con respecto al centro de la imagen.






16
Desarrollo de Videojuegos

Scaling

Otra transformacin muy usada en algunos videojuegos, consiste en escalar una
imagen, es decir, cambiar su tamao (normalmente de forma proporcional), ya
sea un aumento o una disminucin. Se puede usar para dar un efecto de
profundidad, es decir, si el objeto est ms alejado de nosotros lo dibujaremos
ms pequeo, en cambio si est muy cerca de nosotros, lo dibujaremos de un
tamao ms grande.

Suele usarse tambin en conjunto con la rotacin para realizar algunos efectos.

Al utilizar esta transformacin, hablamos de scale factor, es decir, un valor que
indica el porcentaje de escalado, donde el valor 1 corresponde al tamao
normal.





En la imagen anterior nos damos cuenta que
al aumentar su tamao, se produce un efecto
no deseado en los bordes de la imagen,
conocido como aliasing, es decir, las lneas
o curvas que forman los bordes de la imagen
se ven discontinuas (en forma de escalera).
Para esto existe una solucin, el
antialiasing, una tcnica que permite
suavizar todos los bordes y as disminuir el
efecto de escalera. En toda API grfica encontraremos una funcin que realice
esta tarea.










17
Desarrollo de Videojuegos

Flipping

El flipping es un tipo de transformacin especial para realizar algunos efectos.

Bsicamente existen dos tipos, Vertical Flip que corresponde al efecto que se
produce cuando se refleja un objeto en el agua y Horizontal Flip que corresponde
al reflejo de un objeto en un espejo. Con la siguiente imagen quedar mucho
ms claro.






Alpha blending

Alpha blending o mezclado alpha es una tcnica para crear transparencias en una
imagen con respecto al fondo. Para lograr esto se agrega un cuarto canal a un color,
llamado canal alpha.

Ahora los colores de una imagen se representarn como RGBA. Cada valor alfa de un
pixel representa su grado de opacidad, donde un valor cero indica un 100% de
transparencia, y a medida que aumentamos su valor se ir haciendo ms opaco. El
rango va desde 0 a 255.

Para crear un canal alpha en una imagen, tenemos dos opciones, una es almacenar
esta informacin con algn software de edicin de imgenes (Photoshop) y en un
formato apropiado. (PNG, Portable Network Graphics), o hacerlo posteriormente en el
mismo videojuego, utilizando alguna funcin de la API que nos permita setear un grado
de transparencia para la imagen.

El funcionamiento de esta tcnica es relativamente simple, ya que se realiza una media
ponderada de cada pixel que forma la imagen y los pixeles que conforman el fondo.

Por ejemplo supongamos que tenemos un color de una imagen, el (100, 40, 50) con un
valor alfa de 90, y dibujaremos este pixel sobre otro con el valor (70, 100, 80). Con
estos datos el pixel resultante tomara un 35% del primer color y un 65% del segundo.



18
Desarrollo de Videojuegos

Entonces, multiplicaremos cada componente del pixel por el porcentaje que le
corresponde y luego sumaremos cada unas de las componentes, obteniendo as el pixel
resultante.

Pixel1: (100, 40, 50) / *0.35
Pixel2: (70, 100, 80) / *0.65

Pixel resultante: (100*0.35+70*0.65, 40*0.35+100*0.65, 50*0.35+80*0.65) =
(81, 79, 70)

El clculo anterior se debe hacer para cada pixel que forma la imagen, lo cual afecta al
rendimiento, pero hoy en da todas las tarjetas de video realizan este tipo de
operaciones va hardware.





Esta tcnica se puede aplicar a un bitmap completo o solo a un grupo de pixeles de la
imagen. Es utilizado para hacer una variedad de efectos en videojuegos, por ejemplo
puede usarse para dar un carcter de fantasma a cierto personaje, para hacer un men
transparente, escribir texto sobre un rectngulo transparente, etc.


Screen buffer

El screen buffer es simplemente un rea de la memoria de video, donde podemos
dibujar algo que se mostrar en la pantalla. Si queremos mostrar un pixel, debemos
tener un puntero a la direccin de memoria de video y calcular la posicin (offset,
desplazamiento) donde queremos dibujar el pixel y luego en esa posicin copiar el byte
o los bytes que representan el color.

Supongamos que estamos trabajando en el siguiente modo de video: 640x480x24, es
decir, tenemos 640 pixeles de ancho, 480 pixeles de alto, y cada pixel ocupa 3 bytes,
entonces:



19
Desarrollo de Videojuegos



En el ejemplo anterior no mostramos como se calcula el valor numrico del color, para
hacerlo hay que hacer uso de operaciones a nivel de bits y desplazamientos, y esto
depende de la profundidad de bits que se este usando. Supongamos que el color tiene
la siguientes componentes (200, 150, 60) y estamos trabajando a 24 bits. Si
recordamos la tabla de componentes RGB, para 24 bits tenemos que cada componente
ocupa 8 bits, as que el clculo es el siguiente:


Es decir, gracias a los desplazamientos colocamos la componente en su posicin
correcta y luego sumamos todos estos valores con el operador OR a nivel de bits.

Para calcular la posicin de memoria donde debe colocarse el pixel, la posicin y es
multiplicada por el ancho en pixeles de la resolucin elegida, es decir, con esto nos
movemos y lneas por la pantalla, luego en esa posicin debemos movernos unos
ciertos bytes hasta llegar a la posicin x que buscamos. Para eso sumamos la
posicin de la coordenada x multiplicada por el tamao del pixel en bytes, en este
caso como estamos usando una profundidad de color de 24 bits, se debe multiplicar por
3. Luego asignamos el color al buffer justo en la posicin que calculamos anteriormente.

En general esta es la forma elemental para dibujar un pixel en pantalla. Para dibujar una
imagen completa debemos recorrer cada punto de la imagen, calcular la posicin y
asignar el color a dicha posicin. Para nuestra suerte, todas las APIs grficas traen
funciones para crear un color, como lo hicimos anteriormente, y funciones para dibujar
una imagen completa en pantalla.




20
Desarrollo de Videojuegos

Surface

Este trmino es la base de la programacin 2D. Bsicamente es una zona de memoria
que puede estar en la RAM o Video RAM y es usada para almacenar un bitmap. Si
queremos ver esto en el mbito de la programacin, una Surface es una estructura o
clase que tiene como mnimo las misma propiedades de un archivo de imagen, es decir,
tendr un arreglo lineal de datos que contiene cada uno de los pixeles que forma la
imagen y adems el ancho y alto del bitmap. Dependiendo de la biblioteca grfica que
se use, pueden existir ms atributos.

Una Surface se podra confundir con el concepto de Sprite, pero en general un Sprite
tiene como atributo al menos una Surface.


Blitting

El blitting es una operacin para transferir un bloque de bytes (surface) de un sector de
la memoria a otra. Viene del termino Blit (Block Image Transfer, Transferencia de
Imagen por Bloque) y es una forma de renderizar (dibujar) sprites con o sin
transparencias sobre un fondo. Esta tcnica puede ser acelerada por hardware, lo cual
ayuda a incrementar bastante el rendimiento, de hecho esta operacin es una de las
ms crticas en cualquier videojuego y es la que ms usaremos.

Gracias al blitting podemos armar una escena en un videojuego, por ejemplo en la
siguiente imagen vemos que a partir de dos superficies, una con los sprites de los
personajes y otra con un fondo, armamos a travs de blits una tercera superficie que
contiene la escena final.



21
Desarrollo de Videojuegos


En una operacin de blitting, podemos especificar en que posicin de la superficie
destino queremos copiar la superficie origen, incluso que parte de la superficie origen
queremos copiar. De esta forma podemos colocar en cualquier posicin, superficies
dentro de otras. La forma de especificar las superficies origen/destino y sus posiciones,
depende de la API grfica que se est utilizando. Siempre se nos proveer de una
funcin de blitting, ya que todas las bibliotecas disponen de al menos una.


Double Buffering

Para entender esta tcnica, antes que todo debemos saber que el monitor ya sea CRT
(Tubo de rayos catdicos) o LCD (Pantalla de cristal lquido), no dibuja la imagen en la
pantalla instantneamente, sino que lo hace pixel a pixel, partiendo desde la esquina
superior izquierda hasta la esquina inferior derecha. Esto se realiza a una velocidad
bastante rpida que el ojo humano no percibe, y a este tiempo, como vimos al principio,
se le conoce como frecuencia de refrescado.

Cuando queremos mostrar una imagen en la pantalla, como ya sabemos colocamos los
pixeles de la imagen en la memoria de video y durante el tiempo de refrescado el
monitor leer la informacin que hay en la Video RAM y la mostrar en la pantalla.

Ahora imaginemos que queremos mover un objeto por la pantalla, los pasos son
simples, primero dibujamos la imagen en una posicin, luego la borramos, y la
dibujamos en la nueva posicin, pero aqu aparecen algunos problemas, si a la mitad
del refrescado cambiamos la imagen en la memoria de video, el monitor ahora obtendr
otra informacin de la imagen y probablemente la parte superior e inferior de la imagen
no correspondan, es decir, veremos imgenes superpuestas y adems un molesto


22
Desarrollo de Videojuegos

parpadeo. Una posible solucin a esto, es esperar a que el monitor termine de refrescar
la pantalla, para luego escribir en la Video RAM la nueva imagen. La mayora de las
APIs grficas disponen de alguna funcin que espera el refrescado del monitor,
evitando as el parpadeo y la superposicin de imgenes, pero no del todo.

Para evitar totalmente el parpadeo, usamos esta tcnica llamada Double Buffering,
que consiste en tener dos reas de memoria en la RAM (o Video RAM). Una de estas
zonas se conoce como front-buffer, y corresponde a la que se muestra actualmente en
pantalla y tambin tenemos el back-buffer, que es donde dibujamos los objetos que
formarn la escena final. Estas reas de memoria deben tener las mismas dimensiones
del modo de video seleccionado.



Ahora tenemos dos opciones para esta tcnica. Si el back-buffer se encuentre en la
RAM, deberemos copiar todo el contenido al front-buffer, es decir, a la memoria de
video para que veamos los cambios en el monitor. Para esto realizaremos un proceso
de blitting, que dependiendo del modo de video usado, puede ser un poco costoso.

La otra posibilidad es que el back-buffer tambin se encuentre en la Video RAM, de ser
as, no tendremos que realizar un blitting, sino que haremos algo ms simple,
intercambiaremos estas dos zonas de memoria, lo cual tiene un costo bastante bajo. A
este proceso de intercambio del back-buffer con el front-buffer, se le conoce con el
nombre de Page Flipping, y es lo que se suele usar hoy en da, ya que disponemos de


23
Desarrollo de Videojuegos

ms RAM en las tarjetas de video. Adems la funcin de Page Flipping, est
implementada en todas las APIs grficas, as que solo deberemos llamarla en el
momento adecuado.

Dirty Rectangles

Esta tcnica es una forma de optimizar la anterior. Con Double Buffering
constantemente estamos volcando el contenido completo de una zona de memoria a
otra, pero puede haber ocasiones donde no este sucediendo ningn cambio en
pantalla, o tal vez solo haya cambiado una pequea parte de esta. Es aqu donde
aparece la tcnica, Dirty Rectangles (rectngulos sucios) y su funcionamiento es
bastante simple. Copiaremos a la Video RAM solo las reas de la pantalla que han
cambiado, por lo tanto, cada vez que algn sprite cambie su posicin, copiaremos a la
memoria de video el rea de un rectngulo que rodee al sprite (incluyendo el rea
donde se encontraba antes) y la colocaremos justo en las mismas coordenadas en la
Video RAM. Pero no siempre es recomendable utilizar esta tcnica, ya que podemos
tener demasiados sprites movindose por la pantalla, y ya no sera ptimo estar
copiando cada rectngulo a la Video RAM, ya que sera lo mismo que copiar la pantalla
completa, en un caso as conviene solo usar la tcnica Double Buffering.


Clipping

El clipping es un tcnica bien sencilla, consiste en definir una rea de recorte para la
pantalla, es decir, todo lo que se dibuje fuera de esta rea ser ignorado y no se
mostrar en pantalla. Normalmente esta rea de recorte coincide con la resolucin
elegida para el videojuego, pero puede ser cualquier otra.


Sistema de coordenadas 2D

Es importante saber que cuando dibujamos algo en pantalla, siempre tendremos que
informar la posicin en la cual dibujaremos el objeto. Por defecto la posicin de un
objeto se encuentra en la esquina superior izquierda, pero algunos prefieren usar como
punto de anclaje el centro, y en general puede ser cualquier otro punto. Calcular el
centro del punto es tan simple como sumar a la posicin x, la mitad del ancho del objeto
y a la posicin y, la mitad de la altura del objeto.

Nosotros estamos acostumbrados a trabajar en el cuadrante I del plano cartesiano,
donde las coordenadas del eje x crecen hacia la derecha y las coordenadas del eje y
crecen hacia arriba, pero al trabajar con grficos en el computador, esto es
relativamente distinto, ya que el eje y se invierte, es decir, ahora el mundo est al revs,
las coordenadas en el eje y crecern hacia abajo.

En la siguiente imagen podemos ver el plano cartesiano en su forma normal versus el
plano cartesiano utilizado en la programacin grfica.



24
Desarrollo de Videojuegos




Plano Cartesiano

El mundo al revs


25
Desarrollo de Videojuegos

Sincronizacin en los videojuegos



Lo ideal en cualquier videojuego, es que todos los objetos se muevan a la misma
velocidad, independiente de la velocidad del computador donde se ejecute. Si no nos
preocupamos por esto, y ejecutamos nuestro videojuego en un computador antiguo, por
ejemplo, en un Pentium de 100 Mhz, probablemente el videojuego se vea muy lento, en
cambio si lo ejecutamos en un computador con un procesador de ltima generacin, un
Pentium IV a 2.4 Ghz, se ver tan rpido que ser imposible jugar.

Para solucionar este problema, disponemos de dos mtodos.


Sincronizacin por Framerate

El primer mtodo, consiste en sincronizar el framerate, tambin conocido como FPS o
Frames per Second (Frames por segundo). Al hablar de FPS, nos referimos a la
frecuencia con que se ejecuta el ciclo principal de un videojuego en un segundo. A
mayor cantidad de FPS obtendremos una mayor fluidez en las animaciones.

En el cine se considera que una velocidad de 24 FPS es suficiente para que el ojo
humano perciba una animacin fluida, pero en los videojuegos esta cantidad es
demasiado baja. Valores adecuados son sobre 60 o 100 FPS.

El mtodo es bastante sencillo, y lo primero que debemos hacer cuando comienza el
ciclo del videojuego, es obtener el tiempo transcurrido hasta ese momento, que
normalmente se mide en milisegundos. Luego procesamos lo relacionado al videojuego,
ya sea entrada, IA, lgica del juego, deteccin de colisiones, dibujo de grficos, etc. y
antes de terminar el ciclo, creamos otro loop en el cual vamos obteniendo el tiempo
transcurrido hasta ese momento, calculamos la diferencia de tiempo y verificamos si es
menor a los FPS que buscamos. De esta forma cada vez que ejecutemos el programa
en una mquina diferente, el programa esperar el tiempo adecuado para obtener los
FPS.

Utilizando este mtodo, en computadores ms rpidos se ver ms fluido, pero si lo
ejecutamos en una mquina con un procesador mucho ms antiguo del que usamos
para desarrollarlo, lo ms probable es que se vea bastante lento.

Claro, no todo poda ser perfecto, pero es por eso que los videojuegos piden algunos
requerimientos mnimos.



26
Desarrollo de Videojuegos

Ahora veamos el cdigo para este mtodo de sincronizacin:



Sincronizacin por Tiempo

El segundo mtodo consiste en sincronizar en base al tiempo. En este mtodo no
importa el framerate que posea el videojuego, pero aun as los objetos se movern a la
misma velocidad en todas las mquinas.

Bsicamente, lo que debemos hacer es calcular la posicin de un objeto de una forma
distinta, en el mtodo anterior si queramos mover un objeto 5 pixeles por frame
haramos lo siguiente:

x = x + 5;

Y para mantener siempre la misma velocidad en varios equipos, esperaramos un
tiempo determinado al final del ciclo del videojuego.

Lo que haremos ahora ser obtener el tiempo que ha transcurrido hasta el momento de
calcular la nueva posicin del objeto, y multiplicar ese tiempo por la velocidad. Es decir:

x = x + vx*dt;

Ahora la variable vx, que almacena la velocidad, no ser entera (int) sino que un
numero flotante (float), ya que ahora lo multiplicaremos por un delta t de tiempo.

Imaginemos ahora que vx tiene el valor 0.005, y el ciclo demora 1 segundo en
ejecutarse, el nuevo incremento ser de:



27
Desarrollo de Videojuegos

x = x + 0.005*1000
x = x + 5

J usto 5 pixeles, como en el caso anterior.

Veamos otro caso, ahora el ciclo se demora 10 milisegundos, lo cual es ms real,
entonces:

x = x + 0.005*10;
x = x + 0.05;

Ahora el incremento es menor, claro, debe ser as porque en tan solo 10 milisegundos
se mueve 0.05 pixeles, entonces cuando pase 1 segundo se habr movido:

(1000/10)*0.05 = 100*0.05 = 5 pixeles

J ustamente lo que esperbamos, ahora no importan los FPS que existan en el
videojuego, basndonos en el tiempo, los objetos se movern a la misma velocidad en
cualquier equipo.

Veamos esto en un simple cdigo:



Este mtodo se usa bastante en videojuegos 3D, ya que el framerate vara mucho en
cada ciclo, dependiendo de la cantidad de objetos que se deban renderizar.



28
Desarrollo de Videojuegos

Pero este mtodo tambin tiene su desventaja, a pesar de que los objetos se mueven
siempre a la misma velocidad, en un computador ms lento, el desplazamiento no se
ver fluidamente. Esto se aprecia en el ejemplo que ya vimos, en el caso extremo de
demorarse 1 segundo cada ciclo, cada vez que se deba mover un objeto, este
aparecer 5 pixeles ms a la derecha, producindose un salto muy notorio. En
computadores aun ms lentos, se comenzar a ver un parpadeo en el desplazamiento
de los objetos.

Pero como ya dijimos nuestro videojuego siempre tendr unos requerimientos mnimos
y tendremos que seleccionar el mtodo que ms nos acomode. Pero claramente el
primer mtodo, sincronizacin por framerate, es el ms simple y el ms extendido.


Resumen

Hemos aprendido o repasado varios conceptos, que nos ayudarn a comprender mejor
la programacin grfica que se usa en los videojuegos 2D.

Todos estos conceptos se pueden aplicar a cualquier biblioteca grfica, muchas de las
cosas que vimos ya vienen implementadas, como por ejemplo setear un modo de video,
obtener un color, realizar operaciones de blitting, efectos de alpha blending, usar
transparencias por color keys, transformaciones como rotacin, escalado, traslacin,
page flipping, etc., por lo tanto no ser necesario que escribamos cdigo para esto, pero
conviene conocer su funcionamiento.




29