JeuWeb - Crée ton jeu par navigateur
Application de la 3D isométrique sur des tuiles hexagonales - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Gameplay, gamedesign (https://jeuweb.org/forumdisplay.php?fid=48)
+--- Sujet : Application de la 3D isométrique sur des tuiles hexagonales (/showthread.php?tid=1205)

Pages : 1 2 3 4 5 6 7 8 9 10


RE: Application de la 3D isométrique sur des tuiles hexagonales - Lord-Gargoyle - 21-03-2008

Bon, ma petite contribution à ce génial tutorial Smile
[Image: demo2.png]
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 Wink

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


RE: Application de la 3D isométrique sur des tuiles hexagonales - Harparine - 22-03-2008

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. @+ Wink


RE: Application de la 3D isométrique sur des tuiles hexagonales - Lord-Gargoyle - 24-03-2008

Citation :<?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 ?


RE: Application de la 3D isométrique sur des tuiles hexagonales - SquallMazento - 24-03-2008

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.


RE: Application de la 3D isométrique sur des tuiles hexagonales - Ruz - 22-05-2008

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)

[Image: prob_hexa.png]
(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é Sad


RE: Application de la 3D isométrique sur des tuiles hexagonales - Roworll - 23-05-2008

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.


RE: Application de la 3D isométrique sur des tuiles hexagonales - keke - 23-05-2008

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


RE: Application de la 3D isométrique sur des tuiles hexagonales - Ruz - 23-05-2008

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;
?>



RE: Application de la 3D isométrique sur des tuiles hexagonales - horexas - 17-12-2008

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


RE: Application de la 3D isométrique sur des tuiles hexagonales - Sephi-Chan - 17-12-2008

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