Editor de imágenes

El editor de imágenes dibuja y retoca las imágenes del proyecto: fondos, portadas, tilesets y hojas de sprites. Tiene las herramientas de un programa de pixel art sencillo: lápiz, goma, líneas, rectángulos, elipses, relleno, cuentagotas y una selección para mover, copiar y pegar. Su ventana se llama Image Editor.

Edita los ficheros de imagen del proyecto, que suelen ir en la carpeta Images y en BMP. Al compilar, el IDE exporta a Build/flash las que tienen Include in Build encendida, y tu juego las carga con Bitmap.load. Los mapas y las salas las usan de tileset o de fondo, y los sprites cortan en ellas sus fotogramas.

Se abre de cinco maneras:

• Doble clic en una imagen del explorador. Si ya está abierta, pasa a su pestaña.
• New Image, en el menú del explorador (clic derecho): abre el editor con el cuadro de imagen nueva, como su botón New.
• Import Image, en el menú del explorador o en su barra de botones: te pide una imagen de tu ordenador (PNG, BMP, JPG o GIF), la convierte a BMP, la mete en la carpeta que tengas elegida en el explorador, o en Images, y la abre.
• Doble clic en la tira de fotogramas del editor de sprites: abre la hoja del sprite.
• Home › View › Images, en la cinta: enseña el editor con las imágenes que ya tenga abiertas.

Cada imagen se abre en su pestaña. Si tiene cambios sin guardar, su nombre lleva un * delante. Las pestañas se ordenan arrastrándolas.

La ventana tiene cuatro zonas:

• Arriba, la barra de botones: ficheros, deshacer, transformaciones y zoom.
• A la izquierda, el panel: el fichero, el recorte, las herramientas, los colores y lo que se exporta.
• En el centro, las pestañas con las imágenes.
• Abajo, la barra de estado.

Un recorrido

Una imagen de fondo para tu juego, de principio a fin.

1. Crea la imagen. En el explorador, clic derecho › New Image. En el cuadro New Image, escribe el nombre, por ejemplo Fondo, pon Width a 320 y Height a 240, y pulsa Create. El editor abre la imagen en una pestaña, rellena del color de Background. Aún no tiene fichero: la barra de estado dice «Not saved yet».
2. Dibuja. Elige un color en Foreground Color, la herramienta Fill y haz clic en la imagen: la rellena de ese color. Después dibuja con Pencil, Line, Rectangle o Ellipse. El botón izquierdo pinta con el color de primer plano y el derecho, con el de fondo. Si te equivocas, Undo.
3. Guarda. Pulsa Save. Como la imagen es nueva, te pide su nombre en Images. Acepta: el IDE la guarda como Images/Fondo.bmp, la añade al proyecto y te avisa: «Fondo.bmp added to Images». La barra de estado pasa a decir «Project».
4. Mira Include in Build. Está encendida: al compilar, la imagen llegará al juego. Esa casilla no va en la imagen, sino en el proyecto, y el IDE lo guarda en cuanto la cambias.
5. Úsala. Compila con Build › Compile: el IDE exporta Build/flash/Images/Fondo.bmp. En tu código, cárgala con Bitmap.load("Images/Fondo.bmp"): mira «Con el código», más abajo. En un juego con salas, ponla en una capa de imagen.

Herramientas

Las herramientas están en la sección Tools del panel. Pintan con el ratón sobre la imagen: el botón izquierdo, con el color de primer plano (Foreground Color), y el derecho, con el de fondo (Background Color). No tienen tecla.

Botón	Qué hace
Pencil	Pinta por donde pasas, a clics o arrastrando.
Eraser	Pinta con el color de fondo, con cualquiera de los dos botones. No deja transparente.
Line	Arrastra de un extremo al otro y suelta: pinta la línea.
Rectangle	Arrastra de una esquina a la otra y suelta: pinta el borde del rectángulo.
Ellipse	Arrastra de una esquina a la otra y suelta: pinta la elipse que cabe en ese rectángulo.
Fill	Rellena la zona del píxel pulsado: los píxeles unidos a él por un lado, no en diagonal, que tienen justo su mismo color.
Eyedropper	Toma el color del píxel pulsado: con el botón izquierdo, como color de primer plano; con el derecho, como color de fondo.
Select	Elige un rectángulo para moverlo, copiarlo o borrarlo (ver «La selección»). Solo con el botón izquierdo.

Mientras arrastras Line, Rectangle o Ellipse, la figura sale encima de la imagen, y se pinta al soltar. Cada trazo, de pulsar a soltar, es un paso de deshacer.

La herramienta elegida vale para todas las pestañas. Los colores, el pincel y las rejillas son de cada pestaña.

Brush Size y Fill with background

• Brush Size: el grosor de Pencil, Eraser, Line y el borde de Ellipse, de 1 a 64. Con 1 pinta un píxel; con más, un círculo de 2 × Brush Size − 1 píxeles de ancho: con 3, de 5. Rectangle no lo usa: su borde es siempre de 1 píxel.
• Fill with background: los rectángulos y las elipses salen rellenos del color de fondo, con el borde del de primer plano. Con el botón derecho, al revés. Apagada de serie.

Los colores

Los dos cuadros de color del panel son el color de primer plano (Foreground Color) y el de fondo (Background Color). Se cambian de tres maneras:

• Un clic en el cuadro abre el selector de colores de Windows.
• Debajo, una fila de muestras tiene los colores de la imagen, de más a menos usado, hasta 15. Un clic en una la pone como color de primer plano; con el botón derecho, como color de fondo. Lo transparente no cuenta.
• Eyedropper toma el color de un píxel de la imagen.

Una imagen nueva empieza con los colores del cuadro New Image; una que abres, con negro de primer plano y blanco de fondo.

La selección

Con Select, arrastra por la imagen: el rectángulo que marcas sale con un borde punteado.

• Para moverlo, arrástralo desde dentro. Se levanta y deja su hueco del color de fondo, como la goma. Mientras lo mueves, flota encima de la imagen y puede salirse en parte de ella. Las flechas lo mueven de píxel en píxel.
• Ctrl+C lo copia. Ctrl+X lo copia y deja su sitio del color de fondo.
• Ctrl+V pega y pasa a Select. Lo pegado flota encima de lo elegido o, si no hay nada elegido, donde estaba lo copiado. Arrástralo a su sitio. Puedes pegar en otra pestaña: así pasas un dibujo de una imagen a otra.
• Ctrl+A elige la imagen entera.
• Supr borra lo elegido y deja su sitio del color de fondo. A lo recién pegado, solo lo quita.
• Esc o Intro lo sueltan: lo que flota se queda pintado donde está, y ya no hay nada elegido. Un clic fuera del rectángulo, o cambiar de herramienta, también.

Lo que flota se pinta con su transparencia: lo transparente de lo pegado no tapa lo de debajo.

Lo que copias va también al portapapeles de Windows, para pegarlo en otro programa, pero sin transparencia: lo transparente sale del color de fondo. Y al revés: Ctrl+V pega lo que hayas copiado en otro programa, arriba a la izquierda.

Mover y pegar son un paso de deshacer cada uno. Si deshaces mientras algo flota, lo que flota se va y la imagen vuelve a como estaba.

La barra de botones

De izquierda a derecha. Los botones sin texto dicen su nombre al dejar el ratón encima.

Ficheros: New, Open, Save, Save As y Close

• New abre el cuadro New Image: Name, Width y Height (de 1 a 4096 píxeles), y los colores de primer plano y de fondo (Foreground y Background: haz clic en cada cuadro para cambiarlo). Propone el tamaño de la última imagen nueva; la primera vez, 32 × 32. Create la abre en una pestaña, rellena del color de fondo. El nombre es el de la pestaña y el que te propone al guardarla.

• Open abre una imagen de tu ordenador (PNG, BMP, JPG o GIF) tal cual: no la mete en el proyecto, y la barra de estado dice «Not in the project». Para editar una imagen del proyecto, ábrela desde el explorador.

• Save guarda la imagen de la pestaña:

  • si es del proyecto, o la abriste con Open, en su fichero;
  • si es nueva, la mete en el proyecto: te pide el nombre y la guarda en Images, en BMP, como Import to Project (ver «File / Status»).

  Al guardar aplica Output y Crop, que pueden cambiar el tamaño de la imagen (ver «Paneles y opciones»).

• Save As guarda la imagen en otro fichero, en el formato de su extensión: PNG (el de serie), BMP, JPEG o GIF. Si es del proyecto, antes te pregunta:

  • Yes: guarda una copia, y la pestaña sigue con la imagen del proyecto.
  • No: la pestaña pasa a editar la copia, fuera del proyecto. La imagen del proyecto se queda como estaba.
  • Cancel: no guarda.

• Close cierra la pestaña. Si hay cambios sin guardar, te pregunta si los guardas.

Deshacer y rehacer

Undo y Redo (las dos flechas) deshacen y rehacen. Cada trazo, relleno, figura o transformación es un paso, y mover, pegar o borrar lo elegido, otro. Cada pestaña tiene su historial, sin límite de pasos, que empieza de cero al abrir o crear la imagen.

Mover el recorte de Crop no es un paso, ni lo del panel: Output, Include in Build y Palette. Guardar con Crop, o con un Output distinto del tamaño de la imagen, sí lo es: deshacerlo devuelve la imagen de antes de guardar. Al deshacer un paso que cambió el tamaño de la imagen, Output vuelve con ella.

Transformaciones

Cambian la imagen entera, no lo elegido. Cada una es un paso de deshacer.

Botón	Qué hace
Resize	Cambia el tamaño del lienzo, sin estirar el dibujo. Te pide el ancho y el alto en píxeles, y después el color del trozo nuevo: si cierras el selector sin elegir, el de fondo. El dibujo se queda arriba a la izquierda. Si el lienzo crece, lo nuevo sale a la derecha y abajo; si encoge, se pierde lo que sobra por la derecha y por abajo.
Rotate - y Rotate +	Giran la imagen 90°, a la izquierda y a la derecha.
Flip H y Flip V	Le dan la vuelta en horizontal (como un espejo) y en vertical.
Gray Scale	La pasa a grises.
Invert Colors	Invierte los colores: el negro pasa a blanco, el rojo a cian… Lo transparente sigue transparente.

Para estirar o encoger el dibujo, usa Output (ver «Paneles y opciones»).

Zoom

• - y + alejan y acercan la imagen, de 25 % a 3200 %. Ctrl + rueda del ratón hace lo mismo, hacia el punto que tienes debajo.
• 1:1 pone el zoom al 100 %: un píxel de la imagen por cada píxel de la pantalla.
• Al abrir una imagen, o al cambiar de pestaña, el zoom se ajusta para que se vea entera.

El zoom de ahora sale en la barra de estado.

Paneles y opciones

File / Status

• File: el nombre del fichero de la imagen, o el de la pestaña si aún no lo tiene. Solo se lee.
• Import, con una imagen del proyecto o sin ninguna: hace lo mismo que Import Image del explorador, pero mete la imagen siempre en Images.
• Import to Project es el mismo botón con una imagen que no es del proyecto (nueva, o abierta con Open): la mete en él. Te pide su nombre y la guarda en Images como <nombre>.bmp. Si ya hay una con ese nombre, no la pisa: te avisa.
• Crop: ver a continuación.

El botón de Import solo se puede pulsar si el proyecto tiene la carpeta Images.

Crop

Crop recorta la imagen. Al pulsarlo, sobre la imagen sale un rectángulo que la abarca entera. Arrástralo, o arrastra sus bordes y sus esquinas, o escribe Left, Top, Width y Height, en píxeles.

El recorte se hace al guardar: con Crop pulsado, Save se queda solo con lo que hay dentro del rectángulo. Mientras está pulsado, no se puede dibujar ni elegir. Púlsalo otra vez para volver a dibujar: si no has guardado, no recorta nada.

Las rejillas

• Show Grid: la rejilla de píxeles. Encendida de serie, pero solo sale con el zoom al 800 % o más.
• Tiles: otra rejilla, más clara, cada tantos píxeles como diga la casilla de al lado, de 2 a 256 (de serie, 16). Sirve para dibujar un tileset sin salirte de cada tile. Sale aunque Show Grid esté apagada, en cuanto cada tile mide 4 píxeles o más en la pantalla.

Output

Width y Height de Output son el tamaño con el que se guarda la imagen. Al abrirla o crearla, son los suyos. Si los cambias, Save la escala a ese tamaño, suavizando: sirve para hacerla más grande o más pequeña de una vez, pero en pixel art los bordes salen borrosos.

• Con Crop pulsado, Output no cuenta: manda el recorte.
• Cambiar Output cuenta como un cambio sin guardar.
• Resize, Rotate - y Rotate + lo ponen al tamaño nuevo de la imagen, y deshacerlos, al de antes.

Include in Build

Con Include in Build encendida, al compilar el IDE exporta la imagen a Build/flash, que es de donde la carga el juego. Apagada, no la exporta.

• Enciéndela en las imágenes que carga tu código con Bitmap.load y en las que usan los mapas y las salas: los tilesets y las de las capas de imagen.
• Apágala en las que solo son la hoja de un sprite: el sprite exporta su propia hoja, y la imagen solo gastaría sitio en la placa. JaruQuest lo hace así: Images/Tiles.bmp y Images/Cover.bmp la llevan encendida, y Images/Sprites.bmp y Images/Boss.bmp, que son hojas de sus sprites, apagada.
• Las imágenes que mete el IDE en el proyecto entran con ella encendida: la nueva que guardas, la que importas y el tileset de Extract Tiles.

Palette

Al compilar, el IDE puede cambiar los colores de la imagen antes de exportarla:

• Original: tal cual, con todos sus colores. Es la de serie.
• 256 Colors: la deja en 256 colores como mucho, los que mejor la representan. Cada píxel pasa al más parecido, sin tramado.
• Unified: todas las imágenes con Unified comparten los mismos 256 colores, que el IDE saca de todas ellas juntas, también de las que tienen Include in Build apagada. Cada píxel pasa al más parecido.

Solo cambia lo que se exporta: el fichero de la imagen no se toca, y el editor la sigue enseñando con sus colores. Tampoco ahorra memoria ni sitio: el BMP que se exporta ocupa lo mismo, y la VM guarda cada píxel en 16 bits con cualquier paleta. Úsala solo si quieres que una imagen, o varias, tengan menos colores.

La barra de estado

Dice el nombre de la imagen, su tamaño en píxeles, el zoom y de dónde es, por ejemplo «Cover.bmp 320 x 240 px Zoom 319% Project». Lo último puede ser:

• «Project»: es una imagen del proyecto.
• «Not saved yet»: es nueva y aún no tiene fichero.
• «Not in the project»: es un fichero de fuera del proyecto, abierto con Open o guardado con Save As.

Lo que guarda y lo que genera

Save guarda la imagen en su fichero, en el formato de su extensión. Las del proyecto suelen ser BMP, porque Import Image, Import e Import to Project las convierten. Un BMP se guarda con 24 bits por píxel, o con 32 si la imagen tiene algo transparente.

Home › Project › Save, en la cinta, guarda todas las imágenes con cambios y, además, el proyecto.

Include in Build y Palette no van en la imagen, sino en el fichero del proyecto, el .jpr, en los datos de cada imagen, y el IDE lo guarda en cuanto las cambias:

Campo del .jpr	Qué es
SaveToData	Include in Build.
PaletteOption	Palette: 1 es Original; 2, 256 Colors, y 3, Unified.
Width, Height	Output la última vez que se guardó el .jpr. El editor no lo lee: al abrir una imagen, Output es su tamaño.

El .jpr se guarda también con Home › Project › Save y cuando creas, renombras, mueves o borras algo en el explorador.

Al compilar (Build › Compile, y el Play del editor de escenas si ha cambiado algún fichero de imagen, sprite, mapa o música), el IDE:

1. Vacía Build/flash/Images.
2. Saca la paleta común de las imágenes con Unified.
3. Exporta cada imagen con Include in Build a Build/flash, con su paleta, con la misma ruta que en el proyecto y en BMP: Images/Portada.png acaba en Build/flash/Images/Portada.bmp.

El Output lo cuenta imagen a imagen: Exported image to \flash\Images\Fondo.bmp, o Skipping image (SaveToData is false) si tiene Include in Build apagada.

Solo se vacía Build/flash/Images. Si dejas de exportar una imagen de otra carpeta, su BMP de la compilación anterior se queda en Build/flash: bórralo a mano si no lo quieres.

Guarda antes de compilar

Al compilar, el IDE lee las imágenes del disco: ni Compile ni Play guardan el editor de imágenes. Lo que no has guardado no llega al juego.

Los BMP que carga la VM

Es igual en Windows y en las placas:

• La VM solo carga BMP, sin comprimir y de 16, 24 o 32 bits por píxel. Los de 1, 4 y 8 bits (los de paleta) y los comprimidos no: Bitmap.load da el error «Cannot load bitmap file».
• Al cargarlos, pasa cada píxel a 16 bits (RGB565): 5 bits de rojo, 6 de verde y 5 de azul. Por eso dos colores muy parecidos pueden quedar iguales, y por eso bpp() da siempre 16.
• No lee la transparencia del fichero (el canal alfa). Es transparente el color que le pasas a Bitmap.load, de serie el negro, y la VM lo compara ya en 16 bits: con el negro, un casi negro como #050305 también es transparente.

Lo que exporta el IDE vale siempre: BMP de 24 bits, o de 32 si la imagen tiene algo transparente. Lo transparente del todo de un PNG llega como negro, así que con el color transparente de serie también es transparente en el juego. Lo semitransparente se pinta opaco.

En el editor, lo transparente sale con un damero gris. El editor no pinta transparente: Eraser, Supr y el hueco de lo que mueves dejan el color de fondo.

Atajos

Atajo	Qué hace
Ctrl+C	Copia lo elegido.
Ctrl+X	Corta lo elegido: lo copia y deja su sitio del color de fondo.
Ctrl+V	Pega, flotando, y pasa a Select.
Ctrl+A	Elige la imagen entera y pasa a Select.
← → ↑ ↓	Con Select, mueven lo elegido un píxel.
Supr	Con Select, borra lo elegido: deja su sitio del color de fondo.
Esc o Intro	Con Select, sueltan lo elegido.
Ctrl + rueda	Acerca o aleja la imagen, hacia el puntero.
Botón derecho	Pinta con el color de fondo. Con Eyedropper y en la fila de colores, elige el color de fondo.

Las teclas no funcionan mientras escribes en una casilla, ni con Crop pulsado. No hay teclas para deshacer, rehacer ni guardar: usa los botones.

Con el código

Tu juego carga lo que exporta el IDE, con la ruta de la imagen en el proyecto y la extensión .bmp: Images/Fondo.bmp. Si arrastras la imagen del explorador al editor de código, un menú te deja elegir Insert as Bitmap.load o Insert as Path, y escribe la llamada o la ruta por ti.

use Display, Bitmap

var draw = Display.draw
Display.open(320, 240)
Display.fps = 30

var fondo = Bitmap.load("Images/Fondo.bmp")           // la imagen del recorrido
var nave = Bitmap.load("Images/Nave.bmp", 0xFF00FF)   // con el magenta transparente

while (true)
    draw.cls()
    draw.bitmap(0, 0, fondo)
    draw.bitmap(150, 200, nave)
    Display.update()
end

• El segundo argumento de Bitmap.load es el color transparente. Sin él, es el negro.
• draw.bitmap pinta la imagen.
• Los sprites no se cargan así: los carga Sprite.load desde su .spr (mira el editor de sprites).
• En un juego con salas no escribes nada: el código que genera el editor de escenas carga los tilesets y las capas de imagen (El código que genera).

Todo lo demás está en Bitmap.

Problemas conocidos

• El editor no ve los cambios de otro programa. Si cambias con otro programa una imagen que tienes abierta, el editor sigue con la de antes, y Save pisa lo del otro programa. Ciérrala en el editor antes de cambiarla fuera, y vuelve a abrirla después.
• Rectangle no usa Brush Size. Su borde es siempre de 1 píxel, aunque mientras arrastras la figura sale más gruesa. Para un borde más grueso, dibuja sus lados con Line.
• El Play del editor de escenas no ve Include in Build ni Palette. Solo vuelve a exportar las imágenes si ha cambiado algún fichero de imagen, sprite, mapa o música, y estas opciones no cambian ninguno. Después de cambiarlas, compila con Build › Compile, que exporta siempre.
• Borrar una imagen abierta con cambios la borra aunque contestes Cancel. Al borrarla en el explorador, el editor te pregunta si guardas sus cambios; si contestas Cancel, la pestaña se queda abierta, pero el fichero se borra igual. Ciérrala antes de borrarla.

Todos los problemas conocidos de JARU, juntos, están en Problemas conocidos.