Discussion :

[MaXOhBalle]

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

[Macmillenium]

Bonjour,

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.

[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

Par contre atteindre réellement ce que tu décris, comme le dit Macmillenium c'est impossible en HTML pur !

[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

[FoxLeRenard]

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 :

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

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 />

[MaXOhBalle]

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 :

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

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

[FoxLeRenard]

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 ...

[MaXOhBalle]

Bien bien bien, je vais poster sur le forum JavaScript alors; merci pour tout

[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