ARTÍCULOS

Iniciación al desarrollo de videojuegos: Gimp vs Photoshop

Repasamos las herramientas para crear nuestro pixel art

Aquí estamos de nuevo para hablar de grafismo de videojuegos y para volver a la época de Atari 2600 e introducirnos, gracias a su básico pixel art, en dos programas que se usan hoy en día en la industria del videojuego. Evidentemente Photoshop es más profesional que Gimp y su interfaz es más cómoda (por eso es el que encontrareis en las empresas) pero cuesta un dinero y con los minijuegos que vamos a aprender a hacer, aun no nos llegará para pagar la cuota de Autonomos y la licencia de este software. Aun así, se puede conseguir una versión de prueba para echarle un vistazo a su funcionamiento.

Como es lógico, aprender a usar estas herramientas requiere de un curso dedicado especialmente para ellas, así que iremos a lo que nos interesa de momento y dejo abierto al interés de quienes sigan esta serie de artículos de profundizar en el tema, ya que hay bastante material disponible en la red con el que aprender.

Enlaces de interés: Descarga de GimpVersión evaluación de Photoshop

¿Qué necesitamos que tenga nuestro software para crear los gráficos de Atari?

Podríamos usar otros programas más básicos, ya que lo único que nos hace falta es: Que nos den la opción de crear transparencias, la ventaja del uso de capas, la capacidad de trabajar a nivel de pixel sin suavizados y la posibilidad de tener dos ventanas abiertas del mismo trabajo para ver nuestro arte ampliado y al mismo tiempo en su tamaño final.

Interfaz de Gimp

Visualmente se parece bastante a Photoshop, aunque la primera vez que lo iniciamos se nos presenta de un modo que generalmente resulta incomodo para trabajar, a modo de paneles flotantes sobre el escritorio, así que para nuestra conveniencia pasaremos a usar el modo ventana única, para lo cual iremos al menú de la parte superior de la ventana central y en el menú Ventana, marcaremos sobre la opción: Modo de ventana única. Así, ahora que ya podemos encajar Gimp en nuestra pantalla como cualquier otro software normal, podemos empezar a fijarnos en las herramientas y opciones que tenemos disponibles para trabajar. (Aunque si vuestra preferencia es trabajar en ventanas separadas esta no es una parte obligada).

Para empezar a la izquierda de nuestra pantalla observamos que tenemos disponibles las herramientas del programa y que si dejamos la flecha del ratón parada sobre cada una de ellas se nos indica su nombre, una descripción de lo que hace y su tecla de acceso rápido. Evidentemente solo podremos tener seleccionada una de estas herramientas cada vez y al elegirlas veremos que cambia justo bajo ellas las “opciones de herramienta”, lo que significa que cada herramienta tiene sus opciones que aparecerán en esta zona de la aplicación.

Como dije al principio, depende de cada persona entrar más en detalle del funcionamiento de Gimp, pero a nosotros por el momento solo nos van a interesar 4 de las herramientas disponibles: Selección rectangular y elíptica (que veremos juntas porque en Photoshop comparten posición), lápiz, goma de borrar y la herramienta de lupa. Igualmente en las opciones que nos muestren nos aseguraremos de que el software no suavice los píxeles con los que vamos a trabajar (de hecho pintaremos prácticamente usando un solo pixel cada vez).

En la parte superior de nuestro programa de retoque tenemos una serie de menús similar al que vemos en todas las aplicaciones para PC (o Mac) que usamos habitualmente. Aquí por ejemplo es donde tendremos que elegir Archivo/Nuevo, para crear un “lienzo” sobre el que empezar a pintar nuestra primera obra de arte.

Finalmente no podemos olvidarnos por supuesto de la parte derecha de la pantalla en la que Gimp tiene una serie de paneles entre los que destacan el que nos permite el uso de capas, gracias a las cuales podremos trabajar de forma más eficiente poniendo gráficos unos encima de otros hasta llegar a nuestro arte final. Es como si pintásemos sobre acetatos transparentes colocados uno sobre otro para obtener un dibujo con la suma de todos. Así, podemos tener por un lado el color base, por otro las sombras y por otro las luces, por ejemplo, y cualquier modificación se puede hacer por separado sin afectar al resto haciéndola mucho más sencilla.

Photoshop

Lo visto en Gimp tiene sus equivalencias en Photoshop con ligeros cambios y una interfaz ligeramente más amigable y profesional. Aquí también tenemos los menús de la parte superior e igualmente con Archivo/Nuevo crearemos nuestro lienzo de trabajo. También tenemos a la izquierda nuestras herramientas (donde también encontraremos el zoom (lupa), el lápiz y la goma de borrar junto con la selección elíptica o rectangular que como ya comentamos antes comparten posición). También está a la derecha los paneles que, entre otras cosas, nos permitirán trabajar con capas, pero en este caso, las opciones de cada herramienta aparecerán arriba, justo debajo de los menús.

Pero ahora, antes de crear el arte de nuestro juego, vamos a copiar un poco para aprender.

Busquemos algunos gráficos básicos de la Atari y vamos a fijarnos en ellos para empezar a dominar todo lo que hemos estado viendo recientemente.

Un robot del juego Berzerk en Gimp

Haciendo click sobre Archivo/Nuevo o con el atajo de teclado Control+N se nos abrirá la ventana de opciones para crear nuestro primer lienzo de trabajo. Aquí elegiremos una resolución de 72 pixels por pulgada tanto en X como en Y (Podemos cambiarlo si desplegamos las opciones avanzadas, pero viene por defecto) y un tamaño de 8×8 pixeles. Puede parecer un gráfico muy pequeño, pero no olvidemos que nuestra pantalla tendría 190×160 pixeles. Así, tras pulsar en el botón de aceptar, tendremos un pequeñísimo marco sobre el que trabajar que tendremos que ampliar. Llega el momento de introducir una de las herramientas mencionadas, la lupa. La seleccionamos, nos aseguramos de que en las opciones de esta herramienta está marcada “ampliar” y hacemos click varias veces sobre nuestro documento para verlo a un tamaño decente.

Doble ventana:

Queremos saber cómo quedará nuestro sprite a su tamaño más o menos real según lo vamos dibujando, así que es bueno tener una ventana doble que nos muestre eso mismo. Para ello iremos a Vista/vista nueva y se abrirá (puede que esta también la tengamos que acercar un poco porque estamos trabajando con poquísimos puntos), actualizando nuestro trabajo en tiempo real según lo creamos en la ventana que ya teníamos ampliada (no olvidéis volver a esta ventana por que se os activará la nueva).

Elegimos por fin la herramienta lápiz y en las opciones seleccionaremos el pincel de tipo pixel, gracias a lo que tendremos una dureza del 100% (nada de suavizados) y un tamaño de pincel de 1 pixel. Toca elegir un color para nuestro lápiz haciendo click sobre el color frontal  y moviendo nuestro ratón por la gama de colores (o introducir valores RGB, HSV o su numeración HTML) y empezar a pintar pixeles de uno en uno. Mirando las imágenes de referencia nos será fácil contar cuantos “puntos” tiene nuestro personaje en su dibujo original y copiarlo. Además, en caso de equivocarnos usaremos la goma de borrar, con la misma configuración que el lápiz, pero marcando también la opción: “bordes duros”.

          

 

¡Y eso es todo para empezar!

Podemos copiar este y algunos gráficos más de Atari que veamos por la red (creando documentos al tamaño que necesitemos) e ir viendo cosas básicas del pixel art como por ejemplo:

Las líneas horizontales y verticales no muestran efecto dentado (son rectas, evidentemente), por otro lado las diagonales vistas en pequeño tienen también un aspecto muy “recto”, pero la cosa se pone más compleja cuando nos movemos en otros ángulos. Aun así, esto se va a observar mejor cuando avancemos en el tiempo y trabajemos en mayores resoluciones. (Y también veremos los degradados y sombreados que aun no nos interesan).

La silueta de nuestros personajes es muy importante y debe destacar sobre el fondo. (Aunque es difícil aun ver siluetas, pero bueno, es algo en lo que ahondaremos en futuros artículos).

Si queremos crear rápidamente “círculos” o rectángulos rellenos de color nos ayudaremos de las herramientas de selección elíptica y rectangular (desactivando el alisado en sus opciones). Estas herramientas solo nos dejarán pintar en las zonas seleccionadas mientras estén activas. (Para dejar de tener una selección activa pulsaremos en el menú sobre Seleccionar/nada o Selección/Deseleccionar en Photoshop)

Un personaje del juego Berzerk en Photoshop

La forma de trabajo y las herramientas son bastante similares. De nuevo crearemos un archivo nuevo con Archivo/Nuevo o Control+N y estableceremos una altura de 10 pixeles y una anchura de 6 (en esta ocasión trabajamos con otras proporciones), con una resolución de 72 ppp.

Las herramientas son equivalentes y también podemos encontrarlas en la barra de herramientas de la izquierda. Por ejemplo tendremos el Zoom (la lupa) para acercarnos a los pixeles de nuestra imagen, pero como ya comenté anteriormente, las opciones de cada herramienta estarán en la parte superior y es ahí donde elegiremos “Aumentar” o “Zoom in”.

Para abrir la doble ventana en el software de Adobe hay que ir al menú superior y elegir Ventana/Organizar/Nueva ventana para Untitled-1 (o el título del fichero que tengáis).

 

El trabajo es similar al que hicimos en Gimp: Elegimos un color frontal, la herramienta lápiz donde establecemos como opciones 1px de tamaño y la dureza al 100%, y pintaremos los pixeles uno a uno hasta formar nuestro muñeco, que nos servirá de práctica por el momento. (Si tenemos que borrar usaremos la goma con las mismas opciones). En el futuro trabajaremos con capas para conseguir las transparencias necesarias que eviten que en el juego que estamos haciendo salga un cuadro blanco rodeando nuestro personaje, pero eso ya lo veremos.

En fin. Esto se está haciendo largo, así que os dejo un poco que practiquéis y profundicéis en los programas para volver pronto y ampliar estos conocimientos creando el arte de nuestro juego.

La próxima vez intentaré hacer una pequeña introducción a la interfaz de Unity y pensaremos en los elementos que nos hará falta crear para comenzar a desarrollar la idea de juego.

  1. ¿Y el Unity no emborronará luego sprites con tan poca resolución? ¿O se puede elegir que no haga filtrado de texturas?

    1. Aun eliminando compresiones y filtrado de texturas las últimas versiones de Unity hacen algún que otro desastre con gráficos con poca resolución, pero el resultado no es nada malo y como ejercicio para ir aprendiendo es útil. Ya subiremos la resolución

  2. Coñe, por fin podré usar Gimp en condiciones en vez de como un noob, jajajaja

    1. Mola saber usar el software pero más importante es tener los conocimientos para poder trabajar con prácticamente cualquier programa. Aun así intentaré poco a poco profundizar en lo necesario de Gimp 😛

      1. Claro, lo importante son las destrezas, luego ya se extrapola la técnica

Deja un comentario

Tu dirección de correo electrónico no será publicada.