pp3Diso est un plugin jQuery que j’ai développé et qui permet l’affichage et la gestion d’une carte 2D isométrique pour des jeux en ligne.

Nous avons vu dans le premier tutoriel comment créer une map simple avec des bâtiments.
Dans le second tutoriel, nous avons vu comment ajouter un avatar, des objets, faire un zoom et ajouter une interface utilisateur.

Nous allons voir comment fabriquer un éditeur de map à l’aide de pp3Diso.

Éditeur de map 2D isométrique

Éditeur de map 2D isométrique

Un éditeur de map

C’est la base pour faire votre jeu : créer une map.

En fonction du jeu que vous allez faire, vous allez utiliser une ou plusieurs maps. Si les maps ne sont pas générées automatiquement, il va falloir les créer.

Tuile vierge

Tuile vierge

La première chose à faire est de réunir l’ensemble des illustrations dont vous aurez besoin pour votre map : les tuiles, les objets, les bâtiments, …

Pour les besoins de l’éditeur, il vous faudra une tuile « vierge », nommée ‘map-01.png’, histoire de voir un peu où vous mettez les pieds.

Vous allez alors pouvoir définir votre map vierge soit en créant un fichier, soit en utilisant le script suivant :

<?php

$MaxX = 20;	//--- taille de la map en x
$MaxY = 20;	//--- taille de la map en y

$map = '';	//--- la map

for($y=0; $y<$MaxY;$y++) {
	for($x=0; $x<$MaxX;$x++) {
		//---- on ajoute une case contenant la tuile 'map-01.png'
		$map .= '01,';
	}
	//--- on remplace la dernière virgule par 2 points ':'
	$map[strlen($map)-1] = ':';
}
//--- on retire le dernier caractère (':')
$map = substr($map, 0, strlen($map)-1);

?>

Il ne reste plus qu’à appeler le plugin avec cette map :

window.onload = function() {
	ppmap = $('#ppISO').pp3Diso({
		map:'<?php echo $map; ?>',		// la map
		mapId:1,				// id de la map
		nbrTitleSetsSlide:100,	  	// pas de mouvement de la map lorsque l'on click dessus
		tx:64,					// dimension x des tuiles
		ty:40,					// dimension y des tuiles
		prefix:'map-',
		auto_size:false,
		mousewheel:true,
		onmoveavatar:function(x, y, id) {
			myClick(x, y, id);
		}
	});
	ppmap.move_map_on();
	ppmap.cursor('images/cursor-on.png', 'images/cursor-off.png', 0, 0);
}

Au passage, vous noterez les nouveaux paramètres du plugin. D’ailleurs, cela me fait penser qu’il faut absolument que j’en fasse une liste…

La fonction « myClick » sera appelée lorsque l’utilisateur aura cliqué sur une case. Cette fonction est nécessaire pour ajouter un objet à la map et contrôler s’il s’agit d’un objet, d’un bâtiment ou d’une tuile.

Voyons donc un peu cette fonction de plus prêt. Elle est très simple :

function myClick(x, y, id) {
	switch(Choix) {
		case 1:
		case 2:
		case 7:
		case 8:     //------ cas des tuiles
			ppmap.change_one_map(x, y, objets[Choix]);
			break;
		case 3:
		case 4:
		case 5:
		case 6:     //---- cas des objets
			ppmap.objet(x, y, 'images/' + objets[Choix], objetsDecX[Choix], objetsDecY[Choix]);
			break;
	}
}

Voilà donc 1 nouvelle fonction :

  • change_one_map(x, y, n) : pour changer une tuile en une autre se nommant ‘map-n.png’ à la position x, y

La variable ‘Choix’ qui est utilisée dans la fonction contient le choix de l’utilisateur lorsqu’il clique sur une tuile ou un objet dans la liste de ce qu’il lui est proposé (dans la colonne de gauche sur l’exemple). À vous de gérer cela comme bon vous semble. Dans l’exemple, les objets proposés sont mis dans un tableau « objets » afin de faciliter le développement.

La sauvegarde de la map

Nous y voilà. Vous venez de créer une superbe map et vous souhaitez sauvegarder votre travail. Finalement, c’est normal…

pp3Diso vous permet de récupérer les 3 couches : tuiles, bâtiments et objets

  • getMonde() : renvoie un tableau contenant les tuiles
  • getObjets() : même chose, mais pour les objets
  • getBatiments() : et enfin, les bâtiments

Vous trouverez dans l’exemple proposé une fonction très simple qui transforme ces informations en un fichier XML. Encore une fois, libre à vous de transformer ces tableaux en des données exploitables par vos librairies habituelles.

Comme vous pouvez le constater, il est très aisé de créer un éditeur de map avec le plugin pp3Diso. Libre à vous d’ajouter pleins de possibilités. D’ailleurs, si vous en faites, n’hésitez pas à me le faire savoir. Ce serait sympa de le faire connaître !