Création d'une carte en 2D isométrique

[sharyma]

Bonjour !

Après avoir longuement farfouillé sur le forum, j'ai pu trouver de nombreux sujets qui parlaient des cartes isométriques. Problème : les sujets sont tous vieux et sont donc devenus incomplets : images qui ne s'affichent plus, nombreux liens morts, technologies dépassées, etc.

C'est ainsi que je me suis finalement décidée à créer mon propre topic, histoire de partir sur une base claire et propre.

Donc voilà, en gros je suis en train de développer un jeu de gestion, et dans ce jeu j'aimerais afficher une map en 2D isométrique. Quelques critères importants :
• la map est extensible à l'infini
• l'idéal serait que des bâtiments puissent occuper plusieurs cases, mais sinon je peux m'arranger avec une seule case, ce n'est vraiment pas grave

J'ai déjà fait une carte en 2D "normale" (vu du dessus), c'est très simple à faire, mais malheureusement je ne trouve pas ça très beau. C'est pour cela que j'aimerais passer en 2D isométrique.

A noter que j'aimerais que le code soit en PHP POO afin d'être facilement réutilisable et compréhensible. En effet, j'ai déjà testé des logiciels comme Tiled, le soucis c'est que c'est en C++ (langage que je ne connais pas du tout) et que je n'ai pas l'impression qu'on puisse avoir de map à taille infinie. Et puis ça m'a l'air plutôt lourd.

En fait je suis simplement à la recherche d'un script (d'un script ou d'un moteur ou d'un algo ou d'une aide pouvant m'éclairer sur les étapes ou...) me permettant la création de la map de base : juste les cases en losange, je m'occuperai de l'affichage de mes images dessus en javascript par la suite.

Autre information importante : je suis sous mac, donc il y a beaucoup d'éditeurs que je ne peux utiliser car ils ne fonctionnent que sous windows.

Si quelqu'un avait quelques pistes pour moi, je lui en serai vraiment très reconnaissant ! J'ai passé des dizaines d'heures à explorer Google et divers sites & forums, à tester des scripts et des moteurs, j'en ai même rêvé cette nuit --"
Et puis il faut avouer que pendant ce temps, mon site n'avance pas, c'est un peu dommage.


Pour ceux qui connaissent, j'aimerais exactement le même style de map que celle utilisée par Rue Du Fric :

[Viciousity]

Bon pour les éditeurs, Mac = Textmate, c'est vraiment un Must Have pour développer je trouve

[sharyma]

Ah mais je ne parlais pas d'éditeur de code, je parlais d'éditeur de map
Personnellement je développe avec Netbeans et Textmate en effet, ils sont très complémentaires (même si j'ai une préférence pour Netbeans, plus complet à mon goût).

[Thêta Tau Tau]

Une map en iso c'est la même chose qu'en vu du dessus à peu de choses près, nan?
Je vois juste un petit calcul mathématique pas méchant pour le positionnement des cases à l'écran (je crois qu'il est sur le fofo d'ailleurs) et la gestion des chevauchements d'images en plus de ce qu'il faut pour la vue du dessus.

[Ter Rowan]

J'ai déjà fait une carte en 2D "normale" (vu du dessus), c'est très simple à faire, mais malheureusement je ne trouve pas ça très beau. C'est pour cela que j'aimerais passer en 2D isométrique.

Salut

si tu sais déjà faire l'ensemble de tes exigences en 2D "normale" alors tu n'as aucune technique particulière à découvrir concernant la 2D iso

tu as juste à réaliser une rotation de 45° entre ton tableau x y côté php et l'affichage côté javascript

les formules seront toujours les mêmes, les anciens topics y répondent bien dans mon souvenir

(y a une histoire de x =( x+y ) / 2 ou inversement

[sharyma]

Une map en iso c'est la même chose qu'en vu du dessus à peu de choses près, nan?
Je vois juste un petit calcul mathématique pas méchant pour le positionnement des cases à l'écran (je crois qu'il est sur le fofo d'ailleurs) et la gestion des chevauchements d'images en plus de ce qu'il faut pour la vue du dessus.

J'oubliais de préciser mais... je suis une vraie quiche en maths : même 1+1 c'est compliqué pour moi !
Pour la gestion des chevauchements d'images, je suppose qu'avec des z-index et des images transparentes ça doit passer tout seul (en tout cas c'est comme ça que je fais sur ma carte 2D normale, et ça marche très bien).

Salut

si tu sais déjà faire l'ensemble de tes exigences en 2D "normale" alors tu n'as aucune technique particulière à découvrir concernant la 2D iso

tu as juste à réaliser une rotation de 45° entre ton tableau x y côté php et l'affichage côté javascript

les formules seront toujours les mêmes, les anciens topics y répondent bien dans mon souvenir

(y a une histoire de x =( x+y ) / 2 ou inversement

En fait je ne vois vraiment pas comment faire pour faire une rotation de mon tableau php...
J'ai essayé en css, mais ça fait une rotation à tous les éléments (et donc mes images affichées en js tournent aussi), donc je me dis qu'il faudrait mieux que je fasse ça soit en js soit en php directement. Sauf que je ne maitrise pas trop le js et que je ne vois pas du tout où le faire en php...


En fait voilà grosso modo mon algo :

• Requête php pour récupérer les informations des cases qui seront affichées à l'écran
• Je mets le tout dans un tableau
• Imbrication de deux boucles for, d'abord celle des ordonnées et ensuite celle des abscisses
• A l'intérieur de la deuxième boucle, je créé mes cases grâce à des div en position absolute, en déterminant leur positionnement grâce à "top" et "left"
• j'affiche l'image qu'il faut dans la div grâce aux informations contenues dans mon tableau

Donc où est-ce que je peux caser la fameuse formule de rotation ? :/
Je vais continuer de chercher sur le forum, maintenant que je sais un peu mieux ce dont j'ai besoin, je devrais trouver plus facilement !

Merci pour vos pistes en tout cas ^^




_______________________
EDIT : j'ai retrouvé le code dont tu parlais ^^
Mais... je ne sais vraiment pas ce qu'il faut que j'en fasse...

Code :

$cote = 50;
$demi = 25;
if($X%1==0)
$x=floor($X/$cote);
else
$x=floor(($X-$demi)/$cote);

$y=floor($Y/$demi);

[popayan]

Ce sont tes images (tes fichiers jpg, png ou ce que tu veux) qui doivent être pivotées (le plus simple est de faire une rotation de 45° puis une division par 2 de sa hauteur).
Ensuite, dans ta double-boucle imbriquée, tu dois recalculer leur position x et y (je te laisse chercher les formules de trigo pour faire cela ^^)

[Asphodèles]

Ce sont tes images (tes fichiers jpg, png ou ce que tu veux) qui doivent être pivotées (le plus simple est de faire une rotation de 45° puis une division par 2 de sa hauteur).
Ensuite, dans ta double-boucle imbriquée, tu dois recalculer leur position x et y (je te laisse chercher les formules de trigo pour faire cela ^^)

Y'a pas que la trigo. Selon la façon dont tu places tes axes et ton 0,0 tu peux aussi te baser sur des vecteurs genre nextCol, nextRow. Tu peux aussi avoir des axes qui sont vraiment verticaux/horizontaux et gérer un décalage d'une colonne/rangée à l'autre (comme pour de l'hexagonal, par ex).
Dans tous les cas, tu dois trouver plein d'exemples partout.

[sharyma]

Popayan : mais si je me contente de tourner mes images, j'aurai toujours une map en 2D normale, ce n'est pas ce que je veux.. Ou alors je n'ai pas compris ?
Quant à la trigonométrie, ahah, j'espère trouver un code bien commenté parce que vu mon niveau en maths...

Asphodèles : idem, les vecteurs c'est du chinois pour moi... Mais si j'ai bien compris ce que tu voulais dire, c'est ce que j'ai fais sauf que ça fait moche s'il y a des terrains vides :/

Je vais continuer de chercher, j'ai également trouvé un script sur ce forum (en javascript), je vais essayer de le reprendre pour l'adapter à ce que je veux faire... j'espère que même si je n'y arrive pas, je comprendrais un peu mieux le mécanisme de la 2D iso ^^

[popayan]

tuto sur le wiki du site http://wiki.jeuweb.org/tutoprog/3d_iso_e...exagonales
Ca parle aussi de tuiles carrées