Pixel art · Probado
Crea con IA un kit de interfaz de pixel art para tu juego: botones, barra de vida y un panel 9-slice
La interfaz de un juego tiene reglas que una ilustración no tiene. Un cuadro de diálogo se estira para encajar cada línea de texto, así que sus esquinas deben quedar enteras mientras sus bordes se repiten. Un botón cambia entre normal, hover (cursor encima) y pulsado, así que los tres estados deben tener exactamente el mismo tamaño. Si no lo tienen, el cuadro de texto muestra juntas y el botón salta.
El 29 de septiembre de 2026 pedimos al Ciyo Agent un pequeño kit de interfaz para Mossfall, un juego de bosque ficticio, y lo medimos con esas reglas. La primera hoja parecía terminada y falló dos de ellas. La segunda las cumplió.
Pide las piezas y las reglas a la vez
Pedimos cuatro piezas con un mismo estilo: un panel de diálogo, un botón en tres estados, una barra de vida y una casilla de inventario. También escribimos en el encargo las reglas del motor: esquinas idénticas para el 9-slice (dividir el panel en nueve piezas), un estado pulsado un píxel más abajo, una paleta limitada y ningún texto.
El agente creó una hoja de 1,152 × 864 con GPT Image 2.5 Flare por 2 créditos. El archivo original tenía 25,696 colores, así que el agente lo redujo a 16 sin tramado y puso las dos versiones en el tablero.
Para mi juego de pixel art con vista cenital Mossfall (ambientado en un bosque: verdes musgo, marrones cálidos de madera, pergamino crema), crea un kit de interfaz de pixel art en una sola hoja: 1) un panel de cuadro de diálogo con marco de madera y pergamino dentro, con esquinas cuadradas, pensado para 9-slice (las cuatro esquinas idénticas y bordes que se repitan de forma regular); 2) un botón en tres estados, uno al lado del otro: normal, hover (más claro) y pulsado (un píxel más abajo); 3) un marco horizontal de barra de vida con un relleno rojo a unos dos tercios; 4) una pequeña casilla cuadrada de inventario. Estilo: píxeles nítidos y duros en una cuadrícula de píxeles estricta, sin antialiasing, sin desenfoque, sin degradados, 16 colores como máximo, fondo oscuro liso. Ningún texto ni letra en ningún elemento.Lo que medimos en la primera hoja
Una cosa estaba bien y otra casi. El relleno rojo de la barra de vida cubría el 68.9% de su recorrido, cerca de los dos tercios que pedimos. La cara del botón pulsado quedaba 7 píxeles de origen más abajo que la del normal; con los aproximadamente 3.5 píxeles de origen por píxel de juego que el agente midió después, eso son unos dos píxeles de juego, no uno.
Otras dos cosas fallarían en un juego. Los tres estados del botón medían 273, 266 y 271 píxeles de ancho, así que el botón saltaría al cambiar de estado. Y las esquinas del panel de diálogo no eran copias unas de otras: comparada con la esquina superior izquierda reflejada, el 13% de los píxeles de la esquina superior derecha era distinto, y el 23% y el 25% de los de las esquinas inferiores.
| Regla | Pedido | Obtenido |
|---|---|---|
| Estados del botón | Mismo tamaño | 273, 266 y 271 px de ancho |
| Esquinas del panel | Cuatro esquinas idénticas | Difiere el 13–25% de los píxeles |
| Estado pulsado | Un píxel más abajo | Cara 7 px más abajo (unos dos píxeles de juego) |
| Relleno de vida | Unos dos tercios | 68.9% |
| Colores | 16 como máximo | 25,696 en el original; 16 tras la reducción |
Por qué las esquinas y los tamaños importan más que el aspecto
Un 9-slice corta un panel en una cuadrícula de 3 × 3. Las cuatro esquinas se dibujan una vez y nunca se estiran. Los cuatro bordes se repiten a lo largo, y el centro rellena el resto. Si las esquinas son distintas, las juntas se ven a cualquier tamaño, y si el patrón de un borde no se repite de forma regular, aparece una unión visible cada vez que se repite.
Los botones siguen una regla parecida. El motor cambia una imagen por otra en el mismo sitio, así que cualquier diferencia de tamaño mueve el contorno del botón cuando el jugador lo toca.
Dile al agente qué falló y qué necesita el motor
Enviamos nuestras mediciones y pedimos un kit listo para el juego. El agente descubrió que los píxeles del modelo no tenían un solo tamaño: unos 4.0 × 3.5 píxeles de origen por píxel de juego en los botones, la barra y la casilla, y unos 6.3 × 5.6 en el panel. No había ninguna cuadrícula limpia a la que ajustarlo.
Así que hizo algo que conviene saber: conservó el diseño y lo redibujó limpio con código, construyendo cada marco a partir de una esquina y de una pieza de borde con veta de madera que se repite cada 16 píxeles. Por tanto, el kit final es una reconstrucción precisa del diseño del modelo, no los píxeles del propio modelo, y la veta de la madera es más sencilla que en la pintura.
He medido la hoja de 16 colores: los tres estados del botón miden 273, 266 y 271 px de ancho, así que no pueden intercambiarse en el mismo sitio, y las cuatro esquinas del panel de diálogo difieren entre sí en un 13 a 25% de sus píxeles, así que el 9-slice mostrará juntas. Déjalo listo para el juego: mide el tamaño real del píxel de juego y ajusta a esa cuadrícula; haz que los tres estados del botón tengan exactamente el mismo tamaño; haz que las cuatro esquinas del panel sean copias reflejadas de una sola esquina; corta cada elemento en su propio PNG con fondo transparente; y añade una prueba de 9-slice que estire el panel al doble de su ancho y al 60% de su altura. Dime el tamaño de la cuadrícula y los tamaños finales de los elementos.La prueba del 9-slice
El agente cortó el panel de 142 × 46 en nueve piezas y lo reconstruyó a 284 × 28, el doble de ancho y el 60% de la altura. Las esquinas quedaron enteras y la veta de la madera siguió sin cortes. También advirtió de que a esa altura solo quedan 14 filas de pergamino entre los bordes, lo que te indica el panel más pequeño que puede usar tu texto.
Revisamos también los archivos. Los tres botones miden 68 × 36 cada uno, sus marcos de 5 píxeles coinciden píxel a píxel y la cara pulsada queda exactamente un píxel más abajo que las otras dos. Las cuatro esquinas de 7 × 7 del panel son reflejos exactos unas de otras. El kit usa 13 colores.
Lo que prometen quienes venden packs de interfaz
Los packs de interfaz de pago anuncian estas mismas reglas como argumentos de venta, buena señal de que son las que hay que probar. Úsalas como lista de comprobación, tanto si compras un pack como si lo haces tú.
Publicado el 2026-09-27. TaleTone anuncia su propio pack de pago “UI Window Frame Mega Pack” (megapack de marcos de ventana para interfaz) para juegos de fantasía, en SVG y PNG, con 16 tipos y 12 colores, “optimized for 9-slice layouts and resizing.” (optimizado para diseños 9-slice y cambios de tamaño). Es la promoción que hace el vendedor de su propio producto y no tiene ninguna relación con Ciyo; lo citamos por la lista de comprobación, no como recomendación.
Una lista de comprobación antes de importar
Comprueba que todos los estados de un control tienen el mismo tamaño, que las esquinas de todo lo que estires son copias reflejadas, que los patrones de los bordes se repiten en piezas enteras y que el panel más pequeño todavía admite una línea de tu texto. Después exporta cada elemento por separado, con un píxel de archivo por píxel de juego.
Interfaz de juego en pixel art
¿Puede un modelo de imagen con IA crear un panel 9-slice?
Puede dibujar uno que parezca correcto, pero en nuestra prueba del 29 de septiembre de 2026 las cuatro esquinas diferían en un 13–25% de sus píxeles. Pedimos al Ciyo Agent que reconstruyera el panel a partir de una sola esquina reflejada, y entonces el 9-slice se estiró limpio.
¿Por qué los estados de mi botón tienen tamaños distintos?
El modelo dibuja cada estado como una imagen independiente. Los nuestros salieron con 273, 266 y 271 píxeles de ancho. Pide un tamaño común y compruébalo antes de importar.
¿Qué tamaños tenía el kit final?
Panel de diálogo de 142 × 46, botones de 68 × 36, barra de vida de 174 × 32 y casilla de inventario de 32 × 32, todo con un píxel de archivo por píxel de juego.
¿Cuánto costó?
La hoja costó 2 créditos. La medición y la reconstrucción se ejecutaron en el espacio de trabajo del agente y no añadieron ningún cargo de imagen en nuestra prueba.
Crea tu kit de interfaz en Ciyo
Describe el estilo de tu juego y las reglas de tu motor, y después revisa y reconstruye el kit con el Ciyo Agent en un solo tablero.