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.

Nous allons voir maintenant comment ajouter un avatar, des objets, faire un zoom et ajouter une interface utilisateur.

Un avatar

Il y a 2 façons de se déplacer sur la map :

  • sans avatar : un peu comme dans un Sim City,
  • avec avatar : comme dans un bon vieux RPG (Role-Playing Game).

Voilà comment ajouter un avatar à votre map :

ppmap.avatar(4, 4, 'images/avatar.png', 30, -20);

Les 2 premiers paramètres indiquent la case de départ de l’avatar. Vient ensuite l’image de l’avatar et enfin le décalage en x et en y.

En reprenant la map du premier tutoriel, voici ce que l’on obtient :

Carte 2D isométrique avec un avatar

Carte 2D isométrique avec un avatar

Les mouvements deviennent donc limités aux cases autour de l’avatar. Il ne peut pas aller sur les bâtiments.

Nous allons maintenant passer aux objets.

Les objets

De la même manière que nous avons ajouté des bâtiments, nous ajoutons des objets de la façon suivante :

ppmap.addObject(4, 5, 'images/objet-1.png', 40, -10);

À la différence des bâtiments, un avatar peut se déplacer sur une case où se trouve un objet.

Voilà le résultat :

Carte 2D isométrique avec un objet

Carte 2D isométrique avec un objet

Maintenant que nous avons un sol, des bâtiments, des objets, un avatar et un curseur, il ne reste plus qu’à s’amuser avec tout ça et c’est que nous allons faire tout de suite…

Le zoom et l’interface utilisateur

Nous allons commencer par la fonction « zoom » qui permet de grossir la carte (ou l’inverse) très simplement.

Il y a plusieurs possibilités pour faire un zoom :

  • zoom avec la molette de la souris
  • zoom avec une interface utilisateur
  • les 2…

Nous allons commencer par le plus simple : le zoom à la molette.

Pour cela, il suffit d’indiquer un paramètre lors de la création de la map :

mousewheel:true

Vous aurez alors la possibilité de zoomer avec la molette de la souris. Le zoom étant limité entre les valeurs 0.25 et 10 inclus (4 x plus petit et 10 fois plus grand) par défaut. Mais il est possible de changer ces valeurs en les indiquant en paramètre :

zoom_min:0.5,
zoom_max:2

Vous avez également la possibilité d’indiquer le pas entre chaque zoom :

zoom_pas:0.5

Et voilà le résultat en image :

Zoom sur la carte 2D isométrique

Zoom sur la carte 2D isométrique

Maintenant, passons au zoom via une interface utilisateur.

Il faut d’abord ajouter l’interface. Vous pouvez ajouter des boutons à l’extérieur de la map ou par dessus la map. Nous allons choisir cette seconde solution pour bien comprendre le mécanisme.
Nous ajoutons 2 images de loupe avec des liens vers les fonctions JavaScript correspondantes :

<div id="loupe-plus" class="pp3diso_users"><a href="javascript:zoom_plus();"><img src="images/loupe-plus.png" width="44" height="45" alt="" /></a></div>
<div id="loupe-moins" class="pp3diso_users"><a href="javascript:zoom_moins();"><img src="images/loupe-moins.png" width="44" height="45" alt="" /></a></div>

Ces 2 lignes doivent être ajoutées dans la balise de la map.
Maintenant, l’interface apparaît par dessus la map et ne disparaîtra pas lorsque vous changerez de map dynamiquement.
La seule obligation que vous avez est d’indiquer la class « pp3diso_users » qui permet d’indiquer au plugin que ces objets ne doivent pas être supprimés.
Évidement, il vous faudra indiquer dans le fichier CSS les paramètres de votre interface (forme, dimension, position, …). Dans ce cas, j’ai mis ces quelques lignes :

#loupe-plus {
	position:absolute;
	bottom:80px;
	left:5px;
	width:44px;
	height:45px;
}
#loupe-moins {
	position:absolute;
	bottom:5px;
	left:80px;
	width:44px;
	height:45px;
}

Voici le résultat :

Carte avec interface zoom

Carte avec interface zoom

Il existe d’autres possibilités d’interfaçage entre l’utilisateur et le plugin. Par exemple, vous pouvez indiquer des flèches de direction qui permettront de déplacer la map.
Pour cela, il suffit de déclarer les DIV contenant des images (des flèches par exemple), le plugin s’occupera de faire le reste :

<div id="pp3diso-fleche-s" class="pp3diso_users fleche"></div>
<div id="pp3diso-fleche-n" class="pp3diso_users fleche"></div>
<div id="pp3diso-fleche-e" class="pp3diso_users fleche"></div>
<div id="pp3diso-fleche-o" class="pp3diso_users fleche"></div>

<div id="pp3diso-fleche-se" class="pp3diso_users fleche"></div>
<div id="pp3diso-fleche-ne" class="pp3diso_users fleche"></div>
<div id="pp3diso-fleche-so" class="pp3diso_users fleche"></div>
<div id="pp3diso-fleche-no" class="pp3diso_users fleche"></div>

Là encore, les seules obligations sont d’indiquer la class « pp3diso_users » et les id « pp3diso-fleche-x » ou x sera l’un des points cardinaux ou un mix : n (nord), s (sud), e (est), o (ouest), se (sud-est), ne (nord-est), so (sud-ouest), no (nord-ouest).

Il vous faudra tout de même rajouter cette ligne pour indiquer au plugin qu’il doit prendre en compte l’interface de mouvements :

ppmap.moveMapOn();

Comme vous le voyez, c’est vraiment très simple. Voici le résultat en image (désolé pour l’interface, je n’ai pas pris le temps d’en faire une jolie) :

Carte avec interface utilisateur

Carte avec interface utilisateur

De la même façon que l’on peut ajouter des flèches, vous pouvez ajouter n’importe quelle interface en lui ajoutant la class « pp3diso_users » afin que votre interface ne soit pas supprimer par le plugin.

Voilà déjà pas mal de choses à faire pour vous entraîner avec ce plugin. La prochaine fois, nous verrons comment ajouter des boîtes de dialogues et des bulles-infos.

En attendant, vous trouverez l’ensemble des sources de ces tutoriels sur le site du plugin pp3Diso. Vous pouvez également venir proposer vos idées ou vos remarques sur le forum dédié.

Site officiel : http://www.prelude-prod.fr/

Démo du plugin : http://www.prelude-prod.fr/demo/pp3diso/

Démo de ce tutoriel : http://www.prelude-prod.fr/demo/pp3diso/exemple2/

Discussion sur ce plugin : forum de Jeux-Web.com