Editar imágenes del sprite en Game Maker Studio

Hemos visto hasta ahora como cargar sprites y hacer algunas modificaciones en sus animaciones, pero también es posible crearlos y modificarlos desde Game Maker Studio.

Para ello, el programa tiene su propio editor de imágenes en Game Maker, tanto para sprites como para fondos. Para llamar al editor de una subimagen de un sprite, la seleccionaremos y llamaremos al botón Editar Imagen, o al menú Imagen-Editar Imagen.

El editor que vemos está pensado para realizar cambios en las imágenes, no para crear sprites y fondos desde cero. Este editor tiene muchas funcionalidades, pero quizás no sea suficiente para las opciones que puedas necesitar, en cuyo caso es mejor usar un programa externo, guardar las imágenes como PNG y cargar los archivos como sprites. Si en cualquier momento queríamos asociar las subimágenes del sprite a este programa externo, podemos hacerlo en las Preferencias del programa, tal y como hemos visto.

Como es el editor de imágenes de Game Maker Studio

Cuando arrancamos el editor de imágenes, tendremos una ventana parecida a ésta:

Vemos que la imagen que vamos a modificar ocupa la parte central de la ventana, con herramientas de edición a la izquierda y opciones variadas alrededor de ella. Tenemos también menús superiores y en la parte inferior tenemos una barra de información con algunos datos que comentaremos más adelante.

Menús en la edición de imágenes

Los menús superiores que encontramos en esta ventanas son casi iguales a los del editor de sprites. Principalmente, son iguales los menú de Edición, Imagen y Transformar. La principal diferencia es que aquí modificamos la subimagen que estamos viendo, y en el editor de sprites podíamos elegir si modificar la subimagen seleccionada o todo el sprite entero. El menú Archivo es similar también, pero con menos opciones y algunas diferencias:

• Nuevo: crea una nueva subimagen desde cero, con las mismas características de tamaño que hemos definido en el sprite.
• Guardar como archivo PNG: guarda la imagen actual como un fichero png, pero solo el frame que estamos viendo.
• Imagen Anterior, imagen siguiente: si tenemos un sprite de varias subimágenes, desde aquí podemos navegar entre los diferentes frames, para hacer más fácil la edición.
• Guardar / Cargar paleta: si hemos modificado la paleta actual, porque tenemos colores personalizados, podemos guardar esta combinación en un fichero para poder usarla y no ver la que trae por defecto el programa
• Cerrar guardando cambios: Cierra la ventana de edición con los cambios que hayamos realizado.

Otro menú propio que tiene el editor de imágenes es el Menú Ver. Este menú contiene:

• Alejar: Reduce la vista previa de la imagen para ver más zona del sprite.
• Sin zoom: ajusta el nivel de zoom al tamaño real de la imagen.
• Acercar: Aumenta la vista previa de la imagen, viendo menos zona del sprite.
• Alternar Grid: con está opción podemos mostrar u ocultar una rejilla transparente de líneas, que nos ayuda para las opciones de dibujo.
• Opciones de Grid: nos permite configurar la grid que hemos comentado anteriormente. Podemos definir el tamaño de la cuadrícula de píxeles que queremos utilizar, el color de las líneas de la grid y la manera de mezclar las líneas. La opción más interesante es el check de alinear a la grid, que hace que todo lo que dibujemos se ajuste a estas líneas.
• Mostrar vista previa: Activa o desactiva la vista previa del sprite. Aparecerá una ventana de vista previa en la ventana principal, si hacemos doble click en ella podremos cambiar la escala entre 1x, 2x, y 3x. Así podremos ver una imagen de como va quedando nuestro sprite.
• Configurar fondo de transparencia: mostrará una ventana donde nos permite elegir un color, o un rango de colores, para definirlo como píxeles transparentes.

Barra de herramientas de la edición de imágenes

La barra de herramientas cuenta con una serie de comandos que son equivalentes a los ya explicados en los menús. Veremos las mismas opciones del menú Archivo y del menú Ver.

Herramientas de dibujo

Las herramientas de dibujo nos permiten seleccionar diferentes tamaños de pinceles, regiones, dibujar formas, etc. Podemos utilizarlos haciendo click en cada una de las opciones y luego manteniendo el botón del ratón en la imagen. La lista completa de cada herramienta es:

• Lápiz: con esta opción podemos pintar sobre la imagen, usando el botón izquierdo o el botón derecho sobre ella, dependiendo del color que queramos elegir. El tamaño del área que pinta se puede ajustar mediante la selección de unos de los tamaños que aparecen abajo. Otras opciones se hacen combinando con las teclas: si tenemos pulsada la tecla <Shift>, solo podremos hacer líneas horizontales o horizontales, con la tecla <Ctrl> el puntero cambia de opción, que es el Selector de Color, para adquirir el color pulsado.
• Aerógrafo: Funciona igual que el lápiz, con la diferencia que el puntero es parcialmente transparente en los bordes con una cierta textura. Puedes pintar tanto con el botón izquierdo como el derecho del ratón, depende del color que elijamos, y se puede seleccionar su tamaño en las opciones de más abajo. También existe una dureza del pincel, para definir la transparencia de los bordes. Las combinaciones con teclas comentadas en lápiz también funcionan con el aerógrafo.
• Goma de borrar: con esta acción podemos borrar parte del sprite. Funciona como el aerógrafo, pero borrando lo que está debajo del ratón. Cuanto puede borrar dependerá del ajuste de opacidad que aparece, con un rango de 0, que no borra nada, a 255, que borrará todo por completo. Los valores de en medio hará que el borrado sea más o menos transparente.
• Selector de color: con esta herramienta podemos adquirir, con el botón izquierdo o derecho del ratón, el color que hay justo debajo de la imagen. Hay que destacar que el valor de Opacidad también lo coge.
• Dibujar línea: se utiliza para dibujar líneas rectas. Podemos elegir el grosor de la línea, además de si queremos la línea con forma de flecha. Podemos marcar la opción Suavizar para que las líneas estén parcialmente transparentes.
• Dibujar polígono: con esta herramienta puedes dibujar un polígono cerrado. Empiezas haciendo clic en el primer vértice, arrastrar o hacer click para el segundo vértice y así hasta hacer la forma que queremos. Puedes terminar el polígono pulsando otra opción de las Herramientas de Dibujo o presionando la tecla <Esc>.. Tiene las mismas combinaciones de teclas para dibujar líneas horizontales, verticales o de 45º. También puedes suavizar los bordes.
• Dibujar rectángulo: este comando dibujará un rectángulo, pulsando la tecla <Mayús> dibujará un cuadrado. Con la tecla <Ctrl> dibujará el rectángulo con el centro dónde se hizo clic. Las opciones que tenemos al dibujar es la configuración de la línea exterior, y si el rectángulo puede ser rellenado con un color o no. También existe una opción para poder suavizarlo.
• Dibujar elipse: igual que con la opción de rectángulo, pero dibujará una elipse o un círculo si dejamos pulsada la tecla <Mayús>. Tiene las mismas opciones de grosor de línea y rellenado.
• Seleccionar una región: podremos seleccionar una región cuadrada para copiar, cortar o mover esa zona. La selección se hace haciendo clic en una zona y arrastrar con el ratón, dónde vemos un área rectangular por una línea de puntos. Puedes aumentar la selección actual si tenemos la tecla <Mayús> pulsada, o eliminarlas con la tecla <Ctrl>. Para cancelar la acción, se puede hacer con la tecla <Esc>.
• Selección con varita mágica: en este caso, al hacer clic sobre un píxel, busca todos los pixeles del mismo color cercanos, dependiendo de la tolerancia seleccionada. Las combinaciones de tecla son las mismas que con la selección de región.
• Selección con pincel: aquí podemos seleccionar un área simplemente dibujándola.
• Añadir texto: Podremos añadir texto en la imagen, aparecerá una ventana donde escribiremos el texto que transformará en imagen. Podemos utilizar el símbolo # para indicar un salto de línea. Una vez introducido el texto, podemos moverlo arrastrándolo con el ratón. Si decidimos cambiar de texto, podemos haciendo clic con el botón derecho. En las opciones que aparece debajo de la caja de herramientas, podremos cambiar la fuente, color y alineación del texto.
• Bote de pintura: Haciendo click en la imagen, cogerá todos los píxeles del mismo color, dependiendo de su valor de tolerancia, y cambiará el color con el que tengamos configurado. También podemos elegir si rellena los píxeles con color o también los píxeles transparentes próximos.
• Cambiar color: cambia el color al hacer clic en la imagen, usando todos los píxeles que hay alrededor por tolerancia. También podemos elegir si usamos solamente color o también los píxeles transparentes.

Color y Herramientas de mezcla

En la parte derecha de la ventana, tenemos todas las herramientas de color. En la parte superior tenemos etiquetados dos colores, el de la izquierda y de la derecha, que corresponden con los colores que asociamos a los botones del ratón. Así establecemos los colores a las Herramientas de dibujo que hemos comentado anteriormente.

En la parte inferior tenemos un catálogo de colores básicos para elegir, y si queremos personalizar alguno, lo podremos hacer con el selector que se encuentra abajo. Podemos también ajustar la opacidad, siendo el valor 255 totalmente opaco y 0 totalmente transparente.

Imagen de previsualización

Muestra una imagen del sprite de cómo se vería en el juego. Si hacemos doble click, podemos cambiar el zoom a 1x, 2x y 3x, así veremos con mejor nitidez como va quedando. Podemos activar o desactivar esta ventana tal y como hemos dicho en el menú Ver.

Opciones de capa de cebolla: para calcar tus frames

Con esta opción, podemos superponer con frames anteriores del sprite y utilizarlos como plantilla para dibujar nuestro sprite. Elegimos primero la transparencia del frame o frames que superponemos. Luego podemos superponer uno o varios frames, con las opciones de forward o backward elegimos cuantos frames queremos antes o después del frame actual.

Herramientas de dibujo avanzada

Aparte de todas las herramientas que hemos mencionado, tenemos una serie de herramientas avanzadas para hacer sprites o fondos. Veamos estas herramientas.

Página de repuesto

La verdad es que no aparece esta opción en ningún sitio de la ventana, ni en el menú ni en el cuadro de Herramientas. Solo podemos activar y desactivar esta opción pulsando la tecla <j>. Si lo activamos pulsando <j>, nos aparece, dentro de la misma imagen, la opción de crear imágenes temporales que no se quedan guardadas en el propio sprite. Así podemos dibujar cosas sin miedo de modificar la imagen real. Por ejemplo, podemos copiar una imagen, activar la opción, pegarla y retocarla. SI al final nos gusta el resultado, podemos volver a copiarlo y pegarlo definitivamente.

Una cosa a tener en cuenta es que está página no se queda guardada en el sprite, una vez lo cerremos perderemos toda la información de esta imagen de pruebas.

Paleta de colores personalizada

Cuando abrimos el editor de imagen, nos parece una serie de colores predefinidos en la paleta de colores. Aunque pueda mostrar los colores más comunes, es posible que no nos interese para la creación de nuestro sprite. Si haces click con el botón izquierdo o derecho del ratón, seleccionaremos estos colores para su uso con estos botones. Si hacemos click con el botón del medio del ratón, nos aparecerá una ventana de personalización de colores. Podemos cambiar a elegir nuestro color a nuestro gusto, y se cambiará en nuestra paleta principal cuando le demos al botón Aceptar.

Una vez hemos modificado nuestro paleta, podemos guardarla tal y como hemos visto desde el menú Archivo, creando un fichero con extensión PAL. Aunque es posible que sea una extensión utilizada en otros programas de dibujo, solo funcionará con Game Maker Studio.

Borrar color

En la caja de Herramientas, hemos visto diferentes acciones para dibujar asociadas al color, y el comando Goma de Borrar para eliminar un color. De esta manera, podemos ir cambiando entre las diferentes acciones para dibujar y borrar.

Una manera más práctica para el borrado es seleccionando la goma de borrar con el botón derecho. De esta manera, vemos que el color de selección para el botón derecho del ratón muestra como un tablero de ajedrez, para indicar que no hay color seleccionado.

Así podríamos dibujar con el botón izquierdo y borrar con el boton derecho sin depender de elegir la acción en la caja de Herramientas.

Y hasta aquí hemos visto todas las opciones de sprites. En próximos posts, veremos como se utilizan en los objetos, que son los que realmente le darán movimiento y diversidad a nuestro juego..