Discussion :

[davcha]

Je suis en train de bosser sur une sorte de "petite librairie" en php/xml/javascript/xhtml/css permettant d'afficher une carte 3D isométrique sur une page web et d'intéragir avec elle.

Actuellement, j'en suis arrivé à ce point là (à voir avec Firefox) : Jolie carte 3D Isométrique (le serveur est éteint après minuit environ).
Ce qui est je trouve, assez satisfaisant.

La question que je me pose est d'ordre pratique : comment gérer efficacement plusieurs niveaux d'élévation ?
Effectivement, cette carte, à terme, va devoir supporter les "altitudes" et "profondeurs", autrement dit, une carte non plus sur un plan, mais dans un cube.

Comment faire, donc, pour, par exemple, sélectionner la bonne case quand plusieurs cases vont se superposer les unes sur les autres ?...

[mat.M]

Le lien ne fonctionne pas;
un relief en 3d ce n'est ni plus ni moins que des points définis en X,Y et altitude.
Et ces points sont reliés sous forme de "liste de triangles" pour créer des polygones.

D'une carte 2D il faut extrapoler l'altitude en fonction de coordonnées X et Y ( la longitude et latitude c'est après parce que c'est complexe ).
Donc pas besoin de gérer des niveaux d'élevations.
Ce n'est ni plus ni moins qu'un maillage

[davcha]

Bizarre, le lien fonctionne chez moi. Tu es derrière un firewall ? Le port de mon serveur http est 8000 pour ceux qui viennent d'internet

Enfin, voilà une image pour ceux qui ont des problèmes de connexion.


En gros, quand on passe la souris sur les cases, la case s'affiche complètement (c'est à dire que le cube s'affiche).
Donc j'ai pas vraiment un maillage... seulement en apparence en fait.
La question que je me pose c'est : si je mets 2 hauteurs de cases, donc si je mets une autre couche de cases par dessus ces cases là, comment je vais bien faire pour sélectionner les bonnes cases, sans que ça soit trop pénible...

[Graffito]

Bonjour,

Je suppose que ce qui déclenche la sélection de case est la position de la souris sur la grille horizontale (et non sur le volume).

Est-ce que le problème consiste à gérer 2 plans contenant chacun une grille ou des "cubes" à 2 niveaux (exemple : bas du cube en rouge, haut en rose) ?

[Kangourou]

salut,

avec les jeux de la serie Xcom (UFO), ou pouvais gerer differents niveaux.
On choisit le niveau courant, et on ne peut selectionner que les tiles de ce niveau.
Pour l'afficahge, on pouvait voir les tiles du niveau courant et des niveaux en dessous, si pas caches. Dans l'ensemble, c'etait assez efficace.

A+

[davcha]

Je suppose que ce qui déclenche la sélection de case est la position de la souris sur la grille horizontale (et non sur le volume).

Est-ce que le problème consiste à gérer 2 plans contenant chacun une grille ou des "cubes" à 2 niveaux (exemple : bas du cube en rouge, haut en rose) ?

Deux plans.

Sinon, c'est un peu de cette manière là que je pensais faire Kangourou, mais dans mon modèle, du moins pour le moment, ça oblige à recharger la carte pour changer le niveau actif...
Donc je me demande s'il n'y a pas une meilleure solution.

[mat.M]

En gros, quand on passe la souris sur les cases, la case s'affiche complètement (c'est à dire que le cube s'affiche).

?? Ce n'est qu'une banale transformation en 3d
C'est une représentation en pseudo 3d , 2diso
Il suffit de mémoriser les cases dans une matrice n x n et selon les coordonnées de la souris les transformer , X subit une transformation de 30 degrés et Y 45 degrés.
Ou encore plus simple : chaque losange est assimilé à un rectangle , il suffit de détecter si la souris est dans ce rectangle puis afficher un pseudo rectangle dont le centre corresponde avec celui de base.
Suis-je assez clair ?

Je te conseille de procéder ainsi car les calculs trigonomêtriques selon le langage de programmation c'est couteux en temps de calculs

[Kangourou]

dans mon modèle, du moins pour le moment, ça oblige à recharger la carte pour changer le niveau actif...
Donc je me demande s'il n'y a pas une meilleure solution.

L'idee est peut-etre de garder le modele tel quel, et de modifier la focntion d'affichage pour dessiner les cases en focntion :
- de leur position
- de leur hauteur
- du niveau max visible

[Graffito]

Bonjour,

Peut-être afficher l'une ou l'autre des info en tenant compte du ou des boutons "appuyés" sur la souris

Ou tracer sur le sommet du cube un disque dont on pourra moduler :
- le rayon,
- la couleur,
- la portion de camenbert représentant un pourcentage.

[davcha]

En fait, en modifiant le niveau sélectionné, y'a ptet moyen de déplacer toutes les cases, de façon à ce que le niveau sélectionné soit toujours "central".

Ca ferait une sorte d'ascenceur en quelques sortes.

En fait, la sélection des cases se fait via une fonction javascript qui prend en entrée la position de la souris dans le contrôle général.
Genre ceci :

<carte3D>
<case index="0" x="0" y="0"/>
<case index="1" x="1" y="0"/>
<case index="2" x="0" y="1"/>
<case index="3" x="1" y="1"/>
</carte3D>

La fonction javascript en question s'applique sur carte3D, et à partir de la position de la souris dans carte3D, je récupère l'index de la case sur laquelle la souris se trouve.

Résultat, j'ai une contrainte quant à la sélection, pour que ça fonctionne, les cases doivent avoir une certaine position sur la carte3D.
Ca ne pose pas trop de contraintes sur la structure de la carte en elle-même, on peut faire ce qu'on veut à ce niveau là, mais concernant l'affichage de la carte, la case 18 doit toujours être au même endroit, par exemple. (En fait, c'est faux, la position de la case 18 dépend de la taille de la fenêtre d'affichage de la carte3D, mais bon, là j'entre dans des détails pas intéressants).

Ce qui est à retenir est que je suis limité en ce qui concerne la sélection des cases : elle doit se faire toujours au même endroit. Résultat, si j'affiche plusieurs niveaux de cases, au dessus ou en dessous, si je veux faire des sélections dessus, il faudra, obligatoirement que ces cases soient disposées au "centre vertical" de la carte.

Peut-être afficher l'une ou l'autre des info en tenant compte du ou des boutons "appuyés" sur la souris.

S'il y a 12 niveaux, je fais comment ? Y'a pas assez de boutons sur la souris

Là je me demande s'il n'est pas possible de sélectionner le niveau actif avec la molette de la souris, en fait.
genre :
Un coup de molette vers le haut => niveauActif++;
Un coup de molette vers le bas => niveauActif--;

C'est faisable en javascript ça ?...

[Graffito]

J'avais pas pensé à la molette.
Si c'est possible (je suis pas compétent en Java script),c'est une bonne idée, mais alors elle n'est plus utilisable pour se déplacer dans la page HTML.

[davcha]

De toute façon, afficher une interface de jeu qui déborde de l'écran, c'est moyen pas top, alors...

[mathieu_t]

ça serait pas une adaptation de la vallée des mamouths ton jeu ?? (c'est un jeu de plateau)

[davcha]

Je connais pas la vallée des mammouths.

Pour le moment y'a pas vraiment de jeu derrière, y'a un projet bien lointain, qui serait grosso modo une adaptation de master of magic.
Sinon, le code est assez souple pour pouvoir s'appliquer dans beaucoup de jeux différents.