Het maken van browsergebaseerde games in Unity WebGL kan behoorlijk lonend zijn - er zijn veel gameportal-websites die de advertentie-inkomsten met u zullen verdelen, of die uw games rechtstreeks bij u kopen. Als u getalenteerd bent, kunt u gemakkelijk enkele duizenden dollars per maand aan advertentie-inkomsten verdienen. Eenheid met WebGL is hiervoor een van de beste tools, en met WebVR-plug-ins kun je je games ook vrij gemakkelijk VR-ondersteuning geven.
Dus als je je afvraagt hoe je Unity WebGL-games kunt maken, lees dan verder!
Vereisten
- Eenheid
- HTML5 / JavaScript-kennis
- (Optioneel) Een goede teksteditor zoals Kladblok ++
Download en installeer om te beginnen Unity en zorg ervoor dat u de WebGL-ondersteuningscomponent installeert.
Als Unity voor de eerste keer start, neem dan even de tijd om te wennen aan de gebruikersinterface en menu's, vooral het Hiërarchie paneel - dit bevat alle huidige scène-elementen. Het is in feite de hoofdweergave van waar je ook aan werkt, of het nu een spelniveau is of het hoofdmenu.
Je hebt ook de Spel tabblad (voor het testen van het spel in de editor), en aan de rechterkant is het Inspecteur paneel. Hier kunnen elementen worden bewerkt, bijvoorbeeld lichten, acteurs, etc.
Als u op het Gericht licht -knop in het hiërarchiemenu, het geeft je een heleboel informatie over dit specifieke licht, en je kunt de schaduwen die eruit geworpen worden in- / uitschakelen.
Eindelijk heb je de Project venster onderaan, dat alleen een tabblad bijhoudt van de bestanden die worden gebruikt om uw project te maken.
Nadat u zich een tijdje vertrouwd heeft gemaakt met de gebruikersinterface, kunt u de huidige scène opslaan. Ga naar Bestand> Scène opslaan en het zal een dialoogvenster openen voor een map 'Activa'. Het is een standaardpraktijk om dingen georganiseerd te houden in submappen bij het ontwikkelen van games, dus maak een submap met de naam ' Scènes ' en sla de scène erin op.
Nu gaan we iets heel eenvoudigs maken: een 'platformgame'-game, waarbij ons personage gewoon rond platforms springt. Vallen betekent dood. We doen dit in 3D / first-person-weergave, dus een personage modelleert echt niet - in feite gaan we gewoon een eenvoudig 'bol'-object gebruiken voor ons personage, omdat dit het eenvoudigste is om te maken.
Dus in de Hiërarchie paneel, klik op 'Maken' en bewerk deze eigenschappen:
- Positie {X: 0, Y: 2,5, Z: 0}
- Schaal {X: 0,3, Y: 0,3, Z: 0,3}
Als u op de ' Speel ”-Knop moet een eenvoudige bol in de cameraweergave worden weergegeven. Nu willen we zwaartekracht en sprongfysica aan ons 'personage' toevoegen.
Dus in de Inspecteur paneel, voeg een component toe aan de bol en kies Stijf lichaam - ook, we willen niet dat de bol dat doet draaien , dus ga naar Constaints> kies alle assen in het Rotatie Oppervlakte.
Nu moeten we een soort platform creëren zodat ons personage niet eindeloos door het spel valt. Dus voeg een kubus toe en stel de Schaal Y waarde aan 0.1 - als je de scène nu opnieuw 'speelt', zou ons personage op de kubus moeten 'vallen'.
Nu gaan we wat fysica toevoegen, zodat ons personage een beetje zal 'stuiteren' wanneer hij het kubusplatform raakt. We moeten een nieuw natuurkundig materiaal maken en dit op de bol toepassen om ons karakter veerkrachtige eigenschappen te geven.
Maak een nieuwe submap in het Middelen directory en noem het zoiets als 'Materialen', en maak vervolgens een nieuw natuurkundig materiaal. Noem het 'Bouncy_blob' of wat je maar wilt.
Nu in de Inspectie paneel, voeg deze waarden toe aan het veerkrachtige materiaal:
- Dynamische wrijving: 10
- Statische fictie: 10
- Bounciness: 1
- Wrijvingscombinatie: maximaal
- Bounce Combineren: maximaal
We zouden ook een fysisch materiaal moeten toevoegen aan het platform onder onze bol - dit zal zijn zodat onze bol bij elke sprong met toenemende hoogte zal stuiteren. Dus maak een ander materiaal en noem het zoiets als 'Platform_bouncing', en geef het de waarden van:
- Dynamische wrijving: 0.9
- Statische fictie: 0.9
- Bounciness: 1
- Wrijving combineren: gemiddeld
- Bounce Combineren: vermenigvuldigen
Als je nu op de 'Play' -knop drukt, zul je merken dat ons personage bij elke sprong hoger stuitert.
Om wat kleur / textuur aan het platform toe te voegen, maakt u een nieuw materiaal aan en klikt u op het tabblad 'Albedo', en geeft u het een kleur. U kunt dit materiaal naar het platform slepen en neerzetten en het zal van kleur veranderen.
Voor een first-person-perspectief hoeft u alleen maar de camera in het Hiërarchie paneel op onze bol - hierdoor zal de camera ons karakter te allen tijde volgen. Dit uitgangspunt blijft hetzelfde voor elk soort first-person Unity-game, maar als je een multiplayer FPS-game maakt zoals Leader Strike , Wordt het iets geavanceerder, omdat je meerdere camera's per model hebt ingesteld.
Je moet de camera in ieder geval als volgt bewerken:
- Positie {X: 0, Y: 1, Z: 0}
- Rotatie {X: 90, Y: 0, Z: 0}
- Schaal {X: 2,5, Y: 2,5, Z: 2,5}
- Duidelijke vlaggen: effen kleur
- Achtergrond: # 000
- Gezichtsveld: 80.3
Om ons een gevoel van 'perspectief' op springhoogte te geven, zullen we een spotlight toevoegen. Dus tweak de schijnwerpers naar:
- Rotatie {X: 90, Y: 0, Z: 0}
Nu willen we de besturing van het spel programmeren, zodat we onze muis kunnen gebruiken om de bewegingen van het personage te besturen. Hiervoor hebben we een script nodig.
In de Projecten paneel, voeg een nieuwe map toe en noem deze 'Scripts'. Voeg nu een JavaScript toe aan het Camera en noem het 'InputController', en voeg het ook toe aan de map 'Scripts' die u zojuist hebt gemaakt. Als u nu dubbelklikt op het script, kunt u de eigenschappen ervan bewerken.
Als je het script opent in de standaard scripteditor van Unity, zou het er als volgt uit moeten zien:
Dus we willen dat de 'GameObject' -variabele verwijst naar ons personage - hiervoor kun je eenvoudig terugschakelen naar de Unity-cameraweergave en onze bol naar het invoerveld slepen / neerzetten.
Nu willen we toewijzen voor de helft van de schermbreedte en -hoogte naar de startfunctie. Dus bewerk het script om er als volgt uit te zien:
Dus nu hebben we alleen de muiswaarden nodig (voor elke keer dat deze door de speler wordt verplaatst). Hiervoor zullen we een beroep moeten doen op de Update-functie. Dus tweak het script onder de Update-variabele:
Om een beetje uit te leggen, de variabelen X en Z zijn voor de controller-as - we willen dat deze de positie van ons personage manipuleren wanneer we controller-input naar het spel sturen. We moeten verwijzen naar de variabele Input.mousePosition, die ons een 2D-vector geeft. Deze 2D-vector moet worden toegevoegd aan onze coördinatietracking, dus we noemen een functie setHeroPosition met de waarden als argumenten.
Dus maak een nieuw script, noem het HeroController en hecht het aan onze sfeer / karakter. Bewerk het script om er als volgt uit te zien:
Als je nu op de 'Play' -knop drukt, zou je met je muis door het personage over het platform moeten kunnen navigeren en zelfs van het platform moeten kunnen vallen! Ons einddoel is om een platformgame te maken die lijkt op Kort leven , Dus we zullen dit spel in de volgende gids wat meer uitwerken.
Dat is het einde van de basisprincipes van het maken van een heel eenvoudige gameplay in Unity - in het volgende deel van deze gids gaan we bekijken hoe je meer landschap aan het level kunt toevoegen, een gamemenu kunt toevoegen en alles naar een website kunt exporteren met WebGL. , om in een browser te spelen.
Procedurele platforms creëren
Dus in deel een van deze tutorial hebben we zojuist een basisplatform gemaakt waarop je personage kan rondstuiteren ( en vallen af naar hun ondergang) - maar voor een echte platformgame moeten we extra platforms toevoegen. Maar we willen geen miljoen platforms toevoegen - we willen dat Unity dit automatisch doet creëren platforms terwijl ons personage voortstuitert.
Hiervoor hebben we een platformsjabloon nodig - ook wel bekend als een “prefab”. Prefab is een afkorting van geprefabriceerd, en het betekent gewoon 'vooraf gemaakt' - meestal een kopie van een game-object dat je steeds opnieuw kunt gebruiken. In feite kunnen prefabs hiërarchieën van game-objecten, wat betekent dat je een hele scène met game-objecten kunt 'prefabriceren'.
Dus wat u moet doen, is een nieuwe activamap maken met de naam Prefabs , en versleep ons platform vervolgens vanaf het Hiërarchie paneel in deze nieuwe map. Prefabs zijn in het hiërarchiepaneel herkenbaar aan de kleur blauw.
Om Unity nu te instrueren procedurele platforms te maken, moeten we een script met de naam GameManager maken en dit aan de camera koppelen. GameManager-scripts bevatten in feite belangrijke instructies voor de engine om door te geven aan de gameplay - in dit geval genereert het platforms terwijl ons personage verder springt.
De reden dat we het aan de camera bevestigen, is omdat de camera nooit wordt vernietigd en constant blijft - dus het script wordt nooit vernietigd en blijft constant door eraan vast te maken.
Dit is wat er in het script moet worden opgenomen:
Om deze code een beetje uit te leggen, is het nodig dat we een verwijzing maken naar zowel het prefabpaneel als de bol (ons personage), dus je moet ze naar hun specifieke slots in je editor slepen en neerzetten.
Deze code bevat ook drie privévariabelen: de regels die beginnen met privé var. Deze zullen het prefabpaneel op de volgende manieren instantiëren (verwijzen naar):
- Private var-grens: zweven plaatst een limiet op de y-as, dus wanneer ons personage springt hoger dan deze grens, wordt een nieuw paneel gemaakt.
- Private var-rotatie: Quaternion; voegt gewoon een noodzakelijke rotatie toe om onze prefabs te instantiëren, maar we voegen rotatie = Quaternion.identify; omdat dit instrueert de motor om het spelobject niet te roteren. Het object (onze prefab panelen) wordt letterlijk “perfect uitgelijnd” met de wereld.
- De laatste privévariabele lastPlatformPosition onthoudt en slaat de positie van het laatste platform op als een 3D-vector (in feite verdwijnen de platforms niet achter je, dus je kunt desgewenst achteruit door de gamewereld gaan).
In dit volgende stukje script gaan we een vinkje toevoegen voor elk frame of onze bol (karakter) zich boven de grens bevindt (dat genereert nieuwe platforms) - als ons karakter zich boven de grens bevindt, zullen we verhoog de grensgrens om een nieuw paneel / platform te maken dat hoger is dan het vorige.
Onze volgende stap is het toevoegen van code die de volgende paneelpositie bepaalt:
We gebruiken een doen terwijl loop deze code in om ervoor te zorgen dat de X- en Z-waarden van de vector (de positie in de gamewereld) niet identiek zijn aan de vorige platforms - dus onze procedureel gegenereerde platforms zullen altijd in hoogte toenemen.
We willen natuurlijk niet dat deze waarden dat zijn strikt geplaatst - een beetje willekeur is een goede zaak, anders maken we gewoon een perfecte trap. Dus we gebruiken de Willekeurig bereik functie, tussen waarden -1 en 2, om willekeurige waarden voor X en Z aan te roepen. Je kunt een beetje met deze getallen spelen als je voor de gek wilt houden.
Een spelmenu maken
Tot nu toe hebben we een 'spel' gemaakt waarin je kunt springen met toenemende hoogte en de muis kunt bewegen om de richting te bepalen. Het probleem is dat als je van het platform valt, je eindeloos zult vallen - we moeten scripten in een 'death' / game-menu om opnieuw te beginnen.
Dus eigenlijk schrijven we een script dat controleert of onze bol (karakter) eronder valt het eerste platform van het spel . Als dit het geval is, laadt het script een nieuwe scène.
Onze eerste stap zal zijn om te controleren of de bol onder een bepaalde drempel is gedaald. Ga naar het GameManager script dat we eerder hebben gemaakt en kijk naar het als verklaring van de bijwerken functie.
We gaan een anders als verklaring hier, om te controleren of de positie van onze bol lager is dan -2,0 eenheden van de Y-positie - als dat zo is, onze privéfunctie spel is over zal ... nou, dat stukje script spreekt voor zich.
Dat laatste stukje script is de functie die moet worden gebruikt om een 'game over' -status af te handelen en ons gamemenu te laden.
Dit verwijst naar Unity's Toepassing klas - we kunnen de LoadLevel functie om een nieuwe scène naar voren te brengen, wat in dit geval gewoon ons gamemenu is - onthoud dat eigenlijk alles in Unity 'levels' is. Hoofdmenu's (Start Game - Opties - Credits - Enz.) Zijn in feite gewoon levels / scènes met stukjes aanklikbare tekst. Een beetje zoals de laadschermen van Skyrim, hè? Het zijn gewoon 3D-modellen in een lege wereldruimte met een laadbalk.
In ieder geval moeten we een scène maken door Bestand> Nieuwe scène , en geef het de naam Menu terwijl u het opslaat. Vervolgens gaan we beide scènes toevoegen aan het bouwproces. Dit wordt gedaan door Bestand> Build-instellingen .
Onze menu scene zou nog steeds open moeten zijn, dus klik gewoon op de 'Add Current' knop en voeg de scene toe aan je Build-instellingen - doe dit opnieuw met de levelscène.
Als we sterven in het spel, zou het script dat we hebben gemaakt ons moeten overzetten van het spelniveau naar de menuscène.
Voeg een 'Start' -knop toe voor spelers
Nu kunnen we de game in een testmodus spelen, maar vanaf nu kunnen spelers de game niet starten als we deze game ergens zouden uploaden. We moeten dus een spelmenu maken met een knop om het spel te starten.
Schakel dus over naar de scène met het gamemenu en voeg dit bit toe aan de camera ( in het inspectievenster, onthoud uit pt. 1 van deze tutorial?).
- Duidelijke vlaggen: effen kleur
- Achtergrond: # 000
- Breedte: 200
- Hoogte: 60
Dit geeft ons een stevige zwarte achtergrond voor ons gamemenu - dit wordt gedaan in RGB-waarden , niet hex - dus blauw zou 001 zijn, groen is 010, rood is 100, enz. Ik zou dit voor je kunnen uitleggen, maar het enige wat je hoeft te doen is Google 'RGB-picker' als je een specifieke kleur wilt.
Verderop moeten we onze knop toevoegen om het spel te starten. Dit wordt gedaan door UI-elementen - in feite kunnen we UI-elementen op dezelfde manier toevoegen als 3D-elementen, via de Hiërarchie paneel. Dus ga je gang en maak een UI-knop , en je ziet een aantal nieuwe elementen in het Hiërarchie paneel:
- EventSystem
- Canvas
- Knop
- Tekst
Om dit op te splitsen - de canvas is onze container voor alle UI-elementen, en we kunnen deze responsive maken ( met responsive bedoel ik 'schalen naar schermgrootte', niet responsive zoals het beantwoordt de vragen die je stelt. Dat kan het beste worden overgelaten aan AI-scripts). We gaan de positie van de knop in ieder geval als volgt wijzigen:
- Rechtstreekse transformatie {Pos X: 0, Pos Y: 0, Pos Z: 0}
- Rect Transform {Breedte: 200, Hoogte: 60}
Om dit wat eleganter te maken, kun je de 'bronafbeelding' van de knop verwijderen en er een kleur voor instellen. En om de tekst van de knop te wijzigen, bewerkt u gewoon het Tekst element in zoiets als 'START GAME', en geef het een lettergrootte rond de 16.
Om de knoop te maken klikbaar , voegen we een functie toe aan het UIController-script in het Knop element. Voeg gewoon dit stukje code hieronder toe:
Pas deze functie toe op de knoppen Inspecteur instellingen, en in de Knop (script) componentinstellingen, zullen we eenvoudig een functie toevoegen die wordt uitgevoerd wanneer de speler op onze Start-knop klikt. Dus voeg gewoon een functie toe aan het Bij klikken() evenement en sleep de knop Start Game naar het invoerveld. Selecteer ten slotte de nieuw gemaakte functie uit het UIController-script ( UIController.StartGame)
We kunnen deze functie toepassen in de knoppen Inspecteur instellingen. In de componentinstellingen van de Button (Script) kunnen we een functie uitvoeren wanneer een speler erop klikt. Hiervoor voegen we een nieuwe functie toe aan de On Click () gebeurtenis, door op de + icoon. Nu kunnen we de knop zelf naar het invoerveld slepen en neerzetten. Vervolgens selecteren we de functie die we zojuist hebben geschreven vanuit het UIController-script (UIController.StartGame).
Exporteren / publiceren als een WebGL-browsergame
Open de build-instellingen en kies WebGL als uw doelplatform. Klik nu op het Schakel van platform en klik ten slotte op de Bouwen knop en geef je spel een titel. Nadat het is opgebouwd, wordt het geëxporteerd / opgeslagen als een .HTML-bestand, dat kan worden geopend / bekeken in elke WebGL-compatibele browser. Hoewel als je dat wilt publiceren je spel zijn er twee methoden om dit te bereiken:
- Upload je game naar een soort bestandshost (Dropbox, Google Drive, enz.) En deel de link. Dit is handig voor kleine demo's je wilt laten zien aan vrienden of potentiële klanten ( gameportaalwebsites die uw game kopen of inkomsten uit advertentiedelen met u opzetten).
- Upload je game naar een FTP-server die je bezit en sluit deze in een