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

[Harparine]

J'avais jamais vu ces textures^^. J'en avais d'autres en tête. Effectivement, celles-ci sont bien sympas, j'aime beaucoup les transitions d'un terrain à l'autre. Et le rendu est pas mal du tout, même si la carte a un aspect étiré un peu étonnant. Mais plutôt que de décaler à la main, j'aurais plutôt légèrement écrasé les images pour qu'elles soient parfaitement carrées (avec un script sur photoshop, on fait toute la liste en 10 clics).

[Arsenine]

Bonsoir à tous,

Ceci est mon premier post ici. =)

J'ai essayé de coder une fonction pour convertir une image en tuile carrée.

Donc suivant le tutorial de Harparine (Pivoter de 45° et diviser la hauteur par deux) j'ai écrit cette petite fonction :

Code :

    function Img_Iso($img){
        $size     = getimagesize($img);         
        $source = imagecreatefrompng($img);         
        $source = imagerotate($source, 45, -1);        
        $thumb = imagecreatetruecolor($size[0], $size[1]);        
        imagecopyresized($thumb, $source, 0, 0, 0, 0, $size[0], $size[1]/2, $size[0], $size[1]);
        header('Content-type: image/png');
        imagepng($thumb);        
}

Cependant le rendu est assez étrange..:'(.

Pourriez-vous me donner un p'tit coup de main s'il vous plait ?

[Harparine]

Salut ! Normalement, il vaut mieux réaliser cette étape à la main, sur un logiciel de dessin. Si tu tiens absolument à le faire avec GD, t'es-tu assuré que ta rotation est bien mesurée en degrés et pas en radians ? => deg2rad(45);

Et tu n'aurais pas un screen ou une image de ton problème ?

[Arsenine]

Bonjour,

Tout d'abord merci d'avoir répondu aussi rapidement!

L'argument de la fonction imagerotate est à passer en dégrés d'après le Manuel PHP.

Voici une screen shot :



Toutefois, je pense que tu as raison, le faire à la main sera plus propre et les tuiles hexagonales sont bien plus belles. Ensuite j'utiliserais le script donné dans le forum. (h)

Code :

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

Bien que je l'ai essayé hier avec une tuile récupérée dans ce thread (et renommée tuile3D.png) et qu'il ne fonctionnait pas: le code html est bien présent mais aucune image...:heuuu:

[barst]

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 :

<?php 

$sizes = getimagesize($filename);

$h = intval(floor(sqrt((pow($sizes[0],2)+pow($sizes[1],2)))/2));

$tmp = imagecreate($sizes[0],$h );

$transparent = imagecolorallocatealpha ($tmp, 255, 255, 255, 127);

$aux = imagerotate(imagecreatefrompng($filename),-45,$transparent);

imagecopyresampled( $tmp, $aux, 0, 0, 0, 0, $sizes[0], $h, imagesx($aux), imagesy($aux) );

$aux = $tmp;

imagecolortransparent($aux,imagecolorat($aux,1,1));

imagepng($aux,$name.'_north.png');    

$aux = imagerotate(imagecreatefrompng($filename),45,$transparent);

imagecopyresampled( $tmp, $aux, 0, 0, 0, 0, $sizes[0], $h, imagesx($aux), imagesy($aux) );

$aux = $tmp;    

imagecolortransparent($aux,imagecolorat($aux,1,1));

imagepng($aux,$name.'_east.png');

$aux = imagerotate(imagecreatefrompng($filename),135,$transparent);

imagecopyresampled( $tmp, $aux, 0, 0, 0, 0, $sizes[0], $h, imagesx($aux), imagesy($aux) );

$aux = $tmp;    

imagecolortransparent($aux,imagecolorat($aux,1,1));

imagepng($aux,$name.'_south.png');

$aux = imagerotate(imagecreatefrompng($filename),225,$transparent);

imagecopyresampled( $tmp, $aux, 0, 0, 0, 0, $sizes[0], $h, imagesx($aux), imagesy($aux) );

$aux = $tmp;    

imagecolortransparent($aux,imagecolorat($aux,1,1));

imagepng($aux,$name.'_west.png'); 

[Arsenine]

Merci

Puis-je te demander ce que tu utilises comme code pour construire ta map, je sèche un peu et le code posté précèdement ne marche pas en ce qui me conçerne. angfroid:

[Arsenine]

C'est bon j'ai réussiiiiiiiiiiii ouf! *va se coucher*

[joshua]

fais en profiter tout le monde :p

[Arsenine]

Voili voilou ! (h)

J'ai repris le code précèdent et adapté avec les formules du tuto. pour des tuiles carrées.

Code :

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

            //On boucle pour afficher la carte
            for ($i=0; $i<$nbLignes; $i++) {
                for ($j=0; $j<$nbColonnes; $j++) {
                    $posX = ($i-$j) * $n + $nbLignes*$n;
                    $posY = ($i+$j)/2 * $n;
                    
                    $img = "t-stone-tree.png";
                    
                    $var_carte = '<div width="91" height="100" style="position: absolute;    top:'.$posY.'px;left:'.$posX.'px;z-index:'.$j.';"><IMG WIDH="91" HEIGHT="100" SRC="'.$img.'">'.$test.'</div>';
                    echo $var_carte;
                }
            }        
?>

[Nosrehl]

Je viens de finir un système de carte isométrique avec des tuiles hexagonales mais je ne vois toujours pas en quoi cela est intéressant : les coordonnées sont toutes bizarres, les déplacements des personnages ne sont pas intuitifs parce que toujours en biais, seulement 6 directions possibles, etc.
Ce n'est pas pour critiquer, juste pour savoir si ça sert à quelque chose de se baser sur des tuiles hexagonales en 3D isométrique ?