Vytváranie hier založených na prehliadači v Unity WebGL môže byť celkom obohacujúce - existuje veľa webov herných portálov, ktoré s vami rozdelia príjmy z reklám alebo priamo od vás zakúpia vaše hry. Ak máte talent, môžete ľahko zdieľať niekoľko tisíc dolárov mesačne na zdieľaní výnosov z reklám. Unity with WebGL je jedným z najlepších nástrojov na tento účel a s doplnkami WebVR môžete svojim hrám tiež pomerne ľahko poskytnúť podporu VR.
Ak vás teda zaujíma, ako vytvoriť hry Unity WebGL, čítajte ďalej!
Požiadavky
- Jednota
- Znalosť HTML5 / JavaScript
- (Voliteľné) Dobrý textový editor NotePad ++
Na začiatok si stiahnite a nainštalujte Unity a nezabudnite nainštalovať komponent podpory WebGL.
Keď sa Unity spúšťa prvýkrát, zvyknite si na používateľské rozhranie a ponuky, najmä na Hierarchia panel - obsahuje všetky súčasné prvky scény. Je to v podstate hlavný pohľad na čokoľvek, na čom pracujete, či už je to herná úroveň alebo hlavné menu.
Máte tiež Hra karta (na testovanie hry vo vnútri editora) a vpravo je ikona Inšpektor panel. Toto je miesto, kde je možné upravovať prvky, napríklad svetlá, herci atď.
Ak kliknete na ikonu Smerové svetlo Tlačidlo v ponuke Hierarchia vám poskytne množstvo informácií o tomto konkrétnom svetle a budete môcť zapnúť / vypnúť tiene z neho vrhané.
Nakoniec máte Projekt v dolnej časti okna, kde je iba karta so súbormi, ktoré sa používajú na vytvorenie projektu.
Po podrobnom oboznámení sa s používateľským rozhraním pokračujte a uložte aktuálnu scénu. Ísť do Súbor> Uložiť scénu a otvorí sa dialógové okno pre priečinok „Majetok“. Pri vývoji hier je štandardnou praxou organizovať veci do podpriečinkov, preto vytvorte podpriečinok s názvom „ Scény “ a uložte do nej scénu.
Teraz vytvoríme niečo skutočne jednoduché - hru typu „plošinovka“, kde sa naša postava iba posúva okolo platforiem. Pád znamená smrť. Budeme to robiť v zobrazení 3D / z pohľadu prvej osoby, takže postava sa skutočne nemodeluje - v skutočnosti použijeme pre našu postavu jednoduchý objekt typu „sphere“, pretože je najjednoduchšie vytvoriť.
Takže v Hierarchia kliknite na „Vytvoriť“ a upravte tieto vlastnosti:
- Pozícia {X: 0, Y: 2,5, Z: 0}
- Mierka {X: 0,3, Y: 0,3, Z: 0,3}
Ak stlačíte hrať ”, Malo by sa v zobrazení fotoaparátu zobraziť jednoduchá guľa. Teraz chceme do našej „postavy“ pridať gravitáciu a preskočiť fyziku.
Takže v Inšpektor panel, pridajte komponent do gule a vyberte Rigidbody - tiež nechceme, aby to sféra bola točiť sa , tak choďte na Constaints> vyberte všetky osi v Rotácia oblasti.
Teraz musíme vytvoriť akúsi platformu, aby naša postava nekonečne neprepadla hre. Takže pridajte kocku a nastavte Stupnica Y hodnota do 0,1 - ak teraz scénu znovu „prehráte“, naša postava by mala „spadnúť“ na kocku.
Teraz pridáme trochu fyziky, aby sa naša postava trochu „odrazila“, keď dopadne na kockovú platformu. Musíme vytvoriť nový fyzikálny materiál a použiť ho na sféru, aby naša postava mala skákacie vlastnosti.
Vytvorte nový podpriečinok v priečinku Aktíva adresár a pomenujte ho napríklad „Materiály“ a potom vytvorte nový fyzikálny materiál. Môžete to nazvať „Bouncy_blob“ alebo ako chcete.
Teraz v Inšpekcia panel, pridajte do skákacieho materiálu tieto hodnoty:
- Dynamické trenie: 10
- Statická fikcia: 10
- Bounciness: 1
- Kombinácia trenia: maximálna
- Kombinácia odskokov: maximum
Mali by sme tiež pridať fyzikálny materiál na plošinu pod našou sférou - bude to tak, že sa naša sféra bude odrážať so zvyšujúcou sa výškou pri každom odraze. Vytvorte teda ďalší materiál a pomenujte ho napríklad „Platform_bouncing“ a dajte mu hodnoty:
- Dynamické trenie: 0,9
- Statická fikcia: 0,9
- Bounciness: 1
- Kombinácia trenia: priemerná
- Kombinácia odrazov: Násobenie
Keď teraz stlačíte tlačidlo „Prehrať“, všimnete si, že naša postava sa pri každom odraze skáče vyššie.
Ak chcete na platformu pridať nejakú farbu / textúru, vytvorte nový materiál a kliknite na kartu „Albedo“. Potom mu dajte farbu. Tento materiál môžete pretiahnuť na platformu a zmení farbu.
Z pohľadu prvej osoby stačí pretiahnuť fotoaparát do priečinka Hierarchia panel na našu sféru - to spôsobí, že kamera bude neustále sledovať náš charakter. Táto premisa zostáva rovnaká pre akýkoľvek druh hry Unity z pohľadu prvej osoby - ale ak vytvárate hru FPS pre viac hráčov, ako je Vedúci štrajk , Stane sa o niečo pokročilejším, pretože pre každý model budete mať nastavených niekoľko fotoaparátov.
V každom prípade musíte fotoaparát upraviť takto:
- Pozícia {X: 0, Y: 1, Z: 0}
- Otočenie {X: 90, Y: 0, Z: 0}
- Mierka {X: 2,5, Y: 2,5, Z: 2,5}
- Jasné vlajky: plná farba
- Pozadie: # 000
- Zorné pole: 80,3
Teraz, aby sme získali pocit „perspektívy“ výšky skoku, pridáme bodové svetlo. Takže vylaďte hodnoty reflektorov na:
- Otočenie {X: 90, Y: 0, Z: 0}
Teraz chceme naprogramovať ovládacie prvky hry, aby sme pomocou myši mohli ovládať pohyb postavy. Potrebujeme na to scenár.
V Projekty panel, pridajte nový priečinok a pomenujte ho „Skripty“. Teraz pridajte JavaScript do fotoaparát a pomenujte ho „InputController“ a tiež ho pridajte do priečinka „Skripty“, ktorý ste práve vytvorili. Keď teraz dvakrát kliknete na skript, môžete upraviť jeho vlastnosti.
Keď otvoríte skript v predvolenom editore skriptov Unity, mal by vyzerať takto:
Takže chceme, aby premenná „GameObject“ odkazovala na našu postavu - za týmto účelom môžete jednoducho prepnúť späť na zobrazenie kamery Unity a pretiahnuť našu sféru do vstupného poľa.
Teraz chceme priradiť polovica šírky a výšky obrazovky do funkcie Štart. Upravte teda skript tak, aby vyzeral takto:
Takže teraz potrebujeme iba hodnoty myši (vždy, keď ich hráč presunie). Aby sme to dosiahli, budeme musieť využiť funkciu Update. Upravte teda skript pod premennou Update:
Aby sme to trochu vysvetlili, premenné X a Z sú pre os ovládača - chceme, aby tieto manipulovali s pozíciou našej postavy, keď do hry posielame vstup ovládača. Musíme odkazovať na premennú Input.mousePosition, ktorá nám dáva 2D vektor. Tento 2D vektor je potrebné pridať do nášho sledovania koordinácie, preto nazveme funkciu setHeroPosition s hodnotami ako argumentmi.
Vytvorte teda nový skript, zavolajte ho HeroController a pripojte ho k našej sfére / postave. Upravte skript tak, aby vyzeral takto:
Teraz, keď stlačíte tlačidlo „Prehrať“, by ste mali byť schopní pohybovať sa okolo postavy po platforme pomocou myši a dokonca z nej spadnúť! Naším konečným cieľom je vytvoriť podobnú platformovú hru Krátky život , Takže túto hru podrobnejšie rozpracujeme v nasledujúcom sprievodcovi.
Tým sú ukončené základné základy vytvárania veľmi jednoduchej hry v Unity - v ďalšej časti tejto príručky si ukážeme, ako na úroveň pridať ďalšie scenérie, pridať ponuku hier a všetko exportovať na web pomocou WebGL , na hranie v prehliadači.
Vytváranie procedurálnych platforiem
Takže v časti jedného z tohto tutoriálu sme práve vytvorili základnú platformu, na ktorú sa vaša postava môže odrážať (( a spadnú do svojej záhuby) - ale pre skutočnú plošinovku musíme pridať ďalšie platformy. Ale nechceme pridať milión platforiem - chceme, aby sa Unity automaticky vytvoriť platformy sa odrážajú od našej postavy.
Na to potrebujeme šablónu platformy - inak označovanú ako „panelák“. Panelák je skratka pre prefabrikované, a znamená to jednoducho „vopred vyrobené“ - zvyčajne kópiu herného objektu, ktorý môžete opakovane používať. Paneláky môžu v skutočnosti obsahovať hierarchie herných objektov, čo znamená, že by ste mohli „pripraviť“ celú scénu herných objektov.
Musíte teda vytvoriť nový priečinok s názvom Paneláky , a potom myšou presuňte našu platformu z Hierarchia panel do tohto nového priečinka. Panely budú na paneli Hierarchia rozpoznateľné podľa modrej farby.
Teraz, aby sme dostali pokyn od Unity, aby vytvorila procedurálne platformy, musíme vytvoriť skript s názvom GameManager a pripojiť ho ku kamere. Skripty GameManager v zásade obsahujú dôležité pokyny, ktoré majú engine preniesť do hrateľnosti - v tomto prípade to bude generovanie platforiem, keď sa bude naša postava chovať.
Dôvod, prečo ju pripájame ku kamere, je ten, že kamera nie je nikdy zničená a zostáva konštantná - takže skript nie je nikdy zničený a zostáva konštantný tak, že je k nemu pripojený.
Do scenára je potrebné zahrnúť toto:
Aby sme tento kód trochu vysvetlili, je potrebné, aby sme vytvorili odkaz na panelák aj na sféru (náš znak), takže ich musíte presunúť do konkrétnych slotov v editore.
Tento kód obsahuje aj tri súkromné premenné - riadky, ktoré začínajú súkromná var. Tieto vytvoria inštanciu (referenciu) panelového panela nasledujúcimi spôsobmi:
- Hranica súkromného varu: plavák kladie limit na os y, takže keď naša postava skočí vyššie než táto hranica, vytvorí sa nový panel.
- Rotácia súkromných var: kvartér; jednoducho pridá potrebné otočenie na vytvorenie inštancie našich panelákov - my však pridávame rotácia = Quaternion.identify; pretože toto dá motoru pokyn, aby neotáčal herný objekt. Objekt (naše paneláky) bude doslova „dokonale zarovnaný“ so svetom.
- Výsledná súkromná premenná lastPlatformPosition si zapamätá a uloží pozíciu poslednej platformy ako 3D vektor (platformy v podstate nezmiznú za vami, takže ak chcete, môžete sa vrátiť späť v hernom svete).
V tejto ďalšej časti skriptu pridáme šek každý rám či je alebo nie je naša sféra (znak) nad hranicou (ktorá generuje nové platformy) - ak je naša postava nad hranicou, budeme zvýšiť hraničnú hranicu vytvoriť nový panel / platformu vyššiu ako tá minulá.
Naším ďalším krokom je pridanie kódu, ktorý určuje ďalšiu pozíciu panelu:
Používame a robiť kým v tomto kóde zaistite, aby hodnoty X a Z vektora (jeho pozícia v hernom svete) neboli totožné s predchádzajúcimi platformami - takže naše procedurálne generované platformy budú vždy narastať do výšky.
Samozrejme, nechceme, aby tieto hodnoty boli prísne umiestnené - trochu náhodnosti je dobrá vec, inak vyrábame iba dokonalé schodisko. Takže používame Náhodné. Rozsah funkcia, medzi hodnotami -1 a 2, na volanie náhodných hodnôt pre X a Z. S týmito číslami sa môžete trochu pohrať, ak sa chcete pomýliť.
Vytvorenie hernej ponuky
Zatiaľ sme vytvorili „hru“, v ktorej môžete skákať so zvyšujúcou sa výškou a pohybom myši ovládať smer. Problém je v tom, že ak spadnete z platformy, budete padať nekonečne dlho - na to, aby sme mohli začať odznova, musíme vytvoriť skript v ponuke „smrť“ / hra.
Takže v zásade napíšeme skript, ktorý skontroluje, či naša sféra (znak) neklesne pod prvá platforma hry . Ak je to tak, skript načíta novú scénu.
Naším prvým krokom bude skontrolovať, či sféra neklesla pod konkrétnu hranicu. Choďte do GameManager skript, ktorý sme vytvorili skôr, a pozrite sa na ak vyhlásenie aktualizovať funkcie.
Budeme používať ináč Ak vyhlásenie, aby sme skontrolovali, či je pozícia našej sféry pod -2,0 jednotkami polohy Y - ak je to, naša súkromná funkcia koniec hry bude ... no, ten kúsok scenára je samozrejmý.
Posledný kúsok skriptu je funkcia, ktorá sa má použiť na spracovanie stavu „koniec hry“ a načítanie našej hernej ponuky.
To naráža na Unity’s Aplikácia triedy - sme schopní zavolať Úroveň zaťaženia funkcia na vyvolanie novej scény, ktorá je v tomto prípade jednoducho naším herným menu - pamätajte, že v podstate všetko v jednote je „levely“. Hlavné ponuky (Spustiť hru - Možnosti - Kredity - atď.) Sú v podstate iba úrovne / scény s bitmi klikateľného textu. Niečo ako načítavacie obrazovky Skyrimu, hm? Sú to iba 3D modely v prázdnom svetovom priestore s lištou načítania.
V každom prípade musíme vytvoriť scénu Súbor> Nová scéna a pomenujte ho Ponuka pri jej ukladaní. Potom do procesu zostavenia pridáme obe scény. To sa deje prostredníctvom Súbor> Nastavenia zostavy .
Naša scéna menu by mala byť stále otvorená, takže stačí kliknúť na tlačidlo „Pridať aktuálnu“ a pridať scénu do svojej Nastavenia zostavy - urobte to znova s úrovňou scény.
Keď v hre zomrieme, skript, ktorý sme vytvorili, by nás mal preniesť z úrovne hry na scénu ponuky.
Pridajte pre hráčov tlačidlo „Štart“
Teraz sme schopní hrať hru v testovacom režime, ale odteraz už hráči nemajú možnosť hru spustiť, ak by sme túto hru niekde nahrali. Musíme si teda vytvoriť herné menu, ktoré má tlačidlo pre spustenie hry.
Prejdite teda na scénu ponuky hry a pridajte tento bit do fotoaparátu ( na paneli Inšpektor si pamätajte z pt. 1 tohto tutoriálu?).
- Jasné vlajky: plná farba
- Pozadie: # 000
- Šírka: 200
- Výška: 60
Získate tak plné čierne pozadie pre našu hernú ponuku - to sa deje v Hodnoty RGB , nie hex - takže modrá bude 001, zelená 010, červená 100 atď. Mohol by som to vysvetliť za vás, ale všetko, čo musíte urobiť, je Google „RGB picker“, ak chcete konkrétnu farbu.
Ak chcete pokračovať, musíme pridať naše tlačidlo na spustenie hry. To sa deje prostredníctvom Prvky používateľského rozhrania - v zásade môžeme pridať prvky používateľského rozhrania rovnakým spôsobom, ako pridávame prvky 3D, prostredníctvom Hierarchia panel. Takže do toho a vytvorte Tlačidlo UI , a v priečinku uvidíte niekoľko nových prvkov Hierarchia panel:
- EventSystem
- Plátno
- Tlačidlo
- Text
Ak to chcete rozdeliť - plátno je náš kontajner pre všetky prvky používateľského rozhrania a môžeme ho nastaviť tak, aby reagoval ( responzívnym myslím „prispôsobenie veľkosti obrazovky“, nie responzívnym, akoby odpovedal na vaše otázky. To je najlepšie ponechané na skripty AI). V každom prípade zmeníme polohu tlačidla na túto:
- Rect Transform {Poz X: 0, Poz Y: 0, Poz Z: 0}
- Rect Transform {Šírka: 200, Výška: 60}
Ak to chcete urobiť trochu elegantnejším, môžete odstrániť „zdrojový obrázok“ tlačidla a nastaviť jeho farbu. Ak chcete zmeniť text tlačidla, jednoducho upravte Text element na niečo ako „START GAME“ a dajte mu veľkosť písma okolo 16.
Aby sa gombík klikateľné , do skriptu UIController pridáme funkciu v Tlačidlo prvok. Stačí pridať tento kúsok kódu nižšie:
Použiť túto funkciu na tlačidlo Inšpektor nastavenia a v zozname Tlačidlo (skript) nastavenia komponentov, jednoducho pridáme funkciu, ktorá sa vykoná, keď hráč klikne na naše tlačidlo Štart. Takže stačí pridať funkciu do Po kliknutí() udalosti a pretiahnite tlačidlo Spustiť hru do vstupného poľa. Nakoniec vyberte novo vytvorenú funkciu zo skriptu UIController ( UIController.StartGame)
Túto funkciu môžeme použiť v tlačidle Inšpektor nastavenie. V nastaveniach komponentu Button (Script) môžeme vykonať funkciu, kedykoľvek na ňu hráč klikne. Za týmto účelom pridáme novú funkciu do udalosti On Click () kliknutím na ikonu + ikona. Teraz môžeme samotné tlačidlo presunúť do vstupného poľa. Potom zo skriptu UIController (UIController.StartGame) vyberieme funkciu, ktorú sme práve napísali.
Ako exportovať / publikovať ako hra prehliadača WebGL
Otvorte nastavenia zostavy a vyberte WebGL ako svoju cieľovú platformu. Teraz kliknite na ikonu Prepnúť platformu tlačidlo a nakoniec kliknite na ikonu Stavať a dať svojej hre názov. Po zostavení bude exportovaný / uložený ako súbor .HTML, ktorý je možné otvoriť / zobraziť v ľubovoľnom prehliadači s povoleným WebGL. Aj keď ak chcete zverejniť svojej hry, môžete to dosiahnuť dvoma spôsobmi:
- Nahrajte svoju hru na nejakého hostiteľa súboru (Dropbox, Disk Google atď.) A potom zdieľajte odkaz. To je užitočné pre malé ukážky ktoré chcete ukázať priateľom alebo potenciálnym klientom ( webové stránky herných portálov, ktoré buď kúpia vašu hru, alebo s vami nastavia výnosy z zdieľania reklám).
- Nahrajte svoju hru na server FTP, ktorý vlastníte, a vložte ju do