Razón Artificial

La ciencia y el arte de crear videojuegos

Introducción a la programación gráfica 2D (I)

Escrito por adrigm el 18 de agosto de 2010 en Desarrollo Videojuegos, Noticias, Programación | 9 Comentarios.

Un problema bastante común para los que se inician en la programación de videojuegos es el paso de programar en la consola a hacer aplicaciones gráficas, saben que tienen que usar bibliotecas gráficas como DirectX, OpenGL, SDL, Pygame, Allegro, etc. Pero no saben como empezar con todo esto y como funciona. En la red hay documentación, pero está bastante dispersa y no sigue una línea voy a intentar cogiendo un poco de aquí y de allá y algo de aportación propia hacer una guía básica sobre los fundamentos de como trabajar con aplicaciones gráficas para los que se inician.

Esto no será para ningún lenguaje concreto será teoría aplicable a cualquier lenguaje y biblioteca de gráficos 2D.

Hardware y representación de imágenes

Vamos a comenzar repasando algunos conceptos básicos sobre las imágenes y su representación en un ordenador.

Una imagen puede ser representada como un conjunto de puntos. Cada uno de esos puntos tienen un color asociado. El número de puntos que representa una imagen puede variar segúna la definición que queramos obtener. Con cuantos más puntos sea representada una imagen más calidad tendrá y más espacio necesitaremos para almacenarla. Este aumento de tamaño provocará un aumento de tiempo de computación para que pueda ser mostrada. Esto se traduce en un mayor consumo de espacio de disco y que las transferencias de datos que hace que la imagen se nos muestre en la pantalla de nuestro ordenador estén más cargadas al tener más datos que intercambiar. Por este motivo es fundamental trabajar con una resolución idónea, buscando el equilibrio entre espacio y calidad.

Estos puntos a los que hacemos referencia se conocen como píxeles y determinan la resolución de una imagen. Los monitores tienen una limitación en cuanto al número de píxeles que pueden mostrar. Esta limitación es un máximo ya que siempre podrá mostrar un número menor de píxeles. Cada uno de estos píxeles tendrá asociado un color para los que se destinará un determinado número de bits (bits por píxel o bpp) que determinaran la calidad, medida en profundida de color, de la imagen. Los valores más comunes para el bpp son:

  • 8 bits (256 colores)
    • Debemos usar una paleta para establecer los distintos 256 posibles colores.
  • 16 bits (65,536 colores o Highcolor)
    • Existen distintas combinaciones para el uso de estos 16 bits. Las más comunes son:
      • 5 bits para rojo, 6 bits para verde y 5 para azul. Se utiliza esta distribución porque el ojo humano distingue más colores verdes que otros.
      • 4 bits para rojo, 4 bits para verde, 4 para azul y 4 para transparencias. Este es un modelo más equitativo.
  • 24 bits (16,777,216 colores o Truecolor)
    • Este es el modelo RGB puro. Se destinan 8 bits para cada color que cubren todo el espectro.
  • 32 bits (16,777,216 colores)
    • Utiliza RGB más 8 bits destinados a canales alpha o transparencias.

Depende del sistema en el que trabajamos y para el que vaya destinado la aplicación definiran unas resoluciones de trabajo con una profundidad de color bien determinada. Como puedes suponer cuanto mayor sea el número de bits por píxel mayor será el tamaño de la imagen. Este es otro factor a considerar ya que necesitaremos la cantidad de bits indicada por el bpp para almacenar un sólo píxel. SDL nos proporciona funciones que nos permiten establecer estos modos de video así como consultar su compatibilidad con el sistema.

Un concepto importante es el de framebuffer que aparecerá varias veces en el tutorial. El framebuffer no es más que la zona de memoria que se corresponde con la imagen que mostrará el sistema en pantalla. Cada píxel tendrá una concordancia exacta en pantalla en una determinada posición. El formato del framebuffer suele ser un vector para simplificar la escritura sobre él. Al ser un vector unidimensional, a la hora de querer modficiar un píxel dado por unas coordenadas (x, y) tendremos que realizar una conversión de escala.

Subsistema de Vídeo

El subsistema de vídeo es la parte del sistema que nos permite interactuar con los dispositivos de vídeo. Generalmente el hardware de vídeo está compuesto por una tarjeta gráfica y un monitor o pantalla de visualización.

Existen numerosos tipos de tarjetas gráficas en el mercado pero todas ellas tienen características comunes que nos permiten trabajar con ellas independientemente del fabricante o del tipo de chip que monten dichas tarjetas. Poseen una unidad de procesamiento de gráficos y una memoria, ya sea compartida o dedicada, donde almacenar las estructuras o imágenes que se deben mostrar por pantalla.

El número de pantallas existentes en el mercado también es muy amplio pero no es algo que nos afecte a la hora de desarrollar un videojuego actualmente a no ser que lo hagamos para un dispostivo específico. En otros tiempos conocer la cantidad de colores que podía manejar un subsistema de vídeo era fundamental para diseñar cualquier aplicación para dicho sistema. Hoy en día la mayoría de los ordenadores que tenemos en casa son capaces de manejar el conocido como color real o true color a unas resoluciones que son prácticamente estándar.

Los principales aspectos que tenemos que tener encuenta de estos dispositivos son dos:

  • La primera es la resolución de ambos dispositivos. Siempre deberemos trabajar a una resolución que sea admisible por el hardware en cuestión. Sería absurdo realizar un videojuego con un tamaño de ventana de 5000 x 5000 para un ordenador personal actual. Algo más avanzado el capítulo presentaremos las resoluciones más habituales.

El concepto de resolución de pantalla es bastante simple. Se trata del número de píxeles que puede ser mostrada por pantalla. Viene presentada, normalmente, por la ecuación x * y donde x hace referencia al número de columnas de píxeles e y indica el número de filas de píxeles. Puedes observar las referencias en la imagen que se muestra a continuación.

  • La segunda es la posibilidad de crear superficies en la memoria de la tarjeta gráfica. Algunas tarjetas gráficas tienen la memoria integrada en la placa base del ordenador por lo que comparten memoria con la CPU y emularán este comportamiento aunque almacenen el contenido en la memoria principal del sistema. El poder almacenar en dicha memoria las superficies que queramos mostrar es muy importante ya que concederá un mayor rendimiento a nuestra aplicación. Esta memoria es conocida como RAMDAC.

9 Comentarios en "Introducción a la programación gráfica 2D (I)"

  1. Bline dice:

    Genial como siempre Adrián, la verdad es que no creí que continuaras mucho con el blog, al menos con lo que a la programación se refiere.

    ¡sigue asi!

  2. adrigm dice:

    Claro que voy a seguir con él. Es más estoy en proceso de mejorarlo y publicar mucho más.

    Puedes ver como he hecho un cambio de diseño, estos días hemos tenido problemas, pero parece que todo se va restaurando poco a poco.

  3. […] los conceptos básicos de la programación de juegos 2D. Parte 1, Parte 2 y Parte […]

  4. Felicito al autor de este blog. Soy docente de programación Python en educación popular y hemos usado mucho material para la parte de juegos. Muchas gracias por compartir el conocimiento.

  5. Miguel Angel dice:

    Muy buena página y buenos contenidos; sería un lujo que siguieras añadiendo material. Un saludo.

  6. Hugo dice:

    Qué sitio tan interesante

  7. […] Introducción a la programación gráfica 2D (I) […]

Deja un comentario