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

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

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

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 ?

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 ?

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.

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

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

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.

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

fais en profiter tout le monde

Voili voilou !

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;

                }

            }        

?>

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 ?

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

JeuWeb - Crée ton jeu par navigateur

Harparine

Arsenine

Harparine

Arsenine

barst

Arsenine

Arsenine

joshua

Arsenine

Nosrehl