Share
PlayCanvas rende davvero facile creare contenuti 3D interattivi basati su WebGL per il web. È tutto JavaScript, quindi viene eseguito in modo nativo nel browser senza plug-in. È un motore piuttosto giovane che è in circolazione solo dal 2014, ma sta rapidamente guadagnando popolarità con nomi come Disney, King e Miniclip che lo utilizzano per sviluppare giochi.
È un ottimo strumento per due motivi principali: in primo luogo, è un motore di gioco completo, in grado di gestire qualsiasi cosa, dalla grafica e dalla collisione all'audio e persino all'integrazione con i gamepad / VR. (Quindi non dovrai dare la caccia alle librerie esterne o preoccuparti dei problemi di compatibilità del browser per la maggior parte delle cose.) Il secondo, e quello che penso lo faccia davvero risaltare, è il loro editor basato su browser.
Questo è l'aspetto di un progetto di esempio nell'editor in-browser di PlayCanvas. È un modo davvero potente e conveniente per organizzare il tuo lavoro o persino collaborare con gli altri in tempo reale.Se sei abituato a lavorare con il motore Unity, l'editor di PlayCanvas dovrebbe avere un aspetto familiare (utilizza persino un sistema simile basato su componenti per mettere insieme le funzionalità). A differenza di Unity, PlayCanvas non è multipiattaforma e può pubblicare solo per il web. Tuttavia, se il web è tutto ciò che ti interessa, questo diventa un grande vantaggio, poiché l'attenzione del motore sul web lo rende davvero veloce e leggero rispetto alla concorrenza.
Un'ultima nota: mentre il motore stesso è gratuito e open source, l'editor e gli strumenti online sono gratuiti per progetti pubblici.Vale sicuramente la pena pagare se si sta sviluppando un lavoro commerciale con esso, ma si può sempre usare semplicemente come framework puramente un codice anche per.
Questo è ciò che creeremo:
Puoi provare una demo dal vivo.
Il progetto stesso è pubblico, quindi puoi spostarti e / o posizionarlo sulla sua pagina del progetto.
Non è necessario avere alcuna esperienza con i giochi 3D da seguire, ma assumerò una certa familiarità di base con JavaScript.
Il risultato finale è una demo relativamente semplice in cui si vola e si spinge asteroidi, ma copre abbastanza funzionalità di base che saranno utili per creare qualsiasi tipo di gioco 3D. La prima parte riguarderà l'impostazione di base, lavorando con i modelli, il sistema fisico e i controlli della fotocamera. La seconda parte riguarderà il sistema di proiettili, generando asteroidi e lavorando con il testo.
Vai su playcanvas.com e crea un account.
Una volta effettuato l'accesso, fai clic su progetti linguetta nel cruscotto e premere il grande arancione nuovo pulsante per creare un nuovo progetto. Questo dovrebbe far apparire il riquadro "nuovo progetto". Seleziona "progetto vuoto" e dagli un nome:
Una volta che hai finito, colpisci crea il pulsante in basso a destra. Questo ti invierà alla pagina di panoramica del progetto. Qui puoi accedere alle tue impostazioni e aggiungere collaboratori. Per ora ci tufferemo nel progetto, quindi fai clic sulla grande arancia pulsante dell'editor.
Quando inserisci il tuo primo progetto, PlayCanvas ti mostrerà molti suggerimenti sul suo editor. Puoi licenziare quelli per ora. Le cose principali da notare sono:
Per creare un nuovo oggetto nella scena, fai clic sul piccolo pulsante più nella parte superiore del pannello della gerarchia:
Nota: potresti creare accidentalmente un nuovo oggetto all'interno di uno già esistente. Questo è utile per costruire oggetti composti da più parti o che sono legati insieme in qualche modo. È possibile spostare gli oggetti attorno al pannello della gerarchia per controllare l'annidamento. Trascinalo sul Radice oggetto di rimetterlo in cima alla gerarchia.
Ad esempio, creerò una nuova scatola e la colorerò di rosso. Per dargli un colore personalizzato, dobbiamo creare un nuovo materiale. Puoi farlo nel pannello delle risorse, facendo clic con il pulsante destro in qualsiasi punto all'interno del pannello o facendo clic sull'icona "Più positivo":
Una volta creato, seleziona il tuo materiale e assegnagli un nome descrittivo come "RedMaterial" (puoi vedere il campo del nome nel pannello dell'ispettore).
Ora scorrere verso il basso il diffondere sezione e cambia il colore:
Una volta fatto, torna indietro e seleziona la nuova casella creata (facendo clic su di essa nella scena o nel pannello della gerarchia). Quindi imposta il materiale sul materiale personalizzato che abbiamo appena creato:
E ora la scatola dovrebbe essere rossa! Nota che il materiale che hai creato può essere collegato a tutti gli oggetti che vuoi.
Per abilitare la fisica su un oggetto, dobbiamo aggiungere due componenti: Corpo rigido e Collisione.
Aggiungi il corpo rigido facendo clic su "Aggiungi componente" nel pannello dell'ispettore del tuo oggetto:
Assicurati che il suo tipo sia impostato su dinamico:
E poi aggiungi un componente di collisione allo stesso modo.
Ora avvia il gioco facendo clic sul piccolo pulsante di riproduzione in alto a destra nella scena. Dovresti vedere la tua scatola cadere dal pavimento! Per risolvere il problema, dovrai aggiungere un corpo rigido e una collisione al piano, assicurandoti che il suo tipo di corpo rigido sia statico (in modo che non cada altrettanto).
Sfida: solo per divertimento, prova ad aggiungere una sfera e inclinare leggermente l'aereo (sull'asse X o Z) per vederlo scorrere.
Vale la pena parlare brevemente del sistema dei componenti poiché è una parte fondamentale dell'architettura di PlayCanvas. Concettualmente, l'idea è di separare la funzionalità dagli oggetti. Il più grande vantaggio è la capacità di comporre comportamenti complessi con componenti modulari più piccoli.
Ad esempio, se guardi la telecamera nella scena, noterai che non è un oggetto speciale. È solo un'entità generica con un componente della fotocamera collegato. È possibile collegare un componente della videocamera a qualsiasi cosa per trasformarlo in una fotocamera o collegare un corpo rigido e una collisione alla fotocamera per trasformarlo in un oggetto solido (provalo!).
Se sei curioso, puoi leggere di più sui vantaggi e gli svantaggi dei sistemi componenti nella pagina di Wikipedia.
Ora che ti senti a tuo agio con le basi, possiamo iniziare a mettere insieme il nostro gioco spaziale. Abbiamo bisogno di almeno una nave e un asteroide con cui lavorare. Esistono due modi per aggiungere modelli:
PlayCanvas ha un negozio (simile a Unity Asset Store in qualche modo) in cui puoi trovare e scaricare risorse direttamente nel tuo progetto. Per accedervi, fai clic su biblioteca nel pannello delle risorse.
Il negozio è molto nuovo, quindi è piuttosto scarso, ma è un buon posto per trovare segnaposti o risorse da sperimentare.
Ho usato il patrimonio di hoverhip dal negozio mentre il mio giocatore spediva.
PlayCanvas supporta il caricamento di file FBX, OBJ, 3DS e COLLADA (DAE), ma preferisce FBX. Puoi convertire facilmente qualsiasi modello 3D in FBX aprendolo con Blender ed esportandolo nel formato desiderato.
Puoi trovare il modello di asteroide che ho usato su Blendswap.com. Nota che potresti voler ottimizzare i tuoi modelli 3D prima di usarli nel gioco. Ad esempio, quel modello di asteroide contiene oltre 200.000 triangoli! Potrebbe andar bene per un oggetto speciale nel gioco, ma una volta che ho aggiunto oltre un centinaio di asteroidi nella scena, le cose sono davvero rallentate. Il modificatore Decimate di Blender è un modo semplice per ottimizzare i tuoi modelli. L'ho usato per abbattere il modello di asteroide a circa 7000 triangoli senza perdere troppi dettagli.
Una volta che i modelli sono nel tuo progetto (potrebbe essere necessario aggiornare se non lo vedi subito nel pannello delle risorse), puoi aggiungerli alla scena. Il modo più semplice per farlo è trascinare il modello nella scena:
Questo è il modello stesso che puoi aggiungere alla scena. Le altre risorse attorno ad esso sono la trama / materiale, ecc.Proprio come prima, aggiungi un corpo rigido e un componente di collisione alla nave. Un trucco che potresti fare con la collisione è aggiungere la mesh dell'oggetto reale come forma di collisione. Ciò risulterebbe in una mesh di collisione perfetta per i pixel, ma non sarebbe molto efficiente. Per questa demo, ho optato per una scatola semplice come la mia forma di collisione (e una sfera per gli asteroidi) e modificata la mezze estensioni abbinare approssimativamente la forma del modello.
Un problema che potresti incontrare durante la regolazione delle forme di collisione è l'incapacità di spostarlo dal centro. Un modo semplice per aggirare questo (oltre a dover compensare il modello stesso in qualcosa di simile a Blender prima di esportarlo) è creare un oggetto genitore che abbia la collisione e il corpo rigido, e un oggetto figlio che abbia il modello stesso. In questo modo è possibile eseguire il offset del modello come figlio rispetto al genitore che contiene la collisione.
È così che l'ho impostato per il progetto demo, quindi puoi dare un'occhiata a questo per vedere come è fatto.
Poiché il nostro gioco è ambientato nello spazio, abbiamo bisogno di ignorare la gravità predefinita. Puoi farlo nelle impostazioni della scena. Nella parte in basso a sinistra dello schermo, fai clic su icona dell'ingranaggio. Questo aprirà le impostazioni nel pannello dell'ispettore. Trova la sezione fisica e modifica il valore di gravità:
Per assicurarti che funzioni, prova ad avviarlo di nuovo per vedere se la nave galleggia nello spazio.
Non è abbastanza spazio senza uno sfondo stellato, quindi mentre siamo nelle impostazioni di scena, aggiungiamo uno skybox. Puoi prenderne uno dal negozio o trovarne uno online che ti piace. Una volta ottenuto, aggiungilo nella sezione di rendering:
Questo dovrebbe dare al gioco ancora di più nebuloso sentire. Questo sarebbe anche un buon momento per ripulire la scena ed eliminare qualsiasi oggetto di prova che abbiamo creato prima.
Questo è dove finalmente arriviamo a scrivere del codice. Il sistema di script di PlayCanvas è un'altra cosa che dovrebbe essere familiare se hai usato Unity. Puoi creare script che possono essere collegati a qualsiasi oggetto e questi script possono avere attributi che sono configurati su una base per oggetto. Gli attributi di script sono molto utili e realizzano due cose principali:
Vai alla scheda delle risorse e crea una nuova risorsa di tipo copione. Questo sarà il codice per il comportamento della nave, quindi chiamalo qualcosa come "Vola". Fare doppio clic su di esso per aprire l'editor di script.
Il manuale utente di PlayCanvas è un riferimento molto utile quando si scrivono script, come lo è il riferimento API. L'auto-completamento rende anche molto facile capire quali metodi sono disponibili. Inizieremo semplicemente facendo ruotare la nostra nave. Digitare questo nel aggiornare funzione:
this.entity.rigidbody.applyTorque (0,1,0);
All'interno di qualsiasi script, Questo si riferisce al componente script stesso, mentre this.entity si riferisce all'oggetto a cui è collegato lo script. È possibile accedere a uno qualsiasi dei componenti collegati all'entità in questo modo. Qui stiamo accedendo al corpo rigido e applicando una forza angolare ad esso.
Assicurati di salvare il tuo script ora.
Prima che il nostro script sia troppo coinvolto, collegalo alla nostra nave per vedere se funziona. Per farlo, basta aggiungere un componente di script alla tua nave, quindi aggiungi il tuo script "vola" a quello. Si noti che è possibile aggiungere solo un componente di script per oggetto, ma è possibile aggiungere più script all'interno di quel componente.
Una volta lanciato, dovresti vedere la tua nave girare!
Come discusso sopra, gli attributi di script rendono il nostro codice molto più flessibile. Puoi aggiungerne uno digitandolo nella parte superiore del codice, subito dopo la prima riga in cui è stato creato lo script:
Accentsconagua
Fly.attributes.add ('speed', type: 'number', default: 10, titolo: 'Ship Speed');In questo caso, il nome del mio script è Volare. L'unica opzione richiesta è genere.
Per vedere l'attributo nell'editor, torna al tuo componente di script e fai clic sull'icona con due frecce al volo. Questo è il pulsante di analisi che cercherà eventuali attributi e aggiornerà l'editor. Il tuo componente dovrebbe ora assomigliare a questo:
Infine, per usare il valore dell'attributo nel tuo script, fallo e basta questo. [nome_attributo]. Quindi, se volessimo che questa fosse la velocità di rotazione, potremmo cambiare la nostra linea di codice in:
this.entity.rigidbody.applyTorque (0, this.speed, 0);
Nota: poiché non vi è uno smorzamento angolare, la nave continuerà a ruotare più velocemente man mano che viene applicata la forza. Se rimuovi la forza, manterrà la sua inerzia e continuerà a ruotare alla stessa velocità. Per cambiare questo, impostare lo smorzamento angolare nel componente del corpo rigido su qualcosa sopra lo zero.
Ora vogliamo copiarlo in modo che possiamo orientare la nave con i tasti freccia. Un approccio ingenuo potrebbe assomigliare a questo:
Fly.prototype.update = function (dt) if (this.app.keyboard.isPressed (pc.KEY_RIGHT)) this.entity.rigidbody.applyTorque (0, this.speed, 0); if (this.app.keyboard.isPressed (pc.KEY_LEFT)) this.entity.rigidbody.applyTorque (0, this.speed * -1,0); if (this.app.keyboard.isPressed (pc.KEY_UP)) this.entity.rigidbody.applyTorque (this.speed * -1,0,0); if (this.app.keyboard.isPressed (pc.KEY_DOWN)) this.entity.rigidbody.applyTorque (this.speed, 0,0); ;
Puoi dire qual è il problema con questo script? Provalo. Puoi facilmente indicare la nave dove vuoi?
Pensaci prima di continuare a leggere. Come risolveresti questo?
Il problema è che stiamo applicando una forza in coordinate globali senza tenere conto di dove si trova la nave. Se la nave è orizzontale rispetto alla telecamera e la ruotiamo sull'asse y quando premiamo verso sinistra / destra, ruota in modo corretto. Ma se la nave è verticale, una rotazione sull'asse y ora è un tiro di botte.
Lo stesso problema accadrebbe se stessimo cercando di spostare la nave in avanti. La direzione "avanti" dipende da dove si trova la nave e non può essere assoluta.
Ora convenientemente, ogni entità ha tre vettori di direzione che possiamo usare: su, destra, e inoltrare. Per girare a sinistra / destra, ruotiamo lungo il su asse, e su e giù ruotiamo lungo il destra asse. Questi sono su e destra relativo all'entità. Una versione fissa sarebbe simile a questa:
Fly.prototype.update = function (dt) var horizontalForce = this.entity.up.clone (); var verticalForce = this.entity.right.clone (); if (this.app.keyboard.isPressed (pc.KEY_RIGHT)) this.entity.rigidbody.applyTorque (horizontalForce.scale (this.speed * -1)); if (this.app.keyboard.isPressed (pc.KEY_LEFT)) this.entity.rigidbody.applyTorque (horizontalForce.scale (this.speed)); if (this.app.keyboard.isPressed (pc.KEY_UP)) this.entity.rigidbody.applyTorque (verticalForce.scale (this.speed * -1)); if (this.app.keyboard.isPressed (pc.KEY_DOWN)) this.entity.rigidbody.applyTorque (verticalForce.scale (this.speed)); ;
Aggiungere movimento in avanti è la stessa idea:
if (this.app.keyboard.isPressed (pc.KEY_Z)) this.entity.rigidbody.applyForce (this.entity.forward.clone (). scale (-1));
Se il movimento si sente off o troppo scivoloso, trascorri un po 'di tempo modificando le velocità e i fattori di smorzamento per arrivare dove sembra giusto.
È difficile tenere traccia di una nave in movimento con una telecamera statica. Il modo più semplice per far seguire la fotocamera a un oggetto è semplicemente mettendo la fotocamera come figlio di quell'oggetto.
Prova a trascinare la telecamera nel pannello della gerarchia sulla tua nave. Un modo conveniente per regolare la vista della telecamera è passare alla vista di quella telecamera in scena. Fai clic sul pulsante nella parte superiore dello schermo dove dice Prospettiva. Questo ti darà un menu a discesa con tutte le diverse visualizzazioni di scene che puoi selezionare. Selezionare telecamera, che dovrebbe essere il più lontano. Questa è una visione speciale perché tutto ciò che vedi nell'editor è ciò che la videocamera vedrà nel gioco.
Dopo aver regolato la vista della telecamera, assicurati di tornare alla prospettiva o a qualsiasi altra vista per evitare di incasinare accidentalmente gli angoli della videocamera.
Mancia: Se si dispone di un oggetto selezionato nella gerarchia, ma non è possibile trovarlo nella scena, premere F. Questo focalizzerà la vista su quell'oggetto e lo ingrandirà. Puoi vedere più scorciatoie da tastiera facendo clic sul pulsante della tastiera all'estrema sinistra del tuo schermo.
A questo punto, dovresti avere una macchina fotografica che segue la tua nave (per quanto rigida possa essere). (Non sarai in grado di dire se ti muovi se la telecamera si muove e non ci sono altri oggetti nel mondo, quindi prova ad aggiungerne alcuni.)
Una telecamera che è rimasta bloccata sul lettore non è molto interessante. Questo post sul blog di PlayCanvas esplora vari tipi di movimento della fotocamera. Il più semplice che possiamo implementare è il guarda la fotocamera.
Per fare ciò, spostare prima la videocamera sull'oggetto radice.
Quindi, crea un nuovo script chiamato guarda a.
La funzione di aggiornamento di questo script dovrebbe essere simile a:
LookAt.prototype.update = function (dt) this.entity.lookAt (this.target.getPosition ()); ;
E dovrebbe avere un attributo:
LookAt.attributes.add ('target', type: 'entity');Ora collega questo script all'oggetto camera. Premi il pulsante parse e imposta il target come entità della nave.
Prova a lanciare! Se tutto andrà bene, la tua videocamera resterà sul posto ma si orienterà verso la nave.
È possibile implementare gli altri tipi di fotocamere nello stesso modo. Il seguendo la telecamera menzionato nel post del blog sembra idealmente il più bello, ma ho trovato che fosse troppo nervoso quando il framerate si immerge un po ', quindi per la demo finale, ho finito per andare con una fotocamera che è stata attaccata come un bambino alla nave ma script per muoversi e ruotare come ha fatto la nave.
Non preoccuparti se alcuni di questi si sentono un po 'opprimenti. PlayCanvas è un motore complesso con un sacco di campane e fischietti. C'è molto da esplorare e tenere il manuale vicino è un buon modo per orientarsi. Un altro buon modo per imparare è solo trovando progetti pubblici e guardando come sono fatte le cose.
La seconda parte inizierà con la creazione di un sistema di proiettili, quindi aggiungendo alcuni asteroidi da sparare e completeremo l'operazione aggiungendo un segnalino FPS e un testo di gioco. Se avete richieste o suggerimenti, o se qualcosa non è chiaro, fatemelo sapere nei commenti!
