Implémenter une carte isométrique avec débordements - Version imprimable +- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org) +-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38) +--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51) +--- Sujet : Implémenter une carte isométrique avec débordements (/showthread.php?tid=5392)

Implémenter une carte isométrique avec débordements - Sephi-Chan - 29-04-2011 Hello, Ces derniers jours, j'ai essayé rapidement le webgame d'Ubisoft, Might & Magic: Heroes Kingodms histoire de voir un peu comment c'était fichu techniquement, et j'ai trouvé leur carte vraiment sympa, d'autant qu'elle ne nécessite aucun plugin. Cette carte utilise une image de fond qui contient les tuiles, puis les cases elle pose les autres images contenant des décors (ça et ça, entre autres). Avez-vous des ressources, trucs et astuces pour créer ce genre de cartes. Avec une prise en charge des chevauchements du décors également. La partie interactive de la carte repose sur une map positionnée au dessus, du coup on ne se soucie pas de devoir passer la souris derrière un arbre. RE: Implémenter une carte isométrique avec débordements - php_addict - 29-04-2011 salut je dirais avec des positionnement de div et l'utilisation de z-index , ce qui permet de superposer des gif ou png transparents en les empilant (juxtaposant) grâce au z-index si tu parts du coin le plus en bas de la map (appelons la ligne1): ligne 1 : [z-index = 100] ligne 2 : [z-index = 99] [z-index = 98] [z-index = 97] ligne 3 : [z-index = 96] [z-index = 95] [z-index = 94] [z-index = 93] ligne 4 : [z-index = 92] [z-index = 91] [z-index = 90] [z-index = 89] [z-index = 88] etc... non ? RE: Implémenter une carte isométrique avec débordements - srm - 29-04-2011 C'est ce que j'allais dire, c'est super simple à faire RE: Implémenter une carte isométrique avec débordements - Sephi-Chan - 29-04-2011 C'est très simple à réaliser quand tu n'as pas à gérer de débordements du décors : si tes divs contiennent des choses plus grandes que la base, la largeur change et tu ne peux plus positionner les éléments. RE: Implémenter une carte isométrique avec débordements - php_addict - 29-04-2011 et bien si ton decor/image la plus grande fais 100*300 alors toutes des div devront faire au minimum 100*300 , ca ne pose pas de probleme car c'est des images semi transparentes, non ? par contre faut prévoir son coup car le jour où tu as besoin d'une image plus grande tu va devoir modifier toutes tes divs... RE: Implémenter une carte isométrique avec débordements - Sephi-Chan - 29-04-2011 C'est précisément le genre de choses auxquelles je fais référence : les trucs et astuces pour un bon système. J'aimerai faire un article sympa sur le Wiki avec ce genre d'information, mais aussi les formules pour positionner les tuiles, etc. RE: Implémenter une carte isométrique avec débordements - jean-baptiste - 29-04-2011 C'est assez simple à faire, mais attention au débordement des images entre elle. Car en effet les images sont carré ce qui veux dire quelle déborde sur l'image qui à coté avec un Z-index plus faible. De ce faite dans ce cas là on ajoute une sur couche ( map area par exemple) afin de faire des zone en losange. et ainsi gérer les événements dessus. RE: Implémenter une carte isométrique avec débordements - Sephi-Chan - 29-04-2011 Il faudrait quand même lire les messages avant de répondre. Au moins le message initial. RE: Implémenter une carte isométrique avec débordements - srm - 29-04-2011 Bah tu calcules les z-index à la volée. Tu pars d'un z-index de 100 si tu as 100 cases, tu commences par la case en bas à droite et tu remontes de droite à gauche. Tu décrementes le z-index de 1 pour chaque "élément" donc si un élément fait 3 x une base, les 3 bases ont le même z-index. Et tu continues. Et normalement c'est bon ça gère tous les cas. RE: Implémenter une carte isométrique avec débordements - keke - 01-05-2011 C'est vrai que c'est joli ^^ Kéké qui est obligé de se coucher tard, sinon il ne parvient pas à venir vous voir !