[étape 1] RPG tactique isométrique -> création de la map

[SquallMazento]

Bonjour,

j'ai un petit problèmes au niveau du positionnement d'image et de texte dans les cases.
Vous pouvez voir ici ce que ça me donne.
Voici aussi mon code :

Code PHP :

<?php



echo'<h1>Map isométrique</h1>';



echo'<div id="carte">';



//On définit le nombre de lignes et de colonnes.

$nbColonnes = 5;

$nbLignes = 5;



//On définit l'image qui s'affichera comme fond dans la case.

$img_fond_carte = 'herbe_iso';



// On définit les variables pour les boucles.

$compteurX = 0;

$compteurY = 0;



//On boucle pour afficher la carte.

while($compteurY < $nbColonnes) //Cette boucle représente les colonnes.

{

    while($compteurX < $nbLignes) //Celle-ci les lignes.

    {

        $decalage = ($nbLignes - 1) * 42; //Pour éviter d'avoir des margin-left négatifs.

        $posX = $decalage + (($compteurY - $compteurX) * 42);

        $posY = ($compteurY + $compteurX) / 2 * 42;

            

        echo'<div title="'.$compteurX.';'.$compteurY.'" style="width:85px; height:42px; 

position:absolute; margin-top:'.$posY.'px; margin-left:'.$posX.'px; background-image:url(\''.$img_fond_carte.'.png\'); float:left;">';

        echo $compteurX.';'.$compteurY;

        echo'</div>';

        

        $compteurX++;

    }

    

    $compteurY++;

    $compteurX = 0; //Nouvelle colonne,  on revient donc au début (ici 0).

}



echo'</div>';



?>

[Lord-Gargoyle]

Hello,

A mon avis tu as des problèmes de transparence, essaye avec cette tuile :

Pour le reste j'essaye ce soir et je te dis ça

[SquallMazento]

Salut,

merci pour ton aide.
Mais je ne comprends ce que la transparence a à voir là-dedans ?

Merci d'avance,
à bientôt. ^^

[Lord-Gargoyle]

Hello,

Et bien, en fait pour construire ta map, tu superposes plusieurs tuiles, ce ne sont pas des losanges qui s'imbriquent, mais des rectangles qui se superposent. Dans ton cas, les coins ne sont pas transparents, donc quand tu les superposent, tu as le coin non transparent de ta tuile qui va masquer celle que tu as affiché précedemment...
Sans transparence ça pourrait marcher, mais faudrait commencer par empiler les tuiles du bas et pas commencer par le haut comme tu le fais. (au lieu de faire une boucle de o à n, faire l'inverse...)
Sinon j'ai rajouté dans ton code

text-align=center; padding: 10px
(echo'<div title="'.$compteurX.';'.$compteurY.'" style="width:85px; height:42px; position:absolute; margin-top:'.$posY.'px; margin-left:'.$posX.'px; background-image:url(\''.$img_fond_carte.'.gif\'); float:left; text-align=center; padding: 10px">'

et ça marche Map ici

[SquallMazento]

Salut,

effectivement, c'est mieux, merci.
Par contre, j'ai du rajouter un "background-repeat:no-repeat;", sinon je vois des moitiés de tuile... et un simple "padding-top" à la place d'un "padding" suffit non ?

Enfin, merci. ^^
A bientôt.

Edit : j'ai essayé de placer des images, mais ça ne marche pas trop... regardez ici.
Les personnages sont en dessous des cases... Je comprends pas trop.
Quelqu'un a une idée ?
Merci d'avance.

[Lord-Gargoyle]

Humh, je suppose que tu as fait une seule (double) boucle pour les tuiles et les persos. Fait 2 boucles, d'abord les tuiles, ensuite les persos...

while($compteurY < $nbColonnes)
{while($compteurX < $nbLignes){ // Ici les images}}

while($compteurY < $nbColonnes)
{while($compteurX < $nbLignes){ // Ici les persos}}

[SquallMazento]

Effectivement, ça fonctionne comme ça (résultat ici).
Mais il n'existe pas une autre méthode ?
Parce que deux paires boucles, ça doit bien ralentir le chargement de la page...
Voici mon code, au cas où ça pourrait servir à d'autres personnes :

Code PHP :

<?php



echo'<h1>Map isométrique</h1>';



echo'<div id="carte">';



//On définit le nombre de lignes et de colonnes.

$nbColonnes = 5;

$nbLignes = 5;



//On définit les images qui s'afficheront.

$img_fond_carte = 'herbe_iso';

$img_perso = 'perso';



$decalage = ($nbLignes - 1) * 42; //Pour éviter d'avoir des margin-left négatifs.



// On définit les variables pour les boucles.

$compteurX = 0;

$compteurY = 0;





//On boucle pour afficher la carte.

while($compteurY < $nbColonnes) //Cette boucle représente les colonnes.

{

    while($compteurX < $nbLignes) //Celle-ci les lignes.

    {

        $posX = $decalage + (($compteurY - $compteurX) * 42);

        $posY = ($compteurY + $compteurX) / 2 * 42;

            

        //Affichage d'une case :

        echo'<div title="'.$compteurX.';'.$compteurY.'" style="padding-left:10px; width:85px; height:42px; position:absolute; 

margin-top:'.$posY.'px; margin-left:'.$posX.'px; background-image:url(\''.$img_fond_carte.'.gif\'); float:left; text-align:center; 

padding-bottom:10px; background-repeat:no-repeat;"></div>';

        

        //Je rajoute des valeurs pour bien centrer les personnages dans les cases.

        $posXPerso = $posX + 30;

        $posYPerso = $posY + 5;

            

        //Affichage d'un personnage :

        echo'<img src="'.$img_perso.'.png" style="position:absolute; margin-top:'.$posYPerso.'px; margin-left:'.$posXPerso.'px; 

border:none;" alt="" />';

        

        $compteurX++;

    }

    

    $compteurY++;

    $compteurX = 0; //Nouvelle colonne,  on revient donc au début (ici 0).

}



echo'</div>';



?>

[Lord-Gargoyle]

Pour vraiment rendre l'effet encore plus réel, il aurait fallu que j'ai une image des persos par angle de vue (nord,est,sud,ouest) mais là je n'avais que les vues de face :triste:

Si tu veux des persos selon toutes les directions va voir ici

Si tu as des besoins de persos particuliers, je peux chercher, je collectionne les sprites

[X-ZoD]

heureux de voir qu'il y a un suvi sur ce tuto et de l'aide venant de la part des autres membres malgre mon abscence passagere ^^ bien jouer le gars

[SquallMazento]

J'ai trouvé un méthode plus simple que de faire deux paires deux boucles, je ne sais pas pourquoi je n'y ai pas pensé avant. :heuuu:
J'ai édité mon poste précédent.