ARTÍCULOS

Iniciación al desarrollo de juegos: Creando los Sprites del juego de Atari

Exprimiendo la magia de los pixels

Aquí estoy de nuevo después de unas largas vacaciones veraniegas para continuar con nuestro lento pero seguro curso de desarrollo de videojuegos guiado por la historia del ocio electrónico. 😀

En anteriores entregas ya comentamos que nuestro primer juego sería un proyecto sencillo que, aunque no iba a funcionar en la mítica Atari 2600, luciría más o menos como un producto de su catálogo. Así que, de primeras en lo que se refiere a la parte gráfica, empezamos a usar Gimp o Photoshop, al gusto y al bolsillo de cada persona, para ir introduciéndonos en el Pixel Art. Es aquí donde vamos a continuar hoy.

El poder de las Capas y la transparencia.

Una de las herramientas más potentes que tenemos al trabajar con programas como Photoshop o Gimp (aunque hay muchos más que las usan), son las capas. Estas funcionarían de forma similar a dibujar sobre acetatos transparentes colocados unos encima de otros, es decir, vemos lo que hemos pintado y las zonas donde no creamos pixeles dejan ver lo que hay detrás.

Gracias a las capas podemos tener por un lado color y por otro sombras en un dibujo, o diferentes efectos, líneas y todo aquello que se nos pueda ocurrir mantener separado, para su posterior edición o retoque en el futuro, pero además, esta forma de funcionar nos soluciona uno de los problemas más básicos en la creación de Sprites, el uso de transparencias sin las cuales todo nuestro arte tendría que ser cuadrado.

Sprites y transparencia

En la imagen vemos que si no tuviésemos transparencia el arte de nuestro juego estaría rodeado siempre por un recuadro blanco (o del color que elijamos) que da el tamaño del sprite. (Cohete de la izquierda con transparencia y cohete de la derecha sin ella).

Photoshop y una moneda

En nuestro software de retoque de pago favorito, nos encontraremos que al crear un archivo nuevo mediante el método file/new tenemos en nuestro panel de Capas una que está bloqueada y que se identifica como Fondo. En nuestro caso, para la creación de Sprites no queremos esa capa, así que nos crearemos una encima donde pintaremos nuestro trabajo y eliminaremos esta.

Para crear una capa nueva haremos clic en el icono de capa nueva del panel capas y veremos cómo se crea una capa nueva añadiéndose a la lista en dicho panel. En esta además, vemos que en la imagen de miniatura está compuesta por cuadros grises y blancos que es como representa por defecto Photoshop la transparencia. Pero lo veremos más claro cuando eliminemos la capa fondo.

nueva capa Photoshop

La capa fondo inicialmente viene bloqueada, por eso tiene un candado al lado de su imagen de miniatura. Esto se hace para que no podamos moverla por accidente, pero puede desbloquearse fácilmente haciendo clic en el candado o doble clic sobre la capa y aceptando la creación de una nueva capa a partir de esta. Sin embargo no vamos a necesitar desbloquear la capa (aunque podéis hacerlo para practicar), porque nuestro objetivo real es eliminarla y eso se hace con un gesto tan sencillo como hacer clic sobre ella y arrastrarla al pequeño icono de papelera que hay en la parte inferior del panel de capas. Así, una vez completada nuestra tarea de borrado del fondo, veremos que nuestro lienzo se compone de los cuadrados que mencionamos anteriormente que Photoshop usa para representar la transparencia.

eliminar capa Photoshop

Pintando la moneda en Photoshop, selecciones.

Ya que hemos visto como podemos dejar nuestro lienzo transparente vamos a crear el primer Sprite para nuestro juego: Una simple moneda. Más bien será algo que se asemeje a una moneda dentro de las limitaciones que nos impone la plataforma Atari.

Nuevo archivo Photoshop

Crearemos un archivo nuevo de 20×20 pixeles (acordaos de establecer una resolución de 72 pixels por pulgada), añadiremos una capa donde pintar y eliminaremos la capa de fondo. Ahora deseamos dibujar una elipse de color más o menos amarillo dentro de la paleta que de Atari que conseguimos en capítulos anteriores, y la mejor forma de hacerlo es la selección elíptica.

Photoshop cuenta con 4 tipos básicos de selección (que se ven ampliados por otros tipos de selección más avanzados y que mencionaremos cuando llegue el momento adecuado) que se usan de forma similar, pero nos centraremos en los dos importantes para nosotros.

selecciones básicas Photoshop

Herramienta selección rectangular

Nos permite dibujar un rectángulo haciendo clic en la esquina superior izquierda y arrastrando para darle las dimensiones deseadas terminando en la esquina opuesta. Así, tendremos unas líneas discontinuas en movimiento que nos indican que todo lo que pintemos a partir de ahora estará dentro de esta selección, no permitiendo que realicemos acciones fuera de ella.

Si usáramos el bote de pintura con un color (recordad desactivar el antialias o suavizado para esta herramienta en sus opciones) para pintar dentro de esta selección observaríamos que solo se rellena el color elegido hasta los límites definidos por las líneas discontinuas.

Para deseleccionar debemos pulsar Control+D o elegir en el menú superior Seleccionar/Deseleccionar.

Herramienta selección elíptica.

El funcionamiento es el mismo y es esta herramienta la que nos interesa, pero en este caso, en vez de definir una esquina y arrastrar hasta otra para definir un cuadrado, haremos el mismo gesto para definir los radios de una elipse. Así, vamos a intentar dar la forma de una moneda  a nuestro gusto y a rellenarla de amarillo usando el bote de pintura. Recordad que, como ya comentamos en anteriores entregas, trabajaremos haciendo zoom sobre nuestro trabajo para ver los pixeles en tamaño gigante y teniendo abierta una copia de lo que hacemos para verlo a tamaño natural mediante Ventana/organizar/nueva ventana para sin titulo-1.

Nota: Para coger un color de nuestra paleta de Atari tendremos que descargarnos la imagen (al final del artículo), abrirla en Photohop y usar la herramienta cuentagotas, con un clic en el color deseado de la paleta y tomar una muestra de él. A partir de ahora nuestro color frontal en el programa será el que acabamos de muestrear y podemos rellenar o pintar gráficos en otros ficheros con él.

rellenar elipse photoshop

Formato de fichero – guardando nuestro primer sprite.

Bien, ya tenemos el primer Sprite de nuestro juego, que no es otro que un ítem que tendremos que recoger, de ahí su aspecto de moneda, muy típico en el mundillo del videojuego. Sin embargo, aunque hemos trabajado para que tenga transparencia y funcione sin un molesto cuadro blanco que lo rodee, vamos a necesitar un paso más para poder llevárnoslo a Unity a partir de aquí.

Existen diversos formatos gráficos en el que podemos guardar nuestro arte, pero siempre hay opciones mejores que otras y en este caso, nuestra mejor decisión es guardar en formato PNG, así que desplegaremos el menú archivo/guardar como y en el desplegable “tipo” seleccionaremos este formato que nos proporciona posibilidad de guardar transparencias a varios niveles, millones de colores y compresión sin perdidas para tener un tamaño de archivo pequeño que haga que nuestro proyecto no requiera mucho disco para su instalación en el futuro.

guardar png photoshop

Crear una bomba en Gimp

Con archivo/nuevo crearemos un nuevo documento en el que trabajaremos, configurando el tamaño a 20×20 y la resolución a 72ppp, solo que en este caso además, elegiremos en opciones avanzadas “rellenar con:” transparencia, para ahorrarnos el paso de tener que eliminar la capa de fondo.

Nuevo archivo en Gimp

Gimp tiene un panel capas algo menos intuitivo pero con un funcionamiento similar. Por ejemplo, en el caso de que queramos crear una capa nueva, al hacer clic en el icono correspondiente a “crear nueva capa”, se nos abre un cuadro de dialogo donde configurar cosas como el nombre tamaño y color de relleno, aunque como norma general elegiremos el mismo tamaño de nuestro documento y la opción transparente.

nueva capa en Gimp

Selección Elíptica y Rectangular

Al igual que en Photoshop, tenemos aquí herramientas para hacer una selección de forma rectangular y otra para la forma elíptica, con un funcionamiento muy similar. Haremos clic en la que será la esquina superior izquierda de un rectángulo y arrastraremos hasta soltar en la esquina opuesta para dar el tamaño que queramos. (También funciona así la selección elíptica, solo que estaremos definiendo los radios de una elipse).

Es importante que para seleccionar con bordes duros tipo pixel art, desactivemos en las opciones de la herramienta de selección correspondiente, el “alisado”.

herramientas de selección en Gimp

Vamos ahora al siguiente paso, que será obtener un color con el “recoge-color” abriendo para ello nuestra paleta de Atari y después, volviendo al documento en el que vamos a pintar la bomba, rellenar con ese color la selección que acabamos de crear.

Ya sabemos cómo se hace, así que compuesta de una elipse para la parte negra circular de la bomba, y un par de rectángulos, uno para el enganche de la mecha en gris y otro para la pequeña mecha en marrón, podemos componer nuestro sprite bomba. Tengamos en cuenta que en Gimp para deseleccionar usaremos Control+Mayus+A o elegiremos Seleccionar/Nada en el menú superior.

bomba pixel en gimp

Vamos por fin a guardar, o en este caso a exportar el fichero (por que Gimp guarda en sus formatos pero exporta en el resto) eligiendo en el menú superior Archivo/exportar y marcando en la lista el formato PNG y la ruta donde queremos guardar (ponedle también un nombre, por supuesto). Finalmente en el cuadro de dialogo de las opciones de exportación del PNG no marcaremos ninguna opción y pulsaremos en Exportar.

Crear el fondo, de nuevo en Photoshop

Vamos ahora a crear otro gráfico que necesitaremos. Un fondo para el juego recurriendo ahora a las capas para trabajar más rápido y poder recolocar o corregir proporción y color en caso de necesitarlo.

Creamos un archivo nuevo de 160×200 (Nuestra resolución era de 160×190, pero queremos que sea un poco más grande que la pantalla para que no se quede nada sin cubrir). Dividiremos nuestro espacio en tres partes, una parte superior de donde irán cayendo los ítems dando la sensación de que salgan de entre las hojas de las copas de los arboles, la parte media donde se desarrollará la acción de juego y una inferior por donde desaparecerán los ítems que no podamos recoger.

Con mucha imaginación, nuestro fantasma protagonista se moverá sobre el fondo de un bosque con arboles altos de los que caen mágicamente objetos. Necesitamos por lo tanto una base de color verde sobre el que estarán todas las demás capas. Para esto podemos usar el color blanco de fondo por defecto pintando sobre él, ya que para este gráfico que será rectangular no necesitaremos transparencia.

Para hacer el suelo creamos una capa nueva pulsando el icono de capa nueva en su panel y dibujamos un marco rectangular con la herramienta de selección rectangular, rellenándolo posteriormente de un color tierra (recordad que todos los colores lo estamos sacando de la escasa paleta que tenemos para la Atari).

Vamos después a por los troncos de los árboles. Crearemos en otra capa un rectángulo alargado y lo rellenaremos de marrón. Ahora si elegimos la herramienta mover y desplazamos el rectángulo del árbol mientras mantenemos pulsada la tecla Alt de nuestro teclado, se hará una copia de la capa, teniendo otro rectángulo de árbol en una nueva capa. Aunque… Para completar hagamos otra copia más para tener tres árboles a los que daremos algo de variación e interés pintando algunas pequeñas ramas saliendo de ellos. Lo haremos seleccionando la capa del árbol que vayamos a pintar en el panel de capas y usando el lápiz con la dureza al máximo y un tamaño pequeño, junto a la opacidad del 100%.

Necesitamos ahora otro rectángulo verde que pondremos en otra capa para tener las copas de los arboles, a las que añadiremos cierto detalle en el próximo paso.

Recordemos que las capas que están encima taparán a las que queden debajo en la lista del panel, por lo que si queremos que el verde de las copas de los arboles esté por encima de estos, debe estar colocada para ello y lo mismo para los otros casos. Yo tengo mis capas en este orden:

capas fondo

Para terminar las copas de los árboles y el subsuelo, vamos a necesitar recurrir a ficheros diferentes, así que vamos a guardar este como un archivo PNG tal y como acabamos de aprender y a abrir uno nuevo de más o menos 200×38 en el que crearemos una capa nueva, borraremos la capa fondo y pintaremos de un verde algo más oscuro que las copas de los arboles dejando irregularidad por la parte inferior. Este sprite lo guardaremos como PNG con su transparencia y lo usaremos sobre las copas de los arboles del fondo para conseguir variación y permitir que los ítems den la sensación de caer de entre las hojas quedando escondidos detrás de estos pixeles hasta entrar a la zona de juego.

arboles superior

Por último, para el subsuelo vamos a ser un poco ahorrativos y usaremos un truco consistente en expandir un gráfico de color plano cuando estemos en Unity, así que crearemos un cuadrado de 20×20 y lo rellenaremos con un color tierra más claro que el suelo en el que plantamos nuestros arbolitos. 

Crear el fantasmilla protagonista.

Y ahora que sabemos hacer sprites con pixel art de estilo Atari, os dejo a vuestro aire para que hagáis un fantasma protagonista. Pero eso sí, recordad que tenemos limite de colores en horizontal, así que no nos podemos poner a añadir sombras ni prácticamente ningún detalle.

Dejo una imagen de cómo me ha quedado a mí este gráfico.

Fantasmita

Usando capas para crear una animación de explosión.

Llegamos a la parte final en la que vamos a hacer una mini-introducción al mundillo de la animación amateur, y es que no vamos a aprender los principios básicos de la animación ni hacer ninguna maravilla, pero intentaremos crear una nube de pixeles en varios colores que con su variación a lo largo de unos pocos fotogramas parezca una pequeña explosión que generarán las bombas al chocar contra el suelo.

Como ya sabemos crear capas, elegiremos el software que más nos guste para crear tres de ellas, dejando el fondo transparente (o eliminándolo si aparece por defecto). Estas capas serán los tres fotogramas de una animación, así que usaremos los colores gris (del humo) y un rojo y amarillo (de la explosión) para garabatear un fotograma con unas ligeras chispitas, otro con la explosión en su máximo esplendor y un tercero, donde haya más humo y menos fuego para indicar que está desapareciendo el estallido.

Ahora, guardar los fotogramas por separado es tan sencillo como apagar todas las capas excepto una (usando el icono del ojo en el panel capas) y guardar o exportar el fotograma que está a la vista como PNG. Volveremos, activaremos otro fotograma desactivando el resto y guardaremos de nuevo. Así tras guardar todos nuestros “frames” por separado tendremos tres archivos con los tres estados de nuestra animación.

explosión en Gimp

Listos para empezar el desarrollo

Por fin tenemos todo el arte necesario para empezar con nuestro proyecto en Unity. Así que volveremos pronto para ponernos con ello, aunque también nos harán falta recursos de sonido y texto de los que hablaremos para así poder tener un minijuego Atari-like terminado.

Hasta la próxima, pero antes… Dejo la imagen de la paleta de Atari. 

Paleta Atari

Deja un comentario

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