Création de 3D isométrique ?

Version imprimable

12/07/2009, 20h19
MaXOhBalle

Création de 3D isométrique ?

Bonjour, c'est mon premier message, je tiens à dire que ce site est très bien construit et que vous paraissez être des développeurs très sympathique ^^.

En fait, je suis actuellement sur un projet de développement d'un jeu vidéo pour le web (browser game) et je bloque sur quelque chose.

Au niveau graphisme je veux faire un truc simple, des carrés en 3D isométrique pour faire une espèce de "map" et dans chaque carré une image chargée dynamiquement sur laquelle on peut cliquer et pouf on va sur une page (une région dans le jeu, un batiment, etc.).

Ben je ne sais pas du tout comment faire ça... Je suis développeur Flash et il aurait été facile de le faire en ActionScript mais ce n'est pas assez portable à mon gout.

Donc j'ai réfléchi et cherché... Je suis tombé sur <MAP> en HTML qui partitionne une image en plusieurs zones cliquables, ce qui permettrait de pouvoir cliqué sur les différents "carrés" isométriques; le problème c'est que <MAP> fonctionne pour une image, mais s'il n'y a qu'une image chargée et partitionnable je peux pas la dynamiser et la changer à l'intérieur (différents batiments sur les différents carrés) selon le joueur (ou du moins je m'y connais pas du tout dans la reconstruction d'image).

Pour un exemple concret, je chercherais un truc aussi simple que sur Travian (un browser game assez connu), il y a une map avec les différentes cités et la sienne au centre, on clique et on peut voir les stats des cités alentours. Au niveau du code source on remarque qu'il y a du Javascript et <MAP>, mais après comment ils ont fait pour organisés tout ça aussi bien, je trouve pas !

J'ai cherché partout sur le web pendant plus de 3h et personne en parle (ou je l'ai pas vu), c'est assez bizarre... Quelqu'un pourrait-il m'aider svp ?

Si mes explications sont peu claire n'hésitez pas à me le dire, je reformulerai.

Merci pour tout d'avance ;)

PS: Je sais pas si j'ai posté dans la bonne section, j'espère que si :)
13/07/2009, 13h34
Macmillenium

Bonjour,

Citation:

Envoyé par MaXOhBalle

Je suis développeur Flash et il aurait été facile de le faire en ActionScript

Je confirme :)
Sinon il faut passer par JS, vaut mieux le faire en Flash si tu possèdes les compétences nécessaires.
13/07/2009, 13h35
FoxLeRenard

Bonjour,
Ta description est simple et claire,
Difficile d'y répondre sans au moins une maquette quelque part sur ton site.

Mais en attendant quelques pistes:

tu peux avoir autant de MAP que tu veux,
d'autre part la description du découpage des images peut étre
des cercles polygones etc ...
ton image peut trés bien étre découpée, et chaque image découpée avoir son MAP

donc tu vois c'est assez souple :roll:

Par contre atteindre réellement ce que tu décris, comme le dit Macmillenium c'est impossible en HTML pur !
13/07/2009, 14h30
MaXOhBalle

Le problème avec Flash c'est que c'est peu portable et je voulais vraiment pas l'utiliser sur mon site pour diverses raisons...

Pour <map>, alors c'est possible de par exemple découper une image (quadrillage) en un map et superposer plusieurs images sur ce quadrillage (évidemment je me chargerais du dynamisme côté serveur avec PHP) ? Simplement, peut-on charger une image dans une zone cliquable de map définie ? En HTML ou en Javascript peu importe, enfin quel est le plus simple ?

Merci encore pour tout ;)

Citation:

Envoyé par MaXOhBalle

Pour <map>, alors c'est possible de par exemple découper une image (quadrillage) en un map et superposer plusieurs images sur ce quadrillage (évidemment je me chargerais du dynamisme côté serveur avec PHP) ? Simplement, peut-on charger une image dans une zone cliquable de map définie ? En HTML ou en Javascript peu importe, enfin quel est le plus simple ?
Merci encore pour tout ;)

Voici un exemple de MAP il faut que tu comprenne
il sagit du MAP d'une image OU d' un morceau d'Image si je l'ais rééllement découpée en X sous images.
Donc j'en ais plusieurs côte a côte, qui forment UNE image.

Deuxiéme souplesse, dans mes zones de MAP des rectangles (ou autre forme)
peuvent aller au même lien.
Code:

1 2 3 4 5 6 7 8 9 10 <br /> <MAP name=FPMap0> <AREA shape=RECT coords=27,38,134,127 href="le1.php" > <AREA shape=RECT coords=198,57,260,144 href="le2.php" > <AREA shape=RECT coords=328,57,391,157 href="le2.php" > <AREA shape=RECT coords=492,57,599,166 href="le3.php" > </MAP> <IMG src="divers07/eps.jpg" useMap=#FPMap0 border=0> <br />

Citation:
Envoyé par FoxLeRenard
Voici un exemple de MAP il faut que tu comprenne
il sagit du MAP d'une image OU d' un morceau d'Image si je l'ais rééllement découpée en X sous images.
Donc j'en ais plusieurs côte a côte, qui forment UNE image.

Deuxiéme souplesse, dans mes zones de MAP des rectangles (ou autre forme)
peuvent aller au même lien.
Code:

1 2 3 4 5 6 7 8 9 10 <br /> <MAP name=FPMap0> <AREA shape=RECT coords=27,38,134,127 href="le1.php" > <AREA shape=RECT coords=198,57,260,144 href="le2.php" > <AREA shape=RECT coords=328,57,391,157 href="le2.php" > <AREA shape=RECT coords=492,57,599,166 href="le3.php" > </MAP> <IMG src="divers07/eps.jpg" useMap=#FPMap0 border=0> <br />
Oui mais en gros <MAP> peut pas être utilisé pour charger une image (x.jpg par exemple) sur une autre image (y.jpg) dans une zone cliquable définie ? C'est ça que je cherche à faire; pour que dans une image de quadrillage d'autres images aparaissent; il ne me servirait à rien de partitionner en zones un quadrillage vide !

Merci pour vos réponses passées et futures ;)

14/07/2009, 18h08
FoxLeRenard

Citation:

Envoyé par MaXOhBalle

Merci pour vos réponses passées et futures ;)

Il t'a été répété qu'en html c' est NON
en javascript bien sur c'est oui ! Mais pour les visiteurs qui acceptent jaavscript ... 8O
14/07/2009, 20h59
MaXOhBalle

Bien bien bien, je vais poster sur le forum JavaScript alors; merci pour tout ;)
08/08/2009, 15h33
MaXOhBalle

Pour ceux qui ont besoin de construire une map isométrique du même ordre...

J'ai une réponse tardive mais je n'ai pas eu le temps de la poster avant que mon idée soit à 100% fonctionnelle ! Pas besoin de JavaScript, il suffit de gérer les tiles et les diffèrentes profondeur grâce à des <DIV> et des Z-INDEX bien placés le tout générer via un code PHP qui se charge du dynamisme des diffèrentes tiles.

Et le résultat marche nickel, le seul soucis est la compatibilité (avec IE ça bug quand c'est une ancienne version, je ne sais plus exactement laquelle), mais bon en général ça fonctionne très bien avec tout les navigateurs récents !

La mise en place de ce système est cependantes très longue à coder, mais bon, le résultat en vaut la peine :)