Application de la 3D isométrique sur des tuiles hexagonales

[Lord-Gargoyle]

Bon, ma petite contribution à ce génial tutorial

Ce qui nous intéresse c'est le décalage AB.

On a AD = sin(75)
et BC = CD = sin(15)

Donc AB = AD - BC - CD = sin(75) - 2 * sin(15).

On divise tout par deux pour passer en perspective.
Donc décalage = sin(75)/2 - sin(15).

Pas besoin d'outils, juste d'une bonne figure. Ici c'était mieux de raisonner sur 2 hexagones et de modéliser le centre

(Ah oui, mon hexagone est de coté 1. Il faut multiplier par n bien sûr)
Ou encore plus simple je viens de le voir AB = AC - BC = sin(45) - sin(15). Donc décalage = (sin(45)-sin(15))/2 ce qui donne la même valeur...

[Harparine]

Merci beaucoup d'avoir amélioré le truc ! Je modifierai mon tuto sur le wiki en fonction de tes remarques quand j'aurai un moment. @+

[Lord-Gargoyle]

<?php
//Infos sur la carte
// Tuiles 3D
$n = 50.5;
$nbLignes = 5;
$nbColonnes = 5;

//On boucle pour afficher la carte
for ($i=0; $i<$nbLignes; $i++) {
for ($j=0; $j<$nbColonnes; $j++) {
$posX = $j*(sin(deg2rad(75))+sin(deg2rad(45)))*$n - ($i+ceil($j/2))*(sin(deg2rad(15)) + sin(deg2rad(75)))*$n + ($nbLignes-1)*(sin(deg2rad(15))+sin(deg2rad(75)))*$n;
$posY = ($i+ceil($j/2))*(sin(deg2rad(75))+sin(deg2rad(15)))*$n/2 + $j*sin(deg2rad(13.5))*$n;

//Tuiles 3D
$var_carte = '<div class="case3D" style="top:'.$posY.'px;left:'.$posX.'px;background-image: url(tuile3D.png);z-index:'.$j.';"></div>';
echo $var_carte;
}
}
?>

J'ai essayé ça texto, ça ne marche pas, en rajoutant un margin, padding je vois apparaitre des moitiés de tuiles ... et les unes en dessous des autres (je vais essayer en rajoutant absolute...). case3D est défini dans le .css ? et comment trouver la bonne valeur pour les marges ?

[SquallMazento]

Bonjour,

en rajoutant "position:absolute" les cases ne devraient plus se mettre les unes en dessous des autres.
Rajoute aussi "background-repeat:no-repeat" au style des cases, et il ne devrait plus y avoir de moitié de tuile.

En espérant avoir pu t'aider,
A bientôt.

[Ruz]

Superbe tuto!
J'avais codé un truc du genre, pas isométrique, pour mon jeu. Avec limitation par la vue (brouillard extérieur) à une époque... abandonné car la carte se modifie au déplacement.

Et je retrouve le meme truc ici... deux images valant mieux qu'un long discour: (mes tuiles sont dégueux, je sais)


(la croix représente la position sur la seconde image)
bref: la position relative des tuiles se fait par rapport au perso (au centre),
hors, pour être correcte, la carte doit tjs etre la meme...
Donc, il faut inclure un modulo quelque part, et rajouter le décalage en fonction du modulo, non?

Enfin, j'imagine le genre de truc à faire, mais impossible de trouver où le mettre...
Si y a une ame charitable qui passe ... Grand merci à lui ^^

EDIT: bon, ca concerne surtout le déplacement du personnage... peut-etre abordé dans un autre tuto, mais je n'ai rien trouvé

[Roworll]

Tant qu'on est dans les questions liées à ce tuto, j'en ai une moi aussi.

Les math étant loin d'être mon fort, j'avais cependant réussi à faire par le passé un truc bancale permettant, via la position X/Y de la souris de repérer l'hexagone placé dessous grâce à quelques formules mathématiques.
Voici le lien vers mon ancienne version de travail (FF / IE7 requis).

Existe-t-il dans l'assistance un esprit assez brillant pour refaire/adapter cet algorithme en utilisant la représentation isométrique ?
Je dois avouer que mes dernières tentatives m'ont amené plus de frustration que de satisfaction.

[keke]

Passer de la carte vue du dessus à une map isométrique peut se faire en multipliant 1/2 la hauteur et en effectuant une rotation de - 45° (ou - Pi/4 en radian)

Avec ça tu devrais pouvoir trouver ton bonheur ...

Bon, je veux bien t'aider plus :

On divise par 2 selon Y. donc :
X1 = x
Y1 = (1/2) * y

Puis on effectue une rotation de 45° :
X2 = sqrt(2,2)/2 * ( X1 + Y1)
Y2 = sqrt(2,2)/2 * ( - X1 + Y1)

Si moi pas me tromper, ta formule doit être de la forme finale :

X = sqrt(2,2)/2 * ( x + y)
Y = sqrt(2,2)/4 * ( - x + y)

Mais il faudrait que je m'adapte à ton cas. Dans mon exemple, je prends comme repère le point en bas à gauche ... Ce qui n'est peut-être pas ton cas.

Kéké.

[Ruz]

Eureka!!!
J'ai trouvé, à force de comparer mes images...

Alors, première étape: savoir si le perso est sur une case paire ou impaire (axe X):
$mod=$perso['x']%2; (pair=0 / impair=1)

dans la boucle d'affichage:
Si impaire, modification de position des tuiles
if($mod)
{
if($j%2==1){$i-=1;}
$i+=1;
}
en traduit:
SI le perso est sur un X impair
{
SI X de la case en cours est impaire => l'indice Y est diminué (la case "remonte" d'un cran
[si je me limite à ca, la position du perso n'est pas centré au meme endroit à chaque déplacement... il faut donc corriger toute la position Y de la carte] => Y +1
}

Notez que je manipule i et j au lieu de x et y, simplement pour éviter un positionnement posX= 2500px, posY=3521px

enfin, bref, mon code, si ca peut aider quelqu'un:

Code PHP :

<?php 

//Infos sur la carte

$n = 28; //taille d'un coté en pas iso



require('config.php');

//position du perso

$perso=array("x"=> 150, "y"=>90,"vision"=>5); //ca, c debuggage

if(isset($_GET["x"])){$perso["x"]=htmlentities($_GET["x"]);}

if(isset($_GET["y"])){$perso["y"]=htmlentities($_GET["y"]);}

// 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'];

$nbLignes=$y_max-$y_min;

$mod=$perso['x']%2;



//récupération des données du terrain

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

//echo '<p>'.$req.'</p>';

$query = mysql_query($req,$base_id) or die('erreur : '.mysql_error());

while($d=mysql_fetch_assoc($query))

{

        //correction position en pixel à l'affichage

    $j=$d["x"]-$x_min;

    $i=$d["y"]-$y_min;

    //alignement correct de la case

    if($mod)

    {

        if($j%2==1){$i-=1;}

        $i+=1;

    }

    

    

        $posX = $j*(sin(deg2rad(75))

        + sin(deg2rad(45)))*$n 

        - ($i+ceil($j/2))*(sin(deg2rad(15)) 

        + sin(deg2rad(75)))*$n 

        + ($nbLignes-1)*(sin(deg2rad(15))

        + sin(deg2rad(75)))*$n;

                

        $posY = ($i+ceil($j/2))*(sin(deg2rad(75))

        + sin(deg2rad(15)))*$n/2

        + $j*sin(deg2rad(13.5))*$n;

                

        

        // affichage de la case

        $var_carte .= '<div class="case" style="top:'.$posY.'px;left:'.$posX.'px;';

        if($d["x"]==$perso["x"] && $d["y"]==$perso["y"])

        {

            $var_carte .=  'background-image: url(\'images/tile_hexa_iso_0.png\');"></div>';

        }

        else

        {

            $var_carte .=  'background-image: url(\'images/tile_hexa_iso_'.$d["id_terrain"].'.png\');">'.$d["x"].'/'.$d["y"].'</div>';

        }

        

}

echo $var_carte;

?>

[horexas]

Comment apllique t'on la 3d isometrique sur des cases carrées.

[Sephi-Chan]

En consultant le Wiki…

Application de la 3D isométrique sur des tuiles hexagonales. Il est indiqué qu'il suffit de faire pivoter le carré de 45° puis de diviser sa taille par 2.


Sephi-Chan