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 - Harparine - 07-01-2008

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). Wink


RE: Application de la 3D isométrique sur des tuiles hexagonales - Arsenine - 08-02-2008

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


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

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 ?


RE: Application de la 3D isométrique sur des tuiles hexagonales - Arsenine - 08-02-2008

Bonjour,

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

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

Voici une screen shot :

[Image: tleic4.png]

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:


RE: Application de la 3D isométrique sur des tuiles hexagonales - barst - 08-02-2008

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');



RE: Application de la 3D isométrique sur des tuiles hexagonales - Arsenine - 08-02-2008

Merci Smile

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. Confusedangfroid:


RE: Application de la 3D isométrique sur des tuiles hexagonales - Arsenine - 09-02-2008

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


RE: Application de la 3D isométrique sur des tuiles hexagonales - joshua - 09-02-2008

fais en profiter tout le monde :p


RE: Application de la 3D isométrique sur des tuiles hexagonales - Arsenine - 10-02-2008

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



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

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 ?