Páginas

26 marzo 2010

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


Los primeros procesadores gráficos utilizados en los ordenadores domésticos, son muy peculiaridades por lo que proporcionaban un estilo característico. 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: Las imágenes creadas para los ordenadores MSX, por sus características, 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 Screen2

Los MSX de primera generación utilizan el vídeo procesador (VDP) Texas Instruments TMS9918, que también se utilizo en más ordenadores y consolas como por ejemplo la Colecovision y 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 Screen 2. 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.

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 vivos 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. Dispone de un color transparente, solo útil para hacer algún tipo de efecto, ya que replica el color definido para el borde. 

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

Paleta del MSX.


Sprites

Dispone de 32 planos de 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 la creación de 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). Para el caso del ejemplo, me he ayudado utilizando herramientas para crear formas básicas como rectángulos y círculos.

Dibujo de las 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. Puede servirnos de ayuda, utilizar una rejilla de 8x1 pixels si el editor nos lo permite. También podemos variar la forma para adaptarlas a la cuadricula y evitar el efecto attribute clash.

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 le aplicamos el tramado

Y continuando con la imagen del tutorial, le he aplicado algunos de los tramados utilizando la primera técnica y de paso le 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: