Présentation

pp3Diso est un plugin jQuery qui permet l'affichage et la gestion d'une carte 2D isométrique (ou 3D isométrique par abus de langage).

Ce plugin est distribué gratuitement pour une utilisation personnelle ou commerciale. La seule obligation est l'insertion d'un lien vers www.prelude-prod.fr sur le site utilisant ce plugin.

Et si vous décidez d'utiliser ce plugin, faites-le moi savoir. Je vous ferais de la pub !

Nouveauté

Un nouveau paramètre vient de faire son entrée : PF_max. Il va vous permettre d'optimiser le pathfinding sur de grandes cartes en llimitant la recherche de chemins à n cases autour de l'avatar.

Démonstrations

Spécificités

Ce plugin a été développé pour être compatible avec une grande partie des navigateurs. Il n'utilise pas HTML5 et reste donc utilisable sur d'anciens navigateurs. De ce fait, il est compatible avec :

• Internet Explorer 6 et supérieurs (IE6, 7 et 8 pour la "v1", et IE9+ pour la "v2")
• Firefox 3.6 et supérieurs
• Safari
• Chrome
• Opéra
• Android et iOS

Voici quelques-unes des possibilités proposées par pp3Diso :

• taille des map limitée à 500x500 pour une map,
• possibilité d'afficher plusieurs maps sans avoir à recharger la page,
• Couche pour les bâtiments et couche pour les objets,
• gestion et affichage d'un avatar (ou pas),
• gestion et affichage d'un curseur à 2 états,
• affichage d'une interface utilisateur,
• affichage de zones de couleurs,
• affichage de bulles-d'infos sur les objets ou les bâtiments, avec positionnement relatif ou absolu,
• affichage de dialogues avec boutons configurables à volonté,
• zoom (possibilité de zoomer à la molette),
• pathfinding,
• ...

Et la gestion des évènements :

• mouvement de l'avatar (avant et après le mouvement),
• changement de zoom,
• clic sur une case,
• cursor sur un bâtiment ou un objet (enter et out),
• avant et après fermeture d'une fenêtre de dialogue,
• ...

pp3Diso est suivi régulièrement et la liste des possibilités devrait augmenter au fur et à mesure.

PACKs isométriques

Si vous êtes graphistes et que vous souhaitez participer à ce projet en créant des PACKs isométriques, contactez-moi.

• PACK pirate : de Guillaume Pivaut

Guide d'utilisation

Vous pouvez commencer par la documentation des différents paramètres, évènements et méthodes du plugin.

Tutoriels

Cédric Cornelis, étudiant à SUPINFO Metz, a fait une série de tutoriels sur ce plugin. Vous pouvez donc visiter son blog et profiter pleinement de son expérience :

• Introduction au développement 2D isométrique avec pp3Diso
• Créer un avatar et des objets avec pp3Diso
• Utilisation de sprites et création de plusieurs cartes avec pp3Diso

Vu le nombre de possibilités de ce plugin, j'ai décidé d'écrire une série de tutoriels sur mon autre blog :

• Vous pouvez donc d'ores et déjà accéder au premier tutoriel : première carte, curseur, bâtiments
  L'exemple 1 se trouve ici : exemple 1
• Le second tutoriel est disponible : avatar, objets, zoom et interface utilisateur.
  L'exemple 2 se trouve ici : exemple 2

Remerciements

Les graphismes des tutoriaux proviennent du jeu AFC.

La "v1" de ce plugin utilise "ExplorerCanvas" (les zones de couleurs).