Aller au menu - Aller au contenu

Gérer la position du curseur

Dans une vue isometrique 2D

Pour accéder à cette section
Connectez-vous !
connexion_rpx

Résolu Le problème de ce sujet a été résolu

Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne CactO_o's # Posté le 07/02/2012 à 00:07:37
Qui s'y Frotte... S'y Pique !!
Avatar
Bonjour à tous,

Je suis en train de faire un petit jeu en JS et j'ai un problème au niveau de l’algorithme (je n'ai pas mis dans la section JS car le problème n'est ici que géométrique).

Voilà ce que je possède actuellement, une simple map de 10x10 dans une vue isométrique :

Image utilisateur

Je possède les positions de la souris sur la map, mais je n'arrive pas à les transformer en vue isométrique...
Pour le moment j'arrive à me donner de léger repère (tel que des colonnes ou toutes les cases sont en 0,0 ou 1,1 ou 2,2 ...) et la position du curseur dans ces colonnes :

Image utilisateur

Mais j'ai beau tourné toutes ces informations dans tous les sens je n'arrive pas à trouver la solution... :s


Informations supplémentaires :
- Les images sont 150x88px
- La map fait 10x10
- La vue est gérer (si je déplace la caméra, j'aurais les coordonnées sur la map et non sur l’écran)
- Quelques coordonnées :
Image utilisateur

Merci à tous ceux qui pourront m'aider, et aussi aux autres !
Image utilisateur
 
Publicité # Posté le 07/02/2012 à 00:07:37

Hors ligne Kaji9 # Posté le 07/02/2012 à 18:29:02
Avatar
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
C'est un changement de repère et de base que tu dois effectuer. Je vais essayer d'être clair sans utiliser d'image. Tout d'abord, le repère utilisé par la souris est orthogonal et a son centre O dans le coin supérieur gauche de l'écran. Tout point M a pour coordonnées M(x;y)_{orth}. Il serait bon de que le centre de notre repère soit situé non pas en (0;0)_{orth} mais en O'(0 ; 440)_{orth}. Du coup, notre point M n'aura plus les mêmes coordonnées, celles-ci deviendront M(x ; y-440).

Question : comment passer du repère orthogonal au repère isométrique ? Il suffit de changer la base du repère. La base du repère orthogonal utilisé par la souris est (\vec{i} ; \vec{j}). Donc dire que M a comme coordonnées (x ; y - 440) signifie que \vec{O'M} = x \vec{i} + (y - 440)\vec{j}. Le repère isométrique utilisera lui une base (\vec{e_1} ; \vec{e_2}). Il faut alors établir une relation entre nos deux bases de vecteurs. On remarque que \vec{e_1} + \vec{e_2} = 150 \vec{i} et - \vec{e_1} + \vec{e_2} = 440 \vec{j}. Du coup, {{\vec{e_1} + \vec{e_2}} \over 150} = \vec{i} et {{- \vec{e_1} + \vec{e_2}} \over 440} = \vec{j}.

Reprenons notre formule \vec{O'M} = x \vec{i} + (y - 440)\vec{j} et remplaçons par les résultats obtenus au chapitre précédent.

Et ... suite dans une heure ou deux. Je dois y aller, dsl. Mais rassure-toi, j'ai la solution :p
Édité le 07/02/2012 à 18:41:08 par Kaji9
Tuto Ada : ||||||||||| | |||||||| (60%)
 
Hors ligne CactO_o's # Posté le 07/02/2012 à 19:13:30
Qui s'y Frotte... S'y Pique !!
Avatar
Bon, grâce à toi j'ai changer ma façon de voir les choses et j'ai trouvé...
Je vais éditer ce sujet, le temps de faire une ou deux images et expliquer ma solution.. (Qui n'est je crois pas exactement la même que toi..)

EDIT :

Je vais donné ma version des choses, pour te montrer comment j'ai réussi...

Comme on le vois dans un de mes schémas, j'avais bien réussi à déplacer mon repère pour avoir le même 0,0 mais je n'avais pas modifier l'angle :
Citation : CactO_o's

Image utilisateur


J'ai donc repris correctement les repères en déplaçant mon repère rouge à la place du repère orange afin qu'il ai le même centre que mon repère de map, le bleu :

Image utilisateur

C'est ensuite que je me suis rendu compte que je pouvais trouver les fonctions (en bleu) définissant ma map car ce ne sont que des fonctions linéaires et affine. (Rappel : Mes cases de mapping font 150x88 px)

Image utilisateur

Ma fonction pour connaitre le map_y est donc simple :

Code : Autre
1

y = (750 * x)/450  + 88 map_y


Sachant que je connais x et y (qui sont les positions de ma souris) je peux facilement retrouver map_y (et map_x en utilisant la même technique avec les fonctions en rouge)


Code : javascrip
1
2

map_x = -(info.mouse_y - ((LEFT_Y * info.mouse_x) / TOP_X)) / MAPPING_HEIGHT;
map_y = -(-info.mouse_y - ((LEFT_Y * info.mouse_x) / TOP_X)) / MAPPING_HEIGHT;



Voilà voilà !! Sujet résolu !!

Merci à toi @Kaji9
Édité le 07/02/2012 à 19:51:23 par CactO_o's
Image utilisateur
 
Hors ligne Kaji9 # Posté le 07/02/2012 à 19:33:35
Avatar
Bon, je finis mon explication :
\vec{O'M} = x \vec{i} + (y-440)\vec{j} (on remplace par les résultats précédents)
\vec{O'M} = x ({{\vec{e_1} + \vec{e_2}}\over 150}) + (y-440)({{-\vec{e_1} + \vec{e_2}}\over 440}) (on simplifie un peu)
\vec{O'M} = ({{x \over 150}-{{y - 440}\over 440}})\vec{e_1} + ({{x \over 150}+{{y - 440}\over 440}})\vec{e_2}

Autrement dit, si tu as un point M(x;y)_{orth} (point correspondant aux coordonnées de la souris dans le "repère-souris") alors ses coordonnées dans le "repère isométrique" seront : M({{x \over 150}-{{y - 440}\over 440}};{{x \over 150}+{{y - 440}\over 440}})_{isometrique}. Attention, ces coordonnées sont réelles et pas entières !

Et un petit dessin pour la comprenoire :

Image utilisateur
Tuto Ada : ||||||||||| | |||||||| (60%)
 

Retour au forum "Autres langages, outils et approches" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx