Fil d'Ariane
Mis à jour le mardi 18 octobre 2016
  • 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mettez en place votre première scène

Connectez-vous ou inscrivez-vous pour bénéficier de toutes les fonctionnalités de ce cours !

Maintenant que nous avons vu tous les termes de 3D, nous allons pouvoir passer à ce chapitre sur la scène en toute sérénité. N'hésitez pas à revenir au chapitre précédent pour être sûrs d'être parfaitement prêts ! Allez, c'est parti !

Mettre en place l'environnement de travail !

Il est important d'organiser vos fichiers le plus minutieusement possible. Notre jeu sera composé d'images, de fichiers JavaScript pour la 3D ainsi que pour la partie connexion, de CSS, de HTML… Voyons ici comment nous allons diviser tout cela.

Partie HTML/CSS

Créez un dossier : c'est dans ce dossier que vous allez travailler sur votre jeu. À l'intérieur, créez un fichierindex.html avec la structure suivante :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <title>JUST SQUARES</title>
        <meta name="description" content="This game is an Webgl FPS multiplayer game realised for learn Babylonjs!" />
        <!-- SCRIPTS DE BASE -->
        <script src="http://www.babylonjs.com/babylon.js"></script>
        <script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
    </body>
</html>

Vous devez normalement comprendre le code ci-dessus. Les seules réelles nouveautés par rapport à un début de page web classique sont le canvas et les fichiers scripts ajoutés au début.

  • Le canvas est l'élément dans lequel sera entièrement rendu notre jeu en 3D.

  • Les scripts appellent la librairie BabylonJS ainsi que jQuery PEP, un outil qui permet d'utiliser certaines fonctionnalités de Babylon sur le navigateur d'un téléphone.

Deux éléments essentiels à notre application !

Créez un dossier que vous appellerezcss et dans lequel vous allez mettre votre première feuille de style,  mainStyle.css. Après avoir nommé votre fichier,  liez-le à notre index en rajoutant la ligne suivante avant la fin du  <head> :

<link rel="stylesheet" type="text/css" href="css/mainStyle.css" />

Partie JavaScript

Pour commencer, nous allons créer un dossier que nous nommerons  js  puis trois fichiers, un pour chaque aspect de la scène : l’environnement, le joueur ainsi qu'un fichier qui va appeler tous les autres. Nous les appellerons respectivement  Arena.js,  Player.js et Game.js. Pour le moment, ces trois fichiers sont vides. 

Ajoutez maintenant à votre fichier index.html les trois scripts que nous venons de créer, avec les lignes suivantes. Ajoutez celles-ci après la fin du <body> et avant la fin du  <html>.

<script src="js/Game.js"></script>
<script src="js/Player.js"></script>
<script src="js/Arena.js"></script>

Partie Assets

Nous allons ajouter un dernier fichier dans lequel nous allons mettre tous les éléments graphiques dont le jeu aura besoin : images, polices de caractères… Pour l'instant, ajoutez simplement le dossier assets à la racine, au même titre que  js et  css. Dans assets, créez deux nouveaux dossiers, fonts et  images.

Voilà à quoi doit ressembler votre arborescence pour l'instant :

Notre arborescence prête!
Notre arborescence prête !

Pour l'instant, le seul fichier qui doit contenir quoi que ce soit est le fichier  index.html. Voici à quoi il doit ressembler.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <title>JUST SQUARES</title>
        <meta name="description" content="Just Squares is an Webgl FPS multiplayer game realised with Babylon and Node JS." />
        <!-- SCRIPTS DE BASE -->
        <script src="http://www.babylonjs.com/babylon.js"></script>
        <script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
        <!-- FEUILLES CSS -->
        <link rel="stylesheet" type="text/css" href="css/mainStyle.css" />
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
    </body>
    
    <!-- SCRIPTS BABYLON -->
    <script src="js/Game.js"></script>
    <script src="js/Player.js"></script>
    <script src="js/Arena.js"></script>
</html>

Définir le canvas

Le canvas va nous permettre de créer notre 3D et de l'afficher sur tout l'écran. C'est parti de ce pas dans le fichier  mainStyle.css pour faire en sorte que le canvas s'affiche sur la totalité de l'écran.

html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}

Nous faisons en sorte que la fenêtre fasse toujours au maximum la taille de l'écran et nous empêchons le scroll sur les balises  html et  body. Enfin, nous faisons en sorte que renderCanvas prenne tout l'écran. 

Nous voilà enfin prêts à mettre les mains dans le cambouis ! Nos fichiers sont prêts, le serveur tourne, le café est prêt… C'est désormais à nous de jouer ! :) 

Notre première scène !

Dorénavant, rien ne se dresse sur notre chemin entre nous et le WebGL ! Ça vous dit de commencer à faire de la 3D ? Il est temps de taper nos premières lignes ! :) 

Game.js

Dirigeons-nous vers Game.js, le fichier principal de notre jeu. C'est ici que nous allons créer tous les ponts vers le joueur et l'arène de jeu. Pour commencer, il est temps de définir l'objet Game auquel on va associer une string qui contiendra l'id de notre canvas.  En plus de cela, vous allez ajouter quatre éléments essentiels que nous allons décortiquer ensemble !

Game = function(canvasId) {
    // Canvas et engine défini ici
    var canvas = document.getElementById(canvasId);
    var engine = new BABYLON.Engine(canvas, true);
    var _this = this;
    
    // On initie la scène avec une fonction associé à l'objet Game
    this.scene = this._initScene(engine);
    
    // Permet au jeu de tourner
    engine.runRenderLoop(function () {
        _this.scene.render();
    });

    // Ajuste la vue 3D si la fenetre est agrandi ou diminué
    window.addEventListener("resize", function () {
        if (engine) {
            engine.resize();
        }
    },false);

};


Game.prototype = {
    // Prototype d'initialisation de la scène
    _initScene : function(engine) {
        var scene = new BABYLON.Scene(engine);
        scene.clearColor=new BABYLON.Color3(0,0,0);
        return scene;
    }
};

Wow ! C'est sacrément complexe tout ça ! 

Ceci est le coeur du système ! On définit ici la partie qui va permettre de tout faire tourner. C'est ici que tout va se passer. Pas d'inquiétude, regardons tout cela ensemble.

// Canvas et engine défini ici
var canvas = document.getElementById(canvasId);
var engine = new BABYLON.Engine(canvas, true);
var _this = this;
  •  canvas récupère l'élément HTML du canvas, désigné par l'id défini dans index.html.

  •  engine va créer un moteur graphique basé sur Babylon, auquel on va affecter notre canvas.

  •  _this va vous être utile dans les boucles de notre classe.

Après avoir défini tout cela, initialisez la scène avec  _initScene. Vous allez avoir besoin de lui passer engine, défini plus tôt.

// On initie la scène avec une fonction associé à l'objet Game
this.scene = this._initScene(engine)

Avec cela, on va appeler la fonction définie plus bas :

// Prototype d'initialisation de la scène
_initScene : function(engine) {
    var scene = new BABYLON.Scene(engine);
    scene.clearColor=new BABYLON.Color3(0.9,0.9,0.9);
    return scene;
}
  •  scene est la scène de notre jeu. C'est là-dedans que tout va être rendu au niveau du jeu.

  •  scene.clearColor va définir la couleur de fond de notre application. Plus tard, nous ne devrions même plus voir ce fond : il sera caché par les murs de notre arène. Il prend en compte un Color3 , qui demande une valeur entre 0 et 1 sur Rouge, Vert et Bleu (0.9,0.9,0.9 correspond à gris clair).

Quand la scène a été créée et la couleur du ciel définie, nous renvoyons avec  return tout ce que nous avons fait.  Game , d'ou la fonction à été appelé, va se servir de tout cela pour rendre recalculer ce qu'on voit à l'écran chaque frame.

// Permet au jeu de tourner
engine.runRenderLoop(function () {
    _this.scene.render();
});

engine.runRenderLoop va se charger de générer ces frames. Tout ce qui sera défini la dedans sera effectué des que possible.

Enfin, une dernière fonction va vous permettre d'ajuster la taille du render 3D si la fenêtre change de taille.

// Ajuste la vue 3D si la fenetre est agrandi ou diminué
window.addEventListener("resize", function () {
    if (engine) {
        engine.resize();
    }
},false);

Cette fonction s'appelle…  engine.resize ! C'est une fonction native qui va ajuster le rendu selon la taille de la fenêtre du navigateur. Sans celle-ci, si vous redimensionnez la fenêtre, l'image sera déformée.

Maintenant que tout est initialisé, il ne nous reste plus qu'à appeler au tout début de notre fichier la fonction  Game après le chargement du DOM, c'est-à-dire après que tous les fichiers dans le jeu aient été chargés.

// Page entièrement chargé, on lance le jeu
document.addEventListener("DOMContentLoaded", function () {
    new Game('renderCanvas');
}, false);

Comme nous en avons parlé, nous envoyons l'id du<canvas> pour localiser où le jeu sera lancé.

Enregistrez le tout et lancez dans une fenêtre web !

Le fond de la page est devenu tout noir et la console JavaScript me dit "Uncaught Error: No camera defined"

Tout est parfaitement normal ! Nous n'avons effectivement pas défini de caméra, ce qui fait que Babylon ne sait pas où regarder ! Il est donc temps d'ajouter une première caméra. En route vers le fichier Player.js ! :)

Player.js

Vous allez voir, ce fichier sera bien moins volumineux que Game.js et nous allons à peine expliquer la syntaxe ici. Ces explications seront réservées pour les chapitres suivants ! Voici ce que vous allez devoir mettre dansPlayer.js :

Player = function(game, canvas) {
    // La scène du jeu
    this.scene = game.scene;

    // Initialisation de la caméra
    this._initCamera(this.scene, canvas);
    
};

Player.prototype = {
    _initCamera : function(scene, canvas) {
        // On crée la caméra
        this.camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene);

        // On demande à la caméra de regarder au point zéro de la scène
        this.camera.setTarget(BABYLON.Vector3.Zero());

        // On affecte le mouvement de la caméra au canvas
        this.camera.attachControl(canvas, true);
    }
};

De la même façon que vous avez utilisé  _initScene plus tôt, on utilise ici  _initCamera.

Après avoir fini cette fonction, vous devez retourner dans Game.js et appeler  Player.js  juste avantrunRenderLoop.

var _player = new Player(_this, canvas);

J'ai plus aucune erreur, mais l'écran est tout noir…

C'est normal ! Nous n'avons aucun objet ni de lumière pour éclairer le tout ! En route vers le fichier  Arena.js  pour créer tout ça ! 

Arena.js

De la même façon que je vous ai peu expliqué le fichier Player.js, je vais vous expliquer sommairement  Arena.js  vu que tout sera détaillé dans les parties suivantes du cours. Voici le code que vous devez ajouter :

Arena = function(game) {
    // Appel des variables nécéssaires
    this.game = game;
    var scene = game.scene;

    // Création de notre lumière principale
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    // Créons une sphère 
    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

    // Remontons le sur l'axe y de la moitié de sa hauteur
    sphere.position.y = 1;

    // Ajoutons un sol pour situer la sphere dans l'espace
    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
};

Ici, vous n'avez pas besoin de créer un  _initArena, nous avons plus d'un objet à instancier.

Comme précédemment, ajoutez le lien vers ce fichier dans Game.js, juste en dessous de l'appel à Player.js.

var _arena = new Arena(_this);

Relancez la page. :) 

Ça fonctionne ! Mais il y a beaucoup de code dans Arena et Player que je n'ai pas pu comprendre…

C'est normal, je suis volontairement évasif pour pouvoir vous exposer plus tard tout ce que nous pourrons utiliser comme type de lumière, caméra et mesh. ;)

Félicitations ! Vous avez votre première scène avec nos premiers meshes et notre première lumière ! Youhou !

Avec la caméra que nous avons placée, les touches directionnelles de votre clavier vous permettent de vous déplacer dans la scène. Vous pouvez aussi contrôler la rotation de la caméra avec votre souris en cliquant-glissant.

Maintenant que vous connaissez la scene,  engine et les fonctions de calcul d'image, il est temps de s’intéresser aux objets de base ! À tout de suite !‌

Exemple de certificat de réussite
Exemple de certificat de réussite