---

Dicembre 2015

Volume 30 numero 13

Il presente articolo è stato tradotto automaticamente.

Sviluppo di giochi - Babylon. js: sviluppo di un gioco di base per il Web

Da Raanan Weber

Babylon. js è un motore basato su WebGL 3D che è incentrata principalmente sulla facilità d'uso e lo sviluppo di giochi. Come motore 3D, include gli strumenti per creare, visualizzare e le reti di trama in uno spazio e aggiungere sorgenti di luce e fotocamere digitali. Poiché è incentrato sul gioco, Babylon. js dispone di alcune funzionalità aggiuntive che non richiede un motore 3D regolari. Include il supporto nativo per il rilevamento dei conflitti, gravità scena, fotocamere orientata ai servizi di gioco (ad esempio, una completamento telecamera che tiene traccia di un oggetto in movimento), nonché il supporto nativo per Oculus Rift e altri dispositivi virtuali realtà. Dispone di un sistema di plug-in motore di fisica, il supporto audio nativo, un gestore delle azioni basate su input utente e molto altro ancora. In questa esercitazione verrà esaminato tutte queste funzionalità.

Sull'esercitazione

In questa esercitazione verranno sviluppate di un gioco di piste semplice. Sarà creare una corsia piste, aggiungere 10 pin e una palla pallacanestro e offrono la possibilità di generare la palla. Altrimenti sicuramente sarà pronta per il rilascio non funziona correttamente, ma viene descritto come sviluppare un gioco con gli strumenti che fornisce Babylon. js. Verrà deliberatamente evitare utilizzando gli strumenti esterni durante lo sviluppo. Gli oggetti, fotocamere, le trame e altro ancora verrà creato utilizzando solo il codice JavaScript.

La versione Babylon. js utilizzerò durante questa esercitazione è la versione stabile più recente, ovvero 2.1. David Catuhe e il team di sviluppo Babylon sta tentando di mantenere il framework come-compatibile, è solo possibile presupporre che in questa esercitazione funzioneranno correttamente nelle versioni future, almeno fino alla versione principale successiva. Utilizzo di Visual Studio 2015 Community Edition, ma è possibile utilizzare qualsiasi IDE desiderato.

Nell'esercitazione verrà diviso in due parti. In questo articolo, illustrerò una panoramica degli elementi costitutivi base di Babylon. js. Creare la trama, aggiungere fotocamere e sorgenti di luce e consentono l'interazione utente semplice trame. Nella seconda parte, illustrerò dove Babylon. js si esprime al meglio collisione aggiunta e fisica, audio, le azioni dell'utente e tipi speciali di fotocamere.

Per iniziare: Un nuovo progetto Babylon. js

Un semplice progetto Babylon. js è un sito Web statico. Poiché si utilizza Visual Studio, utilizzerò il server IIS locale incorporato in Visual Studio per ospitare i file statici. Visual Studio non dispone di un modello per un sito Web statico, non è necessario un approccio diverso.

Innanzitutto, creare una nuova soluzione vuota. Aprire Visual Studio e passare al File | Nuovo | Progetto. Selezionare altri tipi di progetto nel riquadro sinistro e quindi soluzione vuota, come illustrato nella Figura 1. Assegnare un nome (ho utilizzato BabylonBowling) la soluzione e fare clic su OK.

Figura 1 creando una nuova soluzione vuota in Visual Studio

Per creare un nuovo sito Web statico, è necessario creare una nuova directory per ospitarlo. Pulsante destro del mouse sulla soluzione vuota, quindi fare clic su Apri cartella in Esplora File, come illustrato nella Figura 2.

Figura 2 aprendo la cartella della soluzione in Esplora File

Creare una nuova directory per il progetto denominato BabylonBowling e chiudere Esplora File.

Pulsante destro del mouse sulla soluzione e scegliere Aggiungi | Sito Web esistente. Selezionare la cartella appena creata (accertarsi di scegliere la cartella appena creata e non la cartella della soluzione) e fare clic su Apri. È ora un sito Web vuoto come un unico progetto di questa soluzione.

Dopo aver creato il progetto, è necessario aggiungere il framework e le dipendenze del framework. Esistono alcuni modi per eseguire questa operazione. Il modo più semplice è usare Gestione pacchetti NuGet.

Pulsante destro del mouse sul progetto e scegliere Gestisci pacchetti NuGet. Fare clic nel campo di ricerca (tasto di scelta rapida è Ctrl + E) e digitare babylon. Verrà visualizzata una finestra simile a quello di Figura 3. Selezionare BabylonJS. Assicurarsi che la versione selezionata 2.1 (o la versione stabile più recente) e fare clic su Installa. Fare clic su OK nel riquadro di anteprima finestra visualizzata (se uno) e Babylon. js verrà installato nel progetto vuoto, tra cui una scena demo.

Figura 3 aggiunta Babylon. js tramite Gestione pacchetti NuGet

Per coloro che utilizzano npm come Gestione pacchetti, è possibile installare Babylon. js utilizzando il comando:

npm install babylonjs

Dopo l'installazione del pacchetto, dovrebbero essere i seguenti file nella cartella scripts:

• Babylon. js, una versione minimizzata Babylon. js
• Babylon.max.js, una versione di debug di Babylon. js
• Oimo.js, JS il Oimo fisica motore che verrà utilizzato nella seconda parte dell'esercitazione
• poly2tri.js, una libreria di triangolazione facoltativo (github.com/r3mi/poly2tri.js)
• mano-minified.js, polyfill un puntatore eventi; Questo non è presente quando si usa npm, quindi installare il comando:

npm install handjs

Il programma di installazione di NuGet crea anche un file index. HTML e un file index. js.

Un errore nel pacchetto NuGet aggiunge una riga non necessario al file Web. config. Fino a quando non risolto, fare doppio clic su questo file e rimuovere la riga evidenziata Figura 4 (nella soluzione, la riga 9).

Figura 4 eliminare la riga evidenziata dal Web. config

È ora possibile testare il progetto. Aprire il progetto nel browser predefinito utilizzando Ctrl + MAIUSC + W o facendo clic sul pulsante Esegui sulla barra di spostamento superiore. Se viene visualizzato astronave 3D nella Figura 5, il progetto è tutto a posto.

Figura 5 astronave Babylon predefinito

Per coloro che utilizzano ambienti diversi, seguire l'esercitazione "Creazione di base scena" nella pagina della documentazione Babylon. js per ottenere lo stato corrente. Consiglio ancora di utilizzare npm per installare le dipendenze se non si usa NuGet. L'esercitazione è reperibile in bit.ly/1MXT6WP.

Per iniziare da zero, eliminare la funzione createScene in Index. js.

I blocchi predefiniti

I primi due elementi che tratterò sono il motore e della scena.

Il motore è l'oggetto responsabile della comunicazione con l'API WebGL a basso livello (1 WebGL è basato su OpenGL ES2, con una sintassi molto simile). Anziché dover scrivere codice di basso livello WebGL, il motore fornisce un'API di livello superiore e più facile comprensione. È inoltre trasparente allo sviluppatore. Ad eccezione di programma di installazione iniziale del progetto, non direttamente utilizzo il motore affatto. Alcune funzionalità di livello inferiore può essere ottenuto utilizzando il modulo di gestione, ma non descritte in questo.

Il motore richiede due parametri per inizializzare. Il primo è un'area di disegno su cui disegnare. Nell'area di lavoro è un elemento HTML che è già in Index. HTML. Il secondo parametro è lo stato di anti-aliasing (attivato o disattivato).

Aprire il file index. js attualmente vuoto e aggiungere le righe di codice seguenti:

function init() {
  var engine = initEngine();
}
function initEngine() {
  // Get the canvas element from index.html
  var canvas = document.getElementById("renderCanvas");
  // Initialize the BABYLON 3D engine
  var engine = new BABYLON.Engine(canvas, true);
  return engine;
}

Durante lo sviluppo, utilizzerò la funzione di inizializzazione per aggiungere nuove funzionalità a ogni passaggio. Ogni elemento che è possibile creare avrà la propria funzione.

Per comprendere ciò che rappresenta una scena, pensare a un sito Web con diverse pagine. Una singola pagina Web contiene il testo, immagini, i listener di eventi e tutte le altre risorse necessarie per eseguire il rendering che, una singola pagina. Caricamento di un'altra pagina Carica risorse diverse.

Come con una singola pagina Web, la scena contiene le risorse necessarie alla mostra uno, un singolo 3D "pagina". Questa scena può essere molto grandi e completo di risorse, ovvero le reti, fotocamere, luci, le azioni dell'utente e altro ancora. Ma per passare da una pagina a altra, è consigliabile una nuova scena. È inoltre responsabile per il rendering delle risorse proprie e comunicare le informazioni necessarie al motore di scena. Il gioco piste richiede una sola scena. Ma se è pianificato aggiungere nuovi livelli o un gioco bonus, è necessario crearli utilizzando le scene di nuovo.

Per inizializzare la scena richiede solo il motore che è stato creato. Aggiungere quanto segue al file index. js:

function createScene(engine) {
  var scene = new BABYLON.Scene(engine);
  // Register a render loop to repeatedly render the scene
  engine.runRenderLoop(function () {
      scene.render();
  });
}

Innanzitutto, creare l'oggetto di scena. Le righe successive sono l'unica interazione faccio in modo che il motore. Indicano al motore di rendering questa scena specifica ogni volta che il ciclo di rendering viene eseguito.

Aggiungere questa riga di codice alla fine della funzione di inizializzazione per creare effettivamente la scena:

var scene = createScene(engine);

Due ulteriori operazioni prima di continuare. Quando si ridimensiona la finestra del browser, l'area di disegno è anche da ridimensionare. Il motore necessario ridimensionare anche la larghezza interna e l'altezza per mantenere la scena nella prospettiva. Aggiungendo le righe seguenti alla funzione initEngine subito prima che il motore restituito; istruzione manterrà la scena in prospettiva:

// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
  engine.resize();
});

In secondo luogo è alter index. HTML per utilizzare la nuova funzione di inizializzazione. Aprire index. HTML e individuare il tag di script che contiene la chiamata a createScene. Modificare createScene init, quindi salvare index. HTML e chiuderlo.

Scena ha un livello di debug estremamente avanzato che consente di eseguire il debug della scena viene eseguito il rendering. Visualizza il numero di reti viene eseguito il rendering e i frame correnti al secondo (FPS). Consente la disattivazione della funzionalità quali la trama e nasconde e rende più semplice individuare trame perse. Attivare il livello di debug è semplice:

scene.debugLayer.show();

Che e si sarà in grado di eseguire il debug della scena per conto proprio.

Ora è disponibile un motore e una scena e sono pronto a iniziare ad aggiungere una videocamera, illuminazione e trame per creare la scena di una partita a Bowling.

Videocamere

Babylon. js offre molti tipi di fotocamere digitali, ciascuna con scopi specifici. Prima di scegliere la fotocamera per il gioco, esaminare i tipi più comuni:

• Fotocamera gratuita è una fotocamera prima-persona-tiro a segno. È possibile spostare liberamente in tutta la scena, utilizzando i tasti di direzione, e la direzione può essere impostata utilizzando il mouse. Facoltativo gravità e dei conflitti può essere abilitato il rilevamento, nonché.
• Arco ruotare viene utilizzata la rotazione intorno a una destinazione specifica. Utilizzando il mouse, gli eventi di tastiera o, l'utente può visualizzare l'oggetto da tutte le direzioni.
• Fotocamera touch è una fotocamera gratuita che utilizza eventi di tocco come input. È adatto per tutte le piattaforme mobili.
• Completamento della fotocamera segue automaticamente una destinazione specifica.

Babylon. js supporta fotocamere WebVR e l'orientamento di dispositivo in modo nativo, che è possibile risolvere facilmente tali dispositivi del Oculus Rift o cartone Google.

Un nuovo concetto introdotto nella versione 2.1 rende ogni tipo di fotocamera 3D pronto. Ciò significa che è possibile impostare ogni tipo di camera per adattarla occhiali rosso, blu e Oculus del Rift stereoscopico visualizzazione (anaglifici 3D). Figura 6 vengono mostrate la scena astronave sottoposti a rendering con la fotocamera senza anaglifici e Figura 7 Mostra la scena con la fotocamera stereoscopica.

Figura 6 anaglifici 3D fotocamera

Figura 7 fotocamera Stereoscopico

Per il gioco piste, utilizzerò due tipi di fotocamere. Il primo è fotocamera principale del lettore, che imposterà la posizione da cui verrà generata la palla piste. Questo è lo scopo esatto della camera gratuita. Inoltre, è necessario aggiungere una visualizzazione diversa, ovvero quando la palla è indirizzamento, si desidera seguirlo fino a quando non raggiunge il PIN.

In primo luogo, aggiungere la fotocamera gratuita. La funzione createFreeCamera accetta la scena come una singola variabile:

function createFreeCamera(scene) {
  var camera = new BABYLON.FreeCamera(
    "player camera", BABYLON.Vector3.Zero(), scene);
  return camera;
}

Ho creato una posizione della fotocamera nella posizione 0, 0,0 del mio scena. Successivamente, estenderà questa funzione (se necessario) per configurare ulteriormente la fotocamera.

E, naturalmente, non dimenticare di aggiungerlo alla funzione di inizializzazione, alla fine:

...
// Create the main player camera
var camera = createFreeCamera(scene);
// Attach the control from the canvas' user input
camera.attachControl(engine.getRenderingCanvas());
// Set the camera to be the main active camera
scene.activeCamera = camera;

La funzione attachControl registra i listener di eventi JavaScript nativi necessari per la fotocamera specifica (ad esempio quelle per il mouse o touch input da tastiera). Impostazione fotocamera attiva della scena indica che questo tipo di camera deve essere utilizzato per il rendering della scena.

Aggiungere la seconda telecamera nella parte due, dopo l'abilitazione di un'istruzione throw palla.

Creazione della corsia

Una corsia piste è una struttura geometrica relativamente semplice. Inizierò impostando alcune costanti, che sono le dimensioni effettive di una corsia piste in metri. Il motivo per che utilizzare metri è il motore di fisica, che verrà spiegato nella seconda parte di questo articolo.

È possibile visualizzare le costanti nel file di progetto. Per calcolare tali valori è stato usato in linea disponibili informazioni da bowling corsie.

Dopo aver impostato le costanti, sono pronto per avviare la creazione delle mesh che creerà la corsia piste. Il piano (2D) viene visualizzato Figura 8. Inizierò creando mesh. Trama mesh, consentire agli utenti di materiali, verranno in seguito.

Figura 8 piano 2D della scena piste corsia

Innanzitutto, creare un piano per la scena globale:

function createFloor(scene) {
  var floor = BABYLON.Mesh.CreateGround("floor", 100, 100, 1, scene, false);
  return floor;
}

Verrà creato un piano semplice 100 x 100 metri. Tutte le reti create utilizzando Babylon. js funzioni interne vengono create in posizione 0, 0,0 della scena e al centro. Esistono tre variabili importanti per trasformare la mesh e posizionarlo correttamente nella scena:

• mesh.Position è un vettore di posizione di rete in uno spazio
• mesh.Scaling è il fattore di scala della mesh in ciascuno degli assi
• mesh.Rotation sono gli angoli di Eulero, in radianti, di rotazione in ogni asse. Se si abbia maggiore dimestichezza con quaternioni (So), è possibile utilizzare mesh.rotationQuaternion

Dopo l'aggiunta della funzione al mio init (funzione) e l'avvio della scena, si nota un aspetto interessante, non è possibile visualizzare il piano è stato aggiunto a tutti! Il motivo è che la fotocamera e il piano siano stati creati nello stesso punto nello spazio (0, 0,0). Poiché è flat completamente riprogettato, sola visualizzazione dall'alto (o sotto) verrà illustrato nella schermata. Tornando all'inizializzazione della camera nella funzione createCamera, modificare la seconda variabile, ovvero la posizione iniziale della fotocamera, per un nuovo vettore, ovvero la fotocamera sarà 1.7 unità (metri, in questo caso) suolo:

var camera = new BABYLON.FreeCamera(
  "cam", new BABYLON.Vector3(0,1.7,0), scene);

Se si avvia la scena a questo punto, si noterà pavimento allungamento oltre la metà dello schermo, come illustrato nella Figura 9.

Figura 9 aggiunta di un piano per la scena

Provare gli spostamenti con mouse e le frecce per ottenere il blocco di controllo libero camera.

Si noterà che il piano è completamente nero. Mancano light! Aggiungere una nuova funzione, createLight, quale estenderà in un secondo momento.

function createLight(scene) {
  var light = new BABYLON.DirectionalLight(
    "dir01", new BABYLON.Vector3(-0.5, -1, -0.5), scene);
  // Set a position in order to enable shadows later
  light.position = new BABYLON.Vector3(20, 40, 20);
  return light;
}

Non dimenticare di aggiungere questa riga init:

var light = createLight(scene);

Babylon. js include quattro tipi di luci:

• Emisferica: Ambiente della luce, predefiniti con colore di sfondo (i pixel sono rivolte verso il basso), cielo colore (i pixel sono rivolto verso l'alto) e con riflessione speculare.
• Punto: Una luce emessa da un punto singolo in tutte le direzioni, come il sole.
• Campione: Solo come suggerisce il nome, una luce da un singolo punto con un raggio di emissione e direzione specificato. Questa luce può emettere ombreggiature.
• Direzionale: Luce emessa in una direzione specifica ovunque. Il sole potrebbe essere una luce punto, ma una luce direzionale simula la luce del sole migliori. Questa luce può inoltre generare ombreggiature, ed è quello utilizzato nell'esempio.

A questo punto il piano sarà bianco. Babylon. js viene assegnato un materiale bianco predefinito per ogni rete con alcun materiale assegnato.

La corsia stesso sarà una casella, di cui il piano che è stato appena creato:

function createLane(scene) {
  var lane = BABYLON.Mesh.CreateBox("lane", 1, scene, false);
  lane.scaling = new BABYLON.Vector3(
    laneWidth, laneHeight, totalLaneLength);
  lane.position.y = laneHeight / 2; // New position due to mesh centering
  lane.position.z = totalLaneLength / 2;
  return lane;
}

Ancora una volta, non dimenticare di aggiungere questa funzione init.

Si può vedere come utilizzato il parametro di ridimensionamento, ho creato una finestra di dimensioni 1 x 1 x 1 e modificato il ridimensionamento per adattare le costanti predefinita.

Utilizzando la stessa tecnica, ho creato due caselle che fungono da bordi la barra di navigazione su entrambi i lati della corsia di (questo è ciò che la palla rientrerà in se viene generata nella direzione errata). Esaminiamo il progetto associato per vedere come ho fatto provare crearli manualmente.

I pin pallacanestro e palla

Che cos'è ora mancante è il PIN di pallacanestro e il gioco della palla. Per creare il PIN, si utilizzerà un cilindro, solo un singolo cilindro che verrà moltiplicato molte volte, ovvero 10 per essere precisi. In Babylon. js, tali moltiplicazioni sono definite istanze. Un'istanza è una copia esatta di una rete, ad eccezione di trasformazione in uno spazio. Ciò significa che un'istanza geometry e la trama non può essere modificati, ma la posizione, ridimensionamento e rotazione possibile. Personalmente mai usare l'oggetto originale nella scena; Se 10 pin, sarà creare un pin, disattivarlo e creare 10 istanze in 10 posizioni predefinite:

function createPins(scene) {
  // Create the main pin
  var mainPin = BABYLON.Mesh.CreateCylinder(
    "pin", pinHeight, pinDiameter / 2, pinDiameter, 6, 1, scene);
  // Disable it so it won't show
  mainPin.setEnabled(false);
  return pinPositions.map(function (positionInSpace, idx) {
    var pin = new BABYLON.InstancedMesh("pin-" + idx, mainPin);
    pin.position = positionInSpace;
    return pin;
  });
}

Le variabili mancante utilizzate in questa funzione è reperibile nel file di progetto, tra cui pinPositions, che è una matrice con le posizioni globali di tutti i pin di 10.

Ora per la palla piste. Una palla piste è una sfera semplice, con 3 fori per le dita. Per creare la sfera, utilizzerò la funzione CreateSphere che offre Babylon. js:

var sphere = BABYLON.Mesh.CreateSphere("sphere", 12, 0.22, scene);

Ora è necessario eseguire il drill-aree libere. A tale che, utilizzerò una funzionalità denominata costruttivo geometria solida (CSG) integrata in Babylon. js, che mi consente di aggiungere o sottrarre le reti da mesh esistente, o meglio ancora, per aggiungere o sottrarre le geometrie uno da altro. Ciò significa che è che se si intersecano due reti, è possibile "rimuovere" uno da altro e ottenere una mesh modificata. In questo caso, si desidera creare tre fori rotondi in una sfera. Un cilindro rientreranno perfettamente.

Innanzitutto, creare il cilindro che verrà utilizzato per il primo foro:

var cylinder = BABYLON.Mesh.CreateCylinder(
  "cylinder", 0.15, 0.02, 0.02, 8, 1, scene, false);

Successivamente, si modificherà la posizione del cilindro da intersecare con la sfera:

cylinder.position.y += 0.15;

Quindi, creare gli oggetti CSG e utilizzarli per sottrarre il cilindro da sfera di:

var sphereCSG = BABYLON.CSG.FromMesh(sphere);
var cylinderCSG = BABYLON.CSG.FromMesh(cylinder);
sphereCSG.subtractInPlace(cylinderCSG);
var ball = sphereCSG.toMesh("test", sphere.material, scene, false);

Figura 10 illustra ciò che la sfera e cilindri simile e destro del mouse accanto a esso la palla piste che è stata creata utilizzando CSG.

Figura 10 creazione la palla pallacanestro

Figura 11 e playground in babylonjs-playground.com / #BIG0J Mostra tutto il codice utilizzato per creare il gioco della palla da zero.

Figura 11 Creazione di una palla piste utilizzando CSG

// The original sphere, from which the ball will be made
var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene);
sphere.material = new BABYLON.StandardMaterial("sphereMat", scene);
// Create pivot-parent-boxes to rotate the cylinders correctly
var box1 = BABYLON.Mesh.CreateBox("parentBox", 1, scene);
var box2 = box1.clone("parentBox");
var box3 = box1.clone("parentBox");
// Set rotation to each parent box
box2.rotate(BABYLON.Axis.X, 0.3);
box3.rotate(BABYLON.Axis.Z, 0.3);
box1.rotate(new BABYLON.Vector3(0.5, 0, 0.5), -0.2);
[box1, box2, box3].forEach(function (boxMesh) {
// Compute the world matrix so the CSG will get the rotation correctly
  boxMesh.computeWorldMatrix(true);
  // Make the boxes invisible
  boxMesh.isVisible = false;
});
// Create the 3 cylinders
var cylinder1 = BABYLON.Mesh.CreateCylinder(
  "cylinder", 4, 1, 1, 30, 1, scene, false);
cylinder1.position.y += 4;
cylinder1.parent = box1;
var cylinder2 = cylinder1.clone("cylinder", box2);
var cylinder3 = cylinder1.clone("cylinder", box3);
// Create the sphere's CSG object
var sphereCSG = BABYLON.CSG.FromMesh(sphere);
// Subtract all cylinders from the sphere's CSG object
[cylinder1, cylinder2, cylinder3].forEach(function (cylinderMesh) {
  sphereCSG.subtractInPlace(BABYLON.CSG.FromMesh(cylinderMesh));
});
// Create a new mesh from the sphere CSG
var ball = sphereCSG.toMesh("bowling ball", sphere.material, scene, false);

Trame

Disponga delle maglie che è stato creato il materiale predefinito bianco. Per rendere più interessante della scena, è necessario aggiungere altro materiale. Il materiale Babylon. js standard (shader predefinito) dispone di molte delle definizioni per la riproduzione, che non illustrate di seguito. (Per ulteriori informazioni su shader predefinito Babylon. js è possibile provare all'Editor materiale BabylonJS in materialeditor.raananweber.com.) Tuttavia, illustrerò come trama della corsia e il gioco della palla piste.

Per la palla piste di trama utilizzerò un'altra funzionalità Babylon. js meraviglioso: texture procedurali. Le trame procedurale non sono trame standard che utilizzano immagini 2D. Vengono creati a livello di programmazione le trame che vengono generate dalla GPU (anziché la CPU), che ha un impatto positivo sulle prestazioni sulla scena. Babylon dispone di molti tipi di trame procedurale, legno, mattoni, incendio, cloud, erba e altro ancora. Se si desidera utilizzare quello è di marmo.

Aggiungere le seguenti righe dopo la creazione di trama della palla lo rende una palla Marmo verde simile a quello in Figura 12:

var marbleMaterial = new BABYLON.StandardMaterial("ball", scene);
var marbleTexture = new BABYLON.MarbleProceduralTexture(
  "marble", 512, scene);
marbleTexture.numberOfTilesHeight = 2;
marbleTexture.numberOfTilesWidth = 2;
marbleMaterial.ambientTexture = marbleTexture;
// Set the diffuse color to the wanted ball's color (green)
marbleMaterial.diffuseColor = BABYLON.Color3.Green();
ball.material = marbleMaterial;

Figura 12 Marmo applicato a palla

Aggiunta di una trama di legno per la corsia può essere effettuata utilizzando texture di diffusione del materiale standard. Ma non perché volevo parlare di materiale della corsia. Se si esamina una corsia piste reale, si noterà che dispone di diversi insiemi di punti e un set di frecce o triangoli su di esso. Per simulare che, potrei creare una trama di dimensioni molto grande con tutti gli elementi su di esso, ma che possono influire sulle prestazioni (a causa di una trama di dimensioni molto grande) o ridurre la qualità dell'immagine.

Potrei inoltre utilizzare decalcomanie, una nuova funzionalità introdotta in 2.1 Babylon. js. Decalcomanie rappresentano un modo di "disegno" all'inizio di una rete già trama. Possono essere utilizzati, ad esempio, per simulare gunshots su una parete o, come nel mio caso, aggiungere effetti a una corsia piste. Decalcomanie sono trame e sono pertanto trama con materiali standard. Figura 13 viene illustrato come aggiungere la riga foul e Figura 14 Mostra l'aspetto della corsia dopo l'aggiunta di decalcomanie, nonché come il piano e guide aspetto dopo l'utilizzo di trame procedurale (brick ed erba) come materiale.

Figura 13 aggiunta di Decal Foul riga

// Set the decal's position
var foulLinePosition = new BABYLON.Vector3(0, laneHeight, foulLaneDistance);
var decalSize = new BABYLON.Vector3(1,1,1);
// Create the decal (name, the mesh to add it to, position, up vector and the size)
var foulLine = BABYLON.Mesh.CreateDecal("foulLine", lane, foulLinePosition, BABYLON.Vector3.Up(), decalSize);
// Set the rendering group so it will render after the lane
foulLine.renderingGroupId = 1;
// Set the material
var foulMaterial = new BABYLON.StandardMaterial("foulMat", scene);
foulMaterial.diffuseTexture =
  new BABYLON.Texture("Assets/dots2-w-line.png", scene);
foulMaterial.diffuseTexture.hasAlpha = true;
foulLine.material = foulMaterial;
// If the action manager wasn't initialized, create a new one
scene.actionManager = new BABYLON.ActionManager(scene);
// Register an action to generate a new color each time I press "c"
scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction({
  trigger: BABYLON.ActionManager.OnKeyUpTrigger, parameter: "c" },
  // The function to execute every time "c" is pressed"
  function () {
    ball.material.diffuseColor =
      new BABYLON.Color3(Math.random(), Math.random(), Math.random());
  }
));

Figura 14 corsia con decalcomanie aggiunto

L'Input dell'utente, il gestore delle azioni Babylon. js

Un motore di gioco completo, Babylon. js è un modo semplice per interagire con l'input dell'utente. Si supponga che si desidera modificare il colore della palla utilizzando la chiave di C. Ogni volta che si preme C, si desidera impostare un colore casuale per il gioco della palla:

// If the action manager wasn't initialized, create a new one
scene.actionManager = new BABYLON.ActionManager(scene);
// Register an action to generate a new color each time I press C
scene.actionManager.registerAction(
  new BABYLON.ExecuteCodeAction({ trigger:
  BABYLON.ActionManager.OnKeyUpTrigger, parameter: "c" },
  // The function to execute every time C is pressed
  function () {
    ball.material.diffuseColor =
      new BABYLON.Color3(Math.random(), Math.random(), Math.random());
  }
));

Il gestore delle azioni Babylon. js è un potente strumento per il controllo di azioni in base ai trigger. Un trigger può essere mouse lo spostamento o clic, mesh intersezioni o input della tastiera. Esistono molti trigger e azioni da cui scegliere. Dare un'occhiata al sito esercitazione Babylon. js (bit.ly/1MEkNRo) per visualizzare tutti gli elementi.

Se si desidera utilizzare il gestore delle azioni per controllare la palla e reimpostare la scena. Aggiungere le azioni nella seconda parte dell'esercitazione.

Utilizzo delle risorse esterne

Ho creato il mesh dovevo utilizzando le funzioni interne di Babylon. js. La maggior parte dei casi, non sarà sufficiente. Babylon. js offre molte reti, di settori e le caselle di barre multifunzione complesse, ma è difficile creare modelli complessi, ad esempio persone, armi per richiedere-per-the-Web o un astronave per il clone Space Invaders.

Babylon. js offre utilità di esportazione dei plug-in a molti strumenti 3D noti, ad esempio Blender e Studio 3D. È inoltre possibile esportare i modelli da Clara.io meraviglioso e scaricare un file .babylon.

Babylon. js utilizza il proprio formato di file che può contenere un'intera scena, tra cui trame, fotocamere, luci, animazioni, geometrie e altre informazioni. Pertanto, se si desidera, è possibile utilizzare Blender solo per modellare l'intera scena. È inoltre possibile importare trame singole.

Tuttavia, che non fa parte dell'ambito dell'esercitazione. Per questo articolo, ho voluto Mostra come creare un semplice gioco usando Babylon. js da solo.

Conclusioni

Ho molte funzionalità integrate in Babylon. js sono stati ignorati. Ha un elevato numero di funzionalità e consiglio vivamente di verificare il lab (babylonjs playground.com), la pagina della documentazione (doc.babylonjs.com) e la pagina principale Babylon. js (babylonjs.com) per visualizzare le infinite possibilità. Se si riscontrano difficoltà nel con qualsiasi parte di questa esercitazione, contattare me o uno qualsiasi di eroi Babylon. js al forum di sviluppatori di giochi HTML5 Babylon. js molto attivi (bit.ly/1GmUyzq).

Nel prossimo articolo, creare il gioco effettivo: aggiunta di fisica e rilevamento delle collisioni, la possibilità di generare la palla, suoni e altro ancora.

---

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 tecnico Microsoft seguente per la revisione di questo articolo: David Catuhe