PDF de programación - Conceptos Básicos para Desarrollo de Videojuegos 2D

Desarrollo de Videojuegos

Conceptos Básicos 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 públicamente la obra.


Bajo las condiciones siguientes:



Reconocimiento. Debe reconocer los créditos 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 términos 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



Introducción_________________________________________________________________5
Conceptos básicos __________________________________________________________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
Resolución______________________________________________________________________ 9
Modo de video___________________________________________________________________ 9
Video RAM _____________________________________________________________________ 10
Técnicas 2D ________________________________________________________________12
Sprites_________________________________________________________________________ 12
Animación de Sprites ___________________________________________________________ 12
Transparencias_________________________________________________________________ 14
Color keys____________________________________________________________________________ 14
Máscara______________________________________________________________________________ 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
Sincronización en los videojuegos ___________________________________________26
Sincronización por Framerate ___________________________________________________ 26
Sincronización por Tiempo ______________________________________________________ 27
Resumen___________________________________________________________________29



4

Desarrollo de Videojuegos


Introducción



Una de las razones para comenzar a desarrollar primero videojuegos 2D, es que los
conceptos involucrados son mucho más simples y fáciles de asimilar.

Además lo más 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 más rápidos, a diferencia del desarrollo de
videojuegos 3D, que involucra conocer tópicos más avanzados de matemáticas y de
programación. Pero tampoco hay que asustarse, si queremos luego dar el próximo paso
a las 3D, ya que hay que recordar siempre que todo lo podemos estudiar y aprender,
nada es imposible.

En las próximas páginas conoceremos la terminología básica, que nos hará comprender
de mejor forma los conceptos gráficos involucrados en un videojuego.



5

Desarrollo de Videojuegos



Conceptos básicos


Partiremos hablando del dispositivo externo más común y que
todos ya conocemos, el Monitor. Este dispositivo de salida es
uno de los más importantes que posee nuestro computador, ya
que nos permite visualizar la información con la que estamos
trabajando.



El monitor se conecta al
computador a través de una Tarjeta de video. Esta
tarjeta es un circuito
integrado que nos permite
transformar las señales digitales con las que trabaja, en
señales análogas para que puedan ser visualizadas en
el monitor. Este proceso es realizado a través de un
conversor analógico-digital que toma la información
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 líneas horizontales. El hardware del
monitor actualiza de arriba hacia abajo cada una de estas
líneas. 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
resolución 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


de

una

imagen


El concepto más básico usado en la
programación gráfica es el de Pixel,
significa Picture Element, es decir, un
elemento
que
corresponde a la unidad mínima que esta
puede contener. También lo podríamos
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 número de pixeles) y además tiene
asociado un formato, que puede ser alguno de los ya conocidos: bmp, png, jpg, gif, etc.

La diferencia entre formatos gráficos, viene dada por algunos parámetros que
esperamos tener, como la calidad o tamaño del archivo. Por ejemplo si queremos
mantener un equilibrio en tamaño/calidad, un formato que se ajusta a estos parámetros
son los formatos jpg o png, no así el formato bmp, que casi no posee ningún tipo de
compresión.

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

El número de bits que podemos utilizar es de 1, 8, 16, 24 o 32. Con este dato podemos
saber cual será el número máximo de colores que puede representar una imagen en
pantalla. El número de combinaciones se calcula mediante la siguiente fórmula:



Cantidad de Colores = 2bpp



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



Número de bits Cantidad de colores

Nombre

1
8
16
24
32

2
256
65.536
16.777.216
4.294.967.296

Monocromo
Indexado
Color de alta densidad (High Color)
Color real (True Color)
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 número que se encuentra
en el rango: 0 a 255.

Cuando se utilizan 8 bits para mostrar un pixel, como ya sabemos, tenemos como
máximo 256 colores, pero no se representan directamente utilizando las intensidades
RGB, sino que se mantiene una Paleta o Colormap (un arreglo de tamaño igual a 256
bytes), donde cada posición 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