Fixing images in Roblox UI

Jeg løb for nylig endnu en gang ind i et gammelt Roblox-udviklingsproblem. Jeg arbejdede på nogle ikoner til en revision af brugergrænsefladen, men de så virkelig dårlige ud på Roblox. Der var underlige uklar konturer på dem, og de var ikke særlig skarpe.

Denne artikel skal se, hvordan du kan rette dårlige konturer i billedikoner og få dine ikoner til at se skarpe ud.

Før vs. efter

Hvorfor det sker

Når du uploader et billede til Roblox og sætter det ind i dit spil, ser du undertiden en sort eller hvid kontur omkring dit billede, når det skalerer. Dette skyldes bilinær interpolation. Dette har været et spørgsmål på Roblox i lang tid.

Når Roblox skalerer billeder, prøver den pixel og blander det røde, grønne og blå. På billeder med gennemsigtig baggrund, som pillen nedenfor, kan vi se, at det ydre af billedet er gennemsigtigt. Imidlertid er de faktiske pixels i billedet sorte med en gennemsigtighed på 1.

Inspektion af gennemsigtige pixels fører til sort baggrund

Som du kan forestille dig, er dette ret dårligt. Vi forventer, at dette billede ikke skaleres godt på Roblox. Faktisk, når vi uploader billedet til Roblox, viser Roblox baggrunden som sort. De lyserøde områder er de gennemsigtige hvide områder.

De lyserøde er gennemsigtige områder, den sorte del er også gennemsigtig, men farvet som sort, ikke hvid.

Hvis vi indsætter den i Roblox, kan vi se konturen, hvis vi lægger pillen i en Gui. Det ser ok ud, men det bliver værre ved detaljerede billeder.

Oversigten her er ikke så dårlig, men det bliver meget værre på mere detaljerede billeder.

Brug af Gimp til at rette billeder

Vi kan bruge Gimp til at rette disse billeder. Der er et plugin til Gimp, der omdanner et gennemsigtigt billede til at blø udad i de gennemsigtige pixels. Gå videre og download dette script og installer det i Gimp. I windows går dette til C: \ Program Files \ GIMP 2 \ share \ gimp \ 2.0 \ scripts.

Hvad dette plugin gør, er at det tager et gennemsigtigt billede og slører kanterne ud, så du kan tage dårligt beskårne billeder og få dem til at se fine ud. I dette tilfælde vil det også hjælpe med den bilinære skalering, som Roblox bruger.

Billedet ser stort set det samme, men gennemsigtige pixels gengives korrekt, når de skaleres af Roblox

Hvis vi anvender den samme effekt på vores pille, kan vi se, at når vi inspicerer pixels, der nu kun er hvide billeder.

Anvendelse af effekten

Sørg for at eksportere resultatet tilbage til en .png. Når vi uploader det, ser vi, at Roblox hjælpsomt har fremhævet hele billedet som lyserødt.

Vi vil have lyserøde overalt, det betyder, at det er en helt hvid gennemsigtig alfa

Når vi tjekker pillen på vores teststed, ser vi, at den fikseret den!

Den nye pille skalerer fint uden artefakter

Du kan se den nye pille se godt ud og har ikke de samme underlige konturer som før.

Brug af Photoshop

Du kan bruge Photoshop til at gøre det samme. Det plugin, vi leder efter Flaming's Solidify, og det er gratis.

Ikonerne ser meget renere ud

Brug af pixelfix

Efter at denne artikel blev frigivet, frigav Roblox-udvikleren “Corecii” et opensource node.js-program til at automatisere denne proces. Kildekoden findes på Github. Du kan bruge dette som et kommandolinjeargument på Windows, Mac eller Linux.

./pixelfix.exe my_image.png

Derudover kan du trække dine filer til den eksekverbare, og de vil køre. Du kan læse mere om denne proces på Roblox DevForum.

Tidligere anførte denne artikel, at pixelfix havde dårlig produktion i visse tilfælde. Imidlertid viser yderligere forskning, at dette bare var min misforståelse.

Crispier images

Du kan stadig se ikonerne se lidt slørede ud. Hvis du ved, hvilken størrelse dit billede bliver, kan du få billedet til at se endnu sprødere ud. Disse ikoner er 25x25, så jeg uploadede billeder med 50x50 pixels. Dette skyldes, at Roblox UDim (universal dimension) på 1 faktisk betragtes som 2 pixels på nethindeskærme.

Her er statistikikonet, jeg lavede.

Desværre understøtter Roblox ikke svg-billeder direkte, så jeg er nødt til at eksportere til .png. Jeg var meget forsigtig med at holde alt tilpasset et 25x25 gitter, så det eksporteres rent og ser godt ud, selv når det skaleres. Du kan ikke gøre dette med hvert billede, men det hjælper bestemt.

Dette bliver den sværeste teknik at anvende. Du kan ikke bare skalere dine almindelige brugergrænsefladeelementer i en billedredigerer, fordi du ender med den samme fuzzyness. Desuden kræver nogle responsive UI'er, at elementer skaleres.

Meget skarpere ikoner øverst

Selv badge-ikonet ser bedre ud, selvom det har aliasing. Du kan sammenligne resultaterne nedenfor.

Jeg er tilfreds med, hvordan ikonerne viste sig!

Forhåbentlig kan disse teknikker hjælpe dig med at skabe et skarpere brugergrænseflade på Roblox.