JeuWeb - Crée ton jeu par navigateur
Carte hexagonal - 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 : Carte hexagonal (/showthread.php?tid=1200)

Pages : 1 2 3

Carte hexagonal - orditeck - 21-05-2007

Aide pour le tutoriel :
Carte hexagonal

Toutes les demandes d'aide pour ce tutoriel doivent être faite à la suite de ce message.
Merci de ne pas aller créer un nouveau sujet dans la section demande d'aide : le message sera mis à la corbeille.

RE: Carte hexagonal - barst - 21-05-2007

Avant toute chose, est-ce qu'on pourrait avoir un lien avec un exemple.
Merci d'avance.

Sinon, je commence à regarder le code.

RE: Carte hexagonal - naholyr - 21-05-2007

Aucune explication mathématique, ni sur la façon dont doivent être construites les images Sad
Alors que ce sont les deux points vitaux lors de la construction d'un générateur de map.

RE: Carte hexagonal - OncleJames - 21-05-2007

pour le rendu : http://img80.imageshack.us/img80/4636/sanstitreis5.jpg ( rajouté sur le tuto aussi )

Pour les images ce sont juste des images de 80 sur 100 :

[Image: plaine_iso.png]

Quand a la fonction mathématique, il n'y a pas vraiment, juste deux modulo et une multiplication .. pour permettre de décaler la ligne une fois sur deux.

RE: Carte hexagonal - Raoull - 21-05-2007

OncleJames a écrit :Eu .. padding-bottom:40em; c'est quoi ce code pas beau.
En faite il va imposer une taille minimum a votre div carte qui par exemple sur mon jeu à un fond rouge.

mmm moi pour imposer une taille minimum, un simple "height:XX" suffit.
Idem pour une taille maximum d'ailleurs, sauf que je rajoute un ptit overflow:auto si je veux un ascenseur si ca dépasse par ex.

Je pense que tu utilises les effets secondaires de ton padding-bottom.

Enfin je suis pas très réveillé encore mais ya un truc qui m'échappe...

Sinon merci pour le script, vais tester ca dès que j'ai le temps, c'est interessant.

RE: Carte hexagonal - barst - 21-05-2007

Par contre, il est possible d'améliorer le tout je pense.

Déjà, la tableau terrain ne sert à rien.
Ensuite quand tu remplis le tableau joueur, tu mets en clés le couple x-y mais tu remets ces valeurs en contenu ce qui fait doublon.

RE: Carte hexagonal - Harparine - 21-05-2007

Je ne comprends pas trop : tu dis que c'est des hexagones isométriques (si j'ai bien lu), hors la hauteur des cases est aussi importante que la largeur et on a vraiment l'impression d'être en face d'une carte en 2D (à part que tu rajoute une impression de relief en bas avec quelques pixels en plus). Tes hexagones devraient être déformés.

Si je ne m'abuse, ça devrait plutôt ressembler à un truc comme ça, non ? :

[Image: hexayp3.png]

(note : c'est assemblé à la main mais j'essaie de trouver un moyen de l'assembler de façon dynamique, c'est un sacré challenge^^.

@+

RE: Carte hexagonal - OncleJames - 21-05-2007

Il peut etre je pense aussi optimisé, c'est un de mes premiers essais qui marche :good:

Harparine, il suffit de jouer avec l'image pour un meilleur rendu 3D, sur le mien il n'est pas encore trop travaillé étant donné qu'en design je suis pas au top si en plus je dois faire la 3D, je coule :toilette:

J'aime bien ton idée en faite de pas donner de relief sur le bas mais sur le haut. Pour cela il suffit d'enlever le bas de l'image et de donner une sorte de profondeur a l'hexagone.
Mais il n'y a pas besoin de changer le code


Pour reprendre les accusations, non je ne souhaite pas donner un code tout fait, car le concept est assez costaud, et un code complet ou l'on réfléchi pas dessus, ne pourra pas marcher. donc je prefère donner partie par partie en expliquant les bases ( sauf les bases php ) et répondre à toutes les questions ici.

Si l'on ne comprend pas le système, on ne peut pas le modifier, vaut mieux apprendre a le comprendre et s'amuser avec aprés, que de le copier/coller et rien faire dessus.

Vilou

EDIT : Je vais essayer le systeme comme tu dis Harparine et je mettrai un screen ici

RE: Carte hexagonal - Harparine - 21-05-2007

Ok, pour info, la 3D isométrique s'obtient de la façon suivante (que la base soit un carré, un hexagone ou un paquet de chips^^) : on effectue une rotation à 45° sur la droite puis on divise la hauteur par deux. C'est cette manipulation qui donne l'impression de relief (donc en fait, ce n'est pas de la 3D iso que tu as faiteWink).

Mais par contre, tu es obligé de modifier le code qui place les tuiles, sinon, ça donne ça (les deux cartes ont été générées avec exactement le même code, seules les images changent) :

[Image: sanstitre2uz5.png] [Image: sanstitre3hk3.png]

EDIT : Ca y est !!! :good: J'ai enfin réussi à trouver la formule pour placer correctement des hexotuiles isométriques. Je posterai les explications mathématiques à la suite. En attendant, voilà ce que ça donne (je sais, c'est moins bien que dans mon message précédent, mais là, c'est entièrement généré avec du code) :
[Image: sanstitre2sl2.png]

RE: Carte hexagonal - Harparine - 22-05-2007

Bonsoir à tous ! Ce principe d'une carte isométrique dont les tuiles sont des hexagones m'intéressait pas mal mais c'est quelque chose qui est vraiment costaud à mettre en place. En réalité, la carte précédente, générée en code avait un défaut : les cases n'étaient pas correctement alignées (la même carte en 2D n'aurait pas été carrée). Après énormément de recherches à me dépatouiller avec des découpages d'hexagones et beaucoup de trigonométrie, j'ai fini par trouver le moyen de générer de vrais hexagones iso.

Je vous montre un aperçu (c'est développé en Flash parce que c'était plus confortable pour mes calculs mais le principe mathématique est utilisable en php, que ce soit avec GD ou bien en CSS). Je vous montre deux aperçus de ce que ça donne : le premier avec le décalage des cases impaires en ordonnées (plus adapté au format d'un écran) et le deuxième avec le décalage en abcisses (plus agréable à regarder car il reprend la forme les carrés en 3D iso). J'ai rajouté un p'tit arbre que j'ai dessiné selon les principe iso si chers au pixel-art, ainsi qu'un bout de relief pour montrer que le truc s'adapte aux sprites créés pour de la 3D isométrique (l'angle de vue est exactement le même que si le terrain était constitué de cases carrées) :

[Image: sanstitre2mr0.png]

[Image: sanstitre4yw9.png]

Je poste la formule et toutes les explications demain car je commence à être bien mort. Et puis ça fait un bout à écrire : il y a pas mal de calculs explicatifs et de schémas car j'ai essayé de faire un truc adaptable quelques soient les dimensions des hexagones, donc il y a de la trigo dans le code Wink Au passage, j'essaierai de faire un p'tit exemple en php pour compléter le tuto d'Oncle James.

Bonne nuit à tous et à demain Wink