Poster une réponse 
 
Note de cette discussion :
  • Moyenne : 5 (1 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
Application de la 3D isométrique sur des tuiles hexagonales
Auteur Message
Harparine Hors ligne
Membre

Messages : 485
Inscription : Mar 2007
Réputation : 25
Message : #81
Application de la 3D isométrique sur des tuiles hexagonales
Je suis content que ce tuto serve. Roworll, je me suis posé exactement la même question que toi mais faute de temps, je n'ai jamais trouvé la solution malgré quelques recherches infructueuses. Je crois qu'il faudrait que je consacre vraiment une après-midi au problème pour parvenir à le résoudre. N'hésitez pas à proposer la solution si vous l'avez car je ne pourrais pas faire évoluer ce tuto avant moment (ma vie professionnelle est particulièrement chargée).
Bonne soirée !

[Image: pub88x31.png] GUNoF - Générateur Universel de Noms Fantastiques
12-17-2008 09:36 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
jo_link_noir Hors ligne
Membre

Messages : 219
Inscription : Sep 2006
Réputation : 3
Message : #82
Application de la 3D isométrique sur des tuiles hexagonales (Ce message a été modifié le : 12-27-2008 04:27 AM par jo_link_noir.)
J'ai réussi \o/

D'abord, j'ai fait en sorte d'obtenir les coordonnées d'un hexagone sur une carte non isométrique. Puis ensuite, sur une carte isométrique. Le seul moyen que j'ai trouver, c'est d'effectuer une contre-isométrie au point, en gros, multiplier par 2 les y et tourner de -45°. Comme ça, on se retrouve avec une carte non isométrique dans les calculs 2

La carte isométrique
Code PHP :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <
head>
        <
title>carte hexagone</title>
        <
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <
meta lang="fr" name="description" content="trouver les coordonnées x/y avec la sourie sur une carte isométrique hexagonale" />
<
script type="text/javascript"><!--
// Variables de la gestion de l'evenement
var Mouse = {"x":0,"y":0};

// Demande de gestion de l'evenement à NetScape
if(navigator.appName.substring(0,3) == "Net") {
    
document.captureEvents(Event.MOUSEMOVE);
}

// Gestion de l'evenement
var OnMouseMoveEventHandler=function() {}
var 
OnMouseMove = function (e)
{
   
Mouse.= (navigator.appName.substring(0,3) == "Net") ? e.pageX event.x+document.body.scrollLeft;
   
Mouse.= (navigator.appName.substring(0,3) == "Net") ? e.pageY event.y+document.body.scrollTop;
   if (
Mouse.0) {Mouse.x=0;}
   if (
Mouse.0) {Mouse.y=0;}
   
OnMouseMoveEventHandler(e)
}

try {
   
document.attachEvent("onmousemove"OnMouseMovetrue);
} catch (
ex) {
   
document.addEventListener("mousemove"OnMouseMovetrue);
}

var 
moveHandler = function()
{
    
//Fonctionne pour les hexagones positionner avec des trait perpendiculaire à y
    
    //n = taille d'un segment
    //x = 148 = (n*1.5)
    //y = position y de la case 0/0 = 86.5 (sin(60) * n)
    //L = (largeurImage - tailleSegmentX) / 2 |OU| 2n-x = 50
    
var n=99x=148y=86.5L=50;
    var 
X,Y,Xd,Yd;

    
//on s'immule une contre isométrie des points
    //les 25 calcules suivant peuvent être trouver en calculant la position du curseur quand celui est au milieu de la carte
    //347 = centre de la carte en x
        /* n/2 * ( (sin(75) + sin(15)) * y +
                x * sin (45) +
                sin (75) * (floor(x/2) -1) -
                sin (15) * floor(x/2))
        */
    //204 = centre de la carte en y
        /* n/4 * ( (sin(75) + sin(15)) * y +
                x * sin (45) +
                sin (75) * floor(x/2) -
                sin (15) * (floor(x/2) -1))
        */
    
Mouse.+= 347;
    
Mouse.= (Mouse.y+204)*2;document.getElementById("dd").innerHTML Mouse.x+" / "+Mouse.y
    angle 
Math.acos(Mouse.Math.sqrt(Mouse.x*Mouse.Mouse.y*Mouse.y)) - Math.PI/4;
    
module Math.sqrt(Mouse.x*Mouse.Mouse.y*Mouse.y);

    
//on réajuste les points pour que la carte isométrique et celle sans aient les même coordonnées en x,y
    //trouver en comparant le même point sur les 2 cartes avec le curseur ; pour le calcul exacte, faut chercher ^^.
    //document.getElementById("dd").innerHTML = Math.floor(Math.cos(angle)*module)+" / "+Math.floor(Math.sin(angle)*module);
    
Mouse.Math.floor(Math.cos(angle)*module) - 744;
    
Mouse.Math.floor(Math.sin(angle)*module) + 213;

    
//calcule les positions aproximatif de la case (X ; Y)
    //hexagone transformer en carré de même hauteur et de largeur du point le plus à gauche au point en haut à droite
    //---------------------------------------------------------
    //calcule les positions réel de la case (Xd ; Yd)
    //distance du point par rapport à l'haxagone
    
Math.floor(Mouse.x/x);
    
Xd- (Mouse.X*x);
    if(
X%== 1)
    {
        
Math.floor((Mouse.y)/(y*2));
        
YdMouse.Y*(y*2) - (y*2);
    }
    else
    {
        
Math.floor(Mouse.y/(y*2));
        
YdMouse.Y*(y*2);
        
Yd-=y;
    }

    
//le point est situer dans la partie du carré qui superpose l'hexagone (à ça gauche)
        //et le point est à l'exterieur du cercle inscrit
            //et on déplace le point sur l'axe x et on vérifie ça longueur (52/86.5 est la pente de x par y)
    
if(Xd >= 47
        
&& Math.sqrt(Xd*Xd Yd*Yd)
        && 
<= Xd Math.abs(Yd)*L/y)
    {
        if(
X%== && Yd>0Y++;
        if(
X%== && Yd<0Y--;
        
X--;
    }

    
//curseur à l'exterieur de la carte
    
var img "NON";
    if(
Y<&& X<4)
        
img "OUI";

    
document.getElementById("pos").innerHTML Mouse.x+" / "+Mouse.y+"<br />"+X+" / "+Y+"<br />"+img;
};
document.onmousemove moveHandler;
-->
</script>
</head>
<body>
<div id="pos">? / ?</div>
<div id="dd">? / ?</div>
<?php
//image 200 - 173
$L1 sqrt(3)/2*200 24//decalage de x entre le point le plus à gauche et celui en haut à gauche
$L2 = (sqrt(3) - 1) *200//taille d'un côte

//Infos sur la carte
$n 98;
$nbLignes 3;
$nbColonnes 4;

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

        echo 
'<img src="_img/Hexagone_iso.png" style="position:absolute;left:'.$X.'px;top:'.$Y.'px;"/>';
        echo 
'<span style="position:absolute;left:'.($X+85).'px;top:'.($Y+40).'px;">'."$i / $j".'</span>';
    }
}
?>
</body>
</html> 

Et la carte non isométrique
Code PHP :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <
head>
        <
title>carte héxagone</title>
        <
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<
script type="text/javascript"><!--
// Variables de la gestion de l'evenement
var Mouse = {"x":0,"y":0};

// Demande de gestion de l'evenement à NetScape
if(navigator.appName.substring(0,3) == "Net") {
    
document.captureEvents(Event.MOUSEMOVE);
}

// Gestion de l'evenement
var OnMouseMoveEventHandler=function() {}
var 
OnMouseMove = function (e)
{
   
Mouse.= (navigator.appName.substring(0,3) == "Net") ? e.pageX event.x+document.body.scrollLeft;
   
Mouse.= (navigator.appName.substring(0,3) == "Net") ? e.pageY event.y+document.body.scrollTop;
   if (
Mouse.0) {Mouse.x=0;}
   if (
Mouse.0) {Mouse.y=0;}
   
OnMouseMoveEventHandler(e)
}

try {
   
document.attachEvent("onmousemove"OnMouseMovetrue);
} catch (
ex) {
   
document.addEventListener("mousemove"OnMouseMovetrue);
}

var 
moveHandler = function()
{
    
//Fonctionne pour les hexagones positionner avec des trait perpendiculaire à y

    //n = taille d'un segment
    //x = position x de la case 1/0 = 150 (n*1.5)
    //y = position y de la case 0/0 = 86.5 (sin(60) * n)
    //L = (largeurImage - tailleSegmentX) / 2 |OU| 2n-x = 50
    
var n=100x=150y=86.6L=50;
    var 
X,Y,Xd,Yd;

    
Mouse.+= 2;    //decalage effectué l'ors de la création de la carte
    
Mouse.+= 2;

    
//calcule les positions aproximatif de la case (X ; Y)
    //hexagone transformer en carré de même hauteur et de largeur du point le plus à gauche au point en haut à droite
    //---------------------------------------------------------
    //calcule les positions réel de la case (Xd ; Yd)
    //distance du point par rapport à l'haxagone
    
Math.floor(Mouse.x/x);
    
Xd- (Mouse.X*x);
    if(
X%== 1)
    {
        
Math.floor((Mouse.y)/(y*2));
        
YdMouse.Y*(y*2) - (y*2);
    }
    else
    {
        
Math.floor(Mouse.y/(y*2));
        
YdMouse.Y*(y*2);
        
Yd-=y;
    }

    
//le point est situer dans la partie du carré qui superpose l'hexagone (à ça gauche)
        //et le point est à l'exterieur du cercle inscrit
            //et on déplace le point sur l'axe x et on vérifie ça longueur (52/86.5 est la pente de x par y)
    
if(Xd >= 47
        
&& Math.sqrt(Xd*Xd Yd*Yd)
        && 
<= Xd Math.abs(Yd)*L/y)
    {
        if(
X%== && Yd>0Y++;
        if(
X%== && Yd<0Y--;
        
X--;
    }

    
//curseur à l'exterieur de la carte
    
var img "NON";
    if(
Y<&& X<4)
        
img "OUI";

    
document.getElementById("pos").innerHTML Mouse.x+" / "+Mouse.y+"<br />"+X+" / "+Y+"<br />"+img;
};
document.onmousemove moveHandler;
-->
</script>
</head>
<body>
<?php
//image 200 - 173
$L1 sqrt(3)/2*200 24//decalage de x entre le point le plus à gauche et celui en haut à gauche
for($x=1$x<=4$x++)
{
    for(
$y=1$y<=3$y++)
    {
        
$X $x*$L1 $x*150 2;
        
$Y 2*($y*$L1 $y*64) - 173 1;

        if(
$x%== 0) { //Pair
            
$Y += 86.5;
        }

        echo 
'<img src="_img/Hexagone.png" style="position:absolute;left:'.$X.'px;top:'.$Y.'px;"/>';
        echo 
'<span style="position:absolute;left:'.($X+85).'px;top:'.($Y+80).'px;">'.($x-1).' / '.($y-1).'</span>';
    }
}
?>
<div id="pos" style="z-index:500;position:absolute;background:#eee;">? / ?</div>
</body>
</html> 

[Image: Hexagone_u1230344056.png]
[Image: Hexagone_iso_u1230344056.png]
12-27-2008 04:19 AM
Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
gameprog2 Hors ligne
Membre

Messages : 231
Inscription : Jan 2009
Réputation : 2
Message : #83
Application de la 3D isométrique sur des tuiles hexagonales
Vraiment bravo !!!!!!!!
Où on voit que les maths ça peut servir à jouer hein 34

Mon premier portail pour débutants en programmation :
http://lafederation.keuf.net/portal.htm

Mon premier forum pour débutant en programmation :
http://lafederation.keuf.net/forum.htm
01-23-2009 07:32 PM
Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Harparine Hors ligne
Membre

Messages : 485
Inscription : Mar 2007
Réputation : 25
Message : #84
Application de la 3D isométrique sur des tuiles hexagonales
Yes ! Ca c'est cool. Il va falloir que je teste ça un de ces jours. Si ça marche vraiment, ça ne te dérange pas que je rajoute tes formules au tuto sur le wiki ? (en précisant évidemment qui en est l'auteur 16)

[Image: pub88x31.png] GUNoF - Générateur Universel de Noms Fantastiques
01-23-2009 07:42 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Hakushi Hors ligne
Membre

Messages : 161
Inscription : Sep 2008
Réputation : 2
Message : #85
Application de la 3D isométrique sur des tuiles hexagonales (Ce message a été modifié le : 01-23-2009 11:05 PM par Hakushi.)
J'avais commencé un petit moteur de rendu en Flash pour jeu de strategie en tile Hexagonal, faudrait que je fouille mon PC voir si je peux en tirer des fichiers re-utilisables.

[Image: projet.php?pourcentage=35&amp;bordure] - Dungeon Basher of Terra Atlantis
[Image: projet.php?pourcentage=75&bordure] - Survivor
01-23-2009 10:53 PM
Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
jo_link_noir Hors ligne
Membre

Messages : 219
Inscription : Sep 2006
Réputation : 3
Message : #86
Application de la 3D isométrique sur des tuiles hexagonales
Harpine, tu peux en faire ce que tu veux 2
01-25-2009 01:54 PM
Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
jo_link_noir Hors ligne
Membre

Messages : 219
Inscription : Sep 2006
Réputation : 3
Message : #87
Application de la 3D isométrique sur des tuiles hexagonales (Ce message a été modifié le : 04-07-2009 08:52 PM par jo_link_noir.)
Bonjour,
J'ai refait le code pour qu'il puisse s'utiliser avec n'importe quel taille d'image, de colonne et de ligne.
Y ajuste n, x, y, et L qui sont à modifier (l.126) et peut-être un décalage à effectué (l.195)
Par contre y a un petit décalage quand le tableau est trop, il ne trouve pas les coordonnées exacte. J'ai juste réajusté de quelques pixels mais faudrait le faire selon les valeurs en x et y, petit calcul que j'ai pas fait.

Code PHP :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <
head>
        <
title>carte hexagone</title>
        <
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <
meta lang="fr" name="description" content="trouver les coordonnées x/y avec la sourie sur une carte isométrique hexagonale" />
</
head>
<
body>
<
div id="carte" style="z-index:1;"></div>
<
div stle="position:fixed;z-index:90;">
    <
div>X/Y réel: <span id="reel">? / ?</span></div>
    <
div>X/Y modifier: <span id="modifier">? / ?</span></div>
    <
div>X/Y contre iso: <span id="contreiso">? / ?</span></div>
    <
div>Carte: <span id="info">-</span></div>
</
div>
<
div style="position:fixed;right:0px;top:0px;z-index:100;">
    <
form onsubmit="return initCarte(this)">
        <
p>
            <
label for="ligne">Ligne : </label><input type="numeric" name="ligne" id="ligne"/><br />
            <
label for="colonne">Colonne : </label><input type="numeric" name="colonne" id="colonne"/>
        </
p>
        <
p><input type="submit" /></p>
</
div>

<
script type="text/javascript"><!--
function 
sindeg(deg)
{
    return 
Math.sin(deg/180*Math.PI);
}

function 
angleRad(x,y)
{
    return 
Math.acos(Math.sqrt(x*y*y)) - Math.PI/4;
}

function 
modulo(x,y)
{
    return 
Math.sqrt(x*y*y);
}

function 
y_non_iso(x,y)
{
    return 
Math.floor(Math.sin(angleRad(x,y))*modulo(x,y));
}

function 
x_non_iso(x,y)
{
    return 
Math.floor(Math.cos(angleRad(x,y))*modulo(x,y));
}


98;
nbLignes 3;
nbColonnes 4;

function 
creeCarte()
{
    var 
carte '';

    for (var 
l=0l<nbLignesl++) {
        for (var 
c=0c<nbColonnesc++) {
            var 
c*(sindeg(75)+sindeg(45))*- (l+Math.ceil(c/2))*(sindeg(15) + sindeg(75))*+ (nbLignes-1)*(sindeg(15)+sindeg(75))*n;
            var 
= (l+Math.ceil(c/2))*(sindeg(75)+sindeg(15))*n/c*sindeg(13.5)*n;

            
carte += '<img src="../images/Hexagone_iso.png" style="position:absolute;left:'+X+'px;top:'+(Y-1)+'px;"/><span style="position:absolute;left:'+(X+85)+'px;top:'+(Y+40)+'px;">'+c+" / "+l+'</span>';
        }
    }
    
document.getElementById("carte").innerHTML carte;
}

function 
initCarte(frm)
{
    
nbLignes parseInt(frm.elements["ligne"].value);
    
nbColonnes parseInt(frm.elements["colonne"].value);
    
creeCarte();
    return 
false;
}

creeCarte();



// Variables de la gestion de l'evenement
var Mouse = {"x":0,"y":0};

// Demande de gestion de l'evenement à NetScape
if(navigator.appName.substring(0,3) == "Net") {
    
document.captureEvents(Event.MOUSEMOVE);
}

// Gestion de l'evenement
var OnMouseMoveEventHandler=function() {}
var 
OnMouseMove = function (e)
{
   
Mouse.= (navigator.appName.substring(0,3) == "Net") ? e.pageX event.x+document.body.scrollLeft;
   
Mouse.= (navigator.appName.substring(0,3) == "Net") ? e.pageY event.y+document.body.scrollTop;
   if (
Mouse.0) {Mouse.x=0;}
   if (
Mouse.0) {Mouse.y=0;}
   
OnMouseMoveEventHandler(e)
}

try {
   
document.attachEvent("onmousemove"OnMouseMovetrue);
} catch (
ex) {
   
document.addEventListener("mousemove"OnMouseMovetrue);
}


/*
A partirdu tuto de Harparine
http://wiki.jeuweb.net/tutoprog/3d_iso_et_tuiles_hexagonales
*/
var moveHandler = function()
{
    var 
cnbColonnes-1nbLignes-1;
    
//Fonctionne pour les hexagones avec des trait perpendiculaire à l'axe y

    //n = taille d'un segment
    //x = position x de la case 1/0 = 150 (n*1.5)
        //le même que dans le php (148)
    //y = position y de la case 0/0 = 86.5 (sin(60) * n)
    //L = (largeurImage - tailleSegmentX) / 2 |OU| 2n-x = 50
    //c'est valeur sont à réajuster car les images peuvent ce superposer lors de leurs positionnement
    
var n=98x=150y=86.5L=50;
    var 
X,Y,Xd,Yd;

document.getElementById("reel").innerHTML Mouse.x+" / "+Mouse.y;

    
//on s'immule une contre isométrie des points
    //les 2 calcules trouve les coordonnées du point d'origine (Xo=346 et Yo=204)
        /*graphiquement
        Xo = (Xmax+Xmin)/2
        Yo = (Ymax+Ymin)/2
        */
        /*Par calcul avec : c = nombreColonne -1 et l = nombreLigne - 1.
        Xo = ceil(
            (
                n * (
                    c * (sin(75) + sin(45))
                    - ceil(c/2) * (sin(15) + sin(75))
                    + l * (sin(15) + sin(75))
                )
                + largeurImage
            ) / 2
            - décalageX
        )
        Yo = ceil(
            n * (
                (l + ceil(c/2)) * (sin(75) + sin(15)) / 2
                + c * sin(13.5)
                + 1
            ) / 2
            - décalageY
        )
        */

    
var Xo Math.ceil((* (* (sindeg(75) + sindeg(45)) - Math.ceil(c/2) * (sindeg(15) + sindeg(75)) + * (sindeg(15) + sindeg(75))) + n+2*L) / 2);
    var 
Yo Math.ceil(* ((l+Math.ceil(c/2))*(sindeg(75)+sindeg(15)) / c*sindeg(13.5) + 1) / 2);
    
Mouse.+= Xo;
    
Mouse.= (Mouse.Yo)*2;
    var 
x_contre_iso x_non_iso(Mouse.xMouse.y);
    var 
y_contre_iso y_non_iso(Mouse.xMouse.y);

    
//on réajuste les points pour que la carte isométrique et son point d'origine soit positionner sur celui d'une carte non isométrique (faut imaginer la carte non iso et iso positionner l'un sur l'autre mais avec le point haut-gauche du carrer qui les contient confondu... ><)
    //trouver en comparant le même point sur les 2 cartes avec le curseur
        /*graphiquement /!\ prendre le resultat de la sourie suivant :
            document.getElementById("modifier").innerHTML = Math.floor(sindeg(angle)*module)+" / "+Math.floor(Math.cos(angle)*module);

            Par position de sourie nettement plus rapide/pratique même si il peut y avoir quelques pixel de différence. Dans ce cas il suffi de savoir dans quel axe et donc ajouter à x et y le nombre en conséquence

            Mouse.y = Math.floor(Math.cos(angle)*module) - sommet_le_plus_haut (ou point extreme droite de l'axe x /!\ à l'isométrie)
            Mouse.x = Math.floor(Math.cos(angle)*module) - sommet_à_droite_du_plus_haut (ou point extreme gauche de l'axe y /!\ à l'isométrie)
        */
        /*Par calcul. Math.floor(sindeg(Mangle)*Mmodule) et Math.floor(Math.cos(Mangle)*Mmodule) sont par raport au nombre de ligne et de colonne. Pas le peine de faire le calcule à chaque fois
            Mx = n * (sindeg(15/180*Math.PI)+sindeg(75/180*Math.PI)) * (l + 1) + Xo;
            My = Yo * 2 ;
            Mangle = Math.acos(Mx / Math.sqrt(Mx*Mx + My*My)) - Math.PI/4;
            Mmodule =  Math.sqrt(Mx*Mx + My*My) - 10;
            Mouse.y = Math.floor(sindeg(angle)*module) - Math.floor(sindeg(Mangle)*Mmodule);

            Mx = n * (sindeg(15/180*Math.PI) + l * (sindeg(15/180*Math.PI)+sindeg(75/180*Math.PI))) + Xo;
            My = (n * sindeg(15/180*Math.PI)/2 + 1 + Yo) * 2 ;
            Mangle = Math.acos(Mx / Math.sqrt(Mx*Mx + My*My)) - Math.PI/4;
            Mmodule =  Math.sqrt(Mx*Mx + My*My);
            Mouse.x = Math.floor(Math.cos(angle)*module) - Math.floor(Math.cos(Mangle)*Mmodule);
        */
document.getElementById("modifier").innerHTML x_contre_iso+" / "+y_contre_iso;


    
Mouse.y_contre_iso y_non_iso(* (sindeg(15)+sindeg(75)) * (1) + XoYo 2);
    
Mouse.x_contre_iso x_non_iso(* (sindeg(15) + * (sindeg(15)+sindeg(75))) + Xo, (sindeg(15)/Yo) * 2);

    
//décalage
    
Mouse.+= 2;
    
Mouse.-= 1;

document.getElementById("contreiso").innerHTML Math.floor(Mouse.x)+" / "+Math.floor(Mouse.y);

    
//calcule les positions aproximatif de la case (X ; Y)
    //hexagone transformer en carré de même hauteur et de largeur du point le plus à gauche au point en haut à droite
    //---------------------------------------------------------
    //calcule les positions réel de la case (Xd ; Yd)
    //distance du point par rapport à l'haxagone
    
Math.floor(Mouse.x/x);
    
Xd- (Mouse.X*x);
    if(
X%== 1)
    {
        
Math.floor((Mouse.y)/(y*2));
        
YdMouse.Y*(y*2) - (y*2);
    }
    else
    {
        
Math.floor(Mouse.y/(y*2));
        
YdMouse.Y*(y*2) - y;
    }

    
//le point est situer dans la partie du carré qui superpose l'hexagone (à ça gauche)
        //et le point est à l'exterieur du cercle inscrit
            //et on déplace le point sur l'axe x et on vérifie ça longueur (52/86.5 est la pente de x par y)
    
if(Xd >= L
        
&& Math.sqrt(Xd*Xd Yd*Yd)
        && 
<= Xd Math.abs(Yd)*L/y)
    {
        if(
X%== && Yd>0) ++Y;
        if(
X%== && Yd<0) --Y;
        --
X;
    }

    
//curseur à l'exterieur de la carte
    
document.getElementById("info").innerHTML X+" / "+Y": "+(Y<&& X<&& Y>=&& X>="OUI" "NON");
};

document.onmousemove moveHandler;
-->
</script>
</body>
</html> 
04-07-2009 08:37 PM
Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
keke Hors ligne
Modérateur
*****

Messages : 2 021
Inscription : Mar 2007
Réputation : 21
Message : #88
Application de la 3D isométrique sur des tuiles hexagonales
(02-08-2008 06:03 PM)barst a écrit :  Voilà un bout de code que j'avais fait il y a quelque temp pour prendre une image 2D et générer 4 images en 3D isométrique (1 image par orientation : nord, est, sud, ouest)

Dans l'exemple :
$filename = nom de l'image 2D (chemin complet avec extension)
$name = nom de l'image 3D (juste le nom sans extension)
Code PHP :
$sizes getimagesize($filename);
$h intval(floor(sqrt((pow($sizes[0],2)+pow($sizes[1],2)))/2));
$tmp imagecreate($sizes[0],$h );
$transparent imagecolorallocatealpha ($tmp255255255127);
$aux imagerotate(imagecreatefrompng($filename),-45,$transparent);
imagecopyresampled$tmp$aux0000$sizes[0], $himagesx($aux), imagesy($aux) );
$aux $tmp;
imagecolortransparent($aux,imagecolorat($aux,1,1));
imagepng($aux,$name.'_north.png');    
$aux imagerotate(imagecreatefrompng($filename),45,$transparent);
imagecopyresampled$tmp$aux0000$sizes[0], $himagesx($aux), imagesy($aux) );
$aux $tmp;    
imagecolortransparent($aux,imagecolorat($aux,1,1));
imagepng($aux,$name.'_east.png');
$aux imagerotate(imagecreatefrompng($filename),135,$transparent);
imagecopyresampled$tmp$aux0000$sizes[0], $himagesx($aux), imagesy($aux) );
$aux $tmp;    
imagecolortransparent($aux,imagecolorat($aux,1,1));
imagepng($aux,$name.'_south.png');
$aux imagerotate(imagecreatefrompng($filename),225,$transparent);
imagecopyresampled$tmp$aux0000$sizes[0], $himagesx($aux), imagesy($aux) );
$aux $tmp;    
imagecolortransparent($aux,imagecolorat($aux,1,1));
imagepng($aux,$name.'_west.png'); 

Coucou Barst 34,

Ce We, j'ai essayé ton code. Comme le résultat ne me satisfaisait pas, j'ai essayé de l'améliorer. Puis n'ayant plus beaucoup de temps devant moi, je l'ai envoyé sur mon serveur ... et là, on m'apprend que la fonction GD imagerotate n'est pas gérée chez moi (pourtant je suis en version PHP 5.n 34) !

Bref, afin que ceux qui ont essayé ton programme ne soient pas déçus, je les encourage à tester ton programme sur leur serveur AVANT de l'adapter en locale 34.

Sinon, C'est vrai que ta fonction peut-être vraiment utile si l'on souhaite migrer de 2D plat 2D iso 34.

kéké qui souhaite carrément passer à la 3D iso !

Kéké < AFK ! >.
Modérateur de jeuPHP 34.
Administrateur du jeu médiéval Magdales
Papa de Siloé (2 ans) et Apolline (10 jours)
Référenceur de LADO : les amis de l'outil
05-18-2009 01:42 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Pabsy Hors ligne
Membre

Messages : 3
Inscription : Jan 2010
Réputation : 0
Message : #89
Application de la 3D isométrique sur des tuiles hexagonales
Bonjour, je vois que j'arrive un peu après la bataille, mais développant moi même un moteur graphique pour 3D isométrique à base hexagonale, je remercie Harpatine pour tous ses calculs.

Malheureusement, j'ai cru comprendre qu'il avait fait tout un tutoriel là dessus mais le sujet ayant été déplacé, les liens vers la page sont morts, ainsi que certaines images que ce sujet-ci contenait (notamment le dessin des tuiles de base et leurs dimensions).

Ce tutoriel existe toujours quelque part sur le serveur ou devrais-je me casser la tête pour l'adapter à mes proportions d'hexagones ?

Merci
01-08-2010 06:00 PM
Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Anthor Hors ligne
Administrateur
*******

Messages : 1 023
Inscription : Dec 2007
Réputation : 17
Message : #90
Application de la 3D isométrique sur des tuiles hexagonales
Hélas non pas de sauvegarde du Wiki. Peut-être voir avec Harparine.

Anthor | Tarsiera Studio
[Image: 352x90.gif]
01-08-2010 09:28 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Poster une réponse 



ContactJeuWeb - Crée ton jeu par navigateurRetourner en hautRetourner au contenuVersion bas-débit (Archivé)Syndication RSS