Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Chapitre 6 : La classe Player

Par gnicos (Nicolas Gauville), le 13 juillet 2012
Navigation rapide :

<< Chapitre 5 - Sommaire - Chapitre 7 >>

Dans ce tutoriel, nous allons donc ajouter une nouvelle classe : La classe Player, qui permettra d'ajouter des joueurs à notre jeu.

I. Création de la classe Player

A. Structure de la classe

La classe Player sera héritière de la classe Tile, elle disposera donc de toutes les propriétés et méthodes de cette classe. Nous allons également ajouter une nouvelle méthode “move” :

void move ( $x, $y )

Effectue un déplacement en x d'$x tuile, et en y d'$y tuiles.

B. En JavaScript

Pour définir notre classe, rien de très compliqué, puisqu'il nous suffit d'étendre la classe Tile (tout comme avant, nous étendions la classe Container). Cette fois, pensons tout de même à appeller la méthode construct dans le constructeur.

/**
 * Class Player extends Tile
 */
var Player = function ( $type, $content, $walkable, $offsetX, $offsetY )
{
        this.construct ( $type, $content, $walkable, $offsetX, $offsetY );
};

Comme à chaque fois, nous créons une variable p pour le prototype, qui servira également à réaliser l'héritage :

var p = Player.prototype = new Tile ();

Nous n'avons plus qu'à ajouter la méthode move !

C. La méthode Move

Nous allons donc créer notre nouvelle méthode “move”, étape par étape. On commence, évidement, par déclarer notre nouvelle méthode :

/**
 * void move
 * @purpose : Déplace le joueur
 * $x, $y : déplacement à effectuer en x et en y.
 */
p.move = function ( $x, $y )
{ 
};

Ensuite, la première chose que nous allons devoir faire, c'est vérifier que le déplacement est possible. Pour cela, nous allons vérifier que la tuile aux coordonnées indiquées possède bien une propriété “walkable” affectée à la valeur “TRUE”.

La tuile ou le joueur doit se rendre à les coordonnées suivantes : coordonnées du joueur + coordonnées demandées avec les paramètres $x et $y. Ou plus simplement :

  1. - x = this.posX + $x
  2. - y = this.posY + $y

Pour récupérer la tuile qui correspond à ces coordonnées, nous pouvons utiliser la méthode “getTileAt” de notre classe Map :

this.map.getTileAt( this.posX + $x, this.posY + $y, 0 ).posY + $y, 0 )

Et nous n'avons donc plus qu'à utiliser une condition pour vérifier la propriété “walkable” de cette fameuse tuile, renvoyée par la méthode “getTileAt” :

/**
 * void move
 * @purpose : Déplace le joueur
 * $x, $y : déplacement à effectuer en x et en y.
 */
p.move = function ( $x, $y )
{
        /**
         * On teste si le déplacement est possible.
         */
        if ( this.map.getTileAt( this.posX + $x, this.posY + $y, 0 ).walkable )
        {
                /**
                 * Le déplacement est possible, donc on l'éffectue.
                 */
        }
};

Si le déplacement est possible, on commence donc par modifier les coordonnées de notre joueur, en ajoutant celles données en paramètre :

this.posX += $x;
this.posY += $y;

Enfin, on met à jour la carte pour que les changements soient visibles à l'écran :

/**
 * Enfin, on met à jour la carte.
 */
this.map.update ();

Et … voila ! Nous avons notre classe Player !

/**
 * Class Player extends Tile
 */
var Player = function ( $type, $content, $walkable, $offsetX, $offsetY )
{
        this.construct ( $type, $content, $walkable, $offsetX, $offsetY );
};
 
var p = Player.prototype = new Tile ();
 
/**
 * void move
 * @purpose : Déplace le joueur
 * $x, $y : déplacement à effectuer en x et en y.
 */
p.move = function ( $x, $y )
{
        /**
         * On teste si le déplacement est possible.
         */
        if ( this.map.getTileAt( this.posX + $x, this.posY + $y, 0 ).walkable )
        {
                /**
                 * Le déplacement est possible, donc on l'éffectue.
                 */
                this.posX += $x;
                this.posY += $y;
 
                /**
                 * Enfin, on met à jour la carte.
                 */
                this.map.update ();
        }
};

II. Contrôler le personnage avec la clavier

Nous allons maintenant retourner dans le fichier “core.js” pour utiliser notre classe Player.

Réaliser une petite carte

Pour commencer, nous allons, cette fois, réaliser une petite carte, réalisée à partir de murs et de sols. Le début de notre fichier “core.js” ne change pas :

var gameview = document.getElementById('gameview'), stage;
stage = new Stage(gameview);
 
Ticker.setFPS(24);
Ticker.addListener(stage);
 
 
var myMap = new Map ();
myMap.offsetX = 400;
myMap.offsetY = 200;
stage.addChild ( myMap );

Ensuite, nous allons définir une variable “map”, qui sera une tableau 2D définissant la carte. C'est une méthode pratique dans ce genre de cas : c'est très simple à mettre en place, et cela permet de voir visuellement ce que l'on fait. Pour l'instant, nous avons deux types de tuiles, nous pouvons donc, par exemple, choisir la valeur 1 (d'une case) pour un mur, et 0 pour un sol.

Pour une carte de 5×5 tuiles, nous pouvons, par exemple, avoir ceci :

var map = [     [1, 1, 1, 1, 1],
                [1, 0, 0, 0, 1],
                [1, 0, 0, 0, 1],
                [1, 0, 0, 0, 1],
                [1, 1, 1, 1, 1]];

Il faut ensuite ajouter les tuiles à la carte. Comme d'habitude, on utilise une double boucle for :

for ( var i = 0; i < 5; i++ )
{
        for ( var j = 0; j < 5; j++ )
        {
        }
}

On teste ensuite la valeur de la case de la variable “map” aux coordonnées (i, j) :

if ( map[i][j] === 0 )
{
}
else
{
}

Enfin, on ajoute un mur ou un sol selon la valeur de la case de la variable “map”. Pour générer les tuiles à ajouter, nous pouvons par exemple utiliser les fonction “sol” et “mur” vues précédemment, ou les fonctions “solTAlea” et “murTAlea” pour générer un décor plus “varié”.

Nous utilisons ensuite la méthode “addTile” de la classe Map pour ajouter les tuiles aux coordonnées (i, j), en n'oubliant pas de choisir une propriété “walkable” adaptée (false pour un mur, true pour un sol) :

for ( var i = 0; i < 5; i++ )
{
        for ( var j = 0; j < 5; j++ )
        {
                if ( map[i][j] === 0 )
                {
                        myMap.addTile ( new Tile ( TileType.DRAW, gfx.solTAlea(0,150,0), true ), i, j, 0 );
                }
                else
                {
                        myMap.addTile ( new Tile ( TileType.DRAW, gfx.murTAlea(72,61,4), false ), i, j, 0 );
                }
        }
}

Notre carte est maintenant toute prête pour accueillir un joueur !

Ajouter le joueur

Nous allons commencer par créer notre joueur. Pour cela, nous allons définir une variable “player” qui correspondra à notre joueur. Pour faire simple, le joueur sera, graphiquement, un “mur rouge” pour l'instant.

Si vous avez du talent en graphisme sous Flash, dessiner un joueur et utiliser “Export for CreateJS” à ce moment est une très bonne idée ;).
var player = new Player ( TileType.DRAW, gfx.mur ( 255, 0, 0 ), true );

On ajoute ensuite notre joueur à la carte. La position du joueur à peu d'importance, à deux détails près :

  1. - Il faut, évidement, éviter de l'ajouter sur un mur.
  2. - Le joueur étant SUR un sol, nous lui donnons une coordonnée de 1 en Z.

Nous avons donc ceci :

myMap.addTile ( player, 1, 1, 1 );

Et le résultat suivant :

Maintenant, nous n'avons plus qu'à permettre les déplacements au clavier !

La clavier

La théorie

Faire varier les coordonnées en isométrie peu sembler un peu plus complexe qu'en 2D. Pour cette raison, j'ai fait un schémà, c'est probablement le meilleur moyen de comprendre !

On voit donc assez simplement comment faire correspondre nos déplacements (droite/gauche/haut/bas), à des variations de coordonnées.

Détecter les flèches

Nous allons maintenant écouter l'évènement “keyDown”, et déclencher une fonction à chaque fois que l'évènement est diffusé. Ici, le code est, encore une fois, très similaire à ce que nous avons en AS3 :

document.addEventListener ( 'keydown', onKeyDown );

Nous avons, ensuite, notre fonction :

function onKeyDown ($e)
{
}

Le code de la touche entrée est donné par la propriété “keyCode” de notre évènement. Pour réagir selon la touche enfoncée, nous pourrons utiliser un simple switch.

Les codes des flèches sont les suivants :

  1. - 37 : Gauche
  2. - 38 : Haut
  3. - 39 : Droite
  4. - 40 : Bas

Nous avons donc le code suivant :

document.addEventListener ( 'keydown', onKeyDown );
function onKeyDown ($e)
{
        switch ( $e.keyCode )
        {
                case 37: //Gauche
                        break;
                case 38: //Haut
                        break;
                case 39: //Droite
                        break;
                case 40: //Bas
                        break;
                default:
                        break;
        }
}

Utiliser notre méthode "move"

Nous allons donc finir notre fonction avec la méthode “move” :

function onKeyDown ($e)
{
        switch ( $e.keyCode )
        {
                case 37: //Gauche
                        player.move ( 0, -1 );
                        break;
                case 38: //Haut
                        player.move ( -1, 0 );
                        break;
                case 39: //Droite
                        player.move ( 0, 1 );
                        break;
                case 40: //Bas
                        player.move ( 1, 0 );
                        break;
                default:
                        break;
        }
}

Et là, si tout s'est bien passé, nous pouvons contrôler notre joueur ! (bon, oui, ce n'est qu'un bloc rouge pour l'instant …).

Résultat final

Nous avons donc notre résultat final :

Une petite carte, avec un personnage contrôlable avec la clavier ! Je vous redonne tout de même le code final du fichier “core.js” :

var gameview = document.getElementById('gameview'), stage;
stage = new Stage(gameview);
 
Ticker.setFPS(24);
Ticker.addListener(stage);
 
 
var myMap = new Map ();
myMap.offsetX = 400;
myMap.offsetY = 200;
stage.addChild ( myMap );
 
var map = [     [1, 1, 1, 1, 1],
                [1, 0, 0, 0, 1],
                [1, 0, 0, 0, 1],
                [1, 0, 0, 0, 1],
                [1, 1, 1, 1, 1]];
 
 
for ( var i = 0; i < 5; i++ )
{
        for ( var j = 0; j < 5; j++ )
        {
                if ( map[i][j] === 0 )
                {
                        myMap.addTile ( new Tile ( TileType.DRAW, gfx.solTAlea(0,150,0), true ), i, j, 0 );
                }
                else
                {
                        myMap.addTile ( new Tile ( TileType.DRAW, gfx.murTAlea(72,61,4), false ), i, j, 0 );
                }
        }
}
 
var player = new Player ( TileType.DRAW, gfx.mur ( 255, 0, 0 ), true );
myMap.addTile ( player, 1, 1, 1 );
 
document.addEventListener ( 'keydown', onKeyDown );
function onKeyDown ($e)
{
        switch ( $e.keyCode )
        {
                case 37: //Gauche
                        player.move ( 0, -1 );
                        break;
                case 38: //Haut
                        player.move ( -1, 0 );
                        break;
                case 39: //Droite
                        player.move ( 0, 1 );
                        break;
                case 40: //Bas
                        player.move ( 1, 0 );
                        break;
                default:
                        break;
        }
}

Conclusion

Notre moteur permet maintenant de réaliser de petits jeux, comme nous avons pu le voir en réalisant une petite carte et un personnage contrôlable au clavier.

Dans les prochains chapitre, nous allons voir la réalisation d'un exemple de petit jeu, et la préparation du moteur pour l'intégrer sur un projet réel. A la suite, les cours seront donnés en annexes.

Navigation rapide :

<< Chapitre 5 - Sommaire - Chapitre 7 >>