Discussion :

[micky86]

Bonjour,

Je cherche actuellement à développer un jeu en 2D isométrique. Je rencontre un problème pour calculer la position de la tuile sur lequel le joueur à cliqué.

J'ai bien trouvé les formules suivantes :

Pour passer d'une coordonnée isométrique aux coordonnées en pixels à l'écran:

Code :

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

1
2
3
4
5
6
7
8
9
 
public Point convertTileCoordInScreenCoord(double tileCoordX, double tileCoordY) {
    Point screenCord = new Point();
 
    screenCoord.x = (int)((tileCoordX - tileCoordY) * tilePixelWidth / 2.);
    screenCoord.y = (int)((tileCoordX + tileCoordY) * tilePixelHeight / 2.);
 
    return screenCord;
}

Pour passer d'une coordonnée en pixels à l'écran à une coordonnée isométrique:

Code :

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

1
2
3
4
5
6
7
8
9
 
public Point2D.Double convertScreenCoordInTileCoord(int screenCoordX, int screenCoordY) {
    Point2D.Double tileCord = new Point2D.Double();
 
    tileCord .x = (screenCoordY / tilePixelHeight  + screenCoordX / tilePixelWidth;
    tileCord .y = (screenCoordY / tilePixelHeight  - screenCoordX / tilePixelWidth;
 
    return tileCord;
}

Formule obtenu sur le lien suivant : http://www.developpez.net/forums/d78...s/#post4537900

Mon problème est le suivant :

J'ai un tableau à 2 dimensions d'une taille de 10 x 10.
Mon image 2D Isométrique à une taille totale de 453 x 226. Cette taille a été obtenu en partant d'un damier de 320 x 320 puis tourné a droite de 45° et réduction de la hauteur par 2.



Chaque tuile à une taille de 44 x 22 (au lieu du 32 x 32 sur mon damier 2D).

Si l'utilisateur clique sur le damier qui correspond a la position 9,3.

X.souris = 363
Y.souris = 147

En appliquant la formule ci-dessus pour passer d'une coordonnée en pixels à l'écran à une coordonnée isométrique j'obtiens :

tileCord.x = (147 / 22 + 363 / 44)
tileCord.x = 14.95

tileCord.y = (147 / 22 - 363 / 44)
tileCord.y = -1.55

J'aimerais savoir pourquoi je n'obtiens pas un tileCord.x = 9 et un tileCord.y = 3 ? Je me doute que je dois me tromper quelques parts mais je ne trouve pas où :/

Merci pour votre aide

[skeud]

Pour avoir bosser la dessus un bon bout de temps, j'ai trouvé une solution qui semble très efficace et ne demande que peu de calcul.

Tout d'abord, passer de coordonné "tile" à des corrdonnées "écran", tu l'as très bien fait, donc ça ne te poseras plus de soucis.

Le problème est effectivement de passé des coordonnées écran->tile.
Pour ça, tu as plusieurs données dont tu peux te servir:
_ La taille de tes tiles
_ le point sur l'écran où l'utilisateur à cliquer.

L'algo que j'ai utilisé:
Prendre les coordonnées pointées sur l'écran et les divisées par la taille de ta tile.
Tu obtiens ainsi une coordonnée en 2D (pas iso). A partir de ces coordonnées, tu peux trouvé sur quelle image ton gugus à cliqué.
Pour chaque x, la coordonnée en iso est: +1x et -1y
pour chaque Y, la coordonnée en iso est: +1x et +1y.
Tu trouve donc dans le cas nominal, les coordonnée 2d iso.
Maintenant lorsque tu clique en dehors de ce carré selectionné (celui de la taille d'une tile, donc en dehors de la taille nominal de ta tile), il suffit de savoir sur quel coin tu clique:
En haut à gauche: -1x
En haut à droite: -1y
En bas à gauche: +1y
En bas à droite: +1x.

Je te passe le lien qui m'a permis de mieux comprendre avec un schéma et tout ce qu'il faut pour comprendre:
click isometric

Je te conseil vivement de parcourir ce site pour trouver plein de solution sur les mondes isometric.

Ensuite j'ai découvert ce moteur qui permet de faire facilement des monde en 2D iso avec tout ce qu'il faut, je te conseil vivement d'y jetter un oeil, un moteur 2d iso étant relativement difficile à faire (j'ai essayé puis abandonné l'idée pour partir de fife, disponible en C++/python).

N'hésite pas à me demander, j'ai trouvé des tutos super simpa sur ce sujet si tu veux continuer la dedans .

[micky86]

Merci pour ta réponse

Cependant je suis sceptique sur ta méthode "simple" ^^.

Si je fais un calcul à la main :

Si l'utilisateur clique à la position X = 226 et Y = 214 (On parle sur un écran avec affichage du damier en isométrique)
Cette position doit être égale a la case 9,9.

En appliquant ta méthode :

X : 226 / 44 = 5.14
Y : 114 / 22 = 5.18

Je suis loin de la position 9,9 de mon tableau :/

Je me suis planté où ?

[skeud]

C'est pas aussi simple que ça, la tu as les coordonnées nominale de tes case (5,5).
Ensuite tu applique cette formule:
pour chaque x (donc 5) : +5x -5Y (tu as donc les coordonnées 5,-5)
après pour chaque y (donc 5) +5x +10y (tu as donc les coordonnées 10,10). (+10Y car ton tile est x=2y, donc il faut multiplié les coordonnées y par 2).
ensuite quand tu applique un modulo sur tes coordonnées:
226%44=6
114%22=4
Tu vois que tu tombe dans le coin en haut à gauche de ton tile, donc -1X, tu obtiens (9,10).
Pour moi c'est les bonne coordonnées, ensuite il faut affiner le résultat en fonction de tes tile et trouver le bonne algo .