Fil d'Ariane
Mis à jour le jeudi 31 août 2017
  • 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 !

Connectez la 3D avec un affichage 2D

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

Maintenant que la 3D et Node fonctionnent, il nous faut désormais ajouter tous les ponts à la 2D. Nous allons finir cette partie sur une touche bien plus légère avec ce chapitre. ^^ 

Connecter la vie et l'armure à la 2D

Pour connecter tout cela, il vous faut ajouter au code la gestion du texte qui affiche les points de vie aux fonctions qui les diminue et les augmente. Tout cela se trouve dans  Player.js, en route!

Déclarez tout en haut deux variables,  textHealth et  textArmor : nous allons les utiliser pour modifier  innerText.

this.textHealth = document.getElementById('textHealth');
this.textArmor = document.getElementById('textArmor');

Maintenant que ces valeurs sont déclarées dans le code, nous allons les affecter à deux endroits distincts : dans  getDamage() et dans  _initCamera()

Dans les deux cas, nous changeons ces variables et nous n'avons qu'à récupérer la variable changée pour actualiser l'interface 2D.

Pour  getDamage, il suffit de l'insérer comme suit, dans la partie où on calcule les dégâts infligés à la vie du joueur :

// Prise des dégâts avec le tampon de l'armure
if(this.camera.health>damageTaken){
    this.camera.health-=damageTaken;
    if(this.camera.isMain){
        this.textHealth.innerText = this.camera.health;
        this.textArmor.innerText = this.camera.armor;
    }
}else{
    if(this.camera.isMain){
        this.textHealth.innerText = 0;
        this.textArmor.innerText = 0;
    }
    this.playerDead(damageGivenBy)
}

Maintenant, il faut changer cette valeur quand  _initCamera se lance pour revenir aux valeurs de base. Nous allons donc écrire le code suivant juste en dessous de la création de  axisMovement :

// La santé du joueur
this.camera.health = 100;
// Pour savoir que c'est le joueur principal
this.camera.isMain = true;
// L'armure du joueur
this.camera.armor = 0;

// Axe de mouvement X et Z
this.camera.axisMovement = [false,false,false,false];

// Affichage de la vie et de l'armure
this.textHealth.innerText = this.camera.health;
this.textArmor.innerText = this.camera.armor;

Avec ces lignes, la santé et l'armure s'actualiseront à chaque changement. Nous pouvons passer à la section suivante : le leaderboard.

Afficher le score à chaque changement 

La fonction  displayScore sera appelée par le NetworkManager dès la mort d'un joueur. L'idée est que cette fonction ramène une liste rangée de noms, du plus petit au plus haut score. À nous d'en tirer un top 5 ! Premièrement, nous allons déclarer cette fonction directement dans  Game :

displayScore(room){
    // On vérifie si il y a plus de 5 joueurs. 
    if(room.length>=5){
        var limitLoop = 4;
    }else{
        var limitLoop = room.length-1;
    }
}

Quand le nombre de joueurs a été vérifié, il nous faut afficher ces résultats dans l'ordre décroissant (du plus élevé au plus bas). 

displayScore(room){
    if(room.length>=5){
        var limitLoop = 4;
    }else{
        var limitLoop = room.length-1;
    }
    var indexName = 0;
    for (var i = 0; i <= limitLoop ; i++) {
        document.getElementById('player'+indexName).innerText = room[i].name;
        document.getElementById('scorePlayer'+indexName).innerText = room[i].score;
        indexName++;
    }
}

On récupère à chaque tour de boucle les noms des player1, player2, player3 et ainsi de suite jusqu'à 5, pour les afficher avec leurs scores. Nous allons donc enfin afficher les résultats !

Du coté de  NetworkManager, nous pouvons réactiver  game.displayScore dans  killGhostPlayer.

socket.on ('killGhostPlayer', function (arrayData) {
    var idArray = arrayData[0];
    var roomScore = arrayData[1];
    if(idArray[0] != personalRoomId){
        deleteGameGhost(game,idArray[0]);
    }
    if(idArray[1] == personalRoomId){
        // game._PlayerData.newDeadEnnemy(idArray[2]);
    }
    game.displayScore(roomScore);
});

De la même façon, vous pouvez appeler celui qui se trouve dans  newPlayer : 

socket.on('newPlayer',function(dataNewPlayer){
    var room = dataNewPlayer[0];
    var score = dataNewPlayer[1];
    var props = dataNewPlayer[2];
    if(!isPlayerAlreadySet){
        for(var i=0;i<room.length;i++){     
            if(room[i].id == socket.id){
                myConfig = room[i];
                personalRoomId = room[i].id;
                game = new Game('renderCanvas',myConfig,props);
                isPlayerAlreadySet = true;
                document.getElementById('gameName').innerText = room[i].name;
            }
        }
    }
    game.displayScore(score);

    // Vérifie les joueurs qui se connectent
    checkIfNewGhost(room);
});

  

Voilà qui conclut cette troisième partie. Ouf, nous avons enfin terminé tout ça ! Il n'y a pas à dire, c'était sacrément imposant ! Techniquement, vous avez désormais un système qui fonctionne tout seul… et vous pourriez vous arrêter maintenant ! Mais ce serait dommage : il nous manque des parties très intéressantes pour la suite. Voyez plutôt :

  • Il nous faut de quoi récupérer des points de vie et d'armure.

  • Il nous faut pouvoir ramasser des armes.

  • Il nous faut savoir qui on a tué.

  • Il faut pouvoir sauter en l'air dans le jeu, quand même hein ! :p 

  • Il nous faut animer le mouvement des armes quand elles tirent.

Voilà toutes les choses que nous allons voir durant la prochaine partie, dans laquelle on va approfondir le gameplay ! Mais avant cel‌a, direction une activité qui va vous préparer pour la partie 4 ! Attention, vous allez devoir prouver que vous avez compris tout ce qu'on a fait jusque-là. ^^ Allez, on se retrouve là-bas : à tout de suite ! ‌

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