Ako pridať glow a 2D svetlá do starej 2D hry v Unity URP

Stará 2D hra v Unity na vstavanom render pipeline vyzerá na dnešnom telefóne ploško: svetlo chýba, glow buď nie je, alebo rozžiari celý obraz aj s UI, a sprity rozhrania sú rozmazané. V Unity URP to vyriešite tromi vecami: Bloomom s prahom 1 a HDR farbou len na objektoch, ktoré majú žiariť, 2D svetlami z 2D renderera a UI s väčšími spritmi, ktoré rešpektuje bezpečnú oblasť displeja.

Postup ukazujeme na našej hre Dreamica (App Store, Google Play). Je to pádová adventúra, v ktorej prstom kreslíte čiary a nimi vediete bublinu so spiacim dieťaťom cez štyri svety. Pôvodne vznikla v Unity 5.3, UI bolo v plugine NGUI, glow obstarával plugin MK Glow a grafika bola pripravená pre iPhone 7 s displejom 1334 × 750 pixelov. Hrateľnosť ostala rovnaká, zmenila sa len grafika.

Starú hru často otvoríte kvôli obchodu, nie kvôli grafike. Google Play od augusta 2019 vyžaduje 64-bitové verzie a hra, ktorá má len 32-bitový build, z neho vypadne. Presne tak dopadla aj Dreamica. Keď už projekt prenášate do Unity 6, grafika je relatívne lacný bonus.

#Prečo nestačí starý celoobrazovkový glow

Staršie glow pluginy fungujú ako celoobrazovkový efekt. Rozžiaria všetko svetlé vrátane ikoniek tlačidiel v menu. V Dreamice ikonky pod MK Glow v Unity 6 takmer zmizli. Oficiálny balík Post Processing Stack v2 je náhrada len pre vstavaný pipeline, v URP sa už neaplikuje. Ak chcete glow, ktorý riadite po materiáloch, a k tomu dynamické 2D svetlá, prejdite na URP a použite Bloom, ktorý je v ňom zabudovaný.

#Krok 1: Prepnite projekt na URP

Po prepnutí na URP narazíte v starej 2D hre takmer isto na dve pasce. Obe sa prejavujú tak, že obraz vyzerá zle alebo presne ako predtým, hoci shadery sú v poriadku.

#Sivá obrazovka: nastavte zásobník kamier

Ak herné okno v Editore ukazuje len sivú plochu, ale scéna v editore aj jednorazový render kamery vyzerajú správne, chyba nie je v shaderoch, ale v skladaní kamier. Staré hry mávajú dve kamery, jednu na svet a jednu na UI, a UI kamera maže len hĺbku. To je spôsob, ako sa vrstvia kamery vo vstavanom pipeline, a URP ho nepodporuje. Potrebuje explicitný zásobník kamier (camera stack): jedna kamera je základná (Base), ostatné sú prekrytie (Overlay) zaradené do jej zásobníka. Nastavte ho v každej scéne, kde sa kamery vrstvia.

#Sprity ignorujú svetlo: prepnite na 2D renderer

Sprity s osvetleným shaderom nereagujú na žiadne svetlo, ak beží bežný URP renderer. Ten 2D svetlá vôbec nepočíta. Prepnite na 2D renderer. Aj ten však osvetlenie nekreslí, kým v scéne nie je aspoň jedno 2D svetlo. Keď niečo po zmene vyzerá presne ako predtým, najprv skontrolujte, ktorý renderer beží.

#Častice a staré pluginy

Častice na starých shaderoch sa pod 2D rendererom kreslia čierne alebo vôbec. Dajte im nový jednoduchý shader.

Pozor aj na Asset Store. Pri obnovení assetov vie Editor sám aplikovať „aktualizáciu“ starého pluginu, ktorá pridá metadáta a premenuje shadery. Materiály hľadajú shader podľa mena, takže sa potichu rozbijú. Po každom väčšom obnovení assetov v starom projekte si vo verziovacom systéme pozrite všetky zmenené súbory, aj tie, na ktorých práve nerobíte.

#Krok 2: Selektívny glow cez HDR farbu a Bloom s prahom 1

Cieľ je, aby žiarili vybrané objekty, v Dreamice nakreslená čiara, lasery, iskry, svätojánske mušky a runy, ale nie pozadie a UI. Bloom v URP rozmaže a pripočíta všetko, čo je jasnejšie ako jeho prah. Nastavte prah na 1 a materiálom, ktoré majú žiariť, vytlačte farbu nad 1.

shader čiary:
    farba = textúra × farba vrcholu × odtieň × intenzita    (intenzita = 6)

Bloom:
    prah = 1, sila = 0,3
    žiari len to, čo má po výpočte jas nad 1

Pozadie a tlačidlá majú farby od 0 do 1, cez prah neprejdú a ostanú ostré. Tým zmizne aj problém s vybielenými ikonkami. Podmienkou je kamera s HDR. Bez neho sa farba oreže na 1 a nežiari nič. 2D renderer prepínač HDR v inšpektore kamery neukazuje, preto ho zapnite skriptom.

Nízky prah, celý obraz

Prah 1, HDR materiál

Keď je glow takto pod kontrolou, nemusí byť voliteľný. V Dreamice sme prepínač glow z nastavení zrušili, glow je súčasť vzhľadu.

#Emisná mapa: žiari len časť spritu

Ak má žiariť len časť spritu, pridajte mu emisnú mapu (emission map): druhú, čiernobielu textúru, ktorá hovorí, ktorá časť spritu žiari. Len tá časť dostane farbu nad 1, takže pri rune svieti jadro, nie celý obrys.

#Pulzovanie v expozičných stupňoch

Ak má žiarenie pulzovať, nenásobte farbu lineárne. HDR materiál môže mať jas okolo 2 na ôsmu a lineárne násobenie od 0 do 10 na ňom nie je vidieť vôbec. Pulz počítajte v expozičných stupňoch (EV), rovnako ako posuvník intenzity vo výbere HDR farby v Unity:

farba = odtieň × 2 ^ ev,   ev kmitá medzi minimom a maximom

#Krok 3: Dynamické 2D svetlo okolo hráča

K hráčovi dajte bodové 2D svetlo a okolo neho mäkkú žiaru. V Dreamice jedna sínusovka riadi naraz jas žiary, polomer svetla aj jeho intenzitu, takže pulzujú spolu. Farbu svetla môže určovať prostredie: v lese je biela, v močiari oranžová, v zime fialová, v pekle žltá. Pozadia a prekážky prepnite na osvetlené shadery, inak na svetlo nereagujú.

Krátke svetlá oživia udalosti. Keď vystrelí veverica s delom, rozsvieti sa jantárové svetlo s intenzitou 3, ktoré za 0,3 sekundy zhasne, a iskry z hlavne žiaria. Žiariť nemusí všetko: prach pri zmiznutí žaluďa je zámerne hnedý a nežiari.

#Rovnaký shader na nadväzujúcich plochách

Ak na seba nadväzujú dve pozadia, zdrojové obrázky majú rovnaký jas, a predsa je medzi nimi viditeľný šev, skontrolujte shadery. V Dreamice malo úvodné pozadie a nekonečné pozadie lesa každé iný shader. Jeden odtieň materiálu 0,733 ignoroval, druhý ho použil a stmavil les na 73 %. Riešenie je rovnaký shader na oboch plochách.

Dva shadery

Jeden shader

#Záblesk: prechod na vrchol namiesto pripočítania

Pri prechode do ďalšieho sveta svetlo a žiara vzplanú: nábeh 0,6 sekundy, krátke podržanie, doznenie 1,4 sekundy a žiara sa pritom raz otočí. Ak záblesk len pripočítate k pulzu, vrchol závisí od toho, v akej fáze je sínusovka práve vtedy, a každý záblesk je inak silný. Plynulo prejdite z pulzu na pevný vrchol:

váha = krivka záblesku (0 až 1)
hodnota = pulz + (vrchol - pulz) × váha

Pripočítanie

Prechod na vrchol

#Krok 4: Ostré UI pre dnešné displeje

UI kreslené pre iPhone 7 má malé sprity. Tlačidlo v menu Dreamice malo sprite 128 × 64 pixelov a na telefóne s trojnásobnou hustotou bodov sa ťahalo na niekoľkonásobok. Prekreslite sprity vo väčšom rozlíšení: nové tlačidlo má 800 × 434, ukazovatele pokroku narástli z 200 × 26 na 800 × 104.

128 × 64

800 × 434

Ak UI stojí na NGUI, zvážte prepis. Kotvy v NGUI sa dopočítavajú po častiach počas viacerých snímok, dlhé reťaze kotiev sa občas ustália zle a mierka sa líši medzi Editorom, telefónom a iPadom. V Dreamice to opravy spoľahlivo nevyriešili, preto sme UI prepísali na uGUI a TextMeshPro. Postupujte obrazovku po obrazovke a starú verziu majte zapnutú vedľa ako predlohu. UI škálujte podľa výšky voči referenčnému rozlíšeniu (u nás 434 × 941 bodov) a rešpektujte bezpečnú oblasť displeja, teda výrez a zaoblené rohy. Po prepise NGUI z projektu úplne odstráňte, nech v ňom neostanú dva systémy UI.

#Limity: nekomprimované textúry

Tento postup mení len grafiku. Textúry sme v Dreamice vedome nekomprimovali, lebo sme chceli plnú ostrosť. Cena je veľkosť: už pôvodná hra mala v Editore 313 MB textúr v pamäti a v App Store má 299 MB. Kompresia by podľa nášho odhadu zmenšila textúry približne na 40 MB. Ak vám na veľkosti hry záleží, je to prvé miesto, kde ušetriť.

Iný príklad Unity hry od prvého riadku kódu po vydanie nájdete v článku o hre Space Impact Watch, výkonu v Unity sa venuje článok o navigácii hordy v Unity DOTS. Ak je hra ešte v Unity 4, neotvárajte ju priamo v Unity 6; bezpečný postup opisuje návod ako previesť projekt z Unity 4 do Unity 6. Ak máte starú Unity hru, ktorá vypadla z obchodov, a chcete ju vrátiť späť, ozvite sa nám.