26 marzo 2010

Técnicas para pintar imágenes en Screen2 (1 de 2)


Los primeros procesadores gráficos utilizados en los ordenadores domésticos, están limitados a la tecnología de la época, por lo que muestran características muy peculiares. En el caso concreto de los MSX, estas características nos dificultan la creación de imágenes, por esa razón he creado un tutorial dividido en dos partes, con algunas técnicas que espero que os ayuden en vuestras creaciones.

Nota: La creación artística de imágenes para los ordenadores MSX, por su limitación en resolución y colores, entrarían dentro de lo que se denomina PixelArt. Es todo un reto, donde la paciencia, la imaginación y la técnica del autor son fundamentales para conseguir un buen resultado.


Sobre el modo gráfico 2
Los MSX de primera generación utilizan el vídeo procesador (VDP) Texas Instruments TMS9918A, que también se utilizo en más ordenadores y consolas como por ejemplo la Sega SG1000. Dispone de varios modos de pantalla, de los cuales, el que nos interesa es el modo gráfico 2, también llamado en MSX, Screen 2 (por la forma de acceder en BASIC), por ser el de mayor capacidad gráfica. Este ofrece una resolución de 256 x 192 pixels con una paleta de 16 colores pero con la limitación de que solo podemos utilizar 2 colores en cada línea de 8 puntos (efecto que se denomina attribute clash). A modo de aclaración, la pantalla se dividiría en 32 columnas de 8 pixels de ancho, donde tendríamos que dibujar con esta limitación.

Detalle de una sección de una imagen, con una rejilla de 8x1.
Podemos comprobar que solo se usan 2 colores por cada 8 pixels.

Colores
La paleta se compone de 16 colores, aunque al ser fija nos encontraremos un poco limitados, (se echa a faltar un naranja y un gris oscuro). Proporciona tres tonos de los tres colores básicos (Rojo, Verde y Azul), más dos amarillos pálidos, además de un magenta, negro, gris y blanco.

El primer color es el transparente (0), pensado para usarse como croma para mezclarse con una señal externa de video, pero muy pocos modelos de MSX utilizan esta característica del VDP. Se podría utilizar para hacer algún tipo de efecto, ya que se muestra con el color definido para el borde.

Más información en el post: La Paleta del TMS9918.


Paleta del MSX.


Sprites
Dispone de 32 planos para figuras móviles (sprites) de 8x8 o 16x16, mono color, pensados para el desarrollo de juegos, pero como veremos en la segunda parte, también podremos utilizarlos en nuestras imágenes.


Manos a la obra
Ahora que conocemos las características del screen2, hablaremos de algunas técnicas para dibujar y sacar el máximo provecho a este modo de pantalla.

Para la creación de la imagen de este tutorial he utilizado Gimp.

El primer paso sería crear un boceto de nuestra idea. Podemos hacerlo en papel y luego pasarlo a nuestro programa gráfico favorito.

Ahora, dibujaremos sobre el boceto las formas de los diferentes componentes de nuestra imagen. Aconsejo que utilicemos la herramienta rejilla (Grid en ingles), ajustada a bloques de 8x8 pixels o de 8x1, si la aplicación nos lo permite (como en el caso de Gimp).

Para el caso del ejemplo, me he ayudado utilizando herramientas para crear formas básicas como rectángulos y círculos.

Dibujo con formas básicas.

En la siguiente fase empezaremos a darle detalle a nuestro dibujo. Si usamos un programa no especializado para el modo gráfico de MSX, tendremos que tener cuidado de no superar los 2 colores por 8 puntos. Para esta labor más precisa, es recomendable trabajar con zoom al máximo.

Dando detalle a la imagen.

Para finalizar, podremos mejorar nuestra imagen, proporcionándole volumen y textura. Para ello podéis utilizar las técnicas que os doy en los siguientes puntos.


Técnica 1. Tramados
La técnica de tramado o Dithering, se basa en alternar puntos de diferentes colores. Pueden seguir un patrón o ser totalmente aleatorios. Nos ofrecen una forma de simular más colores de los que disponemos y nos serán útiles para crear degradados o sombras.

Podemos crear una gran variedad de tramados, pero yo voy a comentar los más básicos que serian tipo 2x2 pixels.

El primero se basaría en cruzar los puntos, obteniendo como una mezcla de los 2 colores usados.

10
01
Tramado cruzado aplicado a tres tonos de verde.

Tabla de combinación de colores con el tramado cruzado .

El siguiente tramado consiste en utilizar un punto rodeado por otros del segundo color. Con este tramado se obtiene una transición más suave con predominio del color de fondo:

10
00
Tramado de punto aplicado a tres tonos de verde.

Los tramados los podemos aplicar combinados y con la forma que queramos, para conseguir el efecto deseado.

Tramado combinado con dos tonos de verde.



Técnica 2. Lineas horizontales
Se trata de otro tipo de tramado, muy utilizado en imágenes de MSX. Consiste en dibujar lineas horizontales de diferentes colores. Se puede utilizar tanto para degradados verticales, como para crear un efecto de tono diferente alternando con dos colores. También se puede utilizar en logos para darles un efecto de relieve utilizando lineas de colores claros para crear un brillo y oscuras como sombra.

Aquí podemos ver el efecto de las lineas horizontales aplicado en 
la pantalla principal del juego Crusader (Ponyca). Se utiliza en 
el logo para recrear un efecto de atardecer en el paisaje. 


Podemos encontrar más ejemplos donde se aplica este efecto, en los fondos de Yie Ar Kung Fu 2 (Konami), en el logo del Salamander (Konami), y en los logos del Dunk Shot y Hole in One (HAL).

Yie Ar Kung Fu 2 (Konami) Salamander (Konami)
Dunk Shot (HAL) Hole in One Pro (HAL)



Y aplicamos el tramado...
Y continuando con la imagen del tutorial, he aplicado algunos de los tramados utilizando la primera técnica y de paso he añadido algunos detalles más que se me han ocurrido...

Aquí podemos ver el resultado de aplicarle tramados a nuestro dibujo.


Conclusiones
Con lo explicado, ya puedes empezar a dibujar tus propias imágenes, pero aún así, nos queda un recurso que explicaré en la segunda parte del artículo.


Más información: