de Namratha Subramanya

Construiți un joc VR bazat pe browser multiplayer cu A-Frame, PubNub și WebVR

Construiti un joc VR bazat pe browser multiplayer cu A Frame

Progresele tehnologice au făcut ca Realitatea Virtuală (VR) să fie mai captivantă și mai accesibilă ca niciodată. Acest mediu imersiv poate fi similar cu lumea reală. Sau poate fi fantastic, creând o experiență care nu este posibilă în realitatea obișnuită.

Mai bine, dispozitivele VR de înaltă calitate sunt disponibile la prețuri mici în aceste zile. Cu o serie de căști VR compatibile cu smartphone-uri, cum ar fi Google Cardboard, Samsung Gear VR, Oculus Rift și HTC Vive, VR se dovedește a fi următorul lucru important.

În acest tutorial, vom profita de acest lucru și vom construi un joc VR multiplayer în timp real folosind A-Frame, PubNub, Glitch și WebVR.

depozitul complet de cod GitHub poate fi găsit aici.

WebVR

WebVR este o specificație deschisă care face posibilă experimentarea VR în browserul dvs. Este un API de browser JavaScript care acționează ca o interfață pentru hardware-ul VR. WebVR este multiplataforma și poate fi utilizat pentru a dezvolta, vizualiza și partaja conținut VR pe orice browser care acceptă VR. Cu WebVR, puteți deschide un browser și puteți intra în VR doar făcând clic pe un link. Lucrul cu WebVR necesită cunoștințe directe despre JavaScript și WebGL.

Un cadru

Un cadru este un cadru de realitate virtuală bazat pe API-ul WebVR. Folosește API-ul WebVR pentru a obține acces la datele senzorului căștilor VR (poziție, orientare) pentru a transforma camera și pentru a reda conținutul direct la căștile VR. A-Frame este un proiect comunitar deschis care utilizează API-ul WebVR împreună cu HTML, CSS, JavaScript și Three.js. A-Frame își propune un conținut VR extrem de captivant și interactiv, cu performanțe native. În același timp, A-Frame dorește ca toată lumea să se poată implica cu crearea conținutului VR. A-Frame acceptă toate căștile majore cu controlerele lor.

Eroare

Eroare oferă un editor de cod online cu implementare instantanee și găzduire de site-uri web. Editorul acceptă atât codul front-end și back-end, cât și mai multe fișiere și directoare. Glitch vă permite să remixați (adică să copiați) proiectele existente și să le faceți proprii și să găzduim și să implementați instantaneu modificări pentru ca toată lumea să le vadă. Firefox Nightly vă permite să depanați conținutul VR utilizând consola de depanare.

Mediu pentru jocuri

A-Frame Physics System

aframe-physics-system este un middleware care inițializează motorul de fizică și expune componentele A-Frame pe care le putem aplica entităților. Când îl folosim static-body sau dynamic-body componente, aframe-physics-system creează o Cannon.Body instanță și o atașează la entitățile noastre A-Frame, astfel încât pe fiecare cadru, ajustează poziția entității, rotația etc. pentru a se potrivi cu corpul.

Minge

<a-sphere> primitiv creează o formă sferică. Puteți defini culoarea și poziția razei sale. Because of aframe-physics-sistemul, mingea poate fi convertită într-un corp dinamic cu o anumită masă.

Bowling Lane

<a-bbou> creează forme precum cutii, cuburi sau pereți. Puteți crea o cutie dreptunghiulară și puteți face o pistă de bowling din ea, plasând ace și bilă deasupra acesteia.

Pinii

<a-cylinder> primitiv este folosit pentru a crea tuburi și suprafețe curbate. Acești cilindri pot fi folosiți ca bolii în joc. Asigurați-vă că definiți raza, înălțimea, poziția și masa cilindrului.

Piste

Mingea nu poate rula în aceeași direcție de fiecare dată când o arunci. Puteți defini orice număr de piste pentru ca mingea să se rostogolească, iar această pistă poate, la rândul său, defini direcția. Acest joc are 5 piste, iar mișcarea mingii pe aceste piste este controlată de 5 triunghiuri sau, să spunem, indicii pe pista de bowling.

Împrejurimi

O scenă este reprezentată de <a-scene> element. Scena este obiectul rădăcină global și toate entitățile sunt conținute în scenă. Fricțiunea, restituirea și iterațiile obiectelor sunt setate la valori de 0,001, respectiv 0,3 și 30.

A-Frame are un sistem de gestionare a activelor care ne permite să plasăm activele într-un singur loc și să preîncărcăm și să stocăm în cache activele pentru o performanță mai bună. Plasăm astfel de active înăuntru <a-assets>.

Componenta de scară definește o transformare micșorată, întinsă sau înclinată a unei entități. Puteți utiliza componenta de scară pentru a transforma o cutie într-un perete din spatele pistei de bowling.

Pe linii similare, o cutie poate fi convertită într-un buton atașat la perete utilizând componenta de scală. <a-text> poate adăuga text în mediul dvs. virtual.

<a-bbou> poate fi, de asemenea, utilizat pentru a construi granițe lângă pista de bowling.

Jocul

Rulând mingea

După cum sa discutat mai devreme, mingea poate rula peste 5 piste imaginare pe pista de bowling. Acest lucru poate fi realizat folosind <a-animatipe>. Animațiile pot fi atașate în A-Frame through <a-animation> element făcându-l animat ca un copil al entității.

Acum puteți lega aceste animații ale mingii cu cele 5 indicatoare, astfel încât animația să înceapă de fiecare dată când se face clic pe unul dintre triunghiuri. Acest lucru poate fi realizat prin scrierea unei componente. Putem înregistra componenta în JavaScript și o putem folosi în mod declarativ din DOM. Componentele sunt configurabile, reutilizabile și partajabile.

Căderea pinilor

Când un corp dinamic de masă 17,5 se rostogolește către 10 corpuri dinamice de masă 1,25, unele dintre ele tind să cadă. După fiecare eliminare, se poate număra numărul de pini care sunt jos. Putem verifica poziția pinilor la sfârșitul animației. Dacă oricare dintre rotația știftului are valoarea x nu egală cu 0 sau -0 atunci înseamnă că știftul nu stă în poziție verticală. Numărând numărul de pini care sunt culcați, puteți calcula scorul jucătorului.

Linia de mai sus surprinde valoarea x a atributului de rotație al unui pin. În acest fel puteți prelua atributul de rotație x al tuturor pinilor și salvați-l într-o matrice. Acum puteți parcurge matricea și puteți verifica fiecare valoare și puteți incrementa strike tejghea.

Joc nou

Jucătorul poate începe un joc nou în orice moment, făcând clic pe butonul Joc nou de pe perete. Reîmprospătează automat jocul.

Camera în mișcare

Puteți muta camera în orice moment al jocului. Aici, am ales să mișc camera de fiecare dată când jucătorul rulează mingea pentru o mai bună vizualizare a știfturilor care cad.

1611315908 259 Construiti un joc VR bazat pe browser multiplayer cu A Frame

PubNub

Cu mai puțin de 1/4 dintr-o a doua latență, PubNub poate publica și abona fără probleme mesaje între mai multe dispozitive VR. Să transformăm acest joc cu un singur jucător într-un joc cu 2 jucători.

Acum va trebui să vă inițializați cheile PubNub. Înscrieți-vă pentru un cont PubNub și creați un proiect în Tabloul de bord administrativ.

Decizia turnurilor

Fiecare jucător primește două rânduri. Comutatorul jucătorului se rotește după fiecare două fotografii. Deci, după fiecare două fotografii, PubNub poate notifica celălalt utilizator că poate prelua controlul. În acest joc, de fiecare dată când jucătorul își întoarce suprafața cu 5 indicatoare triunghiulare pe banda de bowling. Și când nu le vine rândul, cele 5 indicatoare triunghiulare sunt ascunse.

Ascunde indicii când nu îți vine rândul. Aici, în loc să mă ascund, stabilesc poziția la 0.

Așezați suprafața indicatorului înapoi pe pista de bowling când vă vine rândul. Procedând astfel, veți prelua din nou controlul pieselor.

Replicarea stării pinilor după eliminare

După fiecare eliminare, puteți capta poziția pinilor care sunt jos și o puteți trimite către celălalt utilizator utilizând PubNub. Procedând astfel, puteți replica ecranul unui jucător pe ecranele altor jucători. În codul de mai jos, puteți vedea că poziția și valorile de rotație ale pinului 1 sunt transmise altor jucători folosind PubNub. Pe linii similare, puteți trimite valori de rotație și poziție ale tuturor pinilor prin PubNub.

Comutarea între corpurile statice și cele dinamice

Mai devreme am folosit aframe-physics-system pentru a converti obiectele A-Frame în corpuri dinamice. Când jucătorul nu rostogolește mingea și doar reproduce ecranul unui alt jucător, mingea nu ar trebui să fie un corp dinamic pentru a evita căderea pinilor suplimentari.

Când este rândul jucătorului actual, dinamica este setată la adevărat, iar la dynamic-body se adaugă proprietăți.

Când nu este rândul jucătorului, dinamica este setată la fals, iar dynamic-body proprietățile sunt eliminate.

Jucătorul 2

După ce ați terminat de publicat datele prin PubNub de pe ecranul Playerului 1, puteți citi datele abonându-vă la canalul PubNub.

Când PubNub primește date legate de poziția și rotația pinilor căzuți, puteți seta atributul pinilor de pe ecranul jucătorului 2 la aceleași valori ca și jucătorul 1 și, prin urmare, faceți cele două ecrane identice.

Concluzie

Felicitări! De fiecare dată când rulezi mingea pe ecranul jucătorului 1, poți vedea ecranul jucătorului 2 replicând toate mișcările. Acum puteți reveni prin publicarea datelor jucătorului 2 înapoi la jucătorul 1 și vă puteți converti jocul într-un joc complet funcțional pentru 2 jucători. Poate fi transformat și într-un joc multiplayer. Jocuri VR fericite!

depozitul complet de cod GitHub poate fi găsit aici.

Publicat inițial la www.pubnub.com.