---

Décembre 2015

Volume 30, numéro 13

Cet article a fait l'objet d'une traduction automatique.

Développement de jeux - Babylon.js : Conception d’un jeu de base pour le web

Par Raanan Weber

Babylon.js est un moteur 3D WebGL qui se concentre principalement sur le développement de jeux et de facilité d'utilisation. Un moteur 3D, propose les outils permettant de créer, afficher et de texture des mailles dans l'espace et d'ajouter des sources de lumière et les appareils photo. Car elle est axée sur le jeu, Babylon.js dispose de fonctionnalités supplémentaires qui ne nécessite pas un moteur de 3D normal. Elle est prise en charge native pour détection de collision, gravité de la scène, caméras orienté sur le jeu (par exemple, un suivi-appareil photo qui assure le suivi d'un objet mobile), ainsi que la prise en charge native pour Oculus Rift et autres périphériques virtuels réalité. Il possède un système de plug-in du moteur physique, prise en charge audio native, un gestionnaire d'action basé sur l'entrée d'utilisateur et bien plus encore. Je vais aborder toutes ces fonctionnalités dans ce didacticiel.

À propos du didacticiel

Dans ce didacticiel, je développerai une partie de bowling simple. Je vais créer une voie de bowling, ajouter 10 quilles et une boule de bowling et offrent la possibilité de lever la balle. Mon jeu sûrement ne sera pas prêt à être publié, mais il vous montre comment vous pouvez développer un jeu à l'aide des outils que Babylon.js fournit. Allez éviter délibérément l'utilisation d'outils externes pendant le développement. Les objets, les caméras, les textures et bien plus encore est créé à l'aide de code JavaScript uniquement.

La version Babylon.js que je vais utiliser au cours de ce didacticiel est la dernière version stable : 2.1. David Catuhe et l'équipe de développement Babylon essayez de conserver l'infrastructure aussi compatibilité descendante que possible, donc je peux uniquement suppose que ce didacticiel fonctionnent correctement sur les versions ultérieures, au moins jusqu'à la prochaine version majeure. Et j'utilise Visual Studio 2015 Community Edition, mais vous pouvez utiliser n'importe quel IDE que vous souhaitez.

Le didacticiel est divisé en deux parties. Dans cet article, je vais présenter une vue d'ensemble des blocs de construction de Babylon.js. Je vais créer les panneaux, la texture, ajouter des caméras et des sources de lumière et activer l'interaction utilisateur simple. Dans la deuxième partie, je vais montrer où Babylon.js tout son attrait en collision Ajout et physique, audio, actions utilisateur et les types spéciaux de caméras.

Mise en route : Un nouveau projet Babylon.js

Un simple projet Babylon.js est un site Web statique. Étant donné que j'utilise Visual Studio, je vais utiliser le serveur IIS local incorporé dans Visual Studio pour héberger les fichiers statiques. Visual Studio ne possède un modèle pour un site Web statique, une approche différente est nécessaire.

Tout d'abord, créez une nouvelle solution. Ouvrez Visual Studio et accédez au fichier | Nouveau | Projet. Sélectionnez d'autres Types de projets sur le volet gauche, puis la nouvelle Solution, comme indiqué dans Figure 1. Nommez la solution (j'ai utilisé BabylonBowling), puis cliquez sur OK.

Figure 1 Création d'une nouvelle Solution dans Visual Studio

Pour créer un nouveau site Web statique, vous devez créer un nouveau répertoire pour l'héberger. Avec le bouton droit sur la solution vide, puis cliquez sur Ouvrir le dossier dans l'Explorateur de fichiers, comme indiqué dans Figure 2.

Figure 2 ouverture de dossier de la Solution dans l'Explorateur de fichiers

Créez un répertoire pour le projet appelé BabylonBowling et fermez l'Explorateur de fichiers.

Avec le bouton droit sur la solution et choisissez Ajouter | Site Web existant. Sélectionnez le dossier nouvellement créé (Assurez-vous que vous choisissez le dossier que vous venez de créer et dossier de la solution pas) et cliquez sur Ouvrir. Vous devez maintenant avoir un site Web vide en tant que le seul projet de cette solution.

Après avoir créé le projet, vous devez ajouter l'infrastructure et les dépendances de l'infrastructure. Il existe plusieurs moyens de procéder. La façon la plus simple consiste à utiliser le Gestionnaire de Package NuGet.

Avec le bouton droit sur le projet et choisissez Gérer les packages NuGet. Cliquez sur le champ de recherche (le raccourci clavier est Ctrl + E) et tapez babylon. Vous verrez une fenêtre similaire à celle de Figure 3. Sélectionnez BabylonJS. Assurez-vous que la Version sélectionnée est 2.1 (ou la dernière version disponible), puis cliquez sur Installer. Cliquez sur OK dans l'aperçu de fenêtre qui s'affiche (si une s'affiche) et Babylon.js seront installés dans votre projet vide, y compris une scène de démonstration.

Figure 3 Ajout Babylon.js à l'aide du Gestionnaire de Package NuGet

Pour ceux qui utilisent npm comme un gestionnaire de package, vous pouvez installer Babylon.js à l'aide de la commande :

npm install babylonjs

Après avoir installé le package, vous devez les fichiers suivants dans le dossier scripts :

• Babylon.js, une version réduite de Babylon.js
• Babylon.max.js, une version debug de Babylon.js
• Oimo.js, le Oimo JS physique moteur qui sera utilisé dans la deuxième partie de ce didacticiel
• poly2tri.js, une bibliothèque de triangulation facultatif (github.com/r3mi/poly2tri.js)
• main-minified.js, un polyfill pointeur-événements ; Cela est manquant lors de l'utilisation de npm, donc installer à l'aide de la commande :

npm install handjs

Le programme d'installation de NuGet crée également un fichier index.html et un fichier index.js.

Une erreur dans le package NuGet ajoute une ligne inutile au fichier web.config. Jusqu'à ce que c'est le cas, double-cliquez sur ce fichier et supprimez la ligne mise en surbrillance dans Figure 4 (dans ma solution, il de la ligne 9).

Figure 4 supprimer la ligne en surbrillance à partir de web.config

Vous pouvez maintenant tester le projet. Ouvrez le projet dans votre navigateur par défaut à l'aide de Ctrl + Maj + W ou en cliquant sur le bouton exécuter dans la barre de navigation supérieure. Si vous voyez la navette de spatiale 3D illustré Figure 5, votre projet est entièrement configurée.

Figure 5 la valeur par défaut de Babylon vaisseau spatial

Pour ceux qui utilisent différents IDE, suivez le didacticiel « Création base scène » sur la page de Documentation de Babylon.js pour accéder à l'état actuel. Je recommande toujours à l'aide de npm pour installer les dépendances si ce n'est pas l'utilisation de NuGet. Vous trouverez le didacticiel à bit.ly/1MXT6WP.

Pour démarrer à partir de zéro, supprimez la fonction createScene dans index.js.

Les blocs de construction

Les deux premiers éléments, que j'aborderai sont le moteur et la scène.

Le moteur est l'objet chargé de communiquer avec l'API WebGL de bas niveau (WebGL 1 est basé sur OpenGL ES2, avec une syntaxe très similaire). Au lieu de vous obliger à écrire du code de bas niveau WebGL, le moteur fournit une API de niveau supérieur et plus facile à comprendre. Il est également transparente pour le développeur. À l'exception de la configuration initiale du projet, ne sont pas directement utiliser le moteur du tout. Certaines fonctionnalités de niveau inférieur peuvent être réalisées à l'aide du moteur, mais je n'aborderai cela.

Le moteur requiert deux paramètres pour initialiser. Le premier est un canevas sur lequel dessiner. La zone de dessin est un élément HTML qui est déjà dans index.html. Le deuxième paramètre est l'état de l'anticrénelage (on ou off).

Ouvrez le fichier index.js actuellement vide et ajoutez les lignes de code suivantes :

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;
}

Pendant le développement, je vais utiliser la fonction init pour ajouter de nouvelles fonctionnalités à chaque étape. Chaque élément que créer aura sa propre fonction.

Pour comprendre ce que représente une scène, imaginez un site Web avec des pages différentes. Une page Web contient du texte, les images, les écouteurs d'événements et toutes les autres ressources nécessaires pour afficher une page en question. Le chargement d'une autre page charge différentes ressources.

Comme avec une page Web, la scène conserve les ressources nécessaires à afficher un seul 3D « page ». Cette scène peut être très volumineux et plus complète des ressources — des mailles, caméras, lumières, des actions de l'utilisateur et bien plus encore. Mais afin de passer d'une page à l'autre, une nouvelle séquence est recommandée. La scène est également responsable de ses propres ressources de rendu et communiquer les informations nécessaires pour le moteur. La partie de bowling requiert uniquement une scène unique. Mais si j'ai planifié ajouter de nouveaux niveaux ou un jeu de bonus, je crée les à l'aide de nouvelles séquences.

Pour initialiser la scène requiert uniquement le moteur que j'ai créé. Ajoutez le code suivant au fichier 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();
  });
}

Je commence par créer l'objet de la scène. Les lignes sont la seule interaction que j'ai avec le moteur. Ils indiquent au moteur à rendre cette scène spécifique chaque fois que la boucle d'affichage est en cours d'exécution.

Ajoutez cette ligne de code à la fin de la fonction d'initialisation pour créer la séquence :

var scene = createScene(engine);

Deux choses avant de continuer. Lorsque vous redimensionnez la fenêtre du navigateur, la zone de dessin est également en cours de redimensionnement. Le moteur doit également redimensionner interne largeur et sa hauteur à la scène en perspective. Ajouter les lignes suivantes à la fonction initEngine juste avant le moteur de retour ; instruction conserve la scène en perspective :

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

La deuxième chose consiste à modifier index.html pour utiliser la nouvelle fonction d'initialisation. Ouvrez index.html et recherchez la balise de script contenant l'appel à createScene. Remplacez createScene init, puis enregistrer index.html et fermez-le.

La scène a une couche de débogage très avancée qui vous permet de déboguer la scène rendue. Il indique le nombre de mailles rendue et les images par seconde (FPS) en cours. Il permet de désactiver des fonctionnalités telles que la texture et shadows et rend faciles à trouver des mailles perdues. Activation de la couche de débogage est simple :

scene.debugLayer.show();

Qui et vous serez en mesure de déboguer votre scène sur votre propre.

J'ai maintenant un moteur et une scène, et je suis prêt à commencer à ajouter une caméra, d'éclairage et mailles pour créer mon scène foot.

Appareils photo

Babylon.js propose de nombreux types d'appareils photo, chacun avec son propre objet spécifique. Avant de choisir l'appareil photo pour le jeu, passons en revue les plus courants :

• Gratuit est une caméra premier-TIR. Il peut déplacer librement tout au long de la scène, à l'aide des touches de direction du clavier, et la direction peut être définie à l'aide de la souris. Détection de collision et de gravité facultatif peut ainsi être activée.
• Arc faire pivoter la caméra est utilisée pour faire pivoter autour d'une cible spécifique. À l'aide de la souris, les événements de clavier ou tactiles, l'utilisateur peut afficher l'objet de toutes les directions.
• Touch est une caméra gratuite qu'utilise les événements de tactiles comme entrée. Il convient pour toutes les plateformes mobiles.
• Suivez la caméra suit automatiquement une cible spécifique.

Babylon.js prend en charge les appareils WebVR et l'orientation de l'appareil en mode natif, ce qui signifie que vous pouvez facilement résoudre les périphériques tels que les Oculus Rift ou Google carton.

Un nouveau concept introduit dans la version 2.1 permet à chaque type de caméra 3D prêt. Cela signifie que chaque type de caméra peut être défini en fonction d'affichage stéréoscopique Oculus Rift-style et lunettes de rouge, bleu (STÉRÉOSCOPIQUES 3D). Figure 6 présente la scène vaisseau spatial restituée avec la caméra STÉRÉOSCOPIQUES libres et Figure 7 montre la scène avec la caméra stéréoscopique.

Figure 6 STÉRÉOSCOPIQUES la caméra 3D

Figure 7 la caméra stéréoscopique

Pour mon jeu de bowling, je vais utiliser deux types d'appareils photo. La première est la caméra principale du joueur, qui définit la position à partir de laquelle la boule de bowling sera levée. Il s'agit de l'objectif exact de la caméra gratuite. Je souhaite également ajouter une vue différente, lorsque le curseur est en route, je veux suivre jusqu'à ce qu'il atteigne les broches.

Tout d'abord, j'ajoute la caméra gratuite. La fonction createFreeCamera prend la scène comme une seule variable :

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

J'ai créé une position de la caméra à l'emplacement 0,0,0 de mon scène. Plus tard, je développerai cette fonction (si nécessaire) pour configurer l'appareil photo.

Et, bien entendu, n'oubliez pas d'ajouter à la fonction d'initialisation, à la fin :

...
// 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 fonction attachControl enregistre les écouteurs d'événements JavaScript natifs nécessaires pour l'appareil photo spécifique (tels que ceux de la souris ou du clavier, tactile). Caméra active de la scène indique à la scène que cet appareil doit être utilisé pour le rendu.

Je vais ajouter le second appareil photo dans la deuxième partie, après avoir activé une throw balle.

Création de la voie

Une voie de bowling est une structure relativement simple géométrique. Je commencerai en définissant certaines constantes, qui sont les dimensions réelles d'une voie de bowling en mètres. La raison pour laquelle que j'utilise des compteurs est le moteur physique, qui est détaillé dans la deuxième partie de cet article.

Vous pouvez voir l'une des constantes dans le fichier projet. Pour calculer ces valeurs, j'ai utilisé les informations en ligne disponible sur au bowling couloirs.

Après avoir défini les constantes, je suis prêt à commencer à créer des mailles qui construiront la voie de bowling. Mon plan (2D) est affiché dans Figure 8. Je commencerai en créant des mailles. Texture mailles, en leur donnant des matériaux — viendront par la suite.

Figure 8 le Plan 2D de la scène de Bowling Lane

Tout d'abord, je vais créer un étage global de la scène :

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

Cela crée un étage simple 100 x 100 mètres. Toutes les mailles créées à l'aide de Babylon.js les fonctions internes sont créées au centre et positionner 0,0,0 de la scène. Il existe trois variables importantes qui transforment la maille et de positionner correctement dans la scène :

• Mesh.position est un vecteur de position de la maille dans l'espace
• Mesh.Scaling est le facteur d'échelle de la maille dans chacun des axes
• Mesh.rotation sont les angles d'Euler (en radians) de la rotation de chaque axe. Si vous n'êtes plus à l'aise avec des quaternions (je sais que je suis), vous pouvez utiliser à la place mesh.rotationQuaternion

Après l'ajout de la fonction à la fonction init et le démarrage de la scène, j'ai remarqué une chose intéressante, je ne vois l'étage que j'ai ajouté tout ! La raison est que l'appareil photo et le plancher ont été créés sur le même point dans l'espace (0,0,0). Le sol est complètement plat, uniquement l'affichage ci-dessus (ou antérieur) affichent il sur l'écran. Revenir à l'initialisation de l'appareil photo dans la fonction createCamera, modifiez la deuxième variable, qui est la position initiale de l'appareil photo, à un nouveau vecteur : l'appareil photo peut désormais être 1.7 unités (dans ce cas, mètres) au-dessus du sol :

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

Si vous démarrez la scène maintenant, vous verrez le plancher étirement plus de la moitié de l'écran, comme indiqué dans Figure 9.

Figure 9 Ajout d'un étage à la scène

Essayez de déplacer avec les flèches et la souris pour obtenir le blocage de contrôle de la caméra gratuite.

Vous remarquerez que le sol est entièrement noir. Il manque la lumière ! Je vais ajouter une nouvelle fonction, createLight, lequel je développerai par la suite.

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;
}

N'oubliez pas d'ajouter cette ligne à init :

var light = createLight(scene);

Babylon.js a quatre types de lumières :

• Hémisphérique : Lumière, prédéfinis avec la couleur d'a à z (les pixels qui font face vers le bas), ciel couleur (les pixels qui sont orienté vers le haut) et spéculaire ambiante.
• Point : Une lumière émise à partir d'un point unique dans toutes les directions, comme le soleil.
• Place : Tout comme le nom l'indique, une lumière depuis un point unique avec un rayon d'émission et de direction. Ce voyant peut émettre des ombres.
• Direction : Lumière émise dans une direction spécifique en tout lieu. Le soleil est peut-être une lumière point, mais une lumière directionnelle soleil mieux. Ce voyant peut également émettre des ombres, et il est celui utilisé dans mon exemple.

Désormais, le sol sera blanc. Babylon.js affecte un matériau blanc par défaut à chaque maille avec aucun matériau attribué.

La voie lui-même sera une zone, mises l'étage que je viens de créer :

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;
}

Une fois encore, n'oubliez pas d'ajouter cette fonction init.

Vous pouvez voir comment j'ai utilisé le paramètre de mise à l'échelle, j'ai créé une zone de taille 1 x 1 x 1 et modifié sa mise à l'échelle pour s'ajuster à l'une des constantes je prédéfinie.

À l'aide de la même technique, créé deux zones qui agiront comme mes bordures marge des deux côtés de la voie (c'est ce que la balle se classent dans si elle est levée dans la mauvaise direction). Essayez de les créer vous-même et examinez le projet qui accompagne cet article pour voir comment je l'ai fait.

Codes confidentiels et boule de bowling

Quelle est maintenant manquant est les broches de bowling et la balle. Pour créer les broches, j'utiliserai un cylindre, juste un cylindre unique qui sera multiplié autant de fois, 10 pour être exact. Dans Babylon.js, ces multiplications sont appelées des instances. Une instance est une copie exacte d'un maillage, à l'exception de sa transformation dans l'espace. Cela signifie que la géométrie et la texture d'une instance ne peut pas être modifiés, mais la position, l'échelle et rotation peuvent. J'ai personnellement n'utilisez jamais l'objet d'origine dans la scène ; Si je veux 10 quilles, je vais créer un code confidentiel, désactivez-le et créer 10 instances de ce type dans 10 emplacements prédéfinis :

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;
  });
}

Vous trouverez les variables manquantes utilisées dans cette fonction dans le fichier projet, y compris les pinPositions, qui est un tableau avec les positions de toutes les 10 quilles globales.

À présent de la boule de bowling. Une boule de bowling est une sphère simple, avec 3 trous pour les doigts. Pour créer la sphère, je vais utiliser la fonction CreateSphere que Babylon.js offre :

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

Je dois maintenant Explorer les trous. Pour ce faire, je vais utiliser une fonctionnalité appelée la géométrie solide implicite (CSG) intégrée à Babylon.js, ce qui me permet d'ajouter ou de soustraire des mailles de maillages existants, ou mieux encore, pour ajouter ou retirer des géométries entre eux. Cela signifie que si l'intersection de deux mailles, je peux « supprimer » une autre et obtenir un maillage modifié. Dans mon cas, je souhaite créer trois trous dans un domaine. Un cylindre tiendra parfaitement.

Tout d'abord, je crée la bouteille, que je vais utiliser pour le premier trou :

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

Ensuite, je vais modifier la position du cylindre en intersection avec le domaine :

cylinder.position.y += 0.15;

Puis, je vais créer des objets CSG et utilisez-les pour soustraire du cylindre à partir de la sphère :

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

Figure 10 montre que la sphère cylindres l'aspect et avec le bouton droit en regard de celle-ci la boule de bowling créé à l'aide de CSG.

Figure 10 Création de la boule de Bowling

Figure 11 et sur le terrain de jeu à babylonjs-playground.com/BIG0J # afficher tout le code utilisé pour créer la balle à partir de zéro.

Figure 11 Création d'une boule de Bowling à l'aide de 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);

Textures

Tous les panneaux, que j'ai créé ont le matériau blanc par défaut. Pour rendre la scène plus attrayant, dois-je ajouter autres documents. Le matériel Babylon.js standard (le nuanceur par défaut) possède un grand nombre de définitions de jouer avec, dont je ne les aborder ici. (Pour en savoir plus sur le nuanceur de Babylon.js par défaut que vous pouvez essayer à l'éditeur de matériel BabylonJS à materialeditor.raananweber.com.) Je, toutefois, expliquerai comment je texturé la voie et la boule de bowling.

Pour la texture de la boule de bowling, je vais utiliser une autre fonctionnalité Babylon.js merveilleuse : textures procédurales. Les textures procédurales ne sont pas des textures standards qui utilisent des images 2D. Ils sont créés par programmation les textures qui sont générés par le processeur graphique (au lieu de l'UC), ce qui a un impact sur les performances positives sur la scène. Babylon a plusieurs types de textures procédurales, bois, briques, incendie, nuages, herbe et bien plus encore. Celui que je vais utiliser est la texture marbre.

Les lignes ajoutant le code suivant après la création du maillage de la balle rend une boule verte Marbre comme celui de la Figure 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;

Texture Marbre figure 12 appliqué à la balle

Ajout d'une texture en bois pour la voie peut être effectué à l'aide de la texture plaquée de diffusion de la matière standard. Mais ce n'est pas pourquoi je souhaite aborder les documents de la voie. Si vous examinez une voie de bowling réelle, vous remarquerez qu'il a plusieurs ensembles de points et un ensemble de flèches ou des triangles sur celui-ci. Pour simuler le fait que, je peux créer une texture très volumineuse avec chacune d'entre elles sur celui-ci, mais qui peuvent affecter les performances (en raison d'une texture de très grande taille) ou réduire la qualité d'image.

Je pourrais également utiliser décalques, une nouvelle fonctionnalité introduite dans Babylon.js 2.1. Décalques sont un moyen de « dessin » sur un maillage texturé déjà. Elles peuvent servir, par exemple, pour simuler gunshots sur un mur ou, comme dans le cas présent, ajoutez les décorations pour une voie de bowling. Décalques sont des maillages et sont par conséquent une texture à l'aide de documents standards. Figure 13 montre comment ajouter la ligne condenseur et Figure 14 montre à quoi ressemble la voie après avoir ajouté les décalques, ainsi que la manière dont le plancher et les marges de reliure rechercher à l'aide de textures procédurales (briques et herbe) en tant que documents.

Figure 13. Ajout de la ligne de condenseur Decal

// 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());
  }
));

Lane figure 14 avec décalques ajouté

Entrée d'utilisateur, le Gestionnaire d'Action Babylon.js

Comme un moteur de jeu complet, Babylon.js est un moyen simple d'interagir avec l'entrée d'utilisateur. Supposons que vous voulez modifier la couleur de la balle à l'aide de la clé C. Chaque fois que j'appuie sur le C, je souhaite définir une couleur aléatoire la balle :

// 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());
  }
));

Le Gestionnaire d'Action Babylon.js est un outil puissant permettant de contrôler les actions en fonction des déclencheurs. Un déclencheur peut être souris déplacement ou clics, intersections de maillage ou entrées du clavier. Il existe plusieurs déclencheurs et actions parmi lesquelles choisir. Un coup de œil sur le site Babylon.js didacticiel (bit.ly/1MEkNRo) pour tous les afficher.

Je vais utiliser le Gestionnaire d'action pour contrôler la balle et réinitialiser la scène. Je vais ajouter ces actions dans la deuxième partie du didacticiel.

L'utilisation des ressources externes

J'ai créé les panneaux, j'avais besoin en utilisant les fonctions internes de Babylon.js. La plupart du temps, cette opération est suffisante. Babylon.js offre un grand nombre de mailles, à partir de domaines et les boîtes de rubans complexes, mais il est difficile de créer des modèles complexes telles que des personnes, des armes pour votre Doom pour Web ou un vaisseau spatial pour votre clone envahisseurs de l'espace.

Babylon.js offre exportateur plug-ins à de nombreux outils 3D connus, tels que Blender et 3D-Studio. Vous pouvez également exporter vos modèles à partir de la Clara.io merveilleux et télécharger un fichier .babylon.

Babylon.js utilise son propre format de fichier peut contenir une scène, y compris les mailles, caméras, lumières, des animations, les géométries et autres informations. Par conséquent, si vous le souhaitez, vous pouvez utiliser Blender uniquement pour modéliser votre scène. Vous pouvez également importer des mailles uniques.

Toutefois, qui n'est pas partie du champ d'application de ce didacticiel. Pour cet article, je voulais simplement montrer comment vous pouvez créer un jeu simple à l'aide de Babylon.js uniquement.

Que réserve le futur ?

J'ai ignoré de nombreuses fonctionnalités intégrées dans Babylon.js. Il possède un très grand nombre de fonctionnalités et je vous recommande fortement le terrain de jeu (babylonjs-playground.com), la page de Documentation (doc.babylonjs.com) et la page principale de Babylon.js (babylonjs.com) pour voir les possibilités infinies. Si vous rencontrez des difficultés avec une partie de ce didacticiel, contactez me ou l'un des héros Babylon.js sur le forum Babylon.js HTML5 jeu développeurs très actif (bit.ly/1GmUyzq).

Dans le prochain article, je vais créer le jeu réel : ajout de physique et de détection de collision, la possibilité de lever la balle, sons et bien plus encore.

---

Raanan Weber est informatique consultant, développeur de pile complète, mari et père. Pendant son temps libre, il contribue à Babylon.js et d'autres projets open source. Vous pouvez lire son blog à l'adresse blog.raananweber.com.

Merci à l'experte technique Microsoft suivante d'avoir relu cet article : David Catuhe