Procesos creativos prácticos
Ampliar pixel art sin desenfoque: comprueba el archivo exportado
El icono de paquete de tu juego se ve nítido a tamaño original, pero pierde definición al ampliarlo para la tienda o una actualización de desarrollo. Si el dibujo ya está aprobado, basta con un archivo mayor que repita exactamente sus píxeles.
Probamos el proceso en Ciyo con un paquete ficticio de 16×16, dibujado mediante un pequeño script del espacio de archivos. Es una imagen de prueba con cuatro colores, no una fotografía ni una generación de un modelo de imagen. Puedes inspeccionar los archivos descargables de 64×64 y 128×128.
Empieza con el PNG original
Guarda un original intacto y confirma sus dimensiones reales. Una imagen grande que solo imita el pixel art puede tener bordes suaves y cientos de colores. Ampliarla fielmente conserva también esos problemas; no demuestra que exista una cuadrícula de píxeles original.
La fuente tiene 4 colores opacos y valores alfa limitados a 0 y 255. Ocupa 170 bytes. Ciyo la creó con rectángulos de píxeles enteros y la conservó junto a las exportaciones. En tu proyecto, importa el PNG aprobado en lugar de pedir que se vuelva a dibujar.
Elige una ampliación entera
A 4×, cada píxel se convierte en un bloque de 4×4. A 8×, pasa a un bloque de 8×8. Así todos conservan la misma área. Un tamaño arbitrario como 100×100 no permite repartir una cuadrícula de 16×16 en bloques enteros iguales.
Pide un cambio de tamaño del archivo con vecino más cercano y una salida independiente. Instrucciones como mejorar el detalle o aumentar la resolución pueden provocar una nueva interpretación. Aquí cambian las dimensiones del archivo, pero se conserva el dibujo.
Usa este PNG RGBA existente de 16×16. Guarda exportaciones separadas con vecino más cercano a 4× (64×64) y 8× (128×128), sin redibujar ni generar una imagen. Abre cada archivo guardado y verifica que cada bloque k×k coincida con su píxel de origen, incluido el alfa. Indica dimensiones, número de colores opacos y bytes. Conserva el original y guarda las exportaciones en el lienzo.Compara los píxeles guardados, incluida la transparencia
Una vista agradable del lienzo no basta. Descarga el PNG, decodifícalo y compara cada píxel de salida con su correspondiente píxel de origen. Incluye el alfa: un fondo opaco o un borde transparente suavizado puede pasar inadvertido en un lienzo claro.
Las dos exportaciones superaron nuestra comparación independiente con 0 canales distintos. Conservan 4 colores opacos y transparencia binaria. El aumento de bytes describe únicamente estos pequeños ejemplos; no predice el tamaño de tus ilustraciones.
| Archivo | Dimensiones | Colores opacos | Bytes |
|---|---|---|---|
| Fuente intacta | 16×16 | 4 | 170 |
| Vecino más cercano 4× | 64×64 | 4 | 261 |
| Vecino más cercano 8× | 128×128 | 4 | 376 |
Añade una referencia suavizada para ver la diferencia
El panel muestra el original y la exportación con vecino más cercano al mismo tamaño aparente, junto a una versión bilineal creada para comparar. Los dos primeros mantienen las transiciones cuadradas. La referencia suavizada mezcla bordes y crea colores intermedios; está identificada como comparación, no como una exportación aceptada.
El panel de Ciyo es una imagen ráster de 960×400 con tres zonas etiquetadas. Los archivos originales siguen separados. Si el lienzo o el navegador suaviza la vista, inspecciona la descarga en un visor adecuado antes de atribuir el cambio al archivo.
La publicación del 4 de octubre del equipo FrameSprite promociona su propio ampliador y distingue repetir píxeles de añadir detalle o aplicar filtros del motor. La comparación de archivos en Ciyo adapta esa distinción de forma independiente. El autor no afirma usar ni recomendar Ciyo; no pudimos reproducir su vídeo promocional al verificar la fuente.
Comprueba aparte cómo se muestra en destino
El archivo puede ser correcto y, aun así, una web o un juego puede suavizarlo de nuevo. MDN documenta los controles image-rendering para imágenes escaladas. Comprueba el tamaño mostrado y el navegador: un PNG correcto no configura automáticamente el CSS ni el filtro de texturas del motor.
Si buscas bloques de píxeles nítidos e iguales, utiliza una escala entera al mostrarlos. Esta prueba verifica los píxeles exportados. No demuestra compatibilidad con tu motor, tiempos de animación ni el comportamiento de todos los navegadores.
Conserva el original y entrega el tamaño necesario
Incluye la escala y las dimensiones en el nombre de salida para distinguir el original del archivo de entrega. Conserva juntos la fuente, la exportación aceptada y las instrucciones. Los cambios futuros deberían partir del original, no de una captura o una vista ya suavizada.
Usa las muestras siguientes para repetir la comparación. Si el icono ya está borroso a su tamaño original, corrige primero la cuadrícula del dibujo. El vecino más cercano conserva la información existente; no recupera detalles ausentes.
Preguntas prácticas
¿El vecino más cercano añade detalle?
Repite los píxeles existentes. Sirve para conservar una cuadrícula aprobada, no para inventar detalles del dibujo.
¿Por qué puede verse borrosa la vista del lienzo?
El visor puede suavizar al escalar. Inspecciona la descarga y comprueba aparte los ajustes de visualización en destino.
¿Puedo elegir cualquier dimensión de salida?
Los múltiplos enteros dan a cada píxel un bloque igual. Un tamaño arbitrario exige bloques desiguales u otro remuestreo.
Amplía un icono aprobado
Abre el PNG original en Ciyo, pide una exportación separada con escala entera y compara sus píxeles antes de sustituir el archivo de entrega.