El editor de imágenes de Game Maker Studio 2

El editor de imágenes de Game Maker Studio 2 permite crear tus propios sprites o modificar sprites existentes (o que hayas importado). Si has utilizado cualquier herramienta de imágenes, habrá cosas que te serán muy familiar, pero hay otros factores que tienes que tener en cuenta en GMS 2. Pero antes de nada veamos una imagen de como es el editor de imágenes

Cosas a tener en cuenta del editor de imágenes de Game Maker Studio 2

Las características principales del editor de imágenes son:

• Cuando creas varios frames, ¡puedes dibujar en ellos como si fuera una animación! Por lo tanto, si pulsas el botón de reproducción en el Frame View, luego seleccionas un pincel y empiezas a dibujar en la ventana del editor, verás que lo que dibujas se incorpora en los diferentes frames del sprite. Puedes experimentar con diferentes velocidades de frame hasta conseguir el efecto que prefieras, y cuando ya sepas como funciona, crearás sprites en muy poco tiempo.
• Puedes mover la pestaña del editor para que tenga su propia ventana. Esto puede ser muy útil si trabajas con varios monitores.
• Cuando utilizas las funciones para Copiar, por ejemplo, copiar una selección de una imagen, la selección copiada se agrega a tu lista de pinceles. Significa que puedes seleccionar una parte de una imagen y luego usarla en el resto de las herramientas de pintura para dibujar líneas, polígonos o simplemente pintar libremente. El pincel puede ser escalado y mezclado con un color también. Ten en cuenta que la funcionalidad Pegar no es para uso interno dentro del editor, como cualquier cosa que copias se añade a la lista de pinceles y así se puede seleccionar para pegar de esa manera. Puedes también capturar de un programa externo y pegarlo en el Editor de imágenes.
• Puedes tener varias capas para cada sprite gracias al editor de capas. Estas capas pueden ordenarse o incluso organizarse en carpetas para facilitar la creación de imágenes más complejas.

Ahora veremos cada una de las secciones que tiene la ventana del editor de imágenes.

Frame View – vista de frame

Esta parte de la ventana muestra los frames en el orden de cómo se animarán. Si le das al botón de +, o usando el menú Image (que explicamos más abajo), puedes añadir nuevos frames vacíos. También puedes mover los frames que ya tenemos para cambiar el orden de animación. Si pulsas sobre el botón Onion Skinning , podrás dibujar un frame viendo por debajo la animación de frames que selecciones (podemos decir que estamos calcando el dibujo). De esta manerap odemos animar haciendo pequeñas variaciones entre un frame y otro. Curiosamente, esta opción de calcar un sprite siempre ha existido, pero estaba bastante escondida y ahora la destacan para poder dibujar mejor. Así podemos decidir cuantos frames muestra para ver si la animación la estamos haciendo bien.

Debajo de este botón, tenemos el botón de Loop Control  , que se utiliza para establecer el bucle de la animación. Podemos decir que cuando llegue al final vuelva al primer fotograma, o con la opción ping pong para que la animación retroceda en sentido inverso. EL botón de abajo del Play  es para iniciar o detener la vista previa de la animación.

Puedes seleccionar cualquier frame para editarlo, pero también puedes eliminarlo con el botón que aparece. También puedes seleccionar, y eliminar, varios haciendo <Ctrl>+click izquierdo.

Frame information – información del frame

Aquí tenemos los controles del frame que estamos editando. Podemos establecer la velocidad con que se reproduce el sprite, utilizando el cuadro de texto de la izquierda. La velocidad se puede basar en Frames por segundo o Frames por frame game, basado en la velocidad que le hemos puesto a nuestro juego (normalmente 30). El número total de fotogramas o subimágenes lo vemos a la derecha de esta sección, junto con el frame actual. Puedes ocultar esta información si pulsas el botón  que hay a la izquierda.

Canvas Controls – controles del lienzo

El Canvas Control se ocupa de varios aspectos de como se muestra el dibujo en la sección principal y su contenido. Las opciones son:

• Toggle Canvas Grid – alternar grid : Permite activar o desactivar la grid para dibujar. Divide el dibujo en secciones cuadradas, que por defecto se establece con 1 píxel de tamaño. Sin embargo, si haces click en la opción de menú  del botón, aparece las siguientes opciones de grid. 
  Estas opciones permite establecer el color de la grid, su alpha u opacidad, así como su tamaño con Grid x y Grid y. También con el check Snap podemos decidir si el dibujo se ajusta a la cuadrícula.
• Canvas Zoom Controls – controles de zoom   : estos botones controlan el zoom del dibujo actual. Puedes acercar o alejar el zoom, y con el botón de en medio restaurar a su tamaño real. También se puede hacer con <Ctrl> + rueda del botón, y <Ctrl>+<Intro> para reestablecer su tamaño.
• Split Canvas – dividir : al hacer click en esta opción, el lienzo se dividirá horizontal o verticalmente, dependiendo de la opción elegida, si vuelves a hacer click se transformará a un sólo lienzo. Cuando se divide un lienzo, cada uno funcionará de manera independiente, pudiendo cambiar el zoom, y así ver los cambios en la otra zona. Para elegir que opción prefieres, puedes ver el menú contextual que aparece al darle al botón .

Draw Canvas – dibujar lienzo

Esta es la ventana principal para editar las imágenes. Aquí se puede aplicar cualquier herramienta, explicadas más abajo, de la derecha para pintar en la capa actual. Se puede pintar con cualquier botón del ratón, ya sea el izquierdo o el derecho, pudiendo asignar un color diferente, en el selector del color, a cada uno de ellos. También se puede elegir uno de los pinceles que hay disponibles.

Si utilizas la rueda del ratón y la tecla <Ctrl> podemos aumentar o disminuir el zoom, y usar <Ctrl> + <Intro> para restaurar su tamaño. También podemos movernos en él si dejamos pulsado el botón central del ratón, o con <Espacio> + click izquierdo.

Canvas Values – valores del lienzo

Esta pequeña barra inferior muestra los valores de la posición actual del ratón, además del tamaño, al to y ancho, de la selección del editor.

Brushes – pinceles

Aquí seleccionamos el pincel con el que queremos pintar. De forma predeterminada tenemos una selección de diferentes cuadrados y redondas a utilizar. También puedes crear tu propio pincel, lo dibujas en la capa correspondiente, seleccionas la parte que quieres usar como pincel y haces <Ctrl>+<C> para copiarlo. La selección se añadirá como un pincel, y se puede pintar como si usaras cualquier pincel, incluyendo cualquier herramienta disponible, por ejemplo, dibujar una línea. Ten en cuenta que el color de mezcla para el nuevo cepillo será el blanco, así que si cambias el color en el selector, se mezclará el color con el dibujo del pincel.

Si quieres eliminar un pincel creado, lo seleccionas y pulsas <Delete>.

Colour Picker – selector de color

Justo debajo de los pinceles tenemos el selector de color, dónde vemos que podemos elegir unos colores por defecto, asignándolos con el botón izquierdo o el derecho del ratón para pintar con uno u otro. Los dos colores seleccionados se muestran justo debajo, para tener una referencia. Si haces click en una de esas muestras, nos aparece una ventana para personalizar el color.

Como vemos, podemos elegir el color moviéndonos en los slectores que vemos, o escribir los valores RGB o HSV si los conocemos.

Tools – herramientas

A continuación verás una lista de las diferentes herramientas que muestra Game Maker Studio 2 de forma predeterminada. Todas las herramientas podemos usarla con el botón izquierdo o derecho del ratón, y la mayoría de estas herramientas tienen accesos rápidos atajos de teclado. Vamos a verlas.

•  Lápiz: utiliza el lápiz para pintar con el pincel y el color seleccionado para el botón del ratón que toca. Piensa que los tamaños de los pinceles se puede cambiar, si pulsamos <Mayus> + <Z> y mantenemos click izquierdo  arrastrando el ratón cambiará las proporciones del pincel.
• Goma: esta es la herramienta de borrado. Se utiliza para eliminar cualquier área dónde hacemos click con el ratón.
• Línea: dibujará una línea entre dos puntos. Hacemos click en un punto movemos el ratón y hacemos click en otro punto para unir estos puntos mediante una línea. El contorno de la línea será el del pincel elegido.
• Línea curva: dibujará una línea curva. Vamos haciendo clicks y moviendo el ratón para dibujar una sola línea curva de diferentes formas.
• Rectángulo: dibuja un rectángulo, eligiendo solo el contorno o con color de relleno. Si haces click en la parte superior izquierda del icono, dibujará el contorno, si haces click en la parte inferior derecha, dibujará rellenando el contorno.
• Elipse: esta herramienta dibujará una elipse, ya sea su contorno o rellena. La elipse dibujará su contorno con el pincel seleccionado.
• Polígono: podemos dibujar un polígono (relleno o no). Conforme clicks iremos dibujando el polígono, que será definitivo cuando seleccionemos otra herramienta.
• Texto: con esto podemos entrar texto, creándose una nueva capa, para escribir cualquier cosa que necesitemos en una imagen. La ventana que se abre junto a esta herramienta es para cambiar la fuente, tamaño o estilo.
• Selector de color: con esta herramienta podemos elegir un color de la imagen que estamos editando.
• Selección rectangular: podemos seleccionar un área rectangular. Para cancelarlo, pulsaríamos la tecla <Esc>.
• Pintar selección: esta herramienta pinta un área seleccionada, igual que con la herramienta del lápiz. Sirve para limitar las acciones en ese área.
• Selección con varita mágica: al igual que otros programas de dibujo, podemos seleccionar un área de un color concreto de la imagen (dónde hacemos click). Si marcamos Colour only, la transparencia no la tendrá en cuenta para la selección. Podemos cancelar la selección pulsando <Esc>.
• Rotación: con esta herramienta rotamos la capa actual.
• Espejo: seleccionándolo y haciendo click en el editor, reflejaremos verticalmente toda la capa actual.
• Voltear: lo mismo que la herramienta espejo, pero lo hará horizontalmente.
• Panorámica: seleccionando esta herramienta podemos moverpor la imagen moviendo el ratón, dentro de la misma capa. Los píxeles fuera del lienzo que vemos no serán visibles, y se eliminarán una vez cambiemos de herramienta.

Layer editor – editor de capas

Puedes editar y crear capas en el editor de imágenes. Estas capas pueden ser partes de la imagen, y cada una de ellas se pueden manipular y dibujar con los diferentes pinceles y herramientas que hemos visto. Para crear una nueva capa, hacemos click en el botón , y para eliminar una con el botón . Las capas tienen un orden, que podemos cambiar arrastrando una de ellas a la posición que queramos. También podemos agruparlas en carpetas, usando el botón  para añadirla y luego arrastra una capa dentro.

Haciendo doble click sobre una capa, o con el botón derecho y eligiendo Edit layer properties en el menú contextual. nos aparece la siguiente ventana

Aquí podemos elegir un nombre para la capa, decidir el modo de mezcla con las capas inferiores, con las opciones normal, additive, subtractive o multiply. Al final podemos elegir la opacityo transparencia de la imagen de la capa. Recuerda que tenemos píxeles que hemos podido dibujar con una opacidad determinada, así que esto acumula a la transparencia que ya tienen. Por ejemplo, si tenemos píxeles al 100% y al 50%, al definir la capa al 50% se convertirán al 50% y al 25%.

Menú de imágenes de Game Maker Studio 2

Cuando hablamos de los menús de Game Maker Studio 2, comentamos que había menús que aparecían dependiendo del editor que estamos tratando. En este caso, cuando estamos con el editor de imágenes, tendremos una serie de herramientas adicionales que aparecen como menú. Los explicamos a continuación.

Menú Image – imagen

El menú imagen contiene las siguientes opciones:

• Cut – cortar: corta el frame entero o una selección. Si lo haces de una selección, ésta se añadirá como pincel.
• Copy – copiar: lo mismo que la anterior, pero en vez de cortarlo lo copiará. Igualmente lo añade como pincel la selección copiada.
• Paste – pegar: pega el frame o la selección del cortapapeles. Si pegas desde un programa externo, puedes tener problemas con las transparencias con GMS 2.
• Select All – seleccionar todo: selecciona todo el frame actual.
• Cancel Selection – cancelar selección: cancela la selección actual.
• Invert Selection – invertir selección: invierte la selección vigente.
• Add Frame – añadir frame: añade un frame vacío al final del sprite actual.
• Insert Frame – insertar frame: inserta un frame nuevo desde el frame actual.
• Delete Selected Frames – eliminar frames seleccionados: elimina el frame actual (varios si tienes seleccionados con <Ctrl> + click izquierdo.
• Import Image(s) – importar imágenes: carga una imagen, o varias, desde el disco duro que se añadirá como frames. Cuando lo haayas seleccionado, aparecerá una ventana como ésta:Aquí puedes elegir como importar la imagen del sprite actual, lo que permite poder redimensionar todo el canvas, recortarlo o rellenarlo decidiendo una posición de anclaje para colocar la nueva imagen.
• Convert to Frames – convertir a frame: esta opción convertirá una sola imagen en frames separados.  Primero tienes que crear un solo frame con todas las partes de la animación, también puedes importar un strip, parecido a la imagen siguiente cómo se trata de una única imagen y queremos transformarla en varios frames, usamos esta opción para que aparezca la siguiente ventana aquí configuramos como dividir la imagen para crear los frames, estableciendo el número, altura, anchura, etc. Podemos ver estas opciones cuando hablamos de importar un strip en versiones anteriores de Game Maker.
• Import Strip Image – importar imagen del tipo strip: lo mismo que la anterior, pero abrirá una ventana del explorador de archivos para buscar la imagen de tipo strip. Luego aparece la ventana para configurarlo.

Menú View – ver

El menú Ver tiene las siguientes opciones:

• 1:1: escala la imagen para que sea 1:1, con el tamaño real de la imagen centrada.
• Fit Screen – ajustar pantalla: escala la imagen para rellenar todo el editor.
• Toggle Grid – activar grid: activa o desactiva el grid para que se muestre o se esconde, al igual que lo comentado en los controles del canvas.
• Onion Skins Settings – ajustes del papel de cebolla: cambia los ajustes de la capa que hemos comentado antes. Abrirá la siguiente ventana para configurar los frames que se muestran, tanto por delante como por detrás, la opacidad y el color del marco para saber los frames afectados.

Menú Transform – transformar

El menú Transformar tiene:

• Resize Canvas – cambiar tamaño canvas: cambia el tamaño del lienzo de la imagen, afectando a todos los frames del sprite. Abrirá la siguiente ventana, dónde podemos elegir el ancho y alto del sprite, el punto de anclaje de las imágenes actuales, y si al cambiar el tamaño queremos mantener la relación de aspecto. Si eliges un tamaño menor recortará la imagen que ya tengamos.
• Scale canvas – escalar imagen: cambia el tamaño de la imagen, pudiendo estirarla. Los parámetros son parecidos a los que hemos visto ya.
• Crop to selection – recortar selección: si seleccionas un área de un frame y eliges esta opción, la imagen será recortada para mostrar sólo el área afectada. Esto ocurrirá en todos los frames.
• Mirror – espejo: hará un efecto espejo del eje vertical de la imagen o imágenes seleccionadas.
• Flip – voltear: lo mismo, pero en el eje horizontal.
• Rotate Clockwise (90º) – girar a la derecha: gira toda la imagen 90 grados en el sentido de las agujas del reloj.
• Rotate Anti-Clockwise (90º) – girar a la izquierda: gira toda la imagen en sentido antihorario.

Menú Effects – efectos

El menú de Efectos puedes añadir tus propios efectos personalizados, y tiene por defecto

• Greyscale – escala de grises: desatura la imagen en una cantidad determinada. Puedes elegir hacer esto en la capa actual, las capas visibles o todas las capas.

Resumen final

Hemos visto todas las herramientas que nos ofrece Game Maker Studio 2 para poder dibujar tus propias imágenes sin necesitar programas externos. En el próximo post te encontrarás el editor de tiles, para ver otras de las opciones que puedes hacer con imágenes en GMS2.