Gennaio 2016
Volume 31 Numero 1
Il presente articolo è stato tradotto automaticamente.
Sviluppo di giochi - Babylon. js: funzionalità avanzate per migliorare il tuo primo gioco Web
Da Raanan Weber
Nel numero di dicembre, ho iniziato a questa esercitazione esaminando i blocchi predefiniti di Babylon. js, un motore di gioco 3D basato su WebGL (msdn.com/magazine/mt595753). Ho iniziato la progettazione di un gioco di piste molto semplice con gli strumenti che offre Babylon. js. Finora, il gioco include gli oggetti necessari, ovvero una palla di pallacanestro, della corsia, mentre e 10 pin.
Ora vi mostrerò come portare il gioco in vita, come generare la palla, raggiunto il PIN, aggiungere alcuni effetti audio, fornire visualizzazioni diverse della fotocamera e altro ancora.
Questa parte dell'esercitazione naturalmente si basa su ed estende il codice della prima parte. Per distinguere le due parti, ho creato un nuovo file JavaScript per contenere il codice che verrà utilizzato in questa parte. Anche quando si estende la funzionalità di un determinato oggetto (ad esempio la scena o la fotocamera principale), non implementarlo nella funzione che ha creato l'oggetto nella prima parte. L'unica funzione che sarà necessario estendere è init, che contiene tutte le variabili necessarie per entrambe le parti dell'esercitazione.
Questa operazione è stata eseguita per comodità. Quando si implementa il tuo gioco, naturalmente, è necessario utilizzare qualsiasi paradigma di programmazione ed sintassi desiderato. È consigliabile assegnare macchina e lo stile di un blocco try di programmazione orientata agli oggetti. È fantastico per organizzare un progetto.
Nel periodo di tempo impiegato per scrivere questo articolo, è stata rilasciata una nuova versione di Babylon. js. Continuerà a utilizzare versione 2.1. Per verificare quali sono le novità in 2.2 Babylon. js, andare a bit.ly/1RC9k6e.
Rilevamento delle collisioni nativo
La fotocamera principale utilizzata durante il gioco è la fotocamera gratuita, che consente al lettore di informative viaggiano attraverso l'intera scena 3D tramite mouse e tastiera. Senza determinate modifiche, tuttavia, la fotocamera sarebbe in grado di float sulla scena, esaminare le pareti, o anche tramite il piano e della corsia. Per creare un gioco realistico, il lettore deve essere in grado di spostare solo su zero e la corsia.
A tale scopo, utilizzerò sistema di rilevamento di conflitti interni del Babylon. Il sistema di conflitto impedisce l'unione ad altri due oggetti. Include inoltre una funzionalità di gravità che impedisce che il lettore a virgola mobile in aria se scorrere in avanti durante la ricerca verso l'alto.
In primo luogo, si abilita il rilevamento dei conflitti e gravità:
function enableCameraCollision(camera, scene) {
// Enable gravity on the scene. Should be similar to earth's gravity.
scene.gravity = new BABYLON.Vector3(0, -0.98, 0);
// Enable collisions globally.
scene.collisionsEnabled = true;
// Enable collision detection and gravity on the free camera.
camera.checkCollisions = true;
camera.applyGravity = true;
// Set the player size, the camera's ellipsoid.
camera.ellipsoid = new BABYLON.Vector3(0.4, 0.8, 0.4);
}
Questa funzione consente al sistema di conflitto nella scena e fotocamera del gioco e imposta ellissoide della fotocamera, che può essere considerate come dimensioni del lettore. Si tratta di una casella, 0.8x1.6x0.8 unità, una dimensione umana approssimativamente Media (in questo caso) di ridimensionamento. La fotocamera deve questa casella perché non è una rete. Il sistema di collisione Babylon. js analizza collisioni tra reti, solo per questo motivo una mesh debba essere simulata della fotocamera. Ellissoide definisce il centro dell'oggetto, pertanto 0,4 si traduce in 0,8 nella dimensione. È inoltre attivata la gravità della scena, che verrà applicata ai movimenti della fotocamera.
Dopo avere ottenuto la fotocamera conflitti abilitati, è necessario abilitare terra e corsia ispezione collisione. Questa operazione viene eseguita con un semplice flag booleano impostato su ogni rete a cui che si desidera entri in conflitto con:
function enableMeshesCollision(meshes) {
meshes.forEach(function(mesh) {
mesh.checkCollisions = true;
});
}
Aggiunta di due chiamate di funzione per il metodo init (funzione) è il passaggio finale:
// init function from the first part of the tutorial.
...
enableCameraCollision(camera, scene);
enableMeshesCollision[[floor, lane, gutters[0], gutters[1]]);
}
Attività solo del rilevamento delle collisioni è impedire che le trame unione uno in altro. La funzionalità di gravità è stata implementata per mantenere la fotocamera verso terra. Per creare un'interazione fisica realistica tra reti specifiche, in questo caso la palla e il PIN, è necessario un sistema più complesso: del motore di fisica.
Generare la palla, integrazione in Babylon. js di fisica
L'azione principale del gioco consiste nel generare la palla verso il PIN. I requisiti sono abbastanza semplici: Il lettore deve essere in grado di impostare la direzione e la forza del lancio. Se vengono raggiunti i pin specifici, sono deve essere compresa. Se il PIN raggiunto altri pin, quelli deve essere compresa, nonché. Se il giocatore genera la palla al lato, deve essere compresa nella barra di navigazione. Il PIN deve essere compresa in base alla velocità con cui è stata generata la palla a tali file.
Questo è esattamente il dominio di un motore di fisica. Il motore di fisica calcola dynamics corpo le mesh in tempo reale e calcola il movimento successivo in base alle forze applicate. In poche parole, il motore di fisica è quella che decide cosa accade a una mesh quando è in conflitto con un'altra rete o quando le trame vengono spostate da un utente. Prende in considerazione velocità corrente della rete, peso, forma e altro ancora.
Per calcolare le dinamiche corpo rigida (spostamento nello spazio successivo per della mesh) in tempo reale, il motore di fisica deve semplificare la mesh. A tale scopo, ogni rete presenta un impostore, una trama semplice che delimita l'oggetto (in genere una sfera o una casella). Questo riduce la precisione dei calcoli, ma consente un rapido calcolo delle forze fisiche che si spostano l'oggetto. Per ulteriori informazioni su come i dati fisici motore works, visitare bit.ly/1S9AIsU.
Il motore di fisica non fa parte di Babylon. js. Anziché eseguire il commit di un solo motore, gli sviluppatori del framework ha deciso di implementare le interfacce per i motori di fisica diversa e consentono agli sviluppatori di decidere quale uno che si desidera utilizzare. Babylon. js dispone attualmente di interfacce ai motori di due fisica: Cannon.js (cannonjs.org) e Oimo.js (github.com/lo-th/Oimo.js). Entrambi sono meravigliosi! Personalmente ritengo Oimo integrazione leggermente migliore e, pertanto, verrà utilizzato il gioco piste. L'interfaccia per Cannon.js è stato completamente riscritto per 2.3 Babylon. js, che è ora in alpha e supporta ora la versione più recente di Cannon.js con una vasta gamma di correzioni di bug e nuove impostori, incluse le mappe complesse altezza. Si consiglia che fare una prova se si utilizza Babylon. js 2.3 o versione successiva.
Abilitazione del motore di fisica viene eseguita tramite una semplice riga di codice:
scene.enablePhysics(new BABYLON.Vector3(0, -9.8, 0), new BABYLON.OimoJSPlugin());
Questo imposta la gravità della scena e definisce il motore di fisica da utilizzare. Sostituendo Oimo.js con Cannon.js richiede semplicemente modificando la variabile al secondo:
new BABYLON.CannonJSPlugin()
Successivamente, è necessario definire gli impostori su tutti gli oggetti. Questa operazione viene eseguita utilizzando funzione setPhysicsState della mesh. Ad esempio, ecco la definizione della corsia:
lane.setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, {
mass: 0,
friction: 0.5,
restitution: 0
});
La prima variabile è il tipo di impostore. Poiché la corsia è un perfetto, usare l'impostore casella. La seconda variabile è definizione fisica del corpo, ovvero il peso (in chilogrammi), il fattore di attrito e restituzione. Massa della corsia è 0, come si desidera mantenere nella sua posizione. Massa di impostazione su 0 in un impostore mantiene l'oggetto bloccato nella posizione corrente.
Utilizzare per la sfera impostore la sfera. Una palla piste pesa circa 6,8 kg e viene in genere molto semplice, pertanto non è richiesto alcun attrito:
ball.setPhysicsState(BABYLON.PhysicsEngine.SphereImpostor, {
mass: 6.8,
friction: 0,
restitution: 0
});
Se vi state chiedendo perché utilizzo kg e non libbre, è lo stesso motivo che utilizzo metri e non piedi nel corso del progetto: Il motore di fisica utilizza il sistema metrico. Ad esempio, la definizione di gravità predefinita è (0,-9.8, 0), che è circa la gravità della terra. Le unità utilizzate sono metri al secondo al quadrato (m/s2).
A questo punto è necessario essere in grado di generare la palla. A tale scopo si utilizzerà una funzionalità del motore di fisica diversa, l'applicazione di un impulso a un determinato oggetto. In questo caso, impulso è una forza in una direzione specifica che viene applicata a trame con fisica abilitata. Ad esempio, per generare la palla, utilizzerò le operazioni seguenti:
ball.applyImpulse(new BABYLON.Vector3(0, 0, 20), ball.getAbsolutePosition());
La prima variabile è il vettore dell'impulso unità qui 20 sull'asse Z, ovvero in avanti quando viene reimpostata la scena. La seconda variabile specifica in cui l'oggetto deve essere applicata la forza. In questo caso, è il centro della palla. Basti pensare a un espediente riportata di seguito in un gioco di pool, la coda può colpire la palla in numerosi punti diversi, non solo al centro. Viene descritto come simulare tale comportamento.
Ora è possibile generare la palla in avanti. Figura 1 Mostra l'aspetto quando la palla raggiunge il PIN.
.png "La palla piste raggiunge il PIN")
Figura 1 la palla piste raggiunge il PIN
Tuttavia, ancora mancano intensità e direzione.
Esistono diversi modi per impostare la direzione. Le due opzioni migliori sono utilizzare direzione della fotocamera corrente o la posizione del puntatore tocco. Mi porto con la seconda opzione.
Individua il punto in cui l'utente interessate nello spazio viene eseguita utilizzando l'oggetto PickingInfo, inviato da ogni evento puntatore verso il basso e il puntatore. L'oggetto PickingInfo contiene informazioni sul punto in cui che è stato attivato l'evento, tra cui la rete è stata aggiornata, il punto della rete che è stata aggiornata, la distanza a questo punto e altro ancora. Se è stata aggiornata alcuna trama, variabile hit del PickingInfo sarà false. Una scena Babylon. js ha due funzioni di callback utile che mi consentiranno le informazioni di prelievo: onPointerUp e onPointerDown. Questi due callback vengono attivati quando vengono attivati gli eventi del puntatore e la firma è la seguente:
function(evt: PointerEvent, pickInfo: PickingInfo) => void
La variabile evt è l'evento JavaScript originale che è stata attivata. La seconda variabile è di informazioni generate dal framework di ogni evento generato.
È possibile utilizzare tali callback per generare il gioco della palla nella direzione specificata:
scene.onPointerUp = function(evt, pickInfo) {
if (pickInfo.hit) {
// Calculate the direction using the picked point and the ball's position.
var direction = pickInfo.pickedPoint.subtract(ball.position);
// To be able to apply scaling correctly, normalization is required.
direction = direction.normalize();
// Give it a bit more power (scale the normalized direction).
var impulse = direction.scale(20);
// Apply the impulse (and throw the ball).
ball.applyImpulse(impulse, new BABYLON.Vector3(0, 0, 0));
}
}
Ora è possibile generare il gioco della palla in una direzione specifica. Il manca solo la forza del lancio. Per aggiungere che è necessario calcolare il delta dei fotogrammi tra gli eventi puntatore verso il basso e il puntatore. Figura 2 viene illustrata la funzione utilizzata per generare la palla con un livello specifico.
Figura 2, che genera la palla con intensità e direzione
var strengthCounter = 5;
var counterUp = function() {
strengthCounter += 0.5;
}
// This function will be called on pointer-down events.
scene.onPointerDown = function(evt, pickInfo) {
// Start increasing the strength counter.
scene.registerBeforeRender(counterUp);
}
// This function will be called on pointer-up events.
scene.onPointerUp = function(evt, pickInfo) {
// Stop increasing the strength counter.
scene.unregisterBeforeRender(counterUp);
// Calculate throw direction.
var direction = pickInfo.pickedPoint.subtract(ball.position).normalize();
// Impulse is multiplied with the strength counter with max value of 25.
var impulse = direction.scale(Math.min(strengthCounter, 25));
// Apply the impulse.
ball.applyImpulse(impulse, ball.getAbsolutePosition());
// Register a function that will run before each render call
scene.registerBeforeRender(function ballCheck() {
if (ball.intersectsMesh(floor, false)) {
// The ball intersects with the floor, stop checking its position.
scene.unregisterBeforeRender(ballCheck);
// Let the ball roll around for 1.5 seconds before resetting it.
setTimeout(function() {
var newPosition = scene.activeCameras[0].position.clone();
newPosition.y /= 2;
resetBall(ball, newPosition);
}, 1500);
}
});
strengthCounter = 5;
}
Nota sugli eventi del puntatore, ovvero deliberatamente non viene utilizzato il termine "clic". Babylon. js utilizza il sistema di eventi del puntatore, che estende le funzionalità di clic del mouse del browser tocco e altri dispositivi di input in grado di scegliere, toccare e che punta. In questo modo, un tocco su un dispositivo smartphone o un clic del mouse su un computer desktop sia attiva l'evento stesso. Per simulare questa situazione nei browser che non supportano la funzionalità, Babylon. js utilizza hand.js, un polyfill per gli eventi del puntatore che è incluso anche in Index. HTML del gioco. Ulteriori informazioni su hand.js nella relativa pagina di GitHub in bit.ly/1S4taHF. La bozza di eventi del puntatore è reperibile in bit.ly/1PAdo9J. Si noti che hand.js verrà sostituito in futuro con jQuery PEP (bit.ly/1NDMyYa).
Questo è tutto per fisica! Il gioco piste arma molto migliore.
Aggiunta di effetti Audio
Aggiunta di effetti audio a un gioco fornisce un notevole aumento di priorità per l'esperienza utente. Audio è possibile creare atmosfera a destra e aggiungere un po' più realismo al gioco piste. Per fortuna, Babylon. js include un motore di audio, introdotto nella versione 2.0. Il motore audio è basato sull'API Web Audio (bit.ly/1YgBWWQ), che è supportata in tutti i principali browser, ad eccezione di Internet Explorer. I formati di file che possono essere utilizzati dipendono dal browser.
Aggiungere tre diversi effetti audio. Il primo è il suono di ambiente, l'audio che simula l'ambiente circostante. Nel caso di un gioco di pallacanestro, i suoni di un edificio piste normalmente funzionerebbe correttamente, ma poiché la corsia piste esterno è stato creato in erba, alcuni suoni natura saranno migliori.
Per aggiungere un suono ambiente, sarà caricare il suono, AutoPlay e ciclo continuo costantemente:
var atmosphere = new BABYLON.Sound("Ambient", "ambient.mp3", scene, null, {
loop: true,
autoplay: true
});
Il suono continuamente dal momento in cui che viene caricato.
Il secondo effetto audio che aggiungerò è il suono della palla nella corsia di piste in sequenza. Il suono, purché la palla della corsia, ma il minuto che la palla lascia la corsia, verrà interrotta.
Innanzitutto, creare la sequenza audio:
var rollingSound = new BABYLON.Sound("rolling", "rolling.mp3", scene, null, {
loop: true,
autoplay: false
});
Il suono verrà caricato, ma non viene riprodotto fino a quando non eseguire la funzione di riproduzione, si verificherà quando viene generata la palla. Esteso la funzione Figura 2 e aggiungere quanto segue:
...ball.applyImpulse(impulse, new BABYLON.Vector3(0, 0, 0));
// Start the sound.
rollingSound.play();
...
Il suono interrompe quando la palla lascia la corsia:
...
If(ball.intersectsMesh(floor, false)) {
// Stop the sound.
rollingSound.stop();
...
}
...
Babylon. js consente di collegare un segnale acustico a una rete specifica. In questo modo automaticamente calcola il volume e la panoramica utilizzando la posizione della rete e crea un'esperienza più realistica. A tale scopo è sufficiente aggiungere la riga seguente dopo aver creato il suono:
rollingSound.attachToMesh(ball);
A questo punto l'audio verrà sempre riprodotto dalla posizione della palla.
L'ultimo effetto audio che si desidera aggiungere è la palla, colpire il PIN. A tale scopo il suono di creare e quindi collegarlo al pin prima:
var hitSound = new BABYLON.Sound("hit", "hit.mp3", scene);
hitSound.attachToMesh(pins[0]);
Riprodurre l'audio e non verrà riprodotto automaticamente.
Viene verrà riprodotto il suono ogni volta che la palla raggiunge uno dei pin. A tale scopo aggiungere una funzione che, dopo che viene generata la palla, verranno costantemente controllare se la palla si interseca con un pin. Se intersecano, I la funzione di annullare la registrazione e riproduzione del suono. Scopo, aggiungere le righe seguenti alla funzione scene.onPointerUp da Figura 2:
scene.registerBeforeRender(function ballIntersectsPins() {
// Some will return true if the ball hit any of the pins.
var intersects = pins.some(function (pin) {
return ball.intersectsMesh(pin, false);
});
if (intersects) {
// Unregister this function – stop inspecting the intersections.
scene.unregisterBeforeRender(ballIntersectsPins);
// Play the hit sound.
hit.play();
}
});
Il gioco dispone ora di tutti gli effetti audio che desidera aggiungere. Successivamente, continuerà a migliorare il gioco mediante l'aggiunta di una tabella di stato.
Si noti che non posso includere gli effetti audio che ho utilizzato con il progetto associato a causa di copyright del materiale. Non riuscivo trovare gli esempi audio disponibili gratuitamente che potrei inoltre pubblicare. Pertanto, il codice è commentato. Funzionerà se si aggiunge tre campioni audio utilizzato.
Aggiunta di una visualizzazione di punteggio
Dopo che un giocatore raggiunge il PIN, sarebbe perfetto vedere quanti di essi comunque supporto e quanti sono stati eliminati. A tale scopo aggiungere una tabella di stato.
La tabella di stato sarà un semplice piano nero con testo bianco su di esso. Per crearla, si utilizzerà la funzionalità di trama dinamico, ovvero un'area di disegno 2D che può essere utilizzato come una trama per oggetti 3D in gioco.
Creazione del piano e la trama dinamica è semplice:
var scoreTexture = new BABYLON.DynamicTexture("scoreTexture", 512, scene, true);
var scoreboard = BABYLON.Mesh.CreatePlane("scoreboard", 5, scene);
// Position the scoreboard after the lane.
scoreboard.position.z = 40;
// Create a material for the scoreboard.
scoreboard.material = new BABYLON.StandardMaterial("scoradboardMat", scene);
// Set the diffuse texture to be the dynamic texture.
scoreboard.material.diffuseTexture = scoreTexture;
La trama dinamica mi consente di disegnare direttamente nell'area di disegno sottostante mediante la funzione getContext, che restituisce un CanvasRenderingContext2D (mzl.la/1M2mz01). L'oggetto trama dinamica fornisce inoltre alcune funzioni della Guida che possono essere utile se non si desidera gestire direttamente con il contesto dell'area di disegno. Una di queste funzioni è drawText, che mi consente di creare una stringa con un carattere specifico all'inizio di questa area di disegno. Nell'area di lavoro verrà aggiornato ogni volta che cambia il numero di pin eliminati:
var score = 0;
scene.registerBeforeRender(function() {
var newScore = 10 - checkPins(pins, lane);
if (newScore != score) {
score = newScore;
// Clear the canvas.
scoreTexture.clear();
// Draw the text using a white font on black background.
scoreTexture.drawText(score + " pins down", 40, 100,
"bold 72px Arial", "white", "black");
}
});
Verifica se il PIN non sono attivi è superflua, verificare solo se la loro posizione sull'asse y è uguale a Y-posizione originale di tutti i pin (la variabile di predefiniti 'pinYPosition'):
function checkPins(pins) {
var pinsStanding = 0;
pins.forEach(function(pin, idx) {
// Is the pin still standing on top of the lane?
if (BABYLON.Tools.WithinEpsilon(pinYPosition, pin.position.y, 0.01)) {
pinsStanding++;
}
});
return pinsStanding;
}
La trama dinamica può essere visualizzata nel Figura 3.
.png "Tabella di stato del gioco")
Figura 3. il gioco tabellone
Tutti sono mancano ora è una funzione per reimpostare la corsia e l'area. Aggiungere un trigger di azione da utilizzare quando viene premuto il tasto R sulla tastiera (vedere Figura 4).
Figura 4 reimpostando la corsia e la bacheca
function clear() {
// Reset the score.
score = 0;
// Initialize the pins.
initPins(scene, pins);
// Clear the dynamic texture and draw a welcome string.
scoreTexture.clear();
scoreTexture.drawText("welcome!", 120, 100, "bold 72px Arial", "white", "black");
}
scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction({
trigger: BABYLON.ActionManager.OnKeyUpTrigger,
parameter: "r"
}, clear));
Premendo il tasto R verrà reimpostazione o inizializzare la scena.
Aggiunta di una fotocamera completamento
Un interessante effetto che si desidera aggiungere al gioco è una fotocamera che seguirà la palla piste quando viene generata. Si desidera una fotocamera che consentirà di "rollback" con la palla verso il PIN e interrompe quando la palla viene nuovamente nella posizione originale. È possibile eseguire questa operazione utilizzando la funzionalità multi-view di Babylon. js.
Nella prima parte di questa esercitazione impostare l'oggetto fotocamera disponibile come attiva la scena del fotocamera utilizzando:
scene.activeCamera = camera
La variabile di fotocamera attiva indica quale videocamera è sottoposto a rendering, nel caso in cui è definito più di una scena. Ciò va bene quando desidera utilizzare una fotocamera unica in tutto il gioco. Ma se si desidera avere un effetto "picture in picture", una videocamera attiva non è sufficiente. Al contrario, è necessario utilizzare la matrice di fotocamere active archiviata nella scena in scene.activeCameras il nome della variabile. Fotocamere in questa matrice verranno visualizzate uno dopo l'altro. Se non è vuota, scene.activeCameras scene.activeCamera verrà ignorato.
Il primo passaggio è aggiungere la fotocamera gratuita originale a questa matrice. Questo avviene facilmente in init (funzione). Sostituire scene.activeCamera = fotocamera con:
scene.activeCameras.push(camera);
Nel secondo passaggio creerà una fotocamera seguire quando viene generata la palla:
var followCamera = new BABYLON.FollowCamera("followCamera", ball.position, scene);
followCamera.radius = 1.5; // How far from the object should the camera be.
followCamera.heightOffset = 0.8; // How high above the object should it be.
followCamera.rotationOffset = 180; // The camera's angle. here - from behind.
followCamera.cameraAcceleration = 0.5 // Acceleration of the camera.
followCamera.maxCameraSpeed = 20; // The camera's max speed.
Questo crea la fotocamera e lo configura per supporto di 1,5 unità dietro e 0,8 sopra l'oggetto sta per seguire. Questo oggetto seguito deve essere la palla, ma si è verificato un problema, potrebbe attivare la palla e una rotazione della fotocamera con esso. Si desidera ottenere è un percorso di volo"" dietro l'oggetto. A tale scopo, creerà un oggetto di completamento che riceverà la posizione della palla, ma non la rotazione:
// Create a very small simple mesh.
var followObject = BABYLON.Mesh.CreateBox("followObject", 0.001, scene);
// Set its position to be the same as the ball's position.
followObject.position = ball.position;
È necessario impostare la destinazione della camera sia il followObject:
followCamera.target = followObject;
A questo punto la fotocamera seguirà l'oggetto di completamento che si sposta con la palla.
L'ultima configurazione che richiede la fotocamera è il riquadro di visualizzazione. Ogni fotocamera può definire l'area dello schermo che verrà utilizzato. Questa operazione viene eseguita con la variabile viewport, che viene definita mediante le seguenti variabili:
var viewport = new BABYLON.Viewport(xPosition, yPosition, width, height);
Tutti i valori sono compresi tra 0 e 1, come una percentuale (dove 1 corrisponde al 100 percento) rispetto all'altezza e larghezza della schermata. I primi due valori definiscono rettangolo della camera punto di partenza sullo schermo e la larghezza e altezza definire larghezza e altezza rispetto alle dimensioni reali della schermata del rettangolo. Le impostazioni predefinite del riquadro di visualizzazione sono (0.0, 0.0, 1.0, 1.0), che copre l'intero schermo. Per la fotocamera completamento verrà imposto l'altezza e larghezza sul 30% dello schermo:
followCamera.viewport = nuovo BABYLON. Viewport (0.0, 0.0, 0,3, 0,3);
Figura 5 Mostra la visualizzazione del gioco aspetto dopo che viene generata una palla. Si noti la visualizzazione nell'angolo inferiore sinistro.
.png "Effetto di immagine in immagine con la fotocamera completamento")
Figura 5 Picture in Picture effetto con la fotocamera completamento
Il controllo di input, quali schermata è reazione agli eventi di input come il puntatore o gli eventi di tastiera, vengono mantenute con la fotocamera liberata definita nella prima parte di questa esercitazione. Questo è già stato impostato in init (funzione).
Come sviluppare ulteriormente il gioco
All'inizio, ho già accennato che questo gioco sarebbe un prototipo. Esistono un paio di elementi da implementare per trasformarlo in un gioco reale.
Il primo, è possibile aggiungere un'interfaccia utente grafica, uno che richiede il nome dell'utente, ad esempio, Mostra le opzioni di configurazione (ad esempio se è possibile semplicemente per giocare a pallacanestro Mars! Impostare semplicemente la gravità in modo diverso.) e qualsiasi altra cosa potrebbe essere necessario un utente.
Babylon. js non offre una modalità nativa per creare un'interfaccia utente grafica, ma i membri della community sono create alcune estensioni è possibile utilizzare per creare interfacce utente grafiche meravigliosi, tra cui CastorGUI (bit.ly/1M2xEhD), bGUi (bit.ly/1LCR6jk) e l'estensione della finestra di dialogo in bit.ly/1MUKpXH. Il primo utilizza HTML e CSS per aggiungere livelli sopra l'area di disegno 3D. Gli altri aggiungere finestre di dialogo 3D alla scena utilizzando regolari mesh e trame dinamiche. È consigliabile che provare prima di scrivere la propria soluzione. Sono semplici da usare e semplifica il processo di creazione di GUI molto.
Un altro miglioramento, è possibile utilizzare trame migliorate. Le trame funziona correttamente tutti create con le funzioni interne Babylon. js e chiaramente è previsto un limite a ciò che può essere ottenuta con solo codice. Esistono molti siti che offrono oggetti 3D gratuiti e a pagamento. La migliore, a mio parere è TurboSquid (bit.ly/1jSrTZy). Cercare trame poli bassa per ottenere prestazioni migliori.
E dopo l'aggiunta di più reti, perché viene aggiunto un oggetto risorse umano che effettivamente genererà la palla? Eseguire l'operazione è necessario che la funzionalità di animazione e integrato in Babylon. js e una rete che supporta la funzionalità. Si noterà una demo che mostra l'aspetto in babylonjs.com/BONES.
Come tocco finale, provare a eseguire il gioco descrittivo realtà virtuale. L'unica modifica necessita in questo caso è utilizzata dalla fotocamera. Sostituire il FreeCamera con un WebVRFreeCamera e vedere come è facile come destinazione cartone Google.
Esistono molti altri miglioramenti è possibile apportare: aggiunta di una fotocamera sopra il PIN, aggiunta di ulteriori corsie sul lato per la funzionalità multiutente, limitando lo spostamento della fotocamera e la posizione da cui può essere generata la palla e altro ancora. Si consiglia di prenderne individuare alcune delle altre funzionalità per conto proprio.
Avvolgendo
Mi auguro che era sarà divertente letto questa esercitazione, poiché avevo già la scrittura e che offre un push nella direzione giusta e ottiene da provare Babylon. js. Questo è davvero un framework eccellente, creato con grande amore dagli sviluppatori per gli sviluppatori. Visitare babylonjs.com per altre demo di framework. E ancora una volta, non esitare a partecipare a forum di supporto e porre qualsiasi domanda che è. Sono non disponibili stupide domande, risposte solo stupide!
Raanan Weberè un consulente IT, sviluppatori dello stack completa, marito e father. Nel tempo libero si contribuisce a Babylon. js e altri progetti open source. È possibile leggere il suo blog all'indirizzo blog.raananweber.com.
Grazie all'esperto tecnica seguente per la revisione di questo articolo: David Catuhe