Arreglando imágenes en Roblox UI

Recientemente me encontré una vez más con un viejo problema de desarrollo de Roblox. Estaba trabajando en algunos íconos para una revisión de la interfaz de usuario, pero se veían muy mal en Roblox. Había contornos borrosos extraños en ellos, y no eran muy nítidos.

Este artículo analizará cómo puede corregir los contornos de mala apariencia en los iconos de imagen y hacer que sus iconos se vean nítidos.

Antes vs después

Por que sucede

Cuando subes una imagen a Roblox y la pegas en tu juego, a veces ves un contorno negro o blanco alrededor de tu imagen cuando se escala. Esto se debe a la interpolación bilineal. Este ha sido un problema en Roblox durante mucho tiempo.

Cuando Roblox escala las imágenes, muestrea los píxeles y combina el rojo, el verde y el azul. En imágenes con fondos transparentes como la píldora a continuación, podemos ver que el exterior de la imagen es transparente. Sin embargo, los píxeles reales en la imagen son negros, con una transparencia de 1.

Inspeccionar píxeles transparentes conduce a un fondo negro

Como puedes imaginar, esto es bastante malo. Anticipamos que esta imagen no escalará bien en Roblox. De hecho, cuando cargamos la imagen a Roblox, Roblox muestra el fondo en negro. Las áreas rosadas son las áreas blancas transparentes.

El rosa son áreas transparentes, la parte negra también es transparente, pero de color negro, no blanco.

Si lo insertamos en Roblox, podemos ver el esquema si colocamos la píldora en una interfaz gráfica de usuario. Se ve bien, pero empeorará con las imágenes detalladas.

El esquema aquí no es tan malo, pero empeora mucho en imágenes más detalladas.

Usando Gimp para arreglar imágenes

Podemos usar Gimp para arreglar estas imágenes. Hay un complemento para Gimp que transformará una imagen transparente para sangrar hacia afuera en los píxeles transparentes. Continúe y descargue este script e instálelo en Gimp. En Windows, esto va a C: \ Archivos de programa \ GIMP 2 \ share \ gimp \ 2.0 \ scripts.

Lo que hace este complemento es que toma una imagen transparente y difumina los bordes para que pueda tomar imágenes mal recortadas y hacer que se vean bien. En este caso, también ayudará con la escala bilineal que Roblox está utilizando.

La imagen se verá casi igual, pero los píxeles transparentes se mostrarán correctamente cuando Roblox la escale

Si aplicamos el mismo efecto a nuestra píldora, podemos ver que cuando inspeccionamos píxeles, ahora solo hay imágenes en blanco.

Aplicando el efecto

Asegúrese de exportar el resultado nuevamente a un .png. Cuando lo subimos, vemos que Roblox ha resaltado útilmente toda la imagen como rosa.

Queremos rosa en todas partes, significa que es un alfa transparente totalmente blanco

Cuando revisamos la píldora en nuestro lugar de prueba, ¡vemos que la reparó!

La nueva píldora escala bien, sin artefactos.

Puede ver que la nueva píldora se ve muy bien y no tiene los mismos contornos extraños que antes.

Usando Photoshop

Puedes usar Photoshop para hacer lo mismo. El complemento que estamos buscando Flaming’s Solidify es gratis.

Los íconos se ven mucho más limpios

Usando pixelfix

Después de la publicación de este artículo, el desarrollador de Roblox "Corecii" lanzó un programa opensource node.js para automatizar este proceso. El código fuente se puede encontrar en Github. Puede usar esto como argumento de línea de comando en Windows, Mac o Linux.

./pixelfix.exe my_image.png

Además, puede arrastrar sus archivos al ejecutable y se ejecutará. Puede leer más sobre este proceso en Roblox DevForum.

Anteriormente, este artículo afirmaba que pixelfix tenía un rendimiento pobre en ciertos casos. Sin embargo, investigaciones adicionales muestran que esto fue solo mi malentendido.

Imágenes más nítidas

Aún puede ver que los iconos se ven un poco borrosos. Si sabe qué tamaño tendrá su imagen, puede hacer que la imagen se vea aún más nítida. Estos íconos son de 25x25, así que cargué imágenes a 50x50 píxeles. Esto se debe a que Roblox UDim (dimensión universal) de 1 en realidad se considera 2 píxeles en las pantallas de retina.

Aquí está el ícono de estadísticas que hice.

Desafortunadamente, Roblox no admite imágenes svg directamente, así que tengo que exportar a .png. Tuve mucho cuidado de mantener todo alineado a una cuadrícula de 25x25, por lo que exporta limpio y se ve bien, incluso cuando se escala. No puede hacer esto con cada imagen, pero definitivamente ayuda.

Esta será la técnica más difícil de aplicar. No puede escalar sus elementos de interfaz de usuario normales en un editor de imágenes porque terminará con la misma confusión. Además, algunas IU receptivas exigen que los elementos se escalen.

Iconos mucho más nítidos en la parte superior

Incluso el icono de la insignia se ve mejor, aunque tenga alias. Puede comparar los resultados a continuación.

¡Estoy satisfecho con cómo resultaron los íconos!

Esperemos que estas técnicas puedan ayudarte a crear una interfaz de usuario más nítida en Roblox.