Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Annexe : Carte au format JSON

Par gnicos (Nicolas Gauville), le 24 août 2012
Navigation rapide : Sommaire

Rappel : Ceci est une annexe du cours sur les jeux isométriques en HTML5/JS.

Ce cours se base sur les chapitres “pas à pas”, et utilise les fichiers fournis à la fin du huitième chapitre :

Jeu entier (incluant les dossiers “www” et “dev”) : jeu.zip

Moteur isométrique (dossier “dev/src” uniquement) : moteur_iso.zip

A l'inverse, ce cours ne se base pas sur les autres annexes.

I. Le format JSON

Le format JSON permet d'écrire des objets formatés de la même manière qu'en JavaScript. Ce format peut être facilement interprété dans de nombreux langages de programmation, ce qui est un atout majeur. Le JSON est lu nativement par le JavaScript, et peut être lu via la bibliothèque “as3corelib” en ActionScript 3.

Ce format peut être très pratique pour les cartes pour plusieurs raisons :

  1. - Il est plus léger que le XML.
  2. - Tout en étant plus léger, le JSON est tout aussi clair que le XML.
  3. - Il est interprété très simplement, surtout en JavaScript.
  4. - C'est un format courant pour les données serialisées.

Nous allons donc, dans ce chapitre, voir comment modifier le jeu crée dans le tutoriel “pas à pas”, pour, cette fois, charger la carte dans un fichier JSON.

II. Transcrire la carte et adapter le jeu

Première étape : modifier la carte. Nous pouvons donc supprimer notre ancienne variable “map” du fichier core.js :

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

Et nous allons la remettre dans un fichier JSON, par exemple à l'adresse “maps/map.json” :

[
        [ 1, 1, 0, 0, 0 ],
        [ 0, 0, 0, 0, 0 ],
        [ 0, 0, 1, 0, 1 ],
        [ 0, 0, 1, 0, 0 ],
        [ 0, 0, 0, 0, 0 ]
]
Vous voyez là l'un des gros avantages du JSON en JavaScript : la syntaxe est la même, pas de modification à faire !

Maintenant, nous allons modifier notre fichier core.js, pour, cette fois, charger la carte JSON. Nous allons coder une classe “JSONMapLoader”, qui s'occupera du chargement.

Pour commencer, nous allons avoir besoin d'un objet permettant de faire correspondre les numéros de la carte à des tuiles. Ici, les 0 et les 1, c'est donc la première chose que nous allons ajouter (dans le fichier core.js) :

var tiles =
{
        0: function(){return new Tile ( TileType.DRAW, gfx.solTAlea(200,200,128), true );},
        1:null
};

La deuxième modification à effectuer est au niveau de la fonction “play.onClick”. Cette fois, ce ne sera plus notre double boucle “for” qui réalisera le chargement, mais la classe “JSONMapLoader” qui ira télécharger la carte et ajoutera les tuiles. Nous pouvons donc supprimer la double boucle for et la remplacer par l'utilisation de la classe “JSONMapLoader”. Nous allons donc lui envoyer l'URL du fichier à télécharger (“maps/map.json”), la carte isométrique pour pouvoir y ajouter les tuiles (variable myMap), et l'objet permettant de passer des numéros aux tuiles (variable “tiles”, créée précédemment) :

JSONMapLoader.load ( myMap, "maps/map.json", tiles );

Maintenant, nous n'avons plus qu'à coder notre classe “JSONMapLoader” !

III. La classe JSONMapLoader

Cette classe contiendra donc une unique méthode “load”, nous pouvons donc nous contenter de la structure suivante :

/**
 * Utilitaire JSONMapLoader
 */
var JSONMapLoader =
{
        /**
         * Fonction load.
         * Map $isoMap : carte du jeu.
         * string $url : URL du fichier à télécharger.
         * object $eqs : Objet assignant les numéros aux tuiles.
         */
        load: function ( $isoMap, $url, $eqs )
        {
 
        }
};

Pour commencer, nous allons devoir télécharger la carte JSON. Nous allors réaliser ce chargement avec une simple requête XHR (XmlHttpRequest) :

var xhr = new XMLHttpRequest();

Nous définissons donc l'URL à télécharger :

xhr.open('GET', $url);

Puis, nous attendons que le fichier soit téléchargé pour continuer :

xhr.onreadystatechange = function()
{
        if (xhr.readyState === 4 && xhr.status === 200)
        {
                //Suite du code.
        }
};

Nous pouvons alors récupérer le contenu charger via la propriété “xhr.responseText”. Pour le transformer en objet, nous allons utiliser la fonction “JSON.parse” :

var map = JSON.parse( xhr.responseText );

Ici, nous n'avons plus qu'à re-créer une double-boucle for pour y ajouter les tuiles :

for ( var i = 0; i < map.length; i++ )
{
        for ( var j = 0; j < map[0].length; j++ )
        {
 
        }
}

Il faut évidemment commencer par transformer le numéro de la carte en tuile :

var tile = $eqs[map[i][j]];

En se rappelant bien que l'objet tuile (ici, $eqs) renvoie des fonctions, et que pour obtenir notre tuile, nous devrons donc écrire “tile()” et non “tile”.

Nous vérifions donc que la tuile à ajouter existe, et nous l'ajoutons aux coordonnées (i, j, 0) si c'est le cas :

if ( tile !== null )
{
        $isoMap.addTile ( tile(), i, j, 0 );
}

Enfin, dernière étape pour terminer notre fonction load : lancer la requête XHR :

xhr.send(null);

Notre nouvelle classe “JSONMapLoader” est donc définie ainsi :

/**
 * Utilitaire JSONMapLoader
 */
var JSONMapLoader =
{
        /**
         * Fonction load.
         * Map $isoMap : carte du jeu.
         * string $url : URL du fichier à télécharger.
         * object $eqs : Objet assignant les numéros aux tuiles.
         */
        load: function ( $isoMap, $url, $eqs )
        {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', $url);
 
                xhr.onreadystatechange = function()
                {
                        if (xhr.readyState === 4 && xhr.status === 200)
                        {
                                var map = JSON.parse( xhr.responseText );
 
                                for ( var i = 0; i < map.length; i++ )
                                {
                                        for ( var j = 0; j < map[0].length; j++ )
                                        {
                                                var tile = $eqs[map[i][j]];
                                                if ( tile !== null )
                                                {
                                                        $isoMap.addTile ( tile(), i, j, 0 );
                                                }
                                        }
                                }
                        }
                };
                xhr.send(null);
        }
};

IV. Conclusion

Nous avons ainsi vu commencer créer une carte au format JSON et l'utiliser. Cela pourra grandement vous aider notamment dans la transcription de jeux dans d'autres langages qui utilisaient ce format, par exemple.

Navigation rapide : Sommaire