Share
PlayCanvas face foarte ușor pentru a construi WebGL-powered, 3D conținut interactiv pentru web. Este tot JavaScript, deci rulează nativ în browser fără pluginuri. Este un motor destul de tanar, care a fost in jur de numai 2014, dar a inceput sa castige rapid tractiunea cu nume precum Disney, King si Miniclip folosind acest joc pentru a dezvolta jocuri.
Este un instrument excelent pentru două motive principale: în primul rând, este un motor de joc complet echipat, astfel încât se ocupă de toate, de la grafică și coliziune la audio și chiar integrare cu gamepads / VR. (Deci, nu va trebui să vânați biblioteci externe sau să vă faceți griji cu privire la problemele legate de compatibilitatea browserului pentru majoritatea lucrurilor.) Al doilea și ceea ce cred că îl face cu adevărat deosebit, este editorul bazat pe browser.
Acesta este aspectul unui exemplu de proiect în editorul PlayCanvas în browser. Este o modalitate foarte eficientă și convenabilă de a vă organiza munca sau chiar de a colabora cu ceilalți în timp real.Dacă sunteți obișnuiți să lucrați cu motorul Unity, editorul PlayCanvas ar trebui să pară familiar (acesta utilizează chiar și un sistem bazat pe componente bazat pe componente). Spre deosebire de Unitate, PlayCanvas nu este cross-platform și poate publica doar pentru web. Cu toate acestea, dacă web-ul este tot ce vă interesează, atunci acest lucru se încheie cu un mare plus, deoarece focalizarea motorului pe web o face foarte rapidă și ușoară în comparație cu concurența.
O notă finală: În timp ce motorul în sine este liber și open source, editorul și instrumentele online sunt gratuite doar pentru proiecte publice.Este cu siguranță merită să plătiți dacă dezvoltați o activitate comercială cu ea, dar puteți oricând să o utilizați doar ca un cadru de cod, precum și gratuit.
Aceasta este ceea ce vom crea:
Puteți încerca o demonstrație live.
Proiectul în sine este public, astfel încât să puteți învârti și / sau să-l dați pe pagina de proiect.
Nu aveți nevoie să aveți experiență în jocurile 3D pe care să le urmați, dar voi avea o anumită familiaritate cu JavaScript.
Rezultatul final este un demo relativ simplu în care doar zburați și împingeți asteroizii, dar acoperă suficientă funcționalitate de bază care va fi utilă pentru a face orice fel de joc 3D. Partea 1 va acoperi configurarea de bază, lucrul cu modelele, sistemul de fizică și comenzile camerei. Partea a 2-a va acoperi sistemul bullet, asteroizii de reproducere și lucrul cu textul.
Mergeți pe playcanvas.com și creați un cont.
După ce v-ați conectat, faceți clic pe proiecte fila în tabloul de bord și apăsați maro portocaliu nou buton pentru a crea un nou proiect. Aceasta ar trebui să aducă caseta "noul proiect". Selectați "project blank" și dați-i un nume:
După ce ați terminat, apăsați pe creați butonul în partea dreaptă jos. Aceasta vă va trimite pe pagina de prezentare a proiectului. Aici puteți accesa setările și puteți adăuga colaboratori. Pentru moment, ne vom arunca cu capul în proiect, așa că faceți clic pe portocaliu mare buton editor.
Când introduceți primul dvs. proiect, PlayCanvas vă va arăta multe sugestii despre editorul său. Acum le puteți respinge. Principalele lucruri de reținut sunt:
Pentru a crea un obiect nou în scenă, faceți clic pe butonul plus plus din partea de sus a panoului ierarhiei:
Notă: Este posibil să creați accidental un obiect nou într-unul deja existent. Acest lucru este util pentru construirea obiectelor compuse din mai multe părți sau care sunt legate unele de altele împreună. Puteți să mutați obiecte în jurul panoului ierarhic pentru a controla cuiburile. Trageți-l pe Rădăcină obiect să-l așeza înapoi în partea de sus a ierarhiei.
De exemplu, voi crea o cutie nouă și o va roșu. Pentru a le oferi o culoare personalizată, trebuie să creăm un material nou. Puteți face acest lucru în panoul de elemente, fie făcând clic dreapta oriunde în interiorul panoului, fie făcând clic pe pictograma plus plus:
Odată creat, selectați materialul și dați-i un nume descriptiv, cum ar fi "RedMaterial" (puteți vedea câmpul de nume în panoul de inspectori).
Acum derulați în jos difuz și modificați culoarea:
După ce sa terminat, reveniți și selectați noua cutie pe care ați creat-o (fie făcând clic pe ea în scena, fie în panoul ierarhiei). Apoi fixați materialul la materialul personalizat pe care tocmai l-am creat:
Și caseta ar trebui să fie acum roșie! Rețineți că materialul pe care l-ați creat poate fi atașat la cât mai multe obiecte pe care le doriți.
Pentru a permite fizicii unui obiect, trebuie să adăugăm două componente: Corp rigid și Coliziune.
Adăugați Corpul dur făcând clic pe "Adăugați componenta" din panoul de inspecție al obiectului:
Asigurați-vă că tipul său este setat la dinamic:
Apoi adăugați o componentă de coliziune în același mod.
Acum lansați jocul făcând clic pe butonul de redare din partea dreaptă sus a scenei. Ar trebui să vă vedeți caseta căzând pe podea! Pentru a rezolva asta, va trebui să adăugați un corp rigid și o coliziune la nivelul avionului, asigurându-vă că tipul său rigid de corp este static (astfel încât să nu cadă la fel).
Provocare: Doar pentru distracție, încercați să adăugați o sferă și să înclinați ușor planul (fie pe axa X sau Z) pentru al urmări.
Merită să vorbiți pe scurt despre sistemul componente, deoarece este o parte fundamentală a arhitecturii PlayCanvas. Conceptual, ideea este de a separa funcționalitatea de obiecte. Cel mai mare avantaj este capacitatea de a compune comportamente complexe din componente modulare mai mici.
De exemplu, dacă vă uitați la aparatul de fotografiat în scenă, veți observa că nu este un obiect special. Este doar o entitate generică cu o componentă de cameră atașată. Ați putea atașa o componentă a aparatului foto la orice, pentru ao transforma într-o cameră foto, sau a atașa un corp rigid și o coliziune cu camera pentru al transforma într-un obiect solid (încercați!).
Dacă sunteți curios, puteți citi mai multe despre avantajele și dezavantajele sistemelor componente pe pagina Wikipedia.
Acum, că vă simțiți confortabil cu elementele de bază, putem începe să punem împreună jocul nostru spațial. Avem nevoie de cel puțin o navă și un asteroid cu care să lucrăm. Există două moduri de a adăuga modele:
PlayCanvas are un magazin (similar cu Unity Asset Store în unele moduri) unde puteți găsi și descărca materialele direct în proiectul dvs. Pentru a le accesa, faceți clic pe bibliotecă în panoul de materiale.
Magazinul este foarte nou, deci este destul de rău, dar este un loc bun pentru a găsi locașuri sau bunuri pentru a experimenta.
Am folosit bunul mobil din magazin ca nava jucătorului meu.
PlayCanvas nu suportă încărcarea fișierelor FBX, OBJ, 3DS și COLLADA (DAE), dar preferă FBX. Puteți converti cu ușurință orice model 3D în FBX deschizându-l cu Blender și exportându-l în formatul dorit.
Puteți găsi modelul asteroid pe care l-am folosit pe Blendswap.com. Rețineți că este posibil să doriți să optimizați modelele 3D înainte de a le utiliza în joc. De exemplu, modelul asteroidului conține peste 200.000 de triunghiuri! Asta ar putea fi bine pentru un obiect special în joc, dar odată ce am adăugat peste o sută de asteroizi în scenă, lucrurile au încetinit într-adevăr într-un crawl. Modificatorul Decimatului Blender este o modalitate ușoară de a optimiza modelele. Am folosit asta pentru a reduce modelul de asteroizi la aproximativ 7.000 de triunghiuri fără a pierde prea multe detalii.
Odată ce modelele se află în proiectul dvs. (este posibil să trebuiască să le reîmprospătați dacă nu le vedeți imediat în panoul dvs. de materiale), le puteți adăuga la scenă. Cea mai ușoară modalitate de a face acest lucru este de a trage modelul în scenă:
Acesta este modelul în sine pe care îl puteți adăuga la scenă. Celelalte active din jurul lui sunt textura / materialul, etc.La fel ca înainte, adăugați un corp rigid și o componentă de coliziune la navă. Un truc pe care l-ați putea face cu ciocnirea este să adăugați plasa obiectului propriu ca formă de coliziune proprie. Acest lucru ar duce la o plasă de coliziune perfectă, dar nu ar fi foarte eficientă. Pentru această demonstrație, am optat pentru o cutie simplă ca forma de coliziune (și o sferă pentru asteroizi) și am editat jumătate de proporții pentru a se potrivi aproximativ forma modelului.
O problemă la care s-ar putea întâmpla când ajustăm formele de coliziune este incapacitatea de ao compensa de la centru. O modalitate ușoară de a depăși acest lucru (în afară de a trebui să compenseze modelul însuși în ceva asemănător cu Blender înainte de ao exporta) este de a crea un obiect parent care are corpul de coliziune și rigid și un obiect copil care are modelul însuși. Așadar, ați putea compensa modelul ca pe un copil în relație cu părintele care conține coliziunea.
Acesta este modul în care l-am pregătit pentru proiectul demo, astfel încât să puteți arunca o privire la asta pentru a vedea cum sa făcut acest lucru.
Deoarece jocul nostru este setat în spațiu, trebuie să suprascrieți gravitația implicită. Puteți face acest lucru în setările de scenă. În colțul din stânga jos al ecranului, faceți clic pe pictograma roții. Aceasta va deschide setările din panoul de inspecție. Găsiți secțiunea fizică și modificați valoarea gravitației:
Pentru a vă asigura că a funcționat, încercați din nou să lansați și să vedeți dacă nava plutește în spațiu.
Nu este destul de spațiu fără fundal înstelat, așa că, în timp ce suntem în setările de scenă, să adăugăm un cerc. Puteți să apucați unul din magazin sau să găsiți unul online dorit. Odată ce ați primit-o, adăugați-o în secțiunea de randare:
Asta ar trebui să dea jocul mai mult nebulos simt. Acest lucru ar fi, de asemenea, un moment bun pentru a vă curăța scena și pentru a șterge orice obiecte de test create anterior.
Aici ajungem să scriem un cod. Sistemul de scriere PlayCanvas este un alt lucru care ar trebui să fie familiar dacă ați folosit Unitatea. Creați scripturi care pot fi atașate la orice obiect și pot avea aceste scripturi atribute care sunt configurate pe baza unui obiect. Atributele scriptului sunt foarte utile și realizează două lucruri principale:
Accesați fila de materiale și creați un nou activ de tip scenariu. Acesta va fi codul pentru comportamentul navei, așa că numiți-l ca "Fly". Faceți dublu clic pe acesta pentru a deschide editorul de script-uri.
Manualul utilizatorului PlayCanvas este o referință foarte utilă la scrierea de scripturi, la fel ca referința API. Auto-completarea, de asemenea, face foarte ușor să dau seama ce metode sunt disponibile. Vom începe prin a face ca nava noastră să se rotească. Introduceți acest lucru în Actualizați funcţie:
this.entity.rigidbody.applyTorque (0,1,0);
În interiorul oricărui scenariu, acest se referă la componenta scenariului în sine, în timp ce this.entity se referă la obiectul pe care este atașat scriptul. Puteți accesa oricare dintre componentele atașate entității în acest fel. Aici accesăm corpul rigid și aplicăm o forță unghiulară.
Asigurați-vă că salvați scenariul acum.
Înainte ca scenariul nostru să fie prea implicat, să-l atașăm navei noastre pentru a vedea dacă funcționează. Pentru a face acest lucru, trebuie doar să adăugați o script component la nava ta, și apoi adăugați scriptul "zbura" la asta. Rețineți că puteți adăuga doar o componentă de script pentru fiecare obiect, dar puteți adăuga mai multe scripturi în interiorul acelei componente.
Odată ce lansați, ar trebui să vă vedeți nava rotitoare!
Așa cum am discutat mai sus, atributele scriptului fac codul nostru mult mai flexibil. Puteți adăuga una prin tastarea acesteia în partea de sus a codului dvs. imediat după prima linie în care este creat scriptul:
Accentsconagua
Fly.attributes.add ('viteză', tip: 'număr', implicit: 10, titlu: 'Viteza navei');În acest caz, numele scriptului meu este A zbura. Singura opțiune necesară este tip.
Pentru a vedea atributul în editor, reveniți la componenta de script și faceți clic pe pictograma cu două săgeți din scriptul de zbor. Acesta este butonul de parse care va căuta toate atributele și va actualiza editorul. Componenta dvs. ar trebui să arate astfel:
În cele din urmă, pentru a utiliza valoarea atributului în scenariul dvs., trebuie doar să faceți aceasta. [ATTRIBUTE_NAME]. Dacă vrem să fie viteza de rotație, putem schimba linia noastră de cod la:
this.entity.rigidbody.applyTorque (0, this.speed, 0);
Notă: deoarece nu există o amortizare unghiulară, nava va continua să se rotească mai repede cu cât forța este aplicată mai mult. Dacă scoateți forța, aceasta își va păstra inerția și va continua să se rotească cu aceeași viteză. Pentru a schimba acest lucru, setați amortizarea unghiulară în componenta caroseriei rigide la ceva peste zero.
Acum vrem să-l scriem astfel încât să putem îndrepta nava cu tastele săgeți. O abordare naivă ar putea arăta astfel:
Fly.prototype.update = funcția (dt) if (this.app.keyboard.isPrestit (pc.KEY_RIGHT)) this.entity.rigidbody.applyTorque (0, this.speed, 0); dacă (this.app.keyboard.isPrestit (pc.KEY_LEFT)) this.entity.rigidbody.applyTorque (0, this.speed * -1,0); dacă (acest.app.keyboard.isPrestit (pc.KEY_UP)) this.entity.rigidbody.applyTorque (this.speed * -1,0,0); dacă (this.app.keyboard.isPress (pc.KEY_DOWN)) this.entity.rigidbody.applyTorque (this.speed, 0,0); ;
Îți poți spune care este problema cu acest script? Încearcă. Puteți să îndreptați cu ușurință nava unde doriți?
Gândește-te înainte de a citi. Cum ai rezolva asta??
Problema este că aplicăm o forță în coordonatele globale, fără să ținem cont de locul unde se confruntă nava. Dacă nava este orizontală în raport cu camera și o rotim pe axa y atunci când apăsăm stânga / dreapta, atunci se rotește corect. Dar dacă nava este verticală, o rotație pe axa y este acum o rolă de butoi.
Aceeași problemă s-ar întâmpla și dacă am încerca să mutăm și nava. Direcția care este "înainte" depinde de locul în care nava se confruntă și nu poate fi absolută.
Acum, convenabil, fiecare entitate are trei vectori de direcție pe care le putem folosi: sus, dreapta, și redirecţiona. Pentru a porni stânga / dreapta, rotiți de-a lungul sus axa, și în sus și în jos se rotește de-a lungul dreapta axă. Acestea sunt sus și dreapta față de entitate. O versiune fixă ar arăta astfel:
Fly.prototype.update = funcția (dt) var orizontalForce = this.entity.up.clone (); var verticalăForce = this.entity.right.clone (); dacă (this.app.keyboard.isPressed (pc.KEY_RIGHT)) this.entity.rigidbody.applyTorque (horizontalForce.scale (this.speed * -1)); dacă (this.app.keyboard.isPrestit (pc.KEY_LEFT)) this.entity.rigidbody.applyTorque (horizontalForce.scale (this.speed)); dacă (this.app.keyboard.isPrestit (pc.KEY_UP)) this.entity.rigidbody.applyTorque (verticalForce.scale (this.speed * -1)); dacă (this.app.keyboard.isPrestit (pc.KEY_DOWN)) this.entity.rigidbody.applyTorque (verticalForce.scale (this.speed)); ;
Adăugarea mișcării înainte este aceeași idee:
dacă (this.app.keyboard.isPressed (pc.KEY_Z)) this.entity.rigidbody.applyForce (această scală.entity.forward.clone (). (-1));
În cazul în care mișcarea se simte în larg sau prea alunecoasă, petreceți puțin timp ajustând viteza și factorii de amortizare pentru a ajunge acolo unde se simte bine.
Este greu să ții evidența unei nave în mișcare cu o cameră statică. Cel mai simplu mod de a face camera să urmeze un obiect este doar prin a pune camera ca pe un copil al obiectului respectiv.
Încercați să trageți camera pe panoul ierarhic pe nava voastră. O modalitate convenabilă de a regla vizualizarea camerei este trecerea la vizualizarea camerei respective în scenă. Faceți clic pe butonul din partea superioară a ecranului, unde se afișează Perspectivă. Acest lucru vă va oferi un drop-down cu toate scenele de vizualizare diferite pe care le puteți selecta. Selectați aparat foto, care ar trebui să fie cel mai îndepărtat. Aceasta este o viziune specială pentru că ceea ce vedeți în editor este ceea ce camera va vedea în joc.
Odată ce ați ajustat vizualizarea camerei, asigurați-vă că ați revenit la vizualizare sau la orice altă vizualizare pentru a evita în mod accidental deranjarea unghiurilor camerei.
Bacsis: Dacă aveți un obiect selectat în ierarhie, dar nu îl găsiți în scenă, apăsați F. Aceasta va focaliza vederea asupra obiectului respectiv și va mări imaginea. Puteți vedea mai multe comenzi rapide de la tastatură făcând clic pe butonul de tastatură din extrema stângă a ecranului.
În acest moment, ar trebui să aveți o cameră de luat vederi după nava dvs. (la fel de rigidă cum ar putea fi). (Nu veți putea spune dacă vă mișcați dacă camera se deplasează și nu există alte obiecte în lume, deci încercați să adăugați unele.)
O cameră care este doar blocată pe player nu este foarte interesantă. Această postare de pe blogul PlayCanvas analizează diferite tipuri de mișcare a camerei. Cea mai simplă pe care o putem pune în aplicare este uită-te la cameră.
Pentru aceasta, mai întâi mutați aparatul foto pe obiectul rădăcină.
Apoi, creați un script nou numit uita-te la.
Funcția de actualizare a scriptului ar trebui să arate astfel:
LookAt.prototype.update = funcția (dt) this.entity.lookAt (această.target.getPosition ()); ;
Și ar trebui să aibă un atribut:
LookAt.attributes.add ('target', type: 'entity');Acum atașați acest script la obiectul camerei. Apăsați butonul de parse și setați țintă pentru a fi entitatea navei.
Încercați lansarea! Dacă totul a mers bine, camera ta va rămâne pe loc, dar se va îndrepta spre nava.
Puteți implementa și alte tipuri de camere în același mod. trailing follow camera menționată în postarea blogului arata cel mai frumos, dar mi sa părut prea nervos când frameratul scade puțin, așa că pentru demo-ul final am ajuns să merg cu o cameră care a fost atașată ca un copil la navă, dar scripted să se miște și să se rotească ca nava a făcut.
Nu vă faceți griji dacă unele dintre acestea se simt puțin copleșitoare. PlayCanvas este un motor complex cu o mulțime de clopote și fluiere. Există multe de explorat și menținerea manualului în apropiere este o modalitate bună de a vă găsi rulmenții. O altă modalitate bună de a învăța este doar găsirea de proiecte publice și analizarea modului în care se fac lucrurile.
Partea a 2-a va începe cu crearea unui sistem de bullet și apoi adăugarea unor asteroizi pentru a trage la, și vom termina-l prin adăugarea unui contor FPS și a unui text în joc. Dacă aveți orice solicitări sau sugestii sau dacă ceva nu este clar, vă rugăm să ne anunțați în comentarii!
