Edición de sprites en Game Maker Studio

Hoy hablaremos de las posibilidades que nos ofrece Game Maker Studio a la hora de editar sprites. Aunque hemos visto que podemos cargar sprites de ficheros externos, es posible modificarlos, o incluso crearlos, desde la misma herramienta.

Para ello, creamos un sprite nuevo desde la ventana principal, con la opción de menú Resources – Create sprite. Si cargamos varias imágenes para un sprite, podremos editarlas si le damos al botón Edit sprite. La ventana que abrirá será parecida a ésta:

Ventana de edición de sprites. Imagen de la ayuda online de YoYoGames

En el área principal vemos que esta formado por todas las subimágenes que forman el sprite. Todas las subimágenes tienen el mismo tamaño, si hubiese una o varias de un tamaño más pequeño, se ajustarán al tamaño máximo.

Zona de previsualización del editor de sprites

Es posible obtener una vista previa del sprite, si marcamos el check Show Preview. Podemos ver el sprite animado, así como una serie de opciones que afectan a la apariencia. Así obtenemos una idea de como se verá el sprite cuando lo apliquemos a nuestro juego. Podemos cambiar la velocidad de la animación en la caja de texto que pone Speed, podemos cambiar el color de fondo o incluso asignar una imagen de fondo que tengamos cargada (podemos elegir si ajustamos la imagen al tamaño del sprite con el check Stretch background). Estas opciones sólo son posibles si tenemos sprites con áreas transparentes y recordad: todo esto es para la previsualización, y no cambia ningún parámetro del juego.

Barra de información del editor de sprites

En la parte inferior de la pantalla veremos información básica del sprite actual que estamos trabajando. Veremos el total de frames del sprite, que son el número de subimágenes que contiene, el tamaño en altura y ancho y la memoria que ocupará, que es un cálculo aproximado basándose en el total de imágenes y su tamaño.

Barra de herramientas del editor de sprites

En la barra de herramientas tenemos una serie de botones que nos permite manipular la posición y las subimágenes del sprite. Tenemos:

• Confirmar: cierra el editor de sprites y guarda los cambios que hemos hecho. Con este botón no hay ningún botón de confirmación de cambios.
• Nuevo sprite: crearemos un nuevo elemento del sprite. Pedirá que introduzcamos un alto y ancho base. Al ser un sprite nuevo, borrará los datos que tengamos ya en el sprite.
• Añadir un sprite de un archivo: Abrirá la ventana para importar un sprite, igual que en la ventana de propiedades del sprite. Si las dimensiones del sprite cambian respecto a lo que tengamos ya en él, se mostrará una ventana con las siguientes opciones:
  • Tamaño: podremos elegir entre mantener el tamaño original, usar el tamaño de la nueva imagen, por lo que cambiará de los sprites ya cargados, o usar el tamaño máximo que calcule. Esta última opción es útil si cargamos varias imágenes de diferentes tamaños y no tenemos claro cual debería de usar.
  • Situación: si cambia el tamaño de los sprites, tanto de los que cargamos como de los que ya tenemos, la imagen del sprite se rellenará con píxeles transparentes si la ampliamos o se recortará si la reducimos. Podremos elegir dónde colocamos la imagen una vez ha cambiado, si la colocamos arriba a la izquierda, en el centro o si se ajustará al nuevo tamaño.
• Guardar strip: grabará en un fichero png toda la animación del sprite, para poder usarse para otro juego o en un programa externo. Un ejemplo de como quedaría el sprite de animación:
  

  Ejemplo de strip cuando se guarda desde Game Maker Studio

• Insertar frame vacío: añadirá una subimagen en la posición seleccionada del sprite actual.
• Añadir frame vacío: añadirá una subimagen vacía al final de la lista de subimágenes del sprite actual.
• Deshacer: permite deshacer una o varias, hasta 16, acciones consecutivas.
• Rehacer: si has usado el botón deshacer, puedes rehacer la acción para volver al estado anterior.
• Cortar: se usa para cortar una de las subimágenes. Esta imagen se queda en el portapapeles y luego se puede pegar en el mismo sprite, otro sprite o incluso en otro programa.
• Copiar: lo mismo que la acción anterior, pero copiará la subimagen.
• Pegar: este botón pegará cualquier imagen que ha guardado previamente en el portapapeles (con las acciones de cortar o pegar). Si la imagen es diferente del sprite actual, aparecerá la misma ventana que al insertar imagen.
• Desplazamiento de imagen: estos botones moverán la subimagen seleccionada hacia la izquierda o derecha, cambiando el orden de las imágenes en la animación.
• Editar subimagen: con este botón abriremos el editor de imágenes de Game Maker Studio o del programa predefinido, si lo hemos asignado en las Preferencias del programa.
• Pre-multiplicar alpha: sirve para cambiar los canales de alpha de nuestro sprite. No le déis importancia porque no notaréis casi ningún cambio en vuestro sprite.

A continuación explicaremos las opciones de menú que nos permitirá crear y editar de muchas formas nuestros sprites.

Menú Archivo del editor de sprites

En este menú nos encontraremos con acciones relacionadas con la carga y el guardado de nuestros sprites. Estas acciones son:

• Crear desde strip: con esta opción podemos cargar un strip que no sea estándar, es decir, cargar parte de las imágenes que contiene, cambiar el orden, etc. La ventana que aparece es la siguiente:
  

  Ventana para cargar strip como subimágenes

  Vemos que hay muchas opciones para ayudar a ajustar el espacio que existe entre las subimágenes dentro del fichero cargado. Estas opciones son:

• Guardar como archivo PNG: guardará el sprite como un archivo png en formato strip. Generará automáticamente un nombre, con el formato nombre_sprite_stripXX, siendo XX el número de subimágenes que contenga. Es posible modificar ese nombre, pero hay que tener en cuenta que si queremos que Game Maker sea capaz de cargarlo en futuras opciones debe conservar la terminación tal y como hemos comentado.
• Añadir desde archivo: añade una o varias imágenes desde el archivo seleccionado a sprite actual. Si las imágenes no tienen el mismo tamaño, aparecerá una ventana para decidir cómo colocar y modificar la imagen.
• Crear desde archivo: con esta opción podemos elegir un archivo de imagen para usarlo como un nuevo sprite. Se pueden elegir varias extensiones, como BMP, PNG, JPEG, dónde crearía una sola subimagen, o GIF, dónde crearía todas las subimágenes que lo compone. Además, si utiliza un strip cuyo nombre de archivo termina en _stripXX, siendo XX un número, Game Maker dividirá la imagen en tantas subimágenes como el número indicado, creando así la animación.
• Nuevo sprite: crea un nuevo sprite vacío, donde aparece una ventana para especificar las dimensiones de altura y anchura del sprite. Estos datos son el tamaño base para crear todas las subimágenes.
  • Número de imágenes: total de subimágenes que queremos en nuestro sprite.
  • Imágenes por fila: Aquí especificamos el número de subimágenes que encontramos en cada fila del archivo.
  • Alto y ancho de la imagen: el tamaño en píxeles que tendrá cada subimagen.
  • Celdas de desplazamiento horizontal y vertical: con los datos anteriores, vemos que aparecen unos recuadros, que es dónde sacará cada subimagen para nuestro sprite. Si queremos que estos recuadros no empiecen justo arriba a la izquierda, podemos definir un margen de separación, horizontal y/o vertical, para extraer la subimagen. Esta opción es muy útil si queremos sacar varios sprites del mismo fichero y sólo queremos movernos entre filas o columnas.
  • Píxeles de desplazamiento horizontal y vertical: Es lo mismo que la anterior, pero en vez de movernos con un tamaño fijado por los valores anteriores, podemos definir el margen en píxeles.
  • Separación horizontal y vertical: estas dos opciones es para indicar que los recuadros para elegir cada subimagen contiene un espacio entre ellos. Decidimos en píxeles el tamaño de estas separaciones para que no las tenga en cuenta en la extracción.
• Añadir desde strip: es la misma opción que la anterior, la única diferencia es que permite añadir imágenes con formato strip.
• Cerrar guardando cambios: cierra el formulario guardando los cambios hechos al sprite.

Menú Edición del editor de sprites

Desde el menú Edición podemos hacer acciones relacionadas con la edición de subimágenes en el sprite. Casi todos estos comandos los encontramos en la barra de herramientas:

• Deshacer: Deshace la última acción.
• Rehacer: si hemos utilizado la opción de Deshacer, podremos volver al estado que se encontraba.
• Cortar: Corta una subimagen en el portapapeles para su posterior uso.
• Copiar: Copia una subimagen en el portapapeles.
• Pegar: Pegará cualquier imagen almacenada en el portapapeles como una nueva subimagen. Si el tamaño es mayor o menor que la actual, mostrará una ventana para decidir cómo queremos actuar (la misma que al añadir un sprite desde archivo).
• Borrar: borra la información de píxeles de la subimagen seleccionada, y lo reemplaza por el color elegido. También es posible ajustar la transparencia y seleccionar si se aplica a todas las subimágenes o no.
• Eliminar: elimina la subimagen seleccionada del sprite.
• Mover a la izquierda: mueve la subimagen seleccionada de su posición actual hacia la izquierda.
• Mover a la derecha: igual que la anterior, pero hacia la derecha.
• Añadir vacío: añade una nueva subimagen al final de la secuencia.
• Insertar vacío: lo mismo que la anterior, pero en vez de añadirla al final lo añade antes de la subimagen seleccionada.
• Editar: edita la subimagen usando el editor de imagen de Game Maker Studio.
• Configurar transparencia de fondo: podemos indicar que color o colores usaremos para decidir cual es la transparencia de los sprites. Hay que tener en cuenta que solo afecta a cómo vemos el sprite en el editor, así que no afecta al fichero en sí.

Menú Transformar en el editor de sprites

Con estas acciones podemos cambiar la forma y el tamaño de los sprites. Las opciones de transformación que tenemos son:

• Mover: abrirá una ventana que nos permitirá mover la actual subimagen, o todas ellas si lo marcamos, una cierta cantidad. Con los checks de “wrap”, podemos decidir que los píxeles que desaparecen en un lado de la imagen aparezca en el otro lado, tanto vertical como horizontalmente.
• Espejo: con esta opción podemos reflejar la imagen seleccionada, o todas. También podemos decidir si voltearla verticalmente.
• Rotar: permite girar la imagen. Existe botones para las opciones más comunes, que son 90º, 180º y 270º. También permite poner cualquier ángulo entre 0º y 360º. Si no cambiamos el tamaño del sprite, es posible que perdamos parte de la imagen al girarla.
• Escalar: la ventana que abrirá esta acción que permite cambiar la escala de la imagen. Al igual que si rotamos, si escalamos con valores grandes podemos tener píxeles que se queden fuera del límite de la subimagen, y no cambia su tamaño sino que se corta.
• Sesgar: este comando permite sesgar la imagen. Sesgar horizontalmente una imagen significa que si cogemos la imagen como cuadrada, los extremos de arriba, izquierdo y derecho, se moverán estos puntos a los lados.
• Cambiar tamaño del canvas: con este comando podemos cambiar el tamaño de todas las subimágenes del sprite. Podemos especificar el alto y el ancho nuevo, tanto por píxeles como por porcentaje, además de marcar si queremos mantener el aspect ratio (o proporción, para que no se “deforme” la imagen, así como mantener la posición de origen. El cuadro con los botones con flecha indicará la posición de la imagen actual respecto al nuevo tamaño.
• Estirar imagen: si estiramos la imagen, cambiaremos el tamaño total del sprite, estirando o encogiendo la imagen (con la opción anterior, rellenábamos con píxeles transparentes). También tenemos las opciones de mantener la proporción y el origen. Al cambiar la imagen, podemos decidir la calidad de la imagen final.
• Crop: es una herramienta que sirve para recortar/ampliar las imágenes automáticamente. Poniendo un número positivo de píxeles crearemos un marco transparente alrededor, si el número es negativo cortará la imagen.

Menú Imagen del editor de sprites

Aquí vemos una serie de opciones que permite cambiar los colores, transparencia y otras formas de las subimágenes de los sprites. Todas estas opciones podemos elegir si hacerlas a una subimagen o a todas, marcando el check correspondiente.

• Ciclo izquierda y ciclo derecha: se utiliza para cambiar el orden en que aparecen las subimágenes, podemos elegir un sentido u otro.
• Escala de grises: convierte una imagen de color en escala de grises.
• Colorear: puedes cambiar la tonalidad de la/s imagen/es. Hay una barra deslizante, o un cuadro de texto, para darle un valor exacto.
• Colorear parcialmente: aquí podemos cambiar el color de parte de la imagen. Tendremos dos valores de matiz para modificar, además de un valor de tolerancia que podría permitir marcar colores específicos.
• Intensidad: cambiará la luminosidad y la saturación del sprite.
• Invertir: invertirá los colores de la imagen.
• Hacer opaco: cambia todos los píxeles transparentes por un color.
• Eliminar un color: podremos elegir un color de la subimagen y cambiará todos sus píxeles a transparentes. Podemos especificar la tolerancia para definir el rango de píxeles que hará la acción.
• Suavizar bordes: permite suavizar los bordes de la parte opaca de la imagen.
• Opacidad: con esta acción podemos definir la transparencia de la imagen del sprite con el valor que elijamos.
• Establecer alfa desde archivo: función que permite combinar la imagen de un fichero y asignarla a los píxeles de transparencia del sprite. Es recomendable que el fichero elegido tenga el mismo tamaño que el del sprite, sino modificará la imagen para que encaje dentro.
• Fundido: aquí se especificará un color y un número para descolorear la imagen del sprite hacia ese color.
• Desenfocar: esta opción suavizará la imagen. Tenemos opciones como elegir la cantidad de desenfoque, difuminar la información de color y/o la transparencia. Si elegimos sólo los valores de transparencia podríamos suavizar los contornos de la imagen.
• Afilar: se utiliza para afinar ciertos detalles dentro de una imagen. Realza los bordes dependiendo de los valores, sutil, fuerte o especial, y tiene en cuenta colores y/o transparencia.
• Crear contorno: dibuja una línea o contorno alrededor de la imagen, pudiendo elegir color y grosor. También podemos elegir si colocar la imagen o no, o dejar solo el contorno. Finalmente, podremos decidir si suavizar el contorno para darle una apariencia más redondeada.
• Sombra: creará una sombra de la imagen, con su color y transparencia, que podremos colocar en la posición que queramos. También tiene un check para indicar si la queremos borrosa o no.
• Iluminar: es como la herramienta de contorno, creando un borde de un color elegido alrededor de la imagen, eligiendo además brillo y opacidad.
• Botonear: con ese nombre tan curioso, lo único que hacen es dar la apariencia de un botón en el sprite. Podemos elegir color y efecto de opacidad, y si queremo es un efecto suave para una apariencia más redondeada.
• Relleno degradado:  eligiendo dos colores, crea un degradado entre ellos, parametrizando también la opacidad y el tipo de degradado. Al elegir el check de cambiar transparencia, también lo genera con los píxeles transparentes.

Menú Animar del editor de sprites

En el menú de animación, podemos crear nuevos sprites fuera de las subimágenes que ya tenemos. Hay muchas opciones para crear efectos, y es bueno probarlas todas porque las combinaciones buenas se hace cuando usamos varias acciones juntas.

• Longitud: podemos cambiar la longitud de la animación, para ello, Game Maker Studio duplica las subimágenes desde el principio hasta el final, repitiéndose hasta alcanzar el número que hemos elegido.
• Extender: lo mismo que la anterior, copiará o reducirá subimágenes hasta el número que hemos puesto al principio. Si aumentamos el número de fotogramas la animación será más lenta, si lo disminuimos haremos que sea más rápida.
• Inverso: invierte el orden de los sprites para que la animación se haga hacia atrás.
• Añadir inverso: lo mismo que lo anterior, pero en vez de modificar la animación la duplica y la añade al final. Hay que tener en cuenta que se repetirá la primera y última imagen con esta acción, si queremos una animación suave es recomendable borrar una de ellas.
• Secuencia de translación: con esta opción moveremos la imagen dentro de la subimagen. Hay que indicar el número de frames y cuanto queremos moverlo horizontal y verticalmente.
• Secuencia de rotación: es una animación donde la imagen gira. Podemos elegir el sentido hacia dónde gira, el número de frames y la cantidad total para mover.
• Colorear: crea una animación que convierte una imagen a un color elegido.
• Fundido a color: Crea una animación que convierte una imagen, haciéndola desaparecer, a un color concreto.
• Desaparecer: coge una imagen y la hace desaparecer, jugando en la animación con su opacidad.
• Reducir: Reduce una imagen indicándole la dirección, izquierda, derecha, arriba, abajo o centro).
• Crecer: amplía una imagen indicando la dirección (las mismas que en el anterior caso).
• Aplanar: aplana una imagen con dirección.
• Aumentar: lo mismo que el efecto anterior, pero al contrario. También tiene dirección hacia el centro, izquierda, derecha, arriba o abajo.
• Superposición: esta acción elige un fichero seleccionado y lo superposiciona con el sprite. Si el archivo es solo una imagen, se repetirá en cada subimagen, si es un strip, recordemos que es una imagen que su nombre termina en  _stripXX.png, tratará cada subimagen del strip y la colocará en cada subimagen correspondiente del sprite.
• Metamorfosis: eligiendo un archivo, transforma mediante animación el sprite actual al fichero seleccionado. Se recomienda que el número de subimágenes del fichero y del sprite sean iguales, ya que juega con las transparencias de las imágenes para la transformación.