Glow és 2D fények régi 2D játékba Unity URP-ben

Egy régi 2D Unity-játék a beépített render pipeline-on laposnak hat egy mai telefonon: nincs fény, a glow vagy hiányzik, vagy a teljes képet bevilágítja a UI-jal együtt, a felület sprite-jai pedig elmosódottak. Unity URP-ben ezt három dologgal oldja meg: 1-es küszöbű Bloommal és HDR színnel csak azokon az objektumokon, amelyeknek világítaniuk kell, a 2D renderer 2D fényeivel, valamint nagyobb sprite-okból álló UI-jal, amely figyelembe veszi a kijelző biztonságos területét.

A folyamatot a Dreamica nevű játékunkon mutatjuk be (App Store, Google Play). Ez egy zuhanós kalandjáték, amelyben ujjal vonalakat rajzol, és ezekkel vezet egy alvó gyereket szállító buborékot négy világon át. Eredetileg Unity 5.3-ban készült, a UI az NGUI pluginban futott, a glow-t az MK Glow plugin adta, a grafika pedig az iPhone 7 1334 × 750 pixeles kijelzőjére készült. A játékmenet ugyanaz maradt, csak a grafika változott.

Egy régi játékot gyakran az áruház miatt kell újra elővenni, nem a grafika miatt. A Google Play 2019 augusztusa óta 64 bites verziókat követel meg, és a csak 32 bites builddel rendelkező játék kikerül belőle. Pontosan ez történt a Dreamicával is. Ha a projektet úgyis átviszi Unity 6-ra, a grafika viszonylag olcsó bónusz.

#Miért nem elég a régi teljes képernyős glow

A régebbi glow pluginok teljes képernyős effektként működnek. Mindent bevilágítanak, ami világos, a menü ikonos gombjait is. A Dreamicában az MK Glow alatt Unity 6-ban az ikonok szinte eltűntek. A hivatalos Post Processing Stack v2 csak a beépített pipeline-hoz nyújt pótlást, URP-ben már nem érvényesül. Ha anyagonként vezérelhető glow-t és mellé dinamikus 2D fényeket szeretne, váltson URP-re, és használja a beépített Bloomot.

#1. lépés: Állítsa át a projektet URP-re

Az URP-re váltás után egy régi 2D játék szinte biztosan két csapdába fut bele. Mindkettő úgy jelentkezik, hogy a kép hibás, vagy pontosan olyan, mint korábban, pedig a shaderek rendben vannak.

#Szürke kép: állítson be camera stacket

Ha az Editor Game nézete csak szürke felületet mutat, de a Scene nézet és egy egyszeri kamerarender rendben van, a hiba nem a shaderekben, hanem a kamerák összerakásában van. A régi játékoknak gyakran két kamerájuk van, egy a világnak és egy a UI-nak, és a UI-kamera csak a mélységet törli. A beépített pipeline-ban így rétegezik a kamerákat, az URP viszont ezt nem támogatja. Explicit camera stack kell neki: az egyik kamera az alap (Base), a többi a stackjébe sorolt rátét (Overlay). Állítsa be minden jelenetben, ahol a kamerák egymásra kerülnek.

#A sprite-ok figyelmen kívül hagyják a fényt: váltson 2D rendererre

A megvilágított shaderes sprite-ok semmilyen fényre nem reagálnak, ha a hagyományos URP renderer aktív. Az a 2D fényeket egyáltalán nem számolja. Váltson a 2D rendererre. Ám ez sem rajzol megvilágítást, amíg a jelenetben nincs legalább egy 2D fény. Ha valami egy változtatás után pontosan ugyanúgy néz ki, mint előtte, először ellenőrizze, melyik renderer fut.

#Részecskék és régi pluginok

A régi shaderes részecskék a 2D renderer alatt feketén vagy egyáltalán nem jelennek meg. Adjon nekik új, egyszerű shadert.

Vigyázzon az Asset Store-ral is. Az assetek frissítésekor az Editor magától alkalmazhatja egy régi plugin „frissítését”, amely metaadatokat ad hozzá és átnevezi a shadereket. Az anyagok név szerint keresik a shaderüket, így csendben elromlanak. Egy régi projektben minden nagyobb assetfrissítés után nézze át a verziókezelőben az összes módosított fájlt, azokat is, amelyeken épp nem dolgozik.

#2. lépés: Szelektív glow HDR színnel és 1-es Bloom-küszöbbel

A cél az, hogy csak a kiválasztott objektumok világítsanak, a Dreamicában a megrajzolt vonal, a lézerek, a szikrák, a szentjánosbogarak és a rúnák, a háttér és a UI viszont ne. Az URP Bloom elmos és hozzáad mindent, ami világosabb a küszöbénél. Állítsa a küszöböt 1-re, és a világítani hivatott anyagok színét emelje 1 fölé.

vonal shadere:
    szín = textúra × csúcsszín × árnyalat × intenzitás    (intenzitás = 6)

Bloom:
    küszöb = 1, erősség = 0,3
    csak az világít, aminek a számítás után 1 fölötti a fényereje

A háttér és a gombok színe 0 és 1 között van, nem lépik át a küszöböt, és élesek maradnak. Ezzel a kifakult ikonok problémája is megszűnik. Feltétel a HDR-rel rendelkező kamera. Enélkül a szín 1-re vágódik, és semmi sem világít. A 2D renderer nem mutatja a HDR kapcsolót a kamera inspectorában, ezért kapcsolja be szkriptből.

Alacsony küszöb, teljes kép

1-es küszöb, HDR anyag

Ha a glow így kézben van, nem kell opcionálisnak lennie. A Dreamicában megszüntettük a glow kapcsolóját a beállításokban, a glow a megjelenés része.

#Emissziós térkép: a sprite-nak csak egy része világít

Ha a sprite-nak csak egy része világítson, adjon neki emissziós térképet (emission map): egy második, fekete-fehér textúrát, amely megjelöli, a sprite melyik része világít. Csak ez a rész kap 1 fölötti színt, így a rúnán a mag ragyog, nem a teljes körvonal.

#Lüktetés expozíciós lépcsőkben

Ha a ragyogás lüktessen, ne szorozza a színt lineárisan. Egy HDR anyag fényereje 2 a nyolcadikon körül lehet, és rajta egy 0 és 10 közötti lineáris szorzó egyáltalán nem látszik. A lüktetést expozíciós lépcsőkben (EV) számolja, ugyanúgy, mint a Unity HDR színválasztójának intenzitáscsúszkája:

szín = árnyalat × 2 ^ ev,   ev egy minimum és egy maximum között ingadozik

#3. lépés: Dinamikus 2D fény a játékos körül

Tegyen a játékosra egy 2D pontfényt, köré pedig lágy ragyogást. A Dreamicában egyetlen szinuszgörbe vezérli egyszerre a ragyogás fényerejét, a fény sugarát és intenzitását, így együtt lüktetnek. A fény színét a környezet is meghatározhatja: az erdőben fehér, a mocsárban narancssárga, télen lila, a pokolban sárga. A hátteret és az akadályokat állítsa megvilágított shaderekre, különben nem reagálnak a fényre.

A rövid fények életet visznek az eseményekbe. Amikor az ágyús mókus lő, felvillan egy 3-as intenzitású borostyánszínű fény, amely 0,3 másodperc alatt kialszik, és a csőből kiáramló szikrák világítanak. Nem kell mindennek világítania: a makk eltűnésekor keletkező por szándékosan barna, és nem világít.

#Ugyanaz a shader az egymáshoz illeszkedő felületeken

Ha két háttér illeszkedik egymáshoz, a forrásképek fényereje azonos, mégis látható köztük a varrat, ellenőrizze a shadereket. A Dreamicában a kezdő háttérnek és a végtelen erdei háttérnek más-más shadere volt. Az egyik figyelmen kívül hagyta az anyag 0,733-as árnyalatát, a másik alkalmazta, és 73 %-ra sötétítette az erdőt. A megoldás ugyanaz a shader mindkét felületen.

Két shader

Egy shader

#Felvillanás: áttűnés a csúcsra hozzáadás helyett

A következő világba lépéskor a fény és a ragyogás fellobban: 0,6 másodperc felfutás, rövid kitartás, 1,4 másodperc lecsengés, közben a ragyogás egyszer körbefordul. Ha a felvillanást egyszerűen hozzáadja a lüktetéshez, a csúcs attól függ, épp melyik fázisban van a szinuszgörbe, és minden felvillanás más erősségű. Ehelyett tűnjön át folyamatosan a lüktetésből egy rögzített csúcsra:

súly = felvillanási görbe (0-tól 1-ig)
érték = lüktetés + (csúcs - lüktetés) × súly

Hozzáadás

Áttűnés a csúcsra

#4. lépés: Éles UI a mai kijelzőkre

Az iPhone 7-re rajzolt UI sprite-jai kicsik. A Dreamica menügombjának sprite-ja 128 × 64 pixeles volt, és háromszoros pixelsűrűségű telefonon többszörösére nyúlt. Rajzolja újra a sprite-okat nagyobb felbontásban: az új gomb 800 × 434-es, a haladásjelzők 200 × 26-ról 800 × 104-re nőttek.

128 × 64

800 × 434

Ha a UI NGUI-ra épül, fontolja meg az újraírást. Az NGUI horgonyai darabonként, több képkockán át számolódnak ki, a hosszú horgonyláncok néha rossz helyen állnak be, a méretarány pedig eltér az Editor, a telefon és az iPad között. A Dreamicában a javítások ezt nem tették megbízhatóvá, ezért a UI-t újraírtuk uGUI-ra és TextMeshPro-ra. Haladjon képernyőről képernyőre, a régi verziót pedig tartsa mellette futva mintaként. A UI-t a magasság szerint skálázza egy referenciafelbontáshoz képest (nálunk 434 × 941 pont), és vegye figyelembe a kijelző biztonságos területét, vagyis a kivágást és a lekerekített sarkokat. Az újraírás után távolítsa el teljesen az NGUI-t a projektből, hogy ne maradjon benne két UI-rendszer.

#Korlátok: tömörítetlen textúrák

Ez a folyamat csak a grafikát változtatja meg. A Dreamicában szándékosan nem tömörítettük a textúrákat, mert teljes élességet akartunk. Az ára a méret: már az eredeti játéknak is 313 MB textúrája volt a memóriában az Editorban, az App Store-ban pedig 299 MB. Becslésünk szerint a tömörítés nagyjából 40 MB-ra csökkentené a textúrákat. Ha fontos a játék mérete, itt spóroljon először.

Egy másik Unity-játékot az első kódsortól a kiadásig a Space Impact Watch cikkünk mutat be, a Unity teljesítményéről pedig a horda-navigáció Unity DOTS-ban cikk szól. Ha a játék még Unity 4-ben készült, ne nyissa meg közvetlenül Unity 6-ban; a biztonságos utat az írja le, hogyan vigyen át egy Unity 4-es projektet Unity 6-ra. Ha van egy régi Unity-játéka, amely kikerült az áruházakból, és szeretné visszahozni, vegye fel velünk a kapcsolatot.