Vytváření her založených na prohlížeči v Unity WebGL může být docela obohacující - existuje mnoho webů herních portálů, které s vámi rozdělí příjmy z reklam, nebo od vás budou vaše hry nakupovat. Pokud jste talentovaní, můžete snadno vydělat několik tisíc dolarů měsíčně sdílením výnosů z reklam. Unity with WebGL is one of the best tools for this, and with WebVR plugins, you can also give your games VR support docela snadno.
Pokud vás tedy zajímá, jak vytvářet hry Unity WebGL, čtěte dále!
Požadavky
- Jednota
- Znalost HTML5 / JavaScript
- (Volitelné) Dobrý textový editor jako NotePad ++
Nejprve si stáhněte a nainstalujte Unity a nezapomeňte nainstalovat komponentu podpory WebGL.
Když se Unity spustí poprvé, věnujte chvíli zvyknutí si na uživatelské rozhraní a nabídky, zejména na Hierarchie panel - obsahuje všechny aktuální prvky scény. Je to v podstatě hlavní pohled na to, na čem pracujete, ať už jde o herní úroveň nebo hlavní nabídku.
Máte také Hra karta (pro testování hry uvnitř editoru) a vpravo je Inspektor panel. Zde lze upravovat prvky, například světla, herce atd.
Pokud kliknete na Směrové světlo Tlačítko v nabídce Hierarchie vám poskytne spoustu informací o tomto konkrétním světle a budete moci povolit / zakázat vrhané stíny.
Konečně máte Projekt okno v dolní části, které udržuje kartu souborů, které se používají k vytvoření projektu.
Poté, co se trochu seznámíte s uživatelským rozhraním, pokračujte a uložte aktuální scénu. Jít do Soubor> Uložit scénu a otevře se dialogové okno pro složku „Aktiva“. Při vývoji her je standardní praxí udržovat věci uspořádané do podsložek, proto vytvořte podsložku s názvem „ Scény “ a uložit do ní scénu.
Nyní vytvoříme něco opravdu jednoduchého - hru typu „plošinovka“, kde se naše postava bude jen hopsat kolem platforem. Pád znamená smrt. Děláme to v pohledu 3D / z pohledu první osoby, takže postava opravdu nemodeluje - ve skutečnosti použijeme pro naši postavu jednoduchý „sférický“ objekt, protože je nejjednodušší jej vytvořit.
Takže v Hierarchie klikněte na „Vytvořit“ a upravte tyto vlastnosti:
- Pozice {X: 0, Y: 2,5, Z: 0}
- Měřítko {X: 0,3, Y: 0,3, Z: 0,3}
Pokud stisknete Hrát si ”, Mělo by v pohledu kamery zobrazit jednoduchou kouli. Nyní chceme do naší „postavy“ přidat gravitaci a přeskočit fyziku.
Takže v Inspektor přidejte komponentu do koule a vyberte Rigidbody - také nechceme, aby sféra byla točit se , tak jděte do Constaints> vyberte všechny osy v Otáčení plocha.
Nyní musíme vytvořit nějakou platformu, aby naše postava nekonečně neklesla ve hře. Přidejte tedy kostku a nastavte Měřítko Y hodnota do 0,1 - nyní, pokud scénu znovu „přehrajete“, měla by naše postava „spadnout“ na kostku.
Nyní přidáme trochu fyziky, aby se naše postava trochu „odrazila“, když zasáhne platformu krychle. Musíme vytvořit nový fyzikální materiál a aplikovat ho na kouli, aby naše postava měla skákací vlastnosti.
Vytvořte novou podsložku v Aktiva adresář a pojmenujte jej jako „Materiály“ a poté vytvořte nový fyzikální materiál. Říkejte tomu „Bouncy_blob“ nebo jak chcete.
Nyní v Inspekce přidejte do skákacího materiálu tyto hodnoty:
- Dynamické tření: 10
- Static Fiction: 10
- Bounciness: 1
- Kombinace tření: Maximum
- Bounce Combine: Maximum
Měli bychom také přidat fyzikální materiál na plošinu pod naší koulí - to bude tak, že se naše koule bude odrážet s rostoucí výškou při každém odrazu. Vytvořte tedy další materiál a pojmenujte jej jako „Platform_bouncing“ a dejte mu hodnoty:
- Dynamické tření: 0,9
- Statická fikce: 0,9
- Bounciness: 1
- Kombinace tření: průměrná
- Bounce Combine: Násobení
Když nyní stisknete tlačítko „Přehrát“, všimnete si, že se naše postava při každém odrazu skáče výš.
Chcete-li na platformu přidat nějakou barvu / texturu, vytvořte nový materiál a klikněte na kartu „Albedo“, poté mu přidejte barvu. Tento materiál můžete přetáhnout na platformu a změní barvu.
Z pohledu první osoby stačí kameru přetáhnout do Hierarchie panel na naši sféru - to způsobí, že kamera bude neustále sledovat náš charakter. Tento předpoklad zůstává stejný pro jakýkoli druh hry Unity z pohledu první osoby - ale pokud vytváříte hru FPS pro více hráčů jako Vůdce Strike , Stane se trochu pokročilejším, protože u každého modelu budete mít nastaveno několik kamer.
V každém případě musíte kameru upravit takto:
- Pozice {X: 0, Y: 1, Z: 0}
- Otočení {X: 90, Y: 0, Z: 0}
- Měřítko {X: 2,5, Y: 2,5, Z: 2,5}
- Jasné vlajky: plná barva
- Pozadí: # 000
- Zorné pole: 80.3
Nyní, abychom získali pocit „perspektivy“ výšky skoku, přidáme reflektor. Vylepšete tedy hodnoty reflektorů na:
- Otočení {X: 90, Y: 0, Z: 0}
Nyní chceme naprogramovat ovládací prvky hry, abychom mohli pomocí myši ovládat pohyb postavy. Potřebujeme k tomu skript.
V Projekty přidejte novou složku a pojmenujte ji „Skripty“. Nyní přidejte JavaScript do Fotoaparát pojmenujte jej „InputController“ a také jej přidejte do složky „Skripty“, kterou jste právě vytvořili. Když nyní dvakrát kliknete na skript, můžete upravit jeho vlastnosti.
Když otevřete skript ve výchozím editoru skriptů Unity, měl by vypadat takto:
Takže chceme, aby proměnná „GameObject“ odkazovala na naši postavu - za tímto účelem můžete jednoduše přepnout zpět na zobrazení kamery Unity a přetáhnout naši sféru do vstupního pole.
Nyní chceme přiřadit polovina šířky a výšky obrazovky do funkce Start. Upravte tedy skript tak, aby vypadal takto:
Takže nyní potřebujeme pouze hodnoty myši (vždy, když je hráč pohne). Abychom toho dosáhli, budeme muset zavolat funkci Update. Upravte tedy skript pod proměnnou Update:
Abychom to trochu vysvětlili, proměnné X a Z jsou pro osu ovladače - chceme, aby tyto manipulovaly s pozicí naší postavy, když do hry posíláme vstup ovladače. Musíme odkazovat na proměnnou Input.mousePosition, která nám dává 2D vektor. Tento 2D vektor je třeba přidat do našeho sledování koordinace, takže budeme volat funkci setHeroPosition s hodnotami jako argumenty.
Vytvořte tedy nový skript, zavolejte jej HeroController a připojte ji k naší sféře / charakteru. Upravte skript tak, aby vypadal takto:
Nyní, když stisknete tlačítko „Přehrát“, byste měli být schopni procházet postavu kolem platformy pomocí myši a dokonce spadnout z platformy! Naším konečným cílem je vytvořit podobnou plošinovou hru Krátký život , Takže tuto hru podrobněji rozvedeme v dalším průvodci.
Tím končí základní základy vytváření velmi jednoduché hry v Unity - v další části této příručky si ukážeme, jak přidat další scenérie na úroveň, přidat herní nabídku a exportovat vše na web pomocí WebGL , pro hraní v prohlížeči.
Vytváření procedurálních platforem
V první části tohoto tutoriálu jsme tedy vytvořili základní platformu, na kterou se vaše postava může odrazit ( a spadnou do jejich zkázy) - ale pro opravdovou plošinovku musíme přidat další platformy. Ale nechceme přidat milion platforem - chceme, aby Unity automaticky vytvořit platformy se odrazí.
K tomu potřebujeme šablonu platformy - jinak známou jako „prefab“. Montovaná je zkratka prefabrikovaný, a jednoduše to znamená „předem vyrobený“ - obvykle kopie herního objektu, který můžete znovu a znovu použít. Panely mohou ve skutečnosti obsahovat hierarchie herních objektů, což znamená, že byste mohli „prefabrikovat“ celou scénu herních objektů.
Co tedy musíte udělat, je vytvořit novou složku majetku s názvem Montované domy , pak přetáhněte naši platformu z Hierarchie panel do této nové složky. Prefabriky budou na panelu Hierarchie rozpoznatelné podle modré barvy.
Nyní, abychom dali Unity pokyn k vytvoření procedurálních platforem, musíme vytvořit skript s názvem GameManager a připojit jej ke kameře. Skripty GameManager v zásadě obsahují důležité pokyny, které má engine přenést do hry - v tomto případě to bude generování platforem, jak se bude naše postava chovat.
Důvod, proč jej připojujeme ke kameře, je ten, že kamera není nikdy zničena a zůstává konstantní - takže skript není nikdy zničen a zůstává konstantní připojením k ní.
Do skriptu je třeba zahrnout toto:
Abychom tento kód trochu vysvětlili, je nutné, abychom vytvořili odkaz jak na panelák, tak na kouli (náš znak), takže je musíte přetáhnout do příslušných slotů v editoru.
Tento kód obsahuje také tři soukromé proměnné - řádky, které začínají soukromá var. Ty vytvoří instanci (odkaz) na panelák následujícími způsoby:
- Hranice soukromé var: float stanoví limit na ose y, takže když naše postava skočí vyšší než tato hranice, bude vytvořen nový panel.
- Rotace soukromých var: Quaternion; jednoduše přidá nezbytnou rotaci k vytvoření instance našich montovaných staveb - my však přidáváme rotace = Quaternion.identify; protože to dává motoru pokyn, aby neotáčel herním objektem. Objekt (naše panelové panely) bude doslova „dokonale vyrovnán“ se světem.
- Konečná soukromá proměnná lastPlatformPosition si zapamatuje a uloží pozici poslední platformy jako 3D vektor (platformy v zásadě nezmizí za vámi, takže pokud chcete, můžete se v herním světě vrátit zpět).
V této další části skriptu přidáme šek každý snímek ať už je naše sféra (znak) nad hranicí (která generuje nové platformy) - pokud je naše postava nad hranicí, budeme zvýšit mezní hranici vytvořit nový panel / platformu vyšší než ta předchozí.
Naším dalším krokem je přidání kódu, který určuje další pozici panelu:
Používáme dělat, zatímco smyčka v tomto kódu, aby bylo zajištěno, že hodnoty X a Z vektoru (jeho pozice ve světě hry) nejsou totožné s předchozími platformami - takže naše procedurálně generované platformy budou vždy narůstat do výšky.
Samozřejmě nechceme, aby tyto hodnoty byly přísně umístěno - trochu náhodnosti je dobrá věc, jinak vytváříme jen dokonalé schodiště. Takže používáme Náhodně. Rozsah funkce, mezi hodnotami -1 a 2, pro volání náhodných hodnot pro X a Z. S těmito čísly si můžete trochu pohrát, pokud se chcete oklamat.
Vytvoření nabídky hry
Zatím jsme vytvořili „hru“, kde můžete skákat s rostoucí výškou a pohybovat myší po směru jízdy. Problém je v tom, že pokud spadnete z platformy, budete padat donekonečna - pro začátek musíme skriptovat v nabídce „smrt“ / hry.
Takže v podstatě napíšeme skript, který zkontroluje, zda naše sféra (znak) neklesne pod první platforma hry . Pokud ano, skript načte novou scénu.
Naším prvním krokem bude zkontrolovat, zda koule neklesla pod určitou prahovou hodnotu. Jděte do GameManager skript, který jsme vytvořili dříve, a podívejte se na -li prohlášení Aktualizace funkce.
Budeme používat jinak pokud prohlášení zde, abychom zkontrolovali, zda je pozice naší koule pod -2,0 jednotkami pozice Y - pokud ano, naše soukromá funkce konec hry bude ... no, ten kousek skriptu je samozřejmý.
Tím posledním kouskem skriptu je funkce, která se má použít pro zpracování stavu „konec hry“ a načtení naší nabídky hry.
To se vrací k jednotě aplikace třída - jsme schopni zavolat LoadLevel funkce, která přinese novou scénu, což je v tomto případě jednoduše naše herní menu - pamatujte, že v podstatě vše v Unity je „level“. Hlavní nabídky (Start Game - Options - Credits - Atd.) Jsou v zásadě jen úrovně / scény s kousky klikatelného textu. Něco jako načítání obrazovek Skyrim, hm? Jsou to jen 3D modely v prázdném světovém prostoru s pruhem načítání.
V každém případě musíme vytvořit scénu Soubor> Nová scéna a pojmenujte jej Jídelní lístek při ukládání. Pak přidáme obě scény do procesu sestavení. To se děje prostřednictvím Soubor> Nastavení sestavení .
Naše scéna nabídky by měla být stále otevřená, takže stačí kliknout na tlačítko „Přidat aktuální“ a přidat scénu do vaší Nastavení sestavení - udělejte to znovu s úrovní scény.
Když ve hře zemřeme, skript, který jsme vytvořili, by nás měl převést z úrovně hry na scénu nabídky.
Přidejte tlačítko „Start“ pro hráče
Nyní jsme schopni hrát hru v testovacím režimu, ale nyní hráči nemají možnost hru spustit, pokud bychom tuto hru někde nahráli. Musíme tedy vytvořit herní nabídku, která má tlačítko pro spuštění hry.
Přepněte tedy na scénu nabídky hry a přidejte tento bit do kamery ( v panelu Inspektor si pamatujte z pt. 1 tohoto tutoriálu?).
- Jasné vlajky: plná barva
- Pozadí: # 000
- Šířka: 200
- Výška: 60
Získáte tak plné černé pozadí pro naše herní menu - to se děje v Hodnoty RGB , ne hex - takže modrá bude 001, zelená 010, červená 100 atd. Mohl bych vám to vysvětlit, ale vše, co musíte udělat, je Google „RGB picker“, pokud chcete konkrétní barvu.
Abychom mohli pokračovat, musíme přidat tlačítko pro spuštění hry. To se děje prostřednictvím Prvky uživatelského rozhraní - v zásadě můžeme přidat prvky uživatelského rozhraní stejným způsobem, jako přidáváme prvky 3D, prostřednictvím Hierarchie panel. Takže do toho a vytvořte Tlačítko uživatelského rozhraní , a uvidíte několik nových prvků v Hierarchie panel:
- EventSystem
- Plátno
- Knoflík
- Text
Chcete-li to rozebrat - plátno je náš kontejner pro všechny prvky uživatelského rozhraní a můžeme ho přizpůsobit ( responzivní mám na mysli „škálování na velikost obrazovky“, nereagující, jako by odpovídalo na vaše dotazy. To je nejlepší ponechat skriptům AI). V každém případě změníme polohu tlačítka na tuto:
- Rect Transform {Pos X: 0, Pos Y: 0, Pos Z: 0}
- Rect Transform {Šířka: 200, Výška: 60}
Aby to bylo trochu elegantnější, můžete odebrat „zdrojový obrázek“ tlačítka a nastavit jeho barvu. Chcete-li změnit text tlačítka, stačí upravit Text prvek na něco jako „ZAHÁJTE HRU“ a přidejte mu velikost písma kolem 16.
Chcete-li tlačítko klikatelné , do skriptu UIController přidáme funkci v Knoflík živel. Stačí přidat tento bit kódu níže:
Použijte tuto funkci na tlačítka Inspektor nastavení a v Tlačítko (skript) nastavení komponent, jednoduše přidáme funkci, která se spustí, když hráč klikne na naše tlačítko Start. Stačí tedy přidat funkci do Při kliknutí() událost a přetáhněte tlačítko Spustit hru do vstupního pole. Nakonec vyberte nově vytvořenou funkci ze skriptu UIController ( UIController.StartGame)
Tuto funkci můžeme použít u tlačítka Inspektor nastavení. V nastavení komponenty Button (Script) můžeme spustit funkci, kdykoli na ni hráč klikne. Za tímto účelem přidáme do události On Click () novou funkci kliknutím na + ikona. Nyní můžeme přetáhnout samotné tlačítko do vstupního pole. Pak vybereme funkci, kterou jsme právě napsali ze skriptu UIController (UIController.StartGame).
Jak exportovat / publikovat jako hru prohlížeče WebGL
Otevřete nastavení sestavení a vyberte WebGL jako cílová platforma. Nyní klikněte na Přepnout platformu tlačítko a nakonec klikněte na Stavět a přidejte své hře název. Po sestavení bude exportován / uložen jako soubor HTML, který lze otevřít / zobrazit v libovolném prohlížeči s podporou WebGL. I když chcete publikovat své hry, můžete toho dosáhnout dvěma způsoby:
- Nahrajte hru na nějakého hostitele souborů (Dropbox, Disk Google atd.) A poté sdílejte odkaz. To je užitečné pro malé ukázky chcete ukázat přátelům nebo potenciálním klientům ( webové stránky herních portálů, které vaši hru buď zakoupí, nebo s vámi nastaví příjem z sdílení reklam).
- Nahrajte svou hru na server FTP, který vlastníte, a vložte ji do