[Truc] Carte, Hexagones et Coordonnées

[Truc] Carte, Hexagones et Coordonnées - 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 : [Truc] Carte, Hexagones et Coordonnées (/showthread.php?tid=4268)

Pages : 1 2 3 4 5

RE: [Truc] Carte, Hexagones et Coordonnées - ToraTora - 06-04-2011

Merci Wink

ça a l'air de marcher :

Reste plus qu'à afficher la carte en forme de carré et corrigé le petit décalage entre les tuiles.

RE: [Truc] Carte, Hexagones et Coordonnées - ToraTora - 07-04-2011

J'ai trouvé mon erreur, pour ceux que ça intéresse :



$hw = 52; // largeur en pixels de l'image de l'hexagone

$hh = 60; // hauteur en pixels de l'image de l'hexagone



$leftX = $joueurX - $vision;

$rightX = $joueurX + $vision;



$leftY = $joueurY - $vision;

$rightY = $joueurY + $vision;



$leftZ = $joueurZ - $vision;

$rightZ = $joueurZ + $vision;

		

print '<div id="carte">';

	for($x = $leftX; $x <= $rightX; $x++ ){

		for($y = $leftY; $y <= $rightY; $y++){

			for($z = $leftZ; $z <= $rightZ; $z++){

				if (($x - $y - $z)==0){

					$posX = $y *($hh*(3/4));

					$posY = ($z + $x) * ($hw/2);

					print '<div class="tile" style="left: '.$posX.'px; top: '.$posY.'px;">';

							print $x.'/'.$y.'/'.$z.'';

					print '</div>';

				}

			}

		}

	} 

print '</div>';

Par contre, pour le positionnement de la carte j'ai toujours un petit problème :

En 0/0/0 tout va bien (quoique la carte n'est pas centré dans le cadre rouge)..
Mais dès que je me déplace, la carte se déplace aussi.
Ma classe .tile est en position: absolute; et #carte en position: relative;

Est ce que je dois calculer le left/top de #carte en fonction de la position du joueur, pour qu'elle s'affiche tout le temps au même endroit ?

RE: [Truc] Carte, Hexagones et Coordonnées - Ter Rowan - 07-04-2011

posX et posY dépendent de la position du joueur

le centre de ta carte est toujours la position du joueur

du coup il faut que tu définisses une position (en pixel) pour la position du joueur. Imaginons

$posX0 = 200;
$posY0 = 200;

et tu rends l'ensemble relatif à la position du joueur :

là où tu avais

Code :
                    $posX = $y *($hh*(3/4));

                    $posY = ($z + $x) * ($hw/2);

tu dois avoir

Code :
                    $posX = $posX0 + ($y-$joueurY) *($hh*(3/4));

                    $posY = $posY0 + ($z-$joueurZ + $x-$joueurX) * ($hw/2);

pas testé mais ça devrait marché

RE: [Truc] Carte, Hexagones et Coordonnées - Vampyr317 - 20-11-2012

Bonjour, voilà j'ai lu attentivement toute la discution, par contre pour ma part je chercher plutôt le raisonnement qui permette d'arriver au résultat de l'exemple.
A la différence ToraTora, j'aimerai que le résultat ne s'affiche pas en descendant mais qu'il reste bien compacte et droit comme l'exemple. Je n'arrive pas à concevoir le principe pour orienter les axe X/Y.

Merci du coup de main.

Bon je ne pense pas recevoir de réponse vu l'ancienneté de la conversation x) Mais de toute manière j'ai finalement réussi à optenir le résultat souhaité en manipulant un peu au petit bonheur la chance les formule d'affichage Smile

RE: [Truc] Carte, Hexagones et Coordonnées - Xenos - 20-11-2012

Salut,

ne levez pas vos boucliers de feu, mais je trouve la méthode assez mauvaise, car on utilise 3 coordonnés pour désigner un point d'un plan qui est en 2D. Il y a donc une coordonnée de trop. De fait, chaque hexagone possède, en pratique, une infinité de coordonnées, ce qui risque de poser de gros soucis pour savoir si deux coordonnées sont égales.

Pour ma part, les cartes gagneraient à se présenter sous la forme d'un graphe, dont les noeuds sont les cases et dont les liens représentent les voisinages entre les cases, chaque case étant définie par une forme de base (carré, hexagone, pentagone, etc), une taille (qui peut ne pas être la même selon X et Y), à la limite, un angle de rotation, et par 2 coordonnées qui donnent la position du centre de la case.

Dans le cas d'une carte hexagonale, le maillage serait alors similaire à ceci:
[image supprimée depuis]

Le repère est donc orthogonal, mais ici non orthonormal (la distance entre x,y et x+1,y est différente de celle entre x,y et x,y+1). Chaque case est repérée par deux coordonnées X,Y entières. On se trouve à coup sûr au centre d'un hexagone si la parité de x est égale à celle de y, sinon, on est exactement entre deux hexagones (0,0 est un hexagone, 2,0 aussi, 0,2 aussi, mais 2,1 tombe sur une ligne entre deux hexagones).
Le repère étant orthogonal, le calcul de distance est assez aisé (il ne faut pas oublier le facteur d'échelle du à l'étirement selon X ou Y c'est à dire dû au fait que la distance le long de X n'est pas la même que celle le long de Y). Le tracé de ligne est également aisé, puisqu'on a un repère orthogonal 2D classique. Le seul défaut est vraiment la non-orthonormalité, qui transformerait par exemple le cercle de centre 0,0 et de rayon 4 en un ovale lorsqu'on l'affiche...

Le repère pourrait être orthonormalisé, puisque la distance entre deux segments vert (sur l'image) est 2*r alors qu'entre deux segments bleus, il y a 3/2*r, avec r le rayon de l'hexagone. Au lieu de -1, 0, 1, ... pour les axes verts, il faudrait alors utiliser les coordonnées -2, 0, 2... (autrement dit, l'axe est de longueur égale à r) et pour les axes bleus, 0, 3, 6, 9... (la longueur de l'axe est alors aussi r), et on a un repère orthonormé usuel.

Je ferai une étude plus claire et plus pratique qu'un simple post de forum sur ce type de maps (car le problème va se poser sur ECLERD). Je le laisserai sur la tasklist reinom ( https://reinom.com/tasks ), il sera consultable librement (dans les rapports des tâches réalisés).

RE: [Truc] Carte, Hexagones et Coordonnées - Thêta Tau Tau - 20-11-2012

Je pige pas pourquoi vous vous emmerdez, deux axes formant un angle de 120° ou 60°, c'est pas sorcier.
[Image: 667154Sanstitrepng.png]

Soit i la distance en pixels entre les centres de deux hexagones qui se touchent.

Conversion dans un repère orthonormal (l'écran du client) :
x' = i*3^0.5/2*x
y' = i*(y - x/2)

Distance
On converti dans le repère orthonormal, puis Pythagore, on développe et :
d = i * ( x² + y² - x*y)^0.5
(c'est la distance à vol d'oiseau, pour la distance case par case cf. le post de Roworll).

Bonus :
On peut représenter les coordonnées dans une matrice (à droite dans mon image), les traits rouges tracés à l'arrache montrent les déplacements possible.
Du coup on peut stocker la carte dans une image.

PS : j'ai calculé les formules à l'arrache, pas sur que ce soit juste, mais ça a l'air de marcher.

Je viens de piger ce que tu comprends pas Xenos :

(20-11-2012, 06:21 PM)Xenos a écrit : je trouve la méthode assez mauvaise, car on utilise 3 coordonnés pour désigner un point d'un plan qui est en 2D. Il y a donc une coordonnée de trop. De fait, chaque hexagone possède, en pratique, une infinité de coordonnées, ce qui risque de poser de gros soucis pour savoir si deux coordonnées sont égales.

En fait on utilise pas un repère à trois coordonnées mais 3 repères à 2 coordonnées ( x,y y,z et x,z) et on utilise celui qui est le plus pratique selon les situations. Du coup il n'y a bien qu'une coordonnée possible.

Mais perso je préfère pas utiliser l'axe Z, sauf pour le calcul de distance "case par case" où il est indispensable. Le reste du temps il ne sert qu'à simplifier les formules.

RE: [Truc] Carte, Hexagones et Coordonnées - Xenos - 20-11-2012

Dans ton image, sur le plan hexagonal, (0,0) et (2,1) sont à la même hauteur.
Sur la vue "matricielle" classique, 0,0 et 2,1 ne sont plus sur la même ligne...

Ok, 3 repères 2D, soit, mais le "et on utilise celui qui est le plus pratique selon les situations", c'est là (je pense) où l'ordinateur va être assez problématique car ce genre de "selon les situations", il aime pas trop... Ou du moins, le code s'alourdit de beaucoup.
Enfin, c'est peut-être juste pas ma vision, c'est pour cela que j'vois mal comment on s'en sort avec ca. Après, si vous vous en sortez avec ca, tant mieux Wink

RE: [Truc] Carte, Hexagones et Coordonnées - Thêta Tau Tau - 20-11-2012

(20-11-2012, 11:37 PM)Xenos a écrit : Sur la vue "matricielle" classique, 0,0 et 2,1 ne sont plus sur la même ligne...

Ben oui vu que les axes ne sont pas orthogonaux. Mais on s'en tape, la matrice c'est pour représenter simplement les données. Une matrice carrée représente un losange "visuellement".

Si tu stocke une carte dans une image. Si la carte est rectangulaire, elle apparaitra déformée sous la forme d'un parallélépipède sur l'image. Mais quand elle sera affichée elle sera bien rectangulaire.

RE: [Truc] Carte, Hexagones et Coordonnées - Vampyr317 - 21-11-2012

Merci pour vos réponses.. mais ce que moi je cherchais c'était comment modifier les formules données au début de la conversation pour orienter les axes X/Y selon le modèle... ce que j'ai finalement réussi soit dit en passant Big Grin

merci quand même Smile

RE: [Truc] Carte, Hexagones et Coordonnées - niahoo - 14-04-2016

(15-10-2010, 04:49 PM)niahoo a écrit : Hello, merci pour ça c'est très interessant !

(par contre je tique un peu sur « Note : Les coordonnées d'un hexagone ne sont valide que si X-Y-Z=0. Tout résultat dérogeant à cette règle indique un hexagone invalide, du moins que une représentation 2D. » )

Attention gros déterrage. En fait c'est simplement la somme des coordonnées qui fait 0, pas leur soustraction.