Box2d Web - Tuto 2

Commençons par créer l'objet Player. La classe Player est définie dans le fichier player.js. Pour le moment, nous allons définir les propriétés de classe et ajouter une première méthode permettant de créer l'objet physique "player" dans le monde box2d :

(function(){
    // Constructeur
    Player = function(scale) {
        this.scale = scale;             // échelle
        this.box2dUtils = new Box2dUtils(scale);    // instancier la classe utilitaire box2d
        this.object = null;             // l'objet "physique" player
    }
    // classe player
    Player.prototype = {
        // créer l'objet physique "player"
        createPlayer : function(world, x, y, radius) {
            this.object = this.box2dUtils.createPlayer(world, x, y, radius, 'player');
        }
    }
}());

Comme dans le précédent tutoriel, nous utilisons les méthodes de notre classe utilitaire box2dUtils pour créer les objets physiques. Ajoutons donc une fonction createPlayer à la classe box2dUtils :

createPlayer : function(world, x, y, radius, userData) {
    // Créer le body player
    var playerObject = this.createBall(world, x, y, radius, false, userData);
    playerObject.GetBody().SetSleepingAllowed(false);   // l'objet player n'est pas autorisé à passer au repos
    return playerObject;
}

Ici, le joueur sera représenté par un objet "ball". Nous aurions tout aussi bien pu utiliser un objet de type "box", mais cela donnera à notre avatar des allures de Pacman plus sympathiques !
Par ailleurs, nous spécifions à l'objet "Player" qu'il n'est pas autorisé à passer au repos en mettant sa propriété sleep à false via la méthode SetSleepingAllowed. En effet, le joueur doit toujours rester actif et interagir avec les éléments qui l'entourent.

Ajoutons à la classe Player des méthodes permettant de se déplacer et de sauter :

// Sauter
jump : function() {
    var vel = this.object.GetBody().GetLinearVelocity();
    vel.y = -200 / this.scale;
},
// Effectuer un déplacement vers la droite
moveRight : function() {
    var vel = this.object.GetBody().GetLinearVelocity();
    vel.x = 140 / this.scale;
},
// Effectuer un déplacement vers la gauche
moveLeft : function() {
    var vel = this.object.GetBody().GetLinearVelocity();
    vel.x = -140 / this.scale;
}

Les trois méthodes fonctionnent de la même façon : nous récupérons la vitesse de l'objet via la méthode GetLinearVelocity et nous la modifions en fonction du type de déplacement :

• pour un déplacement vers la droite ou vers la gauche : nous modifions la vitesse sur l'axe des abscisses "x" ;
• de la même manière, pour un déplacement vers le haut (un saut) : nous modifions la vitesse sur l'axe des ordonnées "y".

Notons que dans le cas d'un saut, nous affectons une valeur négative. N'oublions pas que, comme dans toute application, les coordonnées "y" de l'écran sont inversées. Ainsi, les coordonnées (0, 0) correspondent au coin supérieur gauche du canvas, tandis que le coin inférieur droit possède les coordonnées (800, 600). Un saut est un déplacement vers le haut, et donc vers une ordonnée "y" plus petite !
Libre à vous, évidemment, de modifier les valeurs 200 et 140 pour effectuer des déplacements plus rapides ou plus lents.

Notre avatar possède maintenant toutes les propriétés nécessaires pour s'afficher à l'écran, se déplacer et sauter. Reste à gérer les actions utilisateurs. Tout cela se passe dans le fichier gip.js, le moteur du jeu.

Dans un premier temps, ajoutons le joueur au monde 2dbox. Créons une référence pour le joueur :

(function(){
/** ... **/
    var player = null;
/** ... **/
}());

Puis instancions un nouveau Player dans la fonction init :

this.init = function() {
/** ... **/
        // Créer le player
        player = new Player(SCALE);
        player.createPlayer(world, 25, canvasHeight-30, 20);
/** ... **/
}

Il reste maintenant à gérer les actions de l'utilisateur. Pour cela, nous allons mettre en place une gestion des événements. Commençons par ajouter une variable keys en début de fichier :

(function(){
/** ... **/
    var keys = [];
/** ... **/
}());

Cette variable est un tableau dans lequel nous allons stocker les touches sur lesquelles appuie l'utilisateur. À l'initialisation, le tableau est bien sûr vide.
Revenons maintenant en fin de fonction init pour y ajouter des listeners d'événements :

// Ajouter les listeners d'événements
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('keyup', handleKeyUp);

Si vous n'êtes pas habitués à la gestion des événements en JavaScript, je vous laisse vous référez à cet article. Ici, nous souhaitons détecter deux événements :

• keydown : lorsque l'utilisateur appuie sur une touche. Auquel cas, nous appellerons la fonction handleKeyDown ;
• keyup : lorsque l'utilisateur relâche une touche. Auquel cas, nous appellerons la fonction handleKeyUp.

Ajoutons ensuite ces deux fonctions au fichier :

// appuyer sur une touche
this.handleKeyDown = function(evt) {
    keys[evt.keyCode] = true;
}
// relâcher une touche
this.handleKeyUp = function(evt) {
    keys[evt.keyCode] = false;
}

Ces deux méthodes permettent de gérer les événements interceptés par les listeners. Elles nous permettent de stocker dans le tableau keys les informations suivantes sous forme de clé - valeur :

• clé : le code de la touche ;

• valeur : l'état de la touche sous forme de booléen, true si enfoncée, false si relâchée.

C'est un bon début, mais cela ne nous permet pas encore de déplacer notre joueur. Pour cela, nous allons devoir passer par la fonction magique : update. Souvenez-vous, cette fonction est appelée à intervalle régulier pour mettre à jour le rendu de l'environnement 2D. Nous allons lui demander de gérer en plus les interactions utilisateurs. Ajoutons un appel à une nouvelle méthode au début de la fonction update :

// Mettre à jour le rendu de l'environnement 2d
this.update = function() {
    // gérer les interactions
    handleInteractions();
    /** ... **/
}

Et ajoutons la fonction handleInteractions à notre fichier :

// Gérer les interactions
this.handleInteractions = function() {
    // touche "haut"
    if (keys[38]) {
        player.jump();
    }
    // touches "gauche" et "droite"
    if (keys[37]) {
        player.moveLeft();
    } else if (keys[39]) {
        player.moveRight();
    } 
}

À chaque appel de cette fonction, nous analysons le contenu du tableau de touches et effectuons l'action correspondante :

• si la touche "haut" est enfoncée : appel à la méthode jump du joueur ;
• si la touche "gauche" ou "droite" est enfoncée : appel à la méthode moveLeft ou moveRight du joueur.

L'instruction est donc reléguée au joueur qui sait comment effectuer l'action correspondante, à savoir sauter et se déplacer vers la gauche ou vers la droite.