Técnicas para pintar imágenes en SCREEN 2 (1ª parte)

A continuación os presento la primera parte de un magnífico (al menos para mí, que soy un novato) artículo sobre cómo dibujar gráficos en SCREEN 2. El artículo original lo podéis encontrar en aOrante Blog, aunque dado su interés didáctico lo reproduzco íntegramente aquí:

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 primeros ordenadores domésticos, poseían procesadores gráficos con peculiaridades que proporcionaban un estilo característico en sus gráficos. En el caso de los MSX de primera generación utilizan el Texas Instruments TMS9918. Dispone de varios modos de pantalla, de los cuales, el más utilizado es el modo gráfico 2, también llamado Screen 2 o SC2. Este ofrece una resolución de 256×192 pixels con una paleta de 16 colores, pero solo podemos utilizar 2 colores en cada línea de 8 puntos. A modo de aclaración, la pantalla se dividiría en 32 columnas de 8 pixels de ancho.

Zoom de una imagen con una rejilla de 8×1
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 (no estaría mal que tuviera un naranja o un marrón). Proporciona tres tonos de los tres colores básicos (Rojo, Verde y Azul), 2 amarillos, y un magenta, negro, gris y blanco. También dispone de un color transparente, que replica el color del borde.

Paleta del MSX ordenada por tonos

Manos a la obra

Ahora que conocemos las características del SC2, ahora hablaremos de como podemos dibujar nuestra imagen, y de las técnicas que podemos utilizar para sacarle el máximo provecho. Para la creación de la imagen de este tutorial he utilizado Gimp.

El primer paso sería crear un boceto lineal de nuestra idea. Podemos hacerlo en papel o directamente en nuestro programa gráfico favorito (preferiblemente uno de tipo Paint).

Ahora, utilizando nuestro software, dibujaremos sobre el boceto las formas de los diferentes componentes de nuestra imagen. Podemos ayudarnos de la herramienta rejilla (o Grid). Para mi caso, me ha ayudado bastante el utilizar herramientas para crear 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 nativo de MSX o específico para este modo de pantalla, tendremos que tener cuidado de no superar los 2 colores por 8 puntos. Para esta labor más precisa, es recomendable trabajar con un zoom considerable, y si el programa nos lo permite, utilizar una rejilla de 8×1 pixels. También podemos modificar/deformar la forma para adaptarlas para que se muestren bien los colores.

Dando detalle a la imagen

Para finalizar, podemos mejorar nuestra imagen, proporcionándole volumen y textura. Para ello podemos utilizar las técnicas que damos en el 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 transiciones de colores y de proporcionar volumen a nuestras ilustraciones.

Podemos crear una gran variedad de tramados, pero yo voy a comentar los más básicos que serian tipo 2×2 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 y 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 y de paso, 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 podemos hacer buenas imágenes, pero aún así, nos queda un recurso más que lo explicaré en la segunda parte del artículo.

Más información

4 comentarios sobre «Técnicas para pintar imágenes en SCREEN 2 (1ª parte)»

  1. Yo uso Gimp y la paciencia es una de las virtudes que poco a poco voy cultivando para no volverme loco con los píxeles en pantalla 😛

  2. Genial el artículo.
    Tenía al MSX olvidado hace mucho tiempo y ahora me estoy volviendo a interesar en él y tu artículo me ha venido de perlas.
    ¡Felicidades!

Deja tu comentario sobre esto

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.