Discussion :

[-WalakaZ-]

Bonjour,

Je suis actuellement sur le code d'un jeu incluant une grille 2D isométrique auto générée. Je rencontre une difficulté pour transférer des coordonnées en pixels x, y à une position de case isométrique.

Voici le code avec le quel je crée une case.
La largeur d'une case est de 24px et sa hauteur de 12px.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
        //Pos p = position X, Y de la case
        //width = et height sont les dimensions de ma case
	public Cell(Pos p) {
		int i1 = (p.x * width + height * (p.y % 2)), 
				i2 = p.y * (height / 2);
 
		int pointX[] = new int[4];
		int pointY[] = new int[4];
 
		pointX[0] = i1;
		pointY[0] = i2;
 
		pointX[1] = i1 + height;
		pointY[1] = i2 + (height / 2);
 
		pointX[2] = i1;
		pointY[2] = i2 + height;
 
		pointX[3] = i1 - height;
		pointY[3] = i2 + (height / 2);
 
		polygon = new Polygon(pointX, pointY, 4);
		pos = p;
	}

Ici j'obtiens un polygon, ce qui me permets de fouiller mes liste de case pour voir dans la quel se situe ma position. Le problème c'est que côté serveur je ne peux pas me permettre de chercher les cases ainsi. J'ai besoin d'une formule qui me donne directement les coordonnée x, y de la case avec une position en pixel.

J'ai un code qui me donne une approximation, je sens que je m'approche. Seulement, parfois c'est la bonne case qu'il retourne, parfois celle de droite, d'en bas ou à deux cases à côté. Et la démarcation des cases est au milieux et pas sur les bords du polygone affiché.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
	public Pos posToIso(int x, int y) {
		if(y % 2 != 0) y--;
		if(x % 2 != 0) x--;
 
		float px = ((float) x / (float) width);
		float py = (float) y / ((float) height / 2);

J'ai pas mal fouillé sur le net, ces dernières années j'y ai parfois été confronté sans pouvoir le résoudre de manière propre. Si quelqu'un à une explication sur l'approche de ma problématique ce serait parfait ! Et si quelqu'un à un lien vers une documentation ou alors est prêt à me l'expliquer ce serait vraiment fantastique !

Merci à vous !

[-WalakaZ-]

J'ai tenté de faire une rotation à 45° mais cela ne marche pas étant donné que j'utilise de vrais losanges et pas des carré pivoté.

[LittleWhite]

Bonjour,

J'ai déjà été confronté à ce cas. Il est simple à régler pour le cas d'une grille 2D (non isométrique). Pour le cas isométrique, j'étais partie du fait que la tuile isométrique couvre quatre tuiles non isométriques (découpage en diagonale du carré non isométrique).
Du coup, mon astuce avait été de récupérer la coordonnée d'une tuile carré et de voir où se trouve le pixel par rapport à cette tuile. Par exemple, si le pixel se trouve en haut à gauche, alors c'est que la tuile isométrique sera en x-1, et y-1 par rapport au coordonnée "classique".

Comme je comprends qu'une explication texte n'est pas claire, j'apporterai un complément plus tard, désolé.

[-WalakaZ-]

Merci de ta réponses.
Seulement je me retrouverais avec un masque sur le quel je devrais faire des calcules. J'ai peur que ça ne soit pas la méthode optimale. Tu crois qu'avec un bête masque coloré et un getRGB(x, y) j'aurais des garanties de hautes performances ?
Côté serveur je pourrais aussi bien faire une estimation grossières, prendre un tableau de cases potentielle et tester les 9 polygone que j'aurais.
Des mesures caches misère j'en ai à la pelle dans ma manche, mais pour une donnée si critique et autan demandée par le serveur (à chaque déplacements de personnages d'1 px je regarde dans quel case il est, des fois qu'il en ait changé. Car j'ai besoin de la case centrale pour faire un tableau de cases visibles à l'écran pour l'envoyer au client) j'aurais vraiment besoin d'une formule propre de translation qui me trouve les bonnes données sans tortiller du cul avec des itérations.

[Bousk]

Tu peux combiner les 2 : carré englobant et texture.
Une fois que tu as trouvé le carré englobant (trivial, modulo et division), tu prends ta texture de carré et trouve le pixel à la case.
Avec une texture très simple qui prend 5 couleurs : la case centrale, les 4 extérieures.

Après si c'est mieux ou pas que de faire 4 if pour savoir dans quel morceau de carré englobant tu te trouves : j'en sais rien faut benchmark.

Ce qui est sûr en tous cas c'est que faire 4 if ça va clairement faire rire ton serveur en terme de charge.
Et puis surtout, c'est de l'optimisation prématurée, d'un faux problème qui plus est puisque les performances du serveur seront à peine, voire pas du tout, impactées.

[-WalakaZ-]

Merci Bousk, je vais tenter ça... Je vous tiens au courant de la résolution de mes pseudo problématique !

[-WalakaZ-]

En fait j'arrive pas à conceptualiser comment je peux sortir le carré qui entoure la case sans connaitre la case. Quelqu'un aurait une explication sur le calcule à faire ?

édit : Je devrais donc passer par les méthodes Math.ceil et Math.floor ?

[Bousk]

Effectivement si tu ne sais pas déjà trouver un simple carré par rapport aux coordonées pixels, vouloir trouver un losange est un peu prématuré..

https://jeux.developpez.com/tutoriel...n-generale/#LV
https://jeux.developpez.com/tutoriel...tuiles/#LIII-B
https://alexandre-laurent.developpez...ions-2D/#LII-C

Si tu as 3 cases de large, 2 de haut, chacun faisant 10px large et 5px haut, ça te fait un cadre 3*2 cases ou 30*10 pixels.
Si je me trouve en pixel 1,1, je suis dans la case 0,0
Si je me trouve en pixel 22,8, je suis en case 2,1
X :
> pixels [0-9] => case 0
> pixels [10-19] => case 1
> pixels [20-29] => case 2
Y :
> pixels [0-4] => case 0
> pixels [5-9] => case 1
case X = pixel X / case width
case Y = pixel Y / case height
Ce sont bien évidemment des divisions entières.

Ensuite, puisque les cases ne devraient pas être représentées en 2 dimensions mais dans un tableau unidimensionnel, le modulo intervient.

3*2 => [0, 1, 2, 3, 4, 5]
0,1,2 = 1ère ligne
3,4,5 = 2ème ligne
0,3 = 1ère colonne
1,4 = 2ème colonne
2,5 = 3ème colonne

Si je suis en case 0,0, je suis à l'index 0
Si je suis en case 1,0, je suis à l'index 1
Si je suis en case 2,1, je suis à l'index 4
index = case X % 3 + case Y * 3
3 n'étant pas un chiffre magique mais la largeur en case

Bien sûr tu n'as pas à passer par l'étape intermédiaire de case et peux calculer ça directement depuis des coordonnées pixels.
L'inverse est aussi vrai pour avoir les coordonnées à partir d'une case ou d'un index. C'est typiquement ce que fait une tilemap.

Ce sont le genre de gribouillage que tu devrais avoir sur un coin de table pour (re)trouver ces formules lorsque tu manipules de la 2D et des tileset.

[-WalakaZ-]

Plutôt que me réexpliquer les fondamentaux que je gère explique moi plutôt ce que je ne sais pas faire.
J'ai déjà fais plusieurs mmorpg avec des maps infinie et tout une gestion complète des entités, déplacements, combats, items, sorts, ia.
Je sais afficher un tableau de cases, je sais faire des divisions, je sais gérer les sprites.

J'ai pas de soucis avec la 2D classique. J'ai un soucis d'interpolation avec l'isométrie dans un sens uniquement ; pixels à coordonées isométrique et non carrée
Utiliser un index côté serveur avec une map dont la taille varie à chaque déplacements n'offre non plus aucuns intérêt.

Je passe des coordonnées de la cases à des points en pixels avec cette formule :

int i1 = (p.x * width + height * (p.y % 2)), i2 = p.y * (height / 2);

Alors comment ta méthode me permettrais d'inverser le processus ou de trouver un autre moyen d'obtenir le même résultat ?