Discussion :

[croustibapt]

Bonjour, je cherche les formules de base permettant de passer de coordonnées x, y dans un écran à la position i,j de la case correspondante.

De nombreux sites offrent leur PROPRE solution et je ne trouve pas de formule générique.

A tout hasard je vous joins le code source provenant de mes diverses recherches :

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
26
27
28
29
 
//Dans un premier temps on va calculer la taille d'une tuile iso
float iso_side = (float)(HAUTEUR_TUILE*sqrt(2));
 
//Point de départ en isométrique
COORDONNEES i_start;
i_start.x = this->origine_x+HAUTEUR_TUILE;
i_start.y = this->origine_y;
 
//On va rectifier les coordonnées par rapport à celles de départ de grille
COORDONNEES temp;
temp.x = x-i_start.x;
temp.y = y-i_start.y;
temp.y *= 2;
 
//On va ensuite transposer les coordonnées en isométrique
float temp_iso_x = (((float)temp.x)*(sqrt(2)/2)-((float)temp.y)*(-sqrt(2)/2));
float temp_iso_y = (((float)temp.x)*(-sqrt(2)/2)+((float)temp.y)*(sqrt(2)/2));
 
//Et en déduire les positions I/J correspondantes
COORDONNEES pos;
float pos_x = (temp_iso_x/iso_side);
float pos_y = (temp_iso_y/iso_side);
 
pos.x=round(pos_x);
pos.y=floor(pos_y);
 
//Enfin, on retourne le résultat trouvé
return(pos);

Merci d'avance.

P.S. : Si le sujet n'est pas bien placé, dites-le moi...

[nouknouk]

oula, de la racine carrée pour du calcul de coordonnées, ça va pas être tip top question parformances

Pour compléter mon début de post ici:

- en partant du principe que tu utilises le même système de coordonnées (ie. axe des 'x' vers le 'bas droite de l'écran ; axe des 'y' vers le 'bas gauche de l'écran)

- en partant du principe que ton système de coordonnées dans ton monde isométrique soit d'une unité pour un déplacement d'une tuile, pour les abscisses comme pour les ordonnées.

- en prenant comme point d'origine de l'écran (0,0) le point tout en haut de la tuile (0,0). Evidemment, ce ne sera pas le 'vrai' point d'origine, mais une simple translation (ie. ajouter une constante au x et y obtenus) permettra de l'adapter en fonction de tes besoins.

- en partant du prinicpe que l'axe des abscisses ('x') de ton écran va dans le sens gauche vers droite et que l'axe des ordonnées ('y') de ton écran va dans le sens haut vers bas.

- en prenant comme largeur de tuile en pixels (ie. de l'extémité la plus à gauche jusqu'à l'extrémité la plus à droite) la valeur tilePixelWidth. Même principe pour la hauteur en pixels de la tuile: tilePixelHeight.

on obtient:

Code :

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

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

[croustibapt]

Merci beaucoup, je teste ça au plus vite et je te tiens au courant, mais tu m'as l'air d'en connaître un rayon sur la chose ^^, donc je te fais confiance!

P.S. : Pour la racine carrée, j'ai mis le calcul direct pour voir si ce n'était pas une erreur d'arrondi, je l'enlève au plus vite ^^.

[nouknouk]

A noter que:

1/ tilePixelWidth/2 et tilePixelHeight/2 sont des valeurs qu'on va souvent utiliser. Au lieu de faire à chaque appel de fonction la division par deux, il peut être plus malin de stocker quelque part tilePixelDemiWidth et tilePixelDemiHeight et de les utiliser directement (même si dans ce cas précis, le gain en perfs est négligeable);

2/ la conversion inverse (coords écran vers coords iso) est quasiment aussi directe. Cette conversion dans l'autre sens est très utile ... typiquement pour exprimer l'endroit pointé par la souris lors d'un clic par exemple.

Je n'ai plus la formule en tête, mais elle est très facilement retrouvable avec un poil de gymnastique mathématique. En effet, les formules ci-dessus définissent un système de deux équations établissant la relation entre le point dans le monde iso (x,y) à une coordonnée de l'écran (x',y').

x' = (x-y) * (tilePixelWidth / 2)
y' = (x+y) * (tilePixelHeight / 2)

Il suffit alors d'exprimer x d'un part et y d'autre part en fonction de x', y', tilePixelWidth et tilePixelHeight.

[croustibapt]

Re bonjour,

j'avoue ne plus trop comprendre. Quelle formule dois-je utiliser pour passer des coordonnées écran (x, y) à la position de ma tuile (i, j).

Ex : je clique avec ma souris en (234, 567), comment puis-je retrouver la position (6, 9) ?

Merci d'avance.

[nouknouk]

Le système d'équations que j'ai donné ci-dessus:

x' = (x-y) * (tilePixelWidth / 2)
y' = (x+y) * (tilePixelHeight / 2)

Celui-ci définit la transformation pour transformer des coordonnées du monde isométrique vers les coordonnées de l'écran.
Cette transformation est celle qui va servir à déterminer l'endroit sur l'écran où l'on doit afficher nos sprites (tuiles, objets, ...). Par exemple tu as ta tuile de coordonnées (6,9) et tu veux retrouver l'emplacement sur l'écran (en pixels) auquel du dois l'afficher (234,567).

La transformation inverse permet quant à elle de transformer des coordonnées de l'écran (234,567) vers une coordonnée dans le monde isométrique (6,9). Cette transformation est effectivement utile pour déterminer la tuile cliquée par exemple. C'est la transformation que je n'ai pas donnée (car je ne l'ai plus en tête) mais qui est facilement retrouvable en reprenant le système d'équations représentant la transformation 'originale' et en exprimant x et y en fonction de x', y', tilePixelWidth et tilePixelHeight.

A noter que les deux transformations sont intimement liées puisque l'une est l'inverse de l'autre.

Bon, j'ai fait le calcul de la transformée inverse.
Un petit résumé pour que ce soit clair pour tout le monde:

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;
}

Evidemment, avec ce système, la carte apparait toujours de la même façon sur l'écran: l'extrémité haute de la tuile (0,0) se retrouve en haut à gauche de l'écran. A charge ensuite d'effectuer une translation sur les coordonnées 'screenCoord' par exemple pour 'déplacer' la carte sur l'écran. Ici, on va prendre decalPixelX et decalPixelY comme valeurs de translation.

On doit alors ajouter ajouter aux valeurs obtenues decalPixelX et decalPixelY:

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 = decalPixelX + (int)((tileCoordX - tileCoordY) * tilePixelWidth / 2.);
    screenCoord.y = decalPixelY + (int)((tileCoordX + tileCoordY) * tilePixelHeight / 2.);
 
    return screenCord;
}

Pour la transformation inverse, il faut retrancher decalPixelX et decalPixelY avant d'opérer le calcul des coordonnées isométriques:

Code :

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

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

Enfin, en faisant ainsi varier les valeurs de decalPixelX et decalPixelY de façon continue dans le temps, on obtient alors un scrolling.

[croustibapt]

Merci bien,

ces formules marchent à merveille.

Encore merci.

[Archimed78]

Bonjour a tous, j'ai une petit soucis.

Grâce a tes formules nouknouk le passage de coordonnées iso a l'écran se déroule comme je le souhaite :

http://img269.imageshack.us/img269/3992/iso1.gif

Mais j'ai un problème lors du passage d'une coordonnée de l'écran vers mes coordonnées iso, pourtant je respecte bien ta formule...

J'ai pensée que sa venait peut-être du point d'origine ?

Faut t'il commencé ta formule en partant de l'origine losange totale ? ou bien comme sur mon image ?

Je suis pas très doué pour expliqué mes problemes, si vous ne comprenez pas je ré-expliquerai ^^

Merci de votre aide.

[nouknouk]

je pense que le moyen le plus rapide pour déboguer ce genre de petit ajustement, c'est de faire des tests concrets, en affichant le plateau et en testant une dizaine de points différents.

Pour chaque point, tu notes:
- les coordonnées à l'écran (donc les coords de la souris)
- les coordonnées dans le monde ISO retournée par convertScreenCoordInTileCoor(mouseX, mouseY)
- les coordonnées ISO que tu aurais dû avoir si tout fonctionnait normalement.

A partir de là, on devrait rapidement comprendre ce qui cloche.

[Archimed78]

Voila ce que j'obtiens :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
screen x = 61
screen y = 22
 
iso x = 0.899342891278375
iso y = -0.0845280764635604
 
iso x a trouver = 0
iso y a trouver = 0
----------------------------------
screen x = 109
screen y = 51
 
iso x = 1.82347670250896
iso y = 0.0654121863799283
 
iso x a trouver = 1
iso y a trouver = 0
----------------------------------
screen x = 182
screen y = 79
 
iso x = 2.93070489844683
iso y = -0.00477897252090798
 
iso x a trouver = 2
iso y a trouver = 0
----------------------------------
screen x = 244
screen y = 111
 
iso x = 4.02329749103943
iso y = 0.0878136200716844
 
iso x a trouver = 3
iso y a trouver = 0
----------------------------------
screen x = 305
screen y = 129
 
iso x = 4.84856630824373
iso y = -0.0707885304659497
 
iso x a trouver = 4
iso y a trouver = 0
----------------------------------
screen x = 374
screen y = 164
 
iso x = 6.0531660692951
iso y = 0.0209080047789727
 
iso x a trouver = 5
iso y a trouver = 0
----------------------------------
screen x = 432
screen y = 187
 
iso x = 6.9468339307049
iso y = -0.0209080047789727
 
iso x a trouver = 6
iso y a trouver = 0
----------------------------------

Pour information je programme en flash (AS2) mais sa change pas grand chose niveau mathématiques ^^

[nouknouk]

Ben tout ça me paraît plutôt pas mal : même si on n'a pas tileWidth et tileHeight pour refaire les calculs on se rend compte qu'à peu de choses près la fonction ressort un nombre équivalent (si on le tronque) a ce qu'on devrait avoir.

Les petits cas où tu peux avoir un souci sont dûs à une chose: dans l'image que tu nous as montrée, on voit bien que le point qui est utilisé comme référence pour dessiner le sprite de la tuile (point rouge dans l'image attachée) ne correspond pas à la pointe 'haute de ta tuile' qui correspond à la coordonnée de la tuile (point vert dans l'image attachée).

On a en effet un décalage de:
- (tileWidth / 2) pixels en abscisse
- 0 pixels en ordonnée.

Quand tu utilises convertScreenCoordInTileCoord(), il faut donc retrancher aux coordonnées de ta souris (tileWidth/2, 0) pour compenser ce décalage.

[Archimed78]

Merci de ton aide, sa marche nickel ^^ Quel talent nouknouk lol, du cou j'avai pas tord, c'était le point d'origine qui n'était pas bon dans les calcules. Si j'ai d'autre problème je t'en ferais part. Encore merci !

[Neuromancien2]

Bonjour,

J'applique les mêmes formules sur une carte affichée comme celle de Archimed78.

Mais la formule avec le décalage de (tileWidth / 2) ne semble pas fonctionner.

Code pascal :

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
const tilePixelHeight = 77;
const tilePixelWidth = 152;
 
function convertTileCoordInScreenCoord(tileCoordX: integer; tileCoordY: integer
  ): TPointCoord;
  var ScreenCord : TPointCoord;
begin
  ScreenCord.X := (tileCoordX - tileCoordY) * tilePixelWidth div 2;
  ScreenCord.Y := (tileCoordX + tileCoordY) * tilePixelHeight div 2;
 
  Result := ScreenCord;
end;
 
function convertScreenCoordInTileCoord(screenCoordX: integer;
  screenCoordY: integer): TPointCoord;
var TileCord : TPointCoord;
begin
  screenCoordX := screenCoordX - (tilePixelWidth div 2);
  TileCord.X := (screenCoordY div tilePixelHeight) + (screenCoordX div tilePixelWidth);
  TileCord.Y := (screenCoordY div tilePixelHeight) - (screenCoordX div tilePixelWidth);
  Result := TileCord;
end;

EDIT: Voici ce que j'obtiens :

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
26
27
Coordonnées clic : 67,57
Attendu : 0,0
Calculé : 0,0
 
Coordonnées clic : 148,98
Attendu : 1,0
Calculé : 1,1
 
Coordonnées clic : 222,95
Attendu : 2,0
Calculé : 1,1
 
Coordonnées clic : 178, 221
Attendu : 3,2
Calculé : 2,2
 
Coordonnées clic : 255,418
Attendu : 6,4
Calculé : 6,4
 
Coordonnées clic : 385,427
Attendu : 7,3
Calculé : 7,3
 
Coordonnées clic : 156,448
Attendu : 6,5
Calculé : 5,5

[nouknouk]

même genre de souci, même principe: sans quelques points de référence et leurs valeurs associées (coordonnées de la souris, dans le monde iso espérées, dans le monde iso calculées, ...) on ne pourra pas grand chose pour toi.

[Neuromancien2]

même genre de souci, même principe: sans quelques points de référence et leurs valeurs associées (coordonnées de la souris, dans le monde iso espérées, dans le monde iso calculées, ...) on ne pourra pas grand chose pour toi.

Je ne m'attendais pas à une réponse aussi rapide.
Je viens de compléter mon message.

[nouknouk]

Les formules sont bonnes, ton problème vient d'histoires d'arrondis: tes données en entrée sont des valeurs entières, donc le programme va considérer que quand il fait des divisions, tu cherches uniquement à faire des divisions entières.

Donc il te retournera une valeur entière arrondie par défaut. Par exemple:

- si on divise deux nombres flottants: 49.00 et 10.00, la division retournera un nombre flottant, 49.90

- si on divise les mêmes nombres (49 et 10) en tant qu'entiers, la division 49/10 retournera non pas 49.90 (un flottant) ou même 50 (arrondi au plus proche), mais 49 (arrondi par défaut).

Ton souci vient de là et de l'approximation qu'entraine les calculs intermédiaires effectués sur des entiers. Si on prend ton dernier exemple

Code :

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

1
2
3
Coordonnées clic : 156,448
Attendu : 6,5
Calculé : 5,5

En refaisant le calcul à la main pour les abscisses (la coordonnée qui déconne) on obtient:

TileCord.X := (screenCoordY div tilePixelHeight) + ( (screenCoordX - tilePixelWidth div 2) div tilePixelWidth);
// équivaut à (448/ 77) + ( (156 - (152/2))/ 152 )
// soit 5.8181 + 0.52
// et donc 6.34, soit en entier (arrondi par défaut) 6 et pas 5

Si le calcul est fait avec des divisions entre entiers, 5.8181 sera arrondi à 5 et 0.52 à 0, d'où le (5+0) = 5 que toi tu trouves comme résultat.

L'idée est donc de ne pas faire la division entre des entiers mais entre des nombres flottants. Pour cela, tu devrais:
- convertir au début de ta fonction les valeurs d'entrée ainsi que les constantes (tilePixelWidth, tilePixelHeight et '2') en flottants
- faire les calculs cette fois avec les flottants
- au moment de retourner le résultat, reconvertir les valeurs obtenues (flottantes donc) en entier arrondi par défaut (6.34 => 6).


Au passage, comme précisé ici, il est fortement conseillé d'avoir des tailles de tuiles qui respectent deux règles:
- que la largeur soit égale à deux fois la hauteur, pour des histoires de 'rendu propre' des diagonales'.
- à fortiori il est totalement déconseillé que l'une des tailles ne soit pas divisible par deux.

C'est d'ailleurs probablement la raison pour laquelle (dans ton screenshot ci-dessus), on observe des lignes noires entre chaque tuile dont l'épaisseur varie d'une tuile à l'autre. Je te conseille donc vivement d'adapter au moins ta hauteur de tuile actuelle (77) en conséquence.

[Neuromancien2]

Merci. Ca fonctionne parfaitement.

[Samou61]

Bonjour, j'up un sujet un peu vieux dsl mais j'ai le même probléme : je veux passer d'une coordonnées de l'écran a une coordonnée isométrique mais le résulat est trés variable. Mes tiles font 80*40.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
                    float a = 0, hauteurTile = 40, largeurTile = 80, n = e.getX(), v = e.getY(), deux = 2;
 
		    tileX = (v / hauteurTile)  + ((a - (largeurTile / deux)) / largeurTile);
		    tileY = (v / hauteurTile)  - (a / largeurTile);
 
		    System.out.println("Endroit du clic : " + n + "," + v);
 
 
		    caseX = (int)tileX;
		    caseY = (int)tileY;
 
 
			System.out.println("Resultat : " + caseX + "," + caseX);

Et voici ce que j'obtiens :

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
 
Coordonnées du clic : 210,24
Calculé : 0,0
Attendu : 2,0
 
Coordonnées du clic : 131,99
Calculé : 1,1
Attendu : 1,2
 
Coordonnées du clic : 378,16
Calculé : 0,0
Attendu : 4,0
 
Coordonnées du clic : 243,119
Calculé : 2,2
Attendu : 3,2
 
Coordonnées du clic : 247,163
Calculé : 3,3
Attendu : 3,4

Voilà si quelqu'un pouvait m'aider ça serait super

EDIT : Voici ma map :

[Yordarus]

http://www.developpez.net/forums/d88...-isometriques/

Essaye de voir avec ce que j'ai écris là, ça peut peut être t'aider

[Samou61]

Bon je re-up le sujet,
Le problème, je pense, c'est que j'utilise pas le même système de numérotation que vous. Votre map est un peu en forme de losange, la mienne est rectangulaire :

Donc voilà, est ce que vous connaissez des formules pour ce système de numérotation ? Merci.