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 !

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
• 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 encore en développement et la liste des possibilités devrait augmenter au fur et à mesure.

Guide d'utilisation

Vu le nombre de possibilités de ce plugin, j'ai décidé d'écrire une série de tutoriels sur mon autre blog en attendant de faire une documentation technique complète ici.

J'ai quand même mis en ligne une documentation des différents paramètres, évènements et méthodes du plugin.

Tutoriels

• 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.

Ce plugin utilise "ExplorerCanvas" (les zones de couleurs).