Editor de sprites

El editor de sprites hace de una imagen del proyecto, la hoja, un sprite animado: cortas en la hoja los fotogramas, los pones en orden y le das al sprite su velocidad, su pivote y su collider. Su ventana se llama Sprite Manager.

Edita los ficheros .spr, que suelen ir en la carpeta Sprites. Un .spr no copia ningún píxel: dice de qué imagen salen los fotogramas y en qué rectángulo de ella está cada uno. Al compilar, el IDE exporta cada sprite a un .bmp y un .json, que es lo que carga Sprite.load.

Se abre de tres maneras:

• Doble clic en un .spr del explorador.
• New Sprite, en el menú del explorador (clic derecho) o en su barra de botones. Pide el nombre, crea el .spr en Sprites, o en la carpeta que tengas elegida en el explorador, y lo abre.
• Home › View › Sprites, en la cinta: enseña el editor con los sprites que ya tenga abiertos.

Cada sprite se abre en su pestaña, con el nombre del fichero. Al cambiar de pestaña, el editor guarda el sprite que dejas.

La ventana tiene cuatro zonas:

• A la izquierda, de dónde salen los fotogramas: la hoja, el modo de corte, la rejilla y el color de fondo.
• En el centro, la hoja y, debajo, la tira de fotogramas.
• A la derecha, la vista previa de la animación y lo que es el sprite: actor, animación, pivote, collider y exportación.
• Abajo, la barra de estado: el resumen del sprite, el fotograma de la vista previa y los avisos.

Un recorrido

Un personaje que anda, a partir de una hoja con sus fotogramas en rejilla. Los números son los de la hoja Images/Sprites.bmp de JaruQuest: fotogramas de 16 × 16 píxeles sobre fondo magenta.

1. Crea el sprite. En el explorador, clic derecho › New Sprite. Escribe el nombre, por ejemplo Andar, y acepta: el IDE crea Sprites/Andar.spr y lo abre en el editor.
2. Elige la hoja. Despliega SOURCE SHEET y elige la imagen. El editor la encaja en la vista y toma como color de fondo el que más se repite en el borde de la hoja, aquí el magenta: sale en BACKGROUND.
3. Quita el fondo. Marca Remove background: el magenta se vuelve transparente, en la vista previa y en el juego.
4. Ajusta la rejilla. Deja CUT MODE en Grid y pon Cell W y Cell H a 16.
5. Corta los fotogramas. Haz clic en las celdas, en el orden de la animación: cada clic añade un fotograma al final de la tira, debajo de la hoja. Para varias celdas seguidas, arrastra por encima de ellas; para toda la hoja, Cut All.
6. Mira la animación. Pulsa reproducir (▶) debajo de la vista previa, o Espacio, y ajusta FPS, por ejemplo a 6.
7. Pon el pivote. Para un personaje que anda por el suelo, Feet: el punto de abajo en el centro. Si va a chocar, Fit to content ajusta el collider al dibujo.
8. Guarda con Save (Ctrl+S). Mientras hay cambios sin guardar, el botón dice Save ●.
9. Úsalo en el juego. Al compilar, el IDE exporta el sprite. En el código lo cargas con Sprite.load("Sprites/Andar.spr"): mira «Con el código», más abajo. En un juego con salas, ponlo en un objeto del editor de escenas.

Herramientas

La barra de arriba:

Botón	Qué hace	Tecla
New Sprite	Pide un nombre y crea un sprite en la carpeta Sprites, en una pestaña nueva.	—
Save	Guarda el sprite de la pestaña. Con cambios sin guardar dice Save ●.	Ctrl+S
Close	Cierra la pestaña. Si hay cambios sin guardar, te pregunta si los guardas.	—
Undo y Redo	Deshacen y rehacen.	Ctrl+Z y Ctrl+Y
Cut All	Corta toda la hoja de una vez (ver «Cut All», más abajo).	—
- y +	Alejan y acercan la hoja, de 25 % a 3200 %. Entre los dos sale el zoom.	- y +
1:1	Zoom al 100 %.	Ctrl+0
Fit	Encaja la hoja en la vista.	Ctrl+9

New Sprite hace lo mismo que el del explorador, con dos diferencias: crea siempre en Sprites y no avisa si el nombre ya existe (ver Problemas conocidos). Los dos le dan al sprite nuevo la hoja, el color de fondo y Remove background del sprite que tenías abierto, y lo empiezan a 8 FPS.

Undo y Redo:

• Cada clic que corta es un paso. Una tanda (la marquesina o Cut All) es uno solo, igual que arrastrar el pivote o el collider de pulsar a soltar.
• Guardan hasta 64 pasos, los de la pestaña en la que estás. El historial se vacía al cambiar de pestaña, porque el sprite se vuelve a leer del disco.
• No deshacen la elección de la hoja, ni lo que no se guarda con el sprite: Offset X, Offset Y, CUT MODE, el zoom, Checker y Onion skin.

Cortar la hoja

La hoja

SOURCE SHEET lista las imágenes del proyecto. Al elegir una distinta, el editor la encaja en la vista y toma como color de fondo el que más se repite en su borde.

Los fotogramas son rectángulos de la hoja, con sus coordenadas. Si cambias el dibujo de la hoja en el editor de imágenes, los fotogramas cambian con él. Pero si la recortas o le cambias el tamaño, apuntan a otro sitio, y el editor lo avisa en la barra de estado.

Grid

Con CUT MODE en Grid, la hoja sale con una rejilla encima, y la celda que hay bajo el ratón, con un marco rojo.

Campo	Qué es
Cell W, Cell H	El ancho y el alto de una celda, en píxeles. De serie, 16.
Offset X, Offset Y	Dónde empieza la primera celda, en píxeles desde la esquina de arriba a la izquierda de la hoja.
Spacing X, Spacing Y	Los píxeles que hay entre una celda y la siguiente, para las hojas con un marco alrededor de cada dibujo.

• Un clic en una celda la añade como fotograma, al final de la tira. Solo valen las celdas que caben enteras en la hoja; un clic en el hueco entre dos celdas no hace nada. Si pulsas dos veces la misma celda, el fotograma sale dos veces.
• Arrastrando por la hoja marcas un rectángulo amarillo. Al soltar se añaden, fila a fila, todas las celdas que toca, menos las que ya estaban cortadas.

Cell W, Cell H, Spacing X y Spacing Y se guardan con el sprite. Offset X, Offset Y y CUT MODE no: al volver a abrir el sprite, vuelven a 0 y a Grid.

Auto

Con Auto, un clic en un dibujo de la hoja corta el rectángulo justo que lo encierra. El editor sigue los píxeles que se tocan, también en diagonal, y que no son del color de fondo. El último rectángulo detectado sale en rojo. Un clic en el color de fondo no corta nada.

Sirve para las hojas sin rejilla, con dibujos de tamaños distintos. Dos dibujos que se tocan salen en un solo fotograma: esa hoja necesita Grid. Y un dibujo con partes sueltas sale en varios.

Cut All

Cut All corta la hoja entera de una vez, según CUT MODE:

• Con Grid, todas las celdas que tienen algo que no es el color de fondo.
• Con Auto, todos los dibujos de la hoja, en orden de lectura: por filas, de arriba abajo, y en cada fila de izquierda a derecha.

Se salta lo que ya estaba cortado, y es un solo paso de deshacer. El Output dice cuántos fotogramas ha añadido, o por qué no ha encontrado ninguno.

El color de fondo

El color de fondo es lo que el editor cuenta como vacío: para Auto y Cut All, para Fit to content y para Trim sheet. Se cambia en BACKGROUND:

• La pipeta: púlsala y haz clic en la hoja. El color de ese píxel pasa a ser el fondo.
• La muestra: haz clic en ella para elegir el color en un cuadro de colores.
• Al lado sale el código del color, en $RRGGBB.

Remove background vuelve transparente ese color: en la tira y en la vista previa, donde se ve un damero detrás, y en el juego, porque el Build lo exporta como color transparente. Checker, en VIEW, es el tamaño de los cuadros de ese damero en la vista previa.

Onion skin

Con Onion skin y el modo Grid, la celda que hay bajo el ratón enseña en azul la silueta del último fotograma de la tira. Así ves antes de pulsar si el dibujo de la celda cae en el mismo sitio que el anterior. Es solo una ayuda: no se guarda.

Los fotogramas

La tira de debajo de la hoja tiene los fotogramas en el orden de la animación, con su número. Una raya azul marca el que enseña la vista previa.

• Clic: enseña ese fotograma en la vista previa y para la animación.
• Ctrl+clic marca o desmarca un fotograma, y Shift+clic marca el tramo desde el último que pulsaste. Los marcados salen con un marco azul.
• Arrastrar un fotograma lo cambia de sitio. Una línea blanca dice dónde caerá.
• Supr borra los marcados.
• Clic derecho abre un menú que actúa sobre los marcados (si pulsas en uno sin marcar, sobre ese):
  • Duplicate frame, con uno solo marcado, pone una copia justo detrás. Sirve para repetir un dibujo en la animación: una espera, un parpadeo.
  • Delete frame los borra. Con varios marcados dice cuántos: Delete 3 frames.
  • Reverse order da la vuelta a toda la tira.
  • Select all los marca todos.
• Doble clic: abre la hoja en el editor de imágenes.

La barra de estado dice:

• A la izquierda, cuántos fotogramas hay, el tamaño con el que se exportan y lo que ocupan en la memoria de la placa, a 2 bytes por píxel: «17 frames · 24x24 · ~19,1 KB on board (16 bpp)».
• En el centro, el fotograma de la vista previa: «3/17 24x24 @48,24» es el tercero de 17, de 24 × 24 píxeles, cortado en el punto (48, 24) de la hoja.
• A la derecha, en negrita, el primer aviso y cuántos más hay. Con el ratón encima salen todos, y al abrir el sprite los escribe el Output.

Los avisos:

• La hoja ha cambiado de tamaño desde que se cortaron los fotogramas: puede que todos apunten a otro sitio.
• Hay fotogramas fuera de la hoja. Salen grises.
• El actor o la pose no valen (ver «Actores y poses»).
• Los fotogramas no miden todos lo mismo. El Build mete cada uno en un hueco del tamaño del mayor, y el aviso dice cuánto se gasta en relleno. El resumen lo dice también: «[frames of different sizes: padded]».

La animación

En ANIMATION:

• FPS: los fotogramas por segundo, de 0 a 120. Con 0, en el juego el sprite no se anima solo, y eliges el fotograma con sprite.frame; la vista previa lo enseña a 15.
• Sprite Align (Top, Center, Bottom): dónde va cada fotograma, a lo alto, dentro del hueco común cuando no miden todos lo mismo. A lo ancho van siempre centrados. Con todos del mismo tamaño no cambia nada.
• Loop y Ping-pong: cómo se repite la animación en el juego. Son sprite.loop y sprite.yoyo.

Loop	Ping-pong	En el juego
Sí	No	Al acabar vuelve al primer fotograma. Es lo de serie.
Sí o no	Sí	Va y vuelve sin parar. Loop no cuenta.
No	No	Se reproduce una vez. Al pasar del último fotograma, el sprite pasa a active = false: deja de dibujarse y de colisionar.

La vista previa no hace caso de Loop ni de Ping-pong: siempre repite la animación hacia delante.

Debajo de la vista previa está la barra de reproducción: fotograma anterior (|<), reproducir (▶), fotograma siguiente (>|) y parar (■). Del último fotograma se pasa al primero, y al revés. Espacio reproduce o para, y ← y → cambian de fotograma.

Pivote y collider

Los dos se ven siempre sobre la vista previa, y se arrastran ahí mismo. También se escriben en PIVOT y en COLLIDER, y el clic derecho en la vista previa abre un menú con los valores típicos.

Sus coordenadas son las del hueco que exporta el Build, el rectángulo gris discontinuo: el mayor ancho por el mayor alto de los fotogramas, con cada fotograma colocado según Sprite Align. Es el rectángulo que recibe la VM.

Si el pivote y un tirador del collider se pisan, se agarra el que tocaste el último.

El pivote

El pivote es el punto del sprite que cae en su x y su y en el juego, y alrededor del que gira (sprite.pivot). Es la cruz naranja.

Sin tocarlo, es el de serie, el centro del hueco: lo dice «default · center» junto a PIVOT. Si cambian los fotogramas, sigue en el centro.

• Arrástralo, o escribe X e Y, y pasa a ser propio: se queda en esas coordenadas aunque cambien los fotogramas, y aunque sean las del centro.
• Center vuelve al de serie.
• Feet lo pone abajo en el centro: el habitual para un personaje que anda por el suelo.
• Corner lo pone en la esquina de arriba a la izquierda.

El pivote puede quedar fuera del hueco.

El collider

El collider es la forma con la que choca el sprite. Es la línea azul claro, con un tirador en cada esquina del rectángulo o en el borde del círculo.

Sin tocarlo, es el de serie, el rectángulo del hueco entero: sale discontinuo, con «default · whole frame» junto a COLLIDER. Si cambian los fotogramas, sigue siendo el hueco entero.

• Rect y Circle eligen la forma. Al cambiar de forma, el collider se ajusta al dibujo.
• X e Y son la esquina de arriba a la izquierda del rectángulo, o el centro del círculo. W y H son el tamaño del rectángulo, y R, el radio del círculo.
• Arrastrándolo por dentro lo mueves, y por sus tiradores le cambias el tamaño. No se sale del hueco. El de serie no se mueve, pero sí se estira por las esquinas.
• Escribir un número o arrastrarlo lo hace propio: se queda como lo dejas aunque cambien los fotogramas.
• Whole frame vuelve al de serie.
• Fit to content lo ajusta al dibujo de todos los fotogramas, sin aire alrededor. El círculo queda dentro del dibujo. Con un actor, abarca todas sus poses (ver «Actores y poses»).

Debajo dice «Only used by objects with a body, or by hits()»: el collider solo cuenta para los sprites con cuerpo (bodyType) y para hits().

El menú del clic derecho en la vista previa tiene Pivot: center, Pivot: feet (bottom center) y Pivot: top left, que son Center, Feet y Corner, y Collider: whole frame (default), Collider: rectangle fit to content y Collider: circle fit to content.

Trim sheet

En EXPORT, Trim sheet recorta al exportar el aire de la hoja: el color de fondo que sobra alrededor del dibujo de todos los fotogramas. A todos les quita lo mismo, así que la animación no tiembla. Al lado, el editor dice cuánto se ahorraría en la placa («would save ~1,6 KB», si pasa de 1 KB), o «trimmed» si ya está marcada.

En el editor, el pivote y el collider se siguen viendo sobre el hueco sin recortar. El Build los traslada para que el sprite quede en el mismo sitio en el juego. Pero el sprite exportado mide menos: sprite.width y sprite.height dan el tamaño recortado, y con el collider de serie, el del juego es el hueco recortado.

Actores y poses

Un actor junta los sprites de un personaje. Cada uno es una pose: quieto, andar, saltar… Las poses son sprites normales, cada una con su .spr, sus fotogramas, su pivote y su collider. Lo que las junta es una etiqueta: el nombre del actor, escrito en todas.

No hay que crear el actor en ningún sitio: basta con que varios sprites lleven el mismo nombre en Actor. La etiqueta no cambia lo que se exporta, pero sirve para tres cosas:

• el editor enseña juntas las poses del actor, para pasar de una a otra y alinearlas;
• la caja Filter del explorador encuentra los sprites también por su actor;
• el IDE escribe Code/Actors.gen.aru, con una función que carga todas las poses de cada actor.

Crear un actor y sus poses

En JaruQuest, el héroe tiene tres sprites: Hero_Down, Hero_Side y Hero_Up. Para hacer de ellos el actor Hero:

1. Abre Hero_Down y escribe Hero en Actor, en la sección ACTOR de la derecha. Deja Pose vacía: en gris sale la que tendrá, down.
2. Haz lo mismo en Hero_Side y en Hero_Up. El botón ... de al lado ofrece los actores que ya hay en el proyecto.
3. Guarda los tres.

En cuanto escribes el actor, encima de la hoja sale la barra de poses.

Para añadir una pose, abre una de las que ya tiene el actor y elige New pose of Hero... en el menú de .... Te pide el nombre del sprite nuevo, lo crea en Sprites y lo abre con la misma hoja, el mismo fondo, el mismo actor, el mismo pivote y el mismo collider. Solo te queda cortar sus fotogramas.

Las reglas de los nombres:

• Con Pose vacía, la pose es el nombre del fichero sin el actor delante y en minúsculas: Hero_Down.spr, en el actor Hero, es down. Si no queda nada, porque el fichero se llama como el actor, es el nombre entero: Hero.spr es hero. Lo que no vale en un nombre pasa a ser _, y si empieza por un número lleva una p delante.
• El actor y la pose acaban siendo nombres en el código que se genera, así que tienen que ser identificadores de JARU: letras sin tilde, números y _, empezando por una letra o _, y sin ser palabras reservadas.
• Hero y hero son el mismo actor, pero el editor avisa para que lo escribas igual en todos.
• Un actor no puede tener dos poses con el mismo nombre. Se queda con él el primer sprite, por orden de ruta.

Lo que no vale sale como aviso en la barra de estado, y ese sprite, o el actor entero, se queda fuera del código que se genera.

La barra de poses y el fantasma

Cuando el sprite abierto tiene actor, encima de la hoja sale una barra con:

• ACTOR, el nombre del actor y un botón por pose, por orden alfabético. La abierta sale en azul. Pulsa otra para abrirla en su pestaña.
• Con dos poses o más, GHOST: none y las otras poses.

El fantasma es el primer fotograma de otra pose, en rosa sobre la vista previa, con los dos pivotes en el mismo punto. Una línea rosa marca el borde de abajo de su hueco. Sirve para ver si las dos poses pisan el mismo suelo: si no, el personaje da un salto al pasar de una a otra. El fantasma que eliges vale para todas las poses del actor mientras el editor esté abierto, y no se guarda.

Con fantasma, debajo de los botones del pivote sale una fila que compara los dos huecos: «Frame bottom matches "side".» si su borde de abajo cae a la misma altura, o «Frame bottom is 3 px below "side".» si no. Entonces el botón Set Y to N mueve el pivote para que coincidan.

Fit to content, con actor, ajusta el collider al dibujo de todas las poses, puestas una encima de otra por el pivote. Así el collider no cambia al pasar de una pose a otra.

El código que genera

Con actores en el proyecto, el IDE escribe Code/Actors.gen.aru. Por cada actor lleva una estructura con un campo por pose y dos funciones. Para el héroe de JaruQuest:

use Sprite

// ---- Hero: down, side, up ----
struct ActorHero
    var down = nil
    var side = nil
    var up = nil
end

func ActorHeroLoad()
    return ActorHero(Sprite.load("Sprites/Hero_Down.spr"), Sprite.load("Sprites/Hero_Side.spr"), Sprite.load("Sprites/Hero_Up.spr"))
end

func ActorHeroCopy(src)
    return ActorHero(Sprite.new(src.down), Sprite.new(src.side), Sprite.new(src.up))
end

• ActorHeroLoad() carga todas las poses con Sprite.load y devuelve una ActorHero con un sprite en cada campo.
• ActorHeroCopy(src) devuelve otra ActorHero con una copia de cada pose de src, hecha con Sprite.new: sprites nuevos que comparten los fotogramas y llevan el mismo pivote, la misma animación y el mismo collider.

Para usarlo, impórtalo. Llama a Load una vez, al empezar, y saca las demás copias con Copy: cada Load vuelve a cargar los fotogramas.

use Display, Sprite
import "Actors.gen.aru"

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

var heroe = ActorHeroLoad()         // las tres poses, cargadas una vez
var doble = ActorHeroCopy(heroe)    // otro héroe que comparte los fotogramas

heroe.down.x = 120                  // cada pose es un sprite
heroe.down.y = 120
doble.side.x = 200
doble.side.y = 120

while (true)
    draw.cls()
    draw.sprite(heroe.down)
    draw.sprite(doble.side)
    Display.update()
end

Más cosas del fichero:

• Los nombres llevan Actor delante para no chocar con las funciones que genera el editor de escenas para cada sala.
• La función Copy solo se escribe si el código del proyecto la nombra: en la placa, cada función gasta memoria aunque nadie la llame. Escribe la llamada, guarda el fichero y compila: el Build la añade. Hasta entonces, el fichero lleva un comentario en su lugar.
• Se reescribe al guardar un sprite y antes de cada compilación. No lo edites a mano.
• Se añade a la carpeta Code del proyecto. Un proyecto que nunca ha tenido actores no lo tiene. Si les quitas el actor a todos los sprites, se queda sin código, y puedes borrarlo.
• Si otro fichero de código del proyecto ya define uno de sus nombres, el Output lo avisa al compilar.

Lo que guarda y lo que genera

Save guarda el sprite en su .spr, un fichero JSON. También lo guardan cambiar de pestaña, contestar Yes al cerrarla con cambios y Home › Project › Save, en la cinta.

Campo del .spr	Qué es
imageNodeID, imageRelativePath	La hoja: el número de su imagen dentro del proyecto y su ruta.
sourceWidth, sourceHeight	El tamaño de la hoja la última vez que se guardó el sprite. Si cambia, el editor avisa.
actor, pose	El actor y la pose, si los tiene.
animation	El resto: FPS, Sprite Align, el color de fondo y Remove background, la rejilla (Cell W, Cell H, Spacing X y Spacing Y), Loop, Ping-pong, el pivote, el collider y Trim sheet.
regions	Los fotogramas, en orden: x, y, width y height de cada uno dentro de la hoja.

La hoja va por el número de su imagen en el proyecto: un .spr copiado de otro proyecto apunta a una imagen que no es la suya. Vuelve a elegirla en SOURCE SHEET.

Al compilar (Build › Compile, y el Play del editor de escenas si ha cambiado algún recurso), el IDE exporta cada sprite del proyecto a Build/flash, con la misma ruta que su .spr:

Fichero	Qué lleva
Build/flash/Sprites/<sprite>.bmp	La hoja de fotogramas: todos, uno debajo de otro, cada uno en un hueco del mismo tamaño.
Build/flash/Sprites/<sprite>.json	Lo que lee Sprite.load: el tamaño del hueco, cuántos fotogramas hay y los FPS. Y, solo si no son los de serie, el color transparente, Loop, Ping-pong, el pivote y el collider.

• Con más de 255 fotogramas no hay hoja: cada fotograma va en su .bmp, <sprite>_000.bmp, <sprite>_001.bmp…
• El formato del .json está en Sprite.load.
• Un sprite sin hoja o sin fotogramas no se exporta, y el Output lo avisa: «Sprite has no source image or regions defined. Skipping»
• Si la hoja de un sprite ya no está en el proyecto, el Build se para: «Source image for sprite not found»
• Con actores, el IDE escribe además Code/Actors.gen.aru (ver «Actores y poses»).

Guarda antes de compilar

El Build lee el .spr del disco: compilar no guarda el editor de sprites. Lo que no has guardado no llega al juego.

Atajos

Atajo	Qué hace
Ctrl+Z	Deshace.
Ctrl+Y	Rehace.
Ctrl+S	Guarda el sprite.
Ctrl+0	Zoom al 100 % (1:1).
Ctrl+9	Encaja la hoja en la vista (Fit).
+ y -	Acercan y alejan la hoja.
Ctrl + rueda, sobre la hoja	Acerca o aleja la hoja.
Espacio	Reproduce o para la animación.
← y →	Pasan al fotograma anterior o al siguiente.
Supr	Borra los fotogramas marcados.

Las teclas sin Ctrl no funcionan mientras escribes en una casilla: entonces son para la casilla.

Con el código

Sprite.load recibe la ruta del .spr dentro del proyecto y carga lo que exportó el Build:

use Display, Sprite

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

var heroe = Sprite.load("Sprites/Andar.spr")   // el sprite del recorrido
heroe.x = 160        // x e y son el pivote
heroe.y = 120

while (true)
    draw.cls()
    draw.sprite(heroe)   // se anima solo, a sus FPS
    Display.update()
end

• Lo que pusiste en el editor es como empieza el sprite. El código lo puede cambiar: frameRate (en milisegundos por fotograma), loop, yoyo, pivot y collider.
• Carga cada sprite una vez. Para tener varios iguales, usa Sprite.new(sprite): comparten los fotogramas.
• En un juego con salas no escribes nada de esto: los objetos del editor de escenas usan el sprite tal cual, con su pivote y su collider.
• Los actores se cargan con Code/Actors.gen.aru (ver «Actores y poses»).

Todo lo demás está en Sprite.

Problemas conocidos

• El New Sprite del editor no comprueba el nombre. Si ya hay un sprite con ese nombre en Sprites, no avisa: abre ese sprite en otra pestaña, como si fuera nuevo, puede cambiarle la hoja por la del sprite que tenías abierto, y el explorador lo lista dos veces. Si guardas, lo pisas. Crea los sprites con el New Sprite del explorador, que sí avisa.
• Con Offset, el clic se descuadra. Si Offset X u Offset Y no son 0, el clic suelto cuenta el desplazamiento dos veces. En Grid puede cortar otra celda que la del marco rojo. En Auto y con la pipeta, toma el píxel que queda ese número de píxeles más a la izquierda y más arriba. La marquesina y Cut All cortan bien: con Offset, corta con ellos, y usa Auto y la pipeta con Offset a 0.
• Escribir en Offset X u Offset Y no mueve la rejilla. Si cambias el número con el teclado o con la rueda del ratón, la rejilla no se mueve hasta que haces clic en la casilla. Usa sus flechas, o haz clic en ella después de escribir.
• Auto y Cut All no ven el color de la muestra. Buscan el fondo con el color que tomó la pipeta o, si no la has usado, con el que el editor detecta en el borde de la hoja al abrirla. El que eliges pulsando en la muestra no cuenta para ellos. Si no encuentran nada o cortan de más, toma el fondo con la pipeta justo antes.
• Sin Remove background, el negro es transparente en el juego. Sin la casilla, el .json no lleva color transparente, y la VM toma como tal el negro (#000000), igual que Bitmap.load. La vista previa enseña ese negro, pero en el juego no se pinta. Si el sprite tiene negro puro que debe verse, marca Remove background con un fondo de otro color.

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