Pour se déplacer sur le niveau, il faut commencer par mettre en place les éléments importants comme les murs, le sol, etc.
Pour cela on va utiliser un tileset et configurer le jeu pour obtenir un niveau sur lequel on peut se déplacer, sauter, se cacher…
Qu'est-ce qu'un tileset ?
Pour faire commencer, un tileset est un ensemble de tiles. Ça, ce n’était pas trop dur à deviner.
Maintenant, le but d’un tileset, c’est quoi ? Eh bien il s’agit de définir, au moyen d’un fichier (JSON, TMX ou autre) à quoi ressemble le niveau. Ou, pour être plus précis, comment doivent être placées les tiles du niveau.
Pour faire simple (et parce qu’il n’y a pas besoin d’un logiciel spécifique), on va travailler avec un fichier JSON, qui nous permettra de placer les tiles sur une grille. Celle-ci fera 20 tiles de large (soit de tiles de 30 pixels) et 40 en hauteur (mais vous pouvez définir les dimensions que vous voulez, il suffit d’ajuster quelques nombres). Ce qui nous fait environ 800 tiles au total.
Mais ! Ça veut dire que je dois dessiner 800 carrés à la main ⁈ 
Mais non, voyons ! C’est justement à ça que servent les tilesheets ! Eh oui, encore un mot nouveau !
En gros, une tilesheet correspond au mélange de votre tileset (défini par un fichier JSON ici) et de vos tiles (vos petits dessins qui représentent les différentes tiles dont vous avez besoin, regroupés sur une seule image).
Cela vous permet de ne dessiner que quelques tiles de façon individuelle : celles dont vous avez besoin au moins une fois. Par exemple, dans Super Mario, l’herbe est la même tout au long du parcours, il n’y a donc qu’une seule tile qui est utilisée plusieurs fois.
Créons notre tileset
On va déjà commencer par regarder à quoi ressemblent nos tiles (fichier game-tiles.png — pensez à le pré charger) :
Et notre fichier JSON (nommé game.json) ressemblera à ça :
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
]
Les nombres utilisés correspondent aux numéros des tiles (cf. paragraphe suivant), de 0 (tile vide) à N suivant le nombre de tiles que vous utilisez (ici N=2).
Une fois que vous aurez ajouté ces deux fichiers à votre fonction de pré chargement, il faudra les préparer les tiles (pour découper l’image en blocs de la bonne taille) :
Q.sheet('my_tiles', 'tiles.png', { tileW: 30, tileH: 30 }); // On crée des tiles de 30x30 à partir de l'image que l'on vient de charger et on enregistre le tout sous le nom *my_tiles*
Et quand on accède au niveau, il ne nous reste plus qu’à insérer un TileLayer à la scène :
var tiles = new Q.TileLayer({
dataAsset: 'game.json', // Nom du fichier tileset
sheet: 'my_tiles', // Nom des tiles
tileW: Q.sheets['my_tiles'].tileW, // Largeur des tiles : on va la chercher directement depuis la feuille que l'on a créée au chargement
tileH: Q.sheets['my_tiles'].tileH // Idem pour la hauteur des tiles
});
Et là on va prendre un tout petit peu d’avance sur le chapitre des collisions, mais on va quand même indiquer à notre scène que les tiles que l’on utilise sont source de collision, tout en les insérant dans cette même scène :
stage.collisionLayer(tiles);
Vous devriez maintenant avoir un aperçu du niveau. N’hésitez pas à le personnaliser (en modifiant le fichier JSON ou les tiles du PNG par exemple) pour voir ce qu’il est possible de faire.