Modo píxel
También hay un modo de píxel de un solo fotograma: lienzos de ancho y alto libres, un límite de colores mucho más alto y una exportación de diagrama especializada, pensada para abalorios y patrones de punto.
Animación: solo TauriEl píxel art está en las dos ediciones; la animación para el dispositivo —la que entra en un Clawdmeter— es exclusiva de Tauri (la edición de pago): la descarga gratuita solo trae píxel art.
Modo de edición
Dibujar, previsualizar, fotogramas, colores, exportar e importar. Pasa el cursor sobre cualquier elemento de abajo y la zona correspondiente se ilumina en la imagen.
Los colores y los fotogramas son las dos cosas entre las que más cambias, así que se sitúan juntos; la vista previa en el dispositivo queda fijada en la columna izquierda y nunca se contrae, porque necesitas verla todo el tiempo mientras ajustas los fotogramas.
Cuatro herramientas, dos acciones, un interruptor
Dibujar, borrar, seleccionar y tomar color son lo básico; las herramientas de espejo facilitan copiar la mitad opuesta. El papel cebolla te deja ver en qué se diferencia este fotograma del anterior.
✏Lápizpor defecto
Haz clic en una celda, o mantén pulsado y arrastra, para rellenar con el color seleccionado en ese momento.
▱Goma
Vacía las celdas a transparente — es decir, el índice 0. Transparente en el dispositivo significa «no encendido», no «pintado de negro».
⬚Seleccionar
Dibuja un recuadro para extraer una región — puedes moverla, voltearla o copiarla a otro fotograma.
Mientras hay una selección activa, las teclas de flecha la desplazan una celda; sin selección, las flechas cambian de fotograma — las mismas teclas, según si tienes algo agarrado o no.
◍Cuentagotas
Haz clic en una celda para tomar su índice de color. Haz clic en una celda vacía y tomas el transparente.
⇋Voltear horizontal / Voltear vertical
Lo que se voltea es la selección; sin selección, se voltea el lienzo entero.
Estas dos no son herramientas, son acciones — pulsas una y ocurre una vez, nunca se queda en un estado «seleccionado».
◨Papel cebollaactivo por defecto
Superpone tenuemente el fotograma anterior bajo el actual, para que veas dónde terminó el movimiento del último fotograma. El primer fotograma muestra debajo el último — como la animación se repite en bucle, el «fotograma anterior» del primero es el último.
Solo el lienzo dibuja el papel cebolla. La vista previa del dispositivo deliberadamente no lo hace: está pensada para mostrar exactamente lo que el dispositivo va a encender.
Fotogramas y milisegundos
La mitad superior de la columna derecha es la tira de fotogramas. Cada fotograma tiene su propia duración en milisegundos — la animación entera no comparte una sola velocidad, cada fotograma tiene su propio valor. Para mantener un fotograma medio tiempo más, cambia solo ese fotograma.
- ＋ Inserta un fotograma en blanco después del actual.
- ⧉ Inserta un duplicado después del actual — las animaciones con ajustes sutiles se hacen crecer casi siempre así.
- 🗑 Borra el fotograma actual. Se desactiva cuando solo queda uno: una animación no puede quedarse sin fotogramas.
- ← / → Intercambia el lugar con el fotograma anterior / siguiente. Se desactiva automáticamente en los extremos.
Sin selección, las teclas ← → cambian de fotograma directamente — es la forma más rápida de juzgar si el movimiento se lee bien: pasa de uno a otro y observa si parece que se mueve.
Colores: 36 plazas, 256 candidatos
«Colores de esta animación» es el conjunto de muestras que esta animación usa realmente, con un tope de 36 colores. Ese número no es una preferencia de diseño — es el tamaño de la paleta del firmware del dispositivo, y todo lo que lo exceda no tiene dónde ir allí, así que el editor te detiene justo aquí.
Debajo, «Elige un color» es la paleta integrada de 256 colores: 16 tonos de gris, más 24 matices × diez variantes (cinco apagadas, cinco vivas, cada una en cinco niveles de brillo). El brillo deliberadamente no llega a ninguno de los dos extremos — demasiado oscuro es invisible en el panel negro puro, y el blanco puro ya está en la fila de grises.
＋Añadir
Añade este color a «Colores de esta animación» y lo selecciona. Un color que ya está en uso simplemente se selecciona al hacer clic — no ocupa una segunda plaza.
⇄Reemplazar
Un modo de dos pasos que puedes empezar por cualquier extremo: si ya hay un color nuevo en el campo del código, pulsa Reemplazar y después haz clic en el color que quieres quitar — vale una celda del lienzo o una muestra de la fila; si aún no has elegido nada, selecciona primero la muestra antigua, pulsa Reemplazar y dale luego un color nuevo desde la paleta, el degradado o escribiendo el código.
Cada celda de la imagen que use ese color cambia a la vez. Úsalo cuando las plazas están llenas, o cuando quieres desplazar la paleta entera. ¿Te arrepientes a mitad? Esc cancela.
El índice 0 es transparente y no se puede reemplazar por un color.
⚠️ El panel del dispositivo es negro puro. Un color oscuro que se ve perfecto en una interfaz de edición blanca simplemente desaparecerá una vez en el dispositivo — así que elige toda la animación de la mitad más luminosa.
Tamaños de lienzo admitidos
La animación para el dispositivo admite por ahora tres tamaños —20×20, 40×40, 60×60— siguiendo lo que soporta el firmware del dispositivo de código abierto. Los usos que no entran en un dispositivo, como los abalorios y los patrones de punto, van por el otro tipo de documento: píxel art, donde el número de celdas lo escribes tú.
20 × 20celdas más grandesPocas celdas, cada una grande. Va bien para insignias, símbolos, expresiones mínimas — tienes que decir algo con apenas un puñado de celdas. En el dispositivo son 12 px por celda a pantalla completa, 4 px como insignia.
40 × 40habitualEl punto de equilibrio entre el detalle y el trabajo. La mayoría de las animaciones de splash a pantalla completa se dibujan a este tamaño: 6 px por celda, 2 px como insignia.
60 × 60celdas más pequeñasMuchas celdas, cada una pequeña. Hay sitio para curvas y degradados, pero rellenarla celda a celda también lleva el máximo tiempo.Vista previa del dispositivo y el límite de animación de 20 segundos
La misma animación aparece en dos lugares del dispositivo, así que aquí obtienes dos tamaños de vista previa a la vez:
- Splash a pantalla completa — llena todo el panel al arrancar o en reposo.
- Insignia de esquina — un pequeño icono metido en la esquina superior izquierda también puede animarse. Una animación de 40×40 son aquí solo 2 px por celda, así que el detalle se difumina por completo. Lo ves mientras dibujas, sin necesidad de grabarlo primero para averiguarlo.
Lo que previsualizas es lo que muestra el dispositivo.
Cómo leer los números
El dispositivo da a cada animación una rotación fija de 20 segundos. El editor convierte «milisegundos por fotograma × número de fotogramas» en cuántas vueltas caben en 20 segundos, y luego te dice si se corta. La imagen de arriba son dos fotogramas de 125 ms cada uno — una vuelta son 250 ms, y 20 segundos son exactamente 80 vueltas — así que muestra el primer estado de abajo.
Que se corte o no no es correcto ni incorrecto, es un compromiso. A algunas animaciones no les importa cortarse a media vuelta (una escena de lluvia, por ejemplo), otras quedan arruinadas por ello (un fuego artificial que estalla a la mitad) — así que el editor solo te dice los hechos, no decide por ti.
Píxel art: abalorios y patrones de punto
Todo lo anterior trata de la animación para el dispositivo: tamaños de la lista blanca, 36 colores, la ranura de 20 segundos. Cada uno de esos límites es una copia de lo que el firmware del dispositivo puede hacer. Pero una retícula de píxeles tiene otro uso: los abalorios, el punto de cruz y los patrones de tejido quieren una sola imagen. No entra en ningún dispositivo, no necesita moverse, y el número de celdas lo deciden el papel y el material.
Por eso el modo píxel tiene un segundo tipo de documento: píxel art. En «Nuevo lienzo» de la barra de herramientas elige «Píxel libre (tamaño personalizado)» y escribe tú el ancho y el alto; los rectángulos valen. Comparte editor, muestras y herramientas con la animación, pero cambia el juego de límites, porque no promete entrar en un dispositivo.
El mismo editor con una columna entera de menos: sin tira de fotogramas, sin papel cebolla, sin vista previa en el dispositivo, sin nombre ni categoría de animación. Un documento de una sola imagen no los necesita, y dejarlos ahí solo hace pensar que olvidaste configurar algo.
- Celdas a tu medida: de 1 a 512 por lado, rectángulos incluidos. Un patrón de 50×80 se escribe 50×80.
- Hasta 255 colores, no 36. Los códigos de abalorios son muchos y 36 plazas no bastan. El muestrario sigue siendo el de 256 colores; cuando no alcanza, haz clic en el degradado de abajo y toma tu propio color.
- El fondo siempre es transparente: no hay fila de color de fondo. Una celda vacía se queda vacía, y significa «aquí no va abalorio / aquí no va puntada».
- Añadir y quitar filas sobre el lienzo: un par ＋ / − en el borde derecho e inferior de la cuadrícula, para cambiar el tamaño mientras dibujas; la esquina superior izquierda no se mueve. Las celdas nuevas salen vacías, la fila eliminada desaparece al instante y ⌘Z la devuelve.
- Reglas de filas y columnas: los números van arriba y a la izquierda; al mover el cursor se ilumina esa fila y esa columna. No hace falta contar celdas con el dedo.
- Lectura en la barra inferior: «W × H celdas · N pintadas», siempre visible y al día.
Exportar diagrama: la hoja que de verdad se imprime
Lo que los abalorios y el punto necesitan no es la imagen en pantalla, sino un diagrama imprimible del que se pueda contar. Por eso el diálogo de guardado de un documento de píxel art tiene un formato más, «Diagrama» (la animación no lo ofrece: sus salidas son GIF y JSON). Al pulsarlo obtienes un PNG:
| Muestra | Código | Cantidad | % |
|---|
- Cuadrícula y reglas de filas y columnas: en negro, legibles sobre papel blanco.
- Un número de color en cada celda: desde el 1, y solo los colores realmente usados reciben número. La tinta negra o blanca se elige por contraste, así que ningún número se imprime invisible.
- Las celdas vacías quedan en blanco: no se imprime nada en ellas.
- Tabla de materiales: muestra, número, código hex, cantidad de celdas y porcentaje. Esa es tu lista de la compra.
- Título: el nombre de archivo que escribes al guardar; en blanco se imprime el predeterminado
VAS_pixel. - La composición se elige sola: con A4 como referencia — más ancho que alto va horizontal con la información debajo; más alto que ancho va vertical, información debajo; cuadrado va horizontal con el diagrama a la derecha y la información a la izquierda.
«N pintadas» cuenta las celdas realmente rellenas, no el área del papel: ese número es el material que tienes que preparar.
Además del diagrama, el píxel art también se guarda como imagen normal: PNG / WebP / TIFF dan la retícula ampliada con las celdas vacías transparentes, JPG la aplana sobre blanco, y la escala usa el mismo control de tamaño que el GIF. Guardar un documento de una sola imagen como GIF da una imagen de píxeles sin líneas de cuadrícula, no una animación.
Interfaz de archivo legible por máquina: JSON
La animación de píxeles se guarda en un formato legible por máquina — JSON, no una imagen. Pegar lee una animación existente, Copiar deja la animación entera en el portapapeles, Guardar la escribe en un archivo. Exportar e importar siguen siendo fáciles en ambos casos.
◎Nombre de la animaciónobligatorio
El dispositivo encuentra las animaciones por su nombre, así que el nombre debe ser único; dejarlo en blanco se bloquea antes de guardar.
Pero exportar no significa que vaya a aparecer. El nombre todavía tiene que añadirse a la lista de grupos del firmware del dispositivo para que esa animación entre en la rotación — así que acuérdate de agruparla.
▤Categoría
Idle / Work / Dance / Expressions. Estos cuatro valores son constantes de formato, mostradas en su inglés original en las cuatro interfaces de idioma — porque es exactamente lo que consume el dispositivo.
Cuando un archivo importado trae una categoría fuera de esta lista, el editor la conserva tal cual y la vuelve a sacar igual. Entra tal cual, sale tal cual, por delante de cualquier pulcritud de la lista.
El JSON exportado alimenta el formato de animación de los dispositivos de código abierto — por ejemplo Clawdmeter y otros aparatos de escritorio que funcionan con el ESP32. En el lado de VAS copias el código JSON, en ese lado lo pegas para que una IA lo procese, sin necesidad de ninguna herramienta de conversión.
El píxel art usa las mismas salidas, pero es otro tipo de documento
El píxel art tiene los mismos tres botones —pegar, copiar, guardar— y también guarda JSON. Pero su archivo lleva al principio su propio marcador de tipo y versión, así que el editor sabe de un vistazo qué documento tiene entre manos: no lo adivina. Un archivo guardado vuelve a abrirse celda por celda y color por color: puedes dejarlo a medias, hacer otra cosa y seguir después.
Los dos tipos nunca se confunden: si pegas un archivo de píxel art en un lienzo de animación (o al contrario), el editor lo dice en voz alta y te pide abrir el lienzo correspondiente. Nunca se lo traga en silencio para dejarte una imagen deformada; un error de identificación falla sin ruido, y por eso el tipo se lee de un marcador explícito y no de la forma del archivo.
Y que «el JSON es texto» también vale para el píxel art, así que la forma de trabajar con una IA de la sección siguiente sirve igual para abalorios y patrones de punto.
Dibujar con una IA
Aquí es donde el modo de píxeles se diferencia más del resto de capítulos: su archivo guardado es un texto con el que puedes mantener una conversación.
Un fotograma es una matriz bidimensional, cada valor un índice de color, con el 0 para transparente. Esta estructura es legible tanto por personas como por una IA — así que puedes pegar la animación entera a una IA, decir «añade tres fotogramas más para que parpadee» y pegar de vuelta en el editor el JSON que te devuelve.
{ "name": "vas", "category": "Idle",
"palette": ["transparent", "#F4ECE0", "#C471F5", "#4A9EFF"],
"frames": [ { "hold": 125, "grid": [ [0,0,1,1,0,0], … ] }, … ] }
Una IA no siempre puede dibujar tu intención a la perfección, pero a través de una interfaz que habla su mismo idioma, puedes dejar que vea lo que quieres decir.