Créer une carte Wargame

[Taramis]

Bonjour à tous,

J'ai déjà réalisé un jeu mais jamais une carte dynamique si ce n'est que des emplacements prédéfinis sans coordonnées pouvant se faisant par lien simple.

Pour la réalisation de la carte pour mon futur wargame je vais devoir utiliser les coordonnées _x et _y, seulement j'aimerais savoir si il existe un tuto là dessus (j'ai cherché mais rien trouvé) ou si vous avez un lien c'est encore mieux.

En gros je me demande comment faire pour afficher des cases, ensuite afficher un (ou plusieurs) perso ou bâtiments (ou autres) sur ces cases (au niveau stockage SQL pas besoin de cours) et la gestion de déplacements, tout ça en php vous avez des idées ?

Une carte équivaut à une Ville dans le jeu.

Merci =)

Taramis.

---

Un peu comme ça
http://www.mmo-virtuel.com/public/Royaum.../explo.jpg

[Aleskweb]

Bonjour,

Donc, pour la carte il y a un tuto sur le wiki très intéressant:
http://wiki.jeuweb.org/tutoprog/carte_hexagonale

Les cases sont hexagonales, mais il est très facile de modifier pour des cases en carré. Je ne te conseille pas de copier coller le code ( ou alors essaye au moins de le comprendre ) Car un morceau de code que l'on ne comprend pas devient trés dur a modifier.

Ici, l'affichage des décors ne sont pas expliqués, mais le concept est très simple. Sensiblement identique a l'affichage des personnages :

Code PHP :

<?php 

if ($carte['nom']!= '') // On voit si il existe un décors sur la case

{

$tailles=explode("/",$carte['taille']); // ici un explode de la taille du decor.

$hauteur = $iY - $tailles[1]; //  On soustrait a l'affichage de la case la hauteur

$largeur = $iX - $tailles[0]/2; // Puis la moitié de la largeur

$aj .= '<div class="aj" style="top:'.$hauteur.'px;left:'.$largeur.'px;"> <img src="img/'.$carte['nom'].'.png" /> </div>'; // On définit l'image

        echo $carte['ajout'];// On affiche

} 

[My Hotel]

Une petite précision, tu envisage la mise en place d'un brouillard de guerre (à la AoE) ou non?

[Taramis]

@Aleskweb -> Merci beaucoup cela va bien m'aider, je vous fais savoir pour vous annoncer l'avancement ou énoncer les éventuels problèmes. ^^
Je vais me présenter ainsi que mes projets

@My Hotel -> Est-ce important de le savoir dès le départ ? En fait la vision sera déterminée par certaines caractéristiques, plus celles-ci seront élevées plus il aura un champ de vision développé.

[Argorate]

Il y a plusieurs manière bien évidemment, mais une des plus simple je trouve est encore un while imbriqué qui crée dynamiquement un <table> et les <tr> <td> qui te ferons tes cases.

un while pour les y (les ligne <tr>)et à l'interieur le while des x (les cases dans une ligne <td>)

ensuite, pour les perso il te faut un table où tu stock les x, y pour les récupérer et pouvoir les afficher lors de la création du plateau de jeu...

Je sais pas trop si ça t'aideras? ^^

[php_addict]

Il y a plusieurs manière bien évidemment, mais une des plus simple je trouve est encore un while imbriqué qui crée dynamiquement un <table> et les <tr> <td> qui te ferons tes cases.

ah bon? iffle: et le CSS ?

[Argorate]

Comme j'ai dit il y a plusieurs méthodes.
Pour des map carré je trouve beaucoup plus confortable de faire des cases avec un <table> que de se faire chi.. avec les coordonnées en css.

Maintenant il fait comme il veux, s'il veux un truc compliqué qui fasse exactement le même rendu, c'est lui qui voit

[php_addict]

oui sauf qu'avec des <table> tu est bien obligé d'appliquer un style css (bordure, alignement, etc...) donc autant utiliser le CSS...

[Sephi-Chan]

Pour ma part, je trouve que la technique des boucles dans les boucles est… dépassée. Raisonner en grille n'est pas efficace.

Le mieux, à mon sens, pour générer une carte, c'est de procéder en deux temps : le premier et le deuxième.

Dans un premier temps, on créer une structure descriptive de la carte :

<div class="map">

  <div class="tiles">

    <div class="tile-1-1" id="tile-54" />

    <div class="tile-1-2" id="tile-55" />

    <div class="tile-2-1" id="tile-56" />

    <div class="tile-2-2" id="tile-57" />

  </div>

  

  <div class="objects">

    <div class="tile-1-2" id="object-47" />

  </div>

  

  <div class="characters">

    <div class="tile-1-1" id="character-13" />

  </div>

</div>

Et dans un second temps, on génère une feuille de style à la volée afin de positionner ces blocs.

Les gros avantages de cette technique :

• Très léger d'un point de vue des requêtes SQL (et de l'accès aux données, de manière générale) : aucune imbrication. On a 3 requêtes simples ;
  
• Le code HTML est beaucoup plus léger ;
  
• Il est bien plus facile de manipuler des éléments positionnés (en absolute et relative) avec Javascript que des éléments imbriqués dans tes tableaux ;
  
• La gestion des objets qui prennent plusieurs cases devient triviale ;
  
• Une partie du code CSS peut être mise en cache : celle qui positionne les tuiles selon leurs coordonnées X-Y à l'écran (et pas leur coordonnées absolues sur la carte) ;
• On peut utiliser des sprites CSS pour n'avoir que très peu de requêtes HTTP et un fort potentiel de mise en cache, ce qui a pour résultat direct d'accélérer considérablement le chargement de la carte ;
  
• Etc.
  

Le principal défaut est que ça demande d'être rigoureux dans la maintenance des sprites (car si des éléments bougent, ça fout tout en l'air). Mais est-ce réellement un défaut ?


Sephi-Chan

[keke]

Je réagis :

Et dans un second temps, on génère une feuille de style à la volée afin de positionner ces blocs.

Peux-tu détailler ? Tu créé un nouveau fichier CSS pour ça que tu inclue ensuite ? ça marche ce genre d'opération ?

Kéké