JeuWeb - Crée ton jeu par navigateur
Carte hexagonal - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Carte hexagonal (/showthread.php?tid=1199)



Carte hexagonal - OncleJames - 20-05-2007

Voila le code pour générer une carte isométrique hexagonal.

Tout d'abord un petit apercu Apercu carte hexa

Prérequis :

  1. Table mysql

    Table carte :

    Elle contient les x et y, ainsi que le terrain correspond a la case

    Code PHP :
    <?php 
    CREATE TABLE
    `carte` (
    `
    idcarte` int(10) unsigned NOT NULL auto_increment,
    `
    x` int(10) unsigned default NULL,
    `
    y` int(10) unsigned default NULL,
    `
    idterrain` int(10) unsigned NOT NULL default '0',
    `
    vision` int(10) unsigned default '5',
    PRIMARY KEY (`idcarte`),
    KEY `carte_FKIndex1` (`idcentrale`),
    KEY `carte_FKIndex2` (`idpc`),
    KEY `carte_FKIndex3` (`idterrain`)
    )
    ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1551 ;

    Table perso :

    Code PHP :
    <?php 
    CREATE TABLE
    `perso_info` (
    `
    idperso` int(10) unsigned NOT NULL auto_increment,
    `
    x` int(10) unsigned default '5000',
    `
    y` int(10) unsigned default '5000',
    PRIMARY KEY (`idperso`)
    )
    ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

    Elle est basique pour contenir juste les coordonées X et Y des perso



  2. Script php


    Le script va générer la carte, il est tout de meme necessaire d'avoir les images des terrains.

    Code PHP :
    <?php

    $sql
    = query("SELECT * FROM perso WHERE idperso='$idperso'");
    $perso = mysql_fetch_assoc($sql);
    $sql = query("SELECT * FROM carte WHERE x='".$perso['x']."' AND y='".$perso['y']."'");
    $terrain = mysql_fetch_assoc($sql);

    // On définit le tableau en fonction de la vision
    $x_min = $perso['x']-$perso['vision'];
    $x_max = $perso['x']+$perso['vision'];
    $y_min = $perso['y']-$perso['vision'];
    $y_max= $perso['y']+$perso['vision'];

    // On récup les données
    $result = query("SELECT * FROM perso WHERE x BETWEEN '$x_min' AND '$x_max' AND y BETWEEN '$y_min' AND '$y_max'") or die(mysql_error());

    // On va stocké les info de chaque joueur dans un array
    while ( $data = mysql_fetch_assoc($result)) {
    $joueur[$data['x']][$data['y']] = array('x'=>$data['x'],'y'=>$data['y'],'idperso'=>$data['idperso']);
    }

    $query = query("SELECT * FROM carte WHERE x BETWEEN '$x_min' AND '$x_max' AND y BETWEEN '$y_min' AND '$y_max' ORDER BY y,x");

    $width=80; // Largeur de l'image des terrains qui permettra de décaler les images
    $curent_y = -5000;

    if (
    $y_min%2 == 0) { $y = 0; } // Petit calcul pour ne pas déformer la map selon le y de base/référence lors de la génération
    else { $y = 1; }

    // On génére la map
    while($carte = mysql_fetch_assoc($query)) {

    if (
    $curent_y!=$carte['y']) { // Nouvelle ligne
    $x=0;
    $y++;
    $curent_y = $carte['y'];
    }

    // X et Y sur lesquelles on travaille
    $x_pos = $carte['x'];
    $y_pos = $carte['y'];
    $x++;

    // Calcul pour savoir si on décale ou pas les cases d'une ligne
    if ( ($y%2) == 1) { // Pair
    $iX=($x*80)-40;
    }
    else {
    $iX= ($x*80) + (($width/2))-40; }

    $iY = ($y*60 )-80;

    $var_carte .= '<div class="case" style="top:'.$iY.'px;left:'.$iX.'px;';
    $var_carte .= 'background-image: url(\'images/'.$carte['idterrain'].'_iso.png\');">';

    // <!-- POUR LE DEBUGGAGE AFFICHAGE DES x/y DANS LES CASES
    //$var_carte .= "<br />$x_pos/$y_pos";
    // FIN DEBUGGAGE -->

    if ( isset($joueur[$x_pos][$y_pos])) { // la prescence d'un joueur est détecté sur cette case

    // Affichage des informations du joueur dans la case

    }


    $var_carte .= '</div>';



    }
    // fin While

    echo $var_carte;

    ?>


    Il sera bien sur adapté pour chaque utilisation, mais le travail n'est pas encore finit.

    Pour le moment la carte s'affiche bien, mais elle est en haut de votre écran et ne bouge plus .. raa po cool ca :glace:

    Il faut bien comprendre maintenant ce qui suit, sa vous permettra de positionner le contenu ( images, texte,.. et meme carte ) ou vous le souhaitez.

    En CSS la position absolute prend pour repere ( 0;0 ) le haut de votre page

    [Image: reperepagelv2.jpg]

    Notr but va être de fixé le repère que nous souhaitons, à l'endroit qui nous interesse, pour cela on va utiliser ... le .. CSS :respect:

    On va créer une balise div : <div id="carte"> qui encercle le script de la carte.

    Code PHP :
    <?php 
    <div id="carte">

    <!--
    On génére la carte hexa -->

    </
    div>


    [Image: reperedivaa0.jpg]



  3. Passons au CSS


pour les cases de la carte on va les positionné en absolute.
width et height sont respectivement la largeur et la hauteur de vos images terrains.

Code PHP :
<?php 
.case{
position:absolute;
width: 80px;
height: 100px;
text-align: center;
background-position: bottom;
background-repeat: no-repeat;
margin-left:0px;
margin-top:0px;
}

}

Pour le div carte on va mettre comme position relative, sa indique qu'il sera la réference en x;y de touts objets absolute qu'il contient.

Code PHP :
<?php 
div
#carte {
position:relative;
padding-bottom:40em;

Eu .. padding-bottom:40em; c'est quoi ce code pas beau.

En faite il va imposer une taille minimum a votre div carte qui par exemple sur mon jeu à un fond rouge.




Vilou vous avez maintenant tout le code en main (h), bonne chance


OncleJames


RE: Carte hexagonal - orditeck - 21-05-2007

L'aide pour ce tutoriel ce trouve à cette adresse :
http://www.jeuweb.org/board/showthread.php?tid=1703