Naršyklės žaidimų kūrimas „Unity WebGL“ gali būti gana naudingas - yra daugybė žaidimų portalų svetainių, kurios padalins skelbimų pajamas su jumis arba iš karto pirks jūsų žaidimus. Jei esate talentingas, galite lengvai uždirbti kelis tūkstančius dolerių per mėnesį iš skelbimų pajamų dalies. „Unity with WebGL“ yra vienas iš geriausių įrankių tam, o naudodami „WebVR“ papildinius taip pat galite gana lengvai suteikti savo žaidimams VR palaikymą.
Taigi, jei jums įdomu, kaip sukurti „Unity WebGL“ žaidimus, skaitykite toliau!
Reikalavimai
- Vienybė
- HTML5 / „JavaScript“ žinios
- (Pasirenkama) Geras teksto redaktorius, pvz „NotePad ++“
Norėdami pradėti, atsisiųskite ir įdiekite „Unity“ ir būtinai įdiekite „WebGL“ palaikymo komponentą.
Kai „Unity“ startuoja pirmą kartą, skirkite minutę laiko, kad apsiprastumėte su vartotojo sąsaja ir meniu, ypač su Hierarchija skydelis - jame yra visi dabartiniai scenos elementai. Iš esmės tai yra pagrindinis vaizdas, ką dirbate, ar tai būtų žaidimo lygis, ar pagrindinis meniu.
Jūs taip pat turite Žaidimas skirtuką (norint išbandyti žaidimą redaktoriaus viduje), o dešinėje - Inspektorius skydelyje. Čia galima redaguoti elementus, pavyzdžiui, šviesas, aktorius ir kt.
Jei spustelėsite Kryptinė šviesa Hierarchijos meniu mygtukas suteiks jums daug informacijos apie šią šviesą ir galėsite įjungti / išjungti iš jos metamus šešėlius.
Galiausiai, jūs turite Projektas apačioje esančiame lange, kuriame laikomas failų, naudojamų kuriant jūsų projektą, skirtukas.
Šiek tiek susipažinę su vartotojo sąsaja, išsaugokite dabartinę sceną. Eiti į Failas> Išsaugoti sceną ir jis atidarys aplanką „Turtas“ dialogo langą. Kuriant žaidimus viskas yra sutvarkyta į poaplankius, todėl sukurkite poaplankį pavadinimu „ Scenos “ ir išsaugokite sceną joje.
Dabar mes sukursime ką nors tikrai paprasto - „platformingo“ tipo žaidimą, kuriame mūsų personažas tiesiog laksto aplink platformas. Kristi reiškia mirtį. Tai darysime 3D / pirmo asmens vaizde, todėl personažas tikrai nemodeliuoja - iš tikrųjų mes tiesiog naudosime savo personažui paprastą „sferos“ objektą, nes jį sukurti yra paprasčiausia.
Taigi Hierarchija skydelyje spustelėkite „Sukurti“ ir redaguokite šias ypatybes:
- Padėtis {X: 0, Y: 2,5, Z: 0}
- Mastelis {X: 0,3, Y: 0,3, Z: 0,3}
Jei paspausite žaisti “Mygtukas, jis turėtų rodyti paprastą sferą kameros vaizde. Dabar mes norime pridėti gravitaciją ir peršokti fiziką į savo „personažą“.
Taigi Inspektorius skydelyje pridėkite komponentą prie sferos ir pasirinkite Tvirtas kūnas - taip pat, mes nenorime sferos pasukti , todėl eikite į Constaints> pasirinkite visas ašis Sukimas srityje.
Dabar turime sukurti tam tikrą platformą, kad mūsų personažas nesibaigtų be galo per žaidimą. Taigi pridėkite kubą ir nustatykite Mastelis Y vertė į 0.1 - Dabar, jei jūs vėl „žaisite“ sceną, mūsų personažas turėtų „nukristi“ ant kubo.
Dabar mes pridėsime šiek tiek fizikos, kad mūsų personažas šiek tiek 'atsimuštų', kai jis pasiekia kubo platformą. Turime sukurti naują fizikos medžiagą ir pritaikyti ją sferoje, kad mūsų personažas pasižymėtų atšokusiomis savybėmis.
Sukurkite naują aplanką Turtas katalogą ir pavadinkite jį panašiai kaip „Medžiagos“, tada sukurkite naują fizikos medžiagą. Pavadink tai „Bouncy_blob“ ar kaip tik nori.
Dabar Inspekcija skydelyje pridėkite šias vertes prie atšokusios medžiagos:
- Dinaminė trintis: 10
- Statinė grožinė literatūra: 10
- Atšokimas: 1
- Trinties kombainas: maksimalus
- „Bounce Combine“: maksimalus
Mes taip pat turėtume pridėti fizikos medžiagą prie platformos, esančios po mūsų sfera - taip bus, kad mūsų sfera atsimuštų didėjant kiekvienam smūgiui. Taigi sukurkite kitą medžiagą ir pavadinkite ją kaip „Platform_bouncing“ ir suteikite jai vertes:
- Dinaminė trintis: 0.9
- Statinė grožinė literatūra: 0,9
- Atšokimas: 1
- Trinties kombainas: vidutinis
- „Bounce Combine“: padauginkite
Dabar, kai paspausite mygtuką „Paleisti“, pastebėsite, kad mūsų personažas šokinėja aukščiau už kiekvieną atšokimą.
Norėdami pridėti šiek tiek spalvų / tekstūros į platformą, sukurkite naują medžiagą ir spustelėkite skirtuką „Albedo“, tada suteikite jai spalvą. Galite vilkti ir numesti šią medžiagą ant platformos, ir ji pakeis spalvą.
Jei norite pažvelgti į pirmąjį asmenį, jums tereikia nuvilkti fotoaparatą į Hierarchija skydelį į mūsų sferą - tai leis kamerai visą laiką sekti mūsų personažą. Ši prielaida išlieka ta pati bet kokio tipo pirmojo asmens „Unity“ žaidime, bet jei kuriate daugelio žaidėjų FPS žaidimą, pvz., Lyderis Streikas , Jis tampa šiek tiek pažangesnis, nes kiekviename modelyje turėsite keletą kamerų.
Bet kuriuo atveju turite redaguoti fotoaparatą taip:
- Pozicija {X: 0, Y: 1, Z: 0}
- Pasukimas {X: 90, Y: 0, Z: 0}
- Mastelis {X: 2,5, Y: 2,5, Z: 2,5}
- Aiškios vėliavos: vientisa spalva
- Fonas: # 000
- Matymo laukas: 80.3
Norėdami suteikti mums „perspektyvos“ jausmą šuolio aukštyje, mes pridėsime prožektorių. Taigi pritaikykite dėmesio vertes:
- Pasukimas {X: 90, Y: 0, Z: 0}
Dabar norime užprogramuoti žaidimo valdymą, kad galėtume naudoti pelę valdyti personažo judėjimą. Tam reikia scenarijaus.
Viduje konors Projektai skydelyje pridėkite naują aplanką ir pavadinkite jį „Scenarijai“. Dabar pridėkite „JavaScript“ prie Fotoaparatas ir pavadinkite jį „InputController“, taip pat pridėkite jį prie ką tik sukurto aplanko „Scripts“. Dabar dukart spustelėję scenarijų galite redaguoti jo ypatybes.
Kai atidarote scenarijų numatytame „Unity“ scenarijų rengyklėje, jis turėtų atrodyti taip:
Taigi norime, kad kintamasis „GameObject“ nurodytų mūsų veikėją - tam galite tiesiog grįžti į „Unity“ kameros vaizdą ir nuvilkti / nuleisti sferą į įvesties lauką.
Dabar mes norime priskirti pusė ekrano pločio ir aukščio iki pradžios funkcijos. Taigi redaguokite scenarijų, kad jis atrodytų taip:
Taigi dabar mums reikia tik pelės reikšmių (visada, kai ją perkelia grotuvas). Norėdami tai pasiekti, turėsime pasikviesti „Update“ funkciją. Taigi pakoreguokite scenarijų pagal kintamąjį „Update“:
Norėdami šiek tiek paaiškinti, kintamieji X ir Z yra skirti valdiklio ašiai - mes norime, kad šie manipuliuotų mūsų veikėjo padėtimi, kai siunčiame valdiklio įvestį į žaidimą. Turime remtis kintamuoju Input.mousePosition, kuris suteikia mums 2D vektorių. Šis 2D vektorius turi būti įtrauktas į mūsų koordinavimo stebėjimą, todėl mes paskambinsime funkcija „setHeroPosition“ su vertybėmis kaip argumentais.
Taigi sukurkite naują scenarijų, jį pavadinkite „HeroController“ ir pritvirtinkite jį prie mūsų sferos / veikėjo. Redaguokite scenarijų, kad jis atrodytų taip:
Dabar, kai paspausite mygtuką „Groti“, turėtumėte sugebėti naršyti po platformą veikiančiu personažu naudodamiesi pele ir netgi nukristi nuo platformos! Mūsų galutinis tikslas yra sukurti platformos žaidimą, panašų į Trumpas gyvenimas , Todėl šį žaidimą šiek tiek išsamiau apibūdinsime kitame vadove.
Tai užbaigia labai paprasto žaidimo „Unity“ kūrimo pagrindus - kitoje šio vadovo dalyje mes apžvelgsime, kaip pridėti daugiau dekoracijų į lygį, pridėti žaidimo meniu ir eksportuoti visa tai į svetainę naudojant „WebGL“. , skirtas žaisti naršyklėje.
Procedūrinių platformų kūrimas
Taigi vienoje šios pamokos dalyje mes tiesiog sukūrėme pagrindinę platformą, ant kurios jūsų personažas gali atsimušti ( ir kristi į pražūtį) - tačiau norint naudoti tikrą platformingo žaidėją, turime pridėti papildomų platformų. Bet mes nenorime pridėti milijono platformų - norime, kad „Unity“ automatiškai veiktų sukurti platformos, kai mūsų personažas atšoka.
Tam mums reikia platformos šablono, kitaip vadinamo „surenkamuoju“. Surenkamasis elementas yra trumpas surenkami, ir tai tiesiog reiškia „iš anksto pagaminta“ - paprastai žaidimo objekto kopija, kurią galite naudoti dar ir dar kartą. Tiesą sakant, surenkamuose elementuose gali būti hierarchijos žaidimo objektų, o tai reiškia, kad galite iš anksto sureguliuoti visą žaidimo objektų sceną.
Taigi, ką jums reikia padaryti, tai sukurti naują aplanką, pavadintą Surenkamieji , tada nuvilkite mūsų platformą iš Hierarchija skydelį į šį naują aplanką. Surenkamieji elementai bus atpažįstami Hierarchijos skydelyje pagal mėlyną spalvą.
Dabar, norėdami pavesti „Unity“ sukurti procedūrines platformas, turime sukurti scenarijų „GameManager“ ir pridėti jį prie fotoaparato. „GameManager“ scenarijuose iš esmės yra svarbios instrukcijos, kurias variklis gali perduoti žaidimo eigai - šiuo atveju tai generuos platformas, nes mūsų personažas šokinėja kartu.
Priežastis, dėl kurios mes ją pritvirtiname prie fotoaparato, yra ta, kad fotoaparatas niekada nesunaikinamas ir išlieka pastovus - taigi scenarijus niekada nesunaikinamas ir išlieka pastovus jį prijungus.
Štai ką reikia įtraukti į scenarijų:
Norėdami šiek tiek paaiškinti šį kodą, turime sukurti nuorodą į surenkamąjį skydą ir sferą (mūsų simbolį), todėl turite juos nuvilkti į konkrečius redaktoriaus lizdus.
Šiame kode taip pat yra trys privatūs kintamieji - eilutės, kurios prasideda privatus var. Tai suremontuos (suras) surenkamųjų skydelį šiais būdais:
- Privati var riba: plūdė nustato y ašies ribą, taigi, kai mūsų simbolis šokinėja didesnis nei ši riba, bus sukurta nauja skydelis.
- Privati var rotacija: Kvaternionas; paprasčiausiai prideda būtiną sukimąsi, kad būtų suremontuoti mūsų surenkamieji elementai, tačiau mes pridedame sukimasis = Quaternion.identify; nes tai nurodo varikliui nesukti žaidimo objekto. Objektas (mūsų surenkamosios plokštės) pažodžiui bus „idealiai sulygintas“ su pasauliu.
- Galutinis privatus kintamasis lastPlatformPosition prisimins ir išsaugos paskutinės platformos, kaip 3D vektoriaus, padėtį (iš esmės platformos nedings už nugaros, todėl, jei norite, galėsite grįžti atgal per žaidimų pasaulį).
Šiame kitame scenarijaus etape pridėsime čekį kiekvienas kadras nesvarbu, ar mūsų sfera (veikėjas) yra virš sienos (kuri sukuria naujas platformas), ar ne - jei mūsų veikėjas yra virš sienos, mes pakelti ribos ribą sukurti naują skydelį / platformą, aukštesnę nei ankstesnė.
Kitas mūsų žingsnis yra pridėti kodą, kuris nustato kitą skydelio padėtį:
Mes naudojame a daryti kol kilpa šiame kode, siekiant užtikrinti, kad vektoriaus X ir Z vertės (jo padėtis žaidimų pasaulyje) nebūtų tapačios ankstesnėms platformoms - taigi mūsų procedūriniu būdu sukurtos platformos visada didės.
Žinoma, mes nenorime, kad šios vertybės būtų griežtai šiek tiek atsitiktinumas yra geras dalykas, kitaip mes tiesiog gaminame puikius laiptus. Taigi mes naudojame Atsitiktinis. Diapazonas funkcija tarp -1 ir 2 reikšmių, kad iškviestume atsitiktines X ir Z reikšmes. Jei norite apgauti, galite šiek tiek žaisti su šiais skaičiais.
Žaidimo meniu sukūrimas
Iki šiol mes sukūrėme „žaidimą“, kuriame galite šokinėti didėjant ūgiui ir judinti pelę, kad valdytumėte kryptį. Problema ta, kad nukritus nuo platformos, jūs tiesiog be galo krisite - norėdami pradėti iš naujo, turime parašyti „mirties“ / žaidimo meniu.
Taigi iš esmės parašysime scenarijų, kuris patikrins, ar mūsų sfera (veikėjas) patenka žemiau pirmoji žaidimo platforma . Jei taip, scenarijus įkels naują sceną.
Pirmas žingsnis bus patikrinti, ar rutulys nukrito žemiau tam tikros ribos. Eik į „GameManager“ scenarijų, kurį sukūrėme anksčiau, ir pažvelkime į jei pareiškimas atnaujinti funkcija.
Mes naudosime dar jei teiginį, kad patikrintume, ar mūsų sferos padėtis yra žemesnė nei -2,0 Y pozicijos vienetų - jei taip, mūsų privati funkcija žaidimas baigtas bus ... na, tas scenarijaus bitas yra savaime suprantamas.
Paskutinis scenarijaus bitas yra funkcija, naudojama tvarkant būseną „žaidimas baigta“ ir įkeliant žaidimo meniu.
Tai atkreipia dėmesį į Vienybės Taikymas klasė - mes galime paskambinti „LoadLevel“ funkcija sukurti naują sceną, kuri šiuo atveju yra tiesiog mūsų žaidimo meniu - atminkite, kad iš esmės viskas „Unity“ yra „lygiai“. Pagrindiniai meniu („Pradėti žaidimą“ - „Parinktys“ - „Kreditai“ ir kt.) Iš esmės yra tik lygiai / scenos su spustelėjamo teksto dalimis. Panašiai kaip „Skyrim“ kraunami ekranai, ar ne? Tai tik 3D modeliai tuščioje pasaulio erdvėje su pakrovimo juosta.
Bet kokiu atveju turime sukurti sceną Failas> Nauja scena ir duokite jai vardą Meniu tuo pat metu jį išsaugodamas. Tada prie kūrimo proceso pridėsime abi scenas. Tai daroma per Failas> Komponavimo nustatymai .
Mūsų meniu scena vis tiek turėtų būti atidaryta, todėl tiesiog spustelėkite mygtuką „Pridėti dabartinę“ ir pridėkite sceną prie savo „Build Settings“ - daryk tai dar kartą su lygio scena.
Kai mirštame žaidime, sukurtas scenarijus turėtų mus perkelti iš žaidimo lygio į meniu sceną.
Pridėkite žaidėjų mygtuką „Pradėti“
Dabar mes galime žaisti žaidimą bandymo režimu, tačiau šiuo metu žaidėjai neturi galimybės pradėti žaidimo, jei mes norėtume įkelti šį žaidimą kur nors. Taigi turime sukurti žaidimo meniu, kuriame būtų mygtukas pradėti žaidimą.
Taigi perjunkite į žaidimo meniu sceną ir pridėkite šią dalį prie fotoaparato ( Inspektoriaus skydelyje atsiminkite iš pt. 1 šios pamokos?).
- Aiškios vėliavos: vientisa spalva
- Fonas: # 000
- Plotis: 200
- Aukštis: 60
Tai suteiks mums tvirtą juodą žaidimo meniu foną - tai daroma RGB vertės , ne šešiakampis - taigi mėlyna spalva būtų 001, žalia yra 010, raudona yra 100 ir kt. Aš galėčiau tai paaiškinti jums, bet viskas, ką jums reikia padaryti, yra „Google“ RGB rinkiklis, jei norite konkrečios spalvos.
Norėdami pradėti žaidimą, turime pridėti mygtuką. Tai daroma per Vartotojo sąsajos elementai - iš esmės vartotojo sąsajos elementus galime pridėti taip pat, kaip pridėdami 3D elementus per Hierarchija skydelyje. Taigi pirmyn ir sukurkite UI mygtukas ir pamatysite keletą naujų elementų Hierarchija skydelis:
- „EventSystem“
- Drobė
- Mygtukas
- Tekstas
Norėdami tai suskaidyti - drobė yra mūsų visų vartotojo sąsajos elementų talpykla, ir mes galime ją pritaikyti ( atsakydamas turiu omenyje „mastelio keitimas pagal ekrano dydį“, o ne reaguojantis, kaip tai atsakys į jūsų užduotus klausimus. Tai geriausia palikti AI scenarijams). Bet kokiu atveju mes pakeisime mygtuko padėtį į šią:
- „Rect Transform“ {Poz. X: 0, Poz. Y: 0, Poz. Z: 0}
- „Rect Transform“ {plotis: 200, aukštis: 60}
Norėdami tai padaryti šiek tiek elegantiškesne, galite pašalinti mygtuko „šaltinio vaizdą“ ir nustatyti jo spalvą. Jei norite pakeisti mygtuko tekstą, tiesiog redaguokite Tekstas elementą, pvz., „PRADĖTI ŽAIDIMĄ“, ir nurodykite šrifto dydį maždaug 16.
Norėdami padaryti mygtuką spustelėjamas , prie „UIController“ scenarijaus pridėsime funkciją Mygtukas elementas. Tiesiog pridėkite šį kodą žemiau:
Taikykite šią funkciją mygtukams Inspektorius parametrus ir Mygtukas (scenarijus) komponentų parametrus, mes tiesiog pridėsime funkciją, kuri vykdoma grotuvui spustelėjus mygtuką Pradėti. Taigi tiesiog pridėkite funkciją prie Paspaudus() įvykį ir nuvilkite mygtuką Pradėti žaidimą į įvesties lauką. Galiausiai iš „UIController“ scenarijaus pasirinkite naujai sukurtą funkciją ( UIController.StartGame)
Šią funkciją galime pritaikyti mygtukuose Inspektorius parametrus. Mygtuko (scenarijaus) komponento nustatymuose galime atlikti funkciją, kai tik žaidėjas ją paspaudžia. Tam mes įtraukiame naują funkciją į įvykį On Click () spustelėdami + piktogramą. Dabar galime nuvilkti patį mygtuką į įvesties lauką. Tada mes pasirenkame funkciją, kurią ką tik parašėme iš „UIController“ scenarijaus (UIController.StartGame).
Kaip eksportuoti / paskelbti kaip „WebGL“ naršyklės žaidimą
Atidarykite komponavimo parametrus ir pasirinkite „WebGL“ kaip jūsų tikslinė platforma. Dabar spustelėkite Perjungti platformą ir galiausiai spustelėkite mygtuką Statyti mygtuką ir suteikite savo žaidimui pavadinimą. Sukūrus, jis bus eksportuojamas / išsaugomas kaip .HTML failas, kurį galima atidaryti / peržiūrėti bet kurioje „WebGL“ palaikančioje naršyklėje. Nors jei nori paskelbti savo žaidimą, yra du būdai tai pasiekti:
- Įkelkite žaidimą į tam tikrą failų prieglobą („Dropbox“, „Google“ diską ir kt.), Tada bendrinkite nuorodą. Tai naudinga mažiems demonstracinės versijos kurį norite parodyti draugams ar potencialiems klientams ( žaidimų portalo svetaines, kurios pirks jūsų žaidimą arba nustatys su jumis pajamas iš skelbimų).
- Įkelkite žaidimą į jums priklausantį FTP serverį ir įdėkite jį į