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

[gottferdom]

Oui ce sont des divs. Par contre je ne comprend pas trop ce que tu veux dire par dessiner de haut en bas. Comme si les plaques etaient vue de dessus tu veux dire ? je t'avoue que je ne sais pas bien comment representer ça.
Moi ce qui me semble bizarre c'est que pour certaines ça fonctionne bien, pour d'autres non.

Je vais tenter de regarder avec le z-index (je t'avoue que je part à l'inconnue là :p)

Merci ^^

[gottferdom]

J'ai réussi, merci beaucoup. Suffisait de jouer avec le z-index, jte remercie

Edit : arf j'ai oublié d'éditer le post précédent, dsl pour le double post ^^

[Harparine]

Je suis content de voir que tout ça marche : je devais faire un cas d'application en CSS et un autre avec GD mais je n'ai pas eu le temps. (Je note l'importance du z-index pour le moment où je rédigerai un exemple commenté).

[gottferdom]

Si ça peut aider, voici le code que j'ai utilisé

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

[Haiken]

pour expliquer un peu : quand tu "dessines" à l'écran, tu inscrustes l'objet (tuile en l'occurence) sur ce qui existe déjà. Ce qui veut dire qu'en cas de chevauchement, il faut dessiner ce qui doit être en dessous (visuellement) en premier, et ce qui doit être au-dessus en dernier. Il faut raisonner en terme de "sprites".

En l'occurence avec le système de coordonnées utilisé et la boucle en x puis y il est normal que tu obtiennes des chevauchement (par exemple la case 0,1 est dessinée après la case 1,0 alors qu'elle est en-dessous visuellement). Je n'ai pas testé, mais à priori une boucle en y puis en x résoudrait également le problème.

[gottferdom]

Le code je l'ai bien compris, ce qui m'etonnais c'est que des fois le resultat etait bon, et a la colonne d'après ça ne l'etait plus. Mais avec la l'ajout du z-index ça roule

[Anthor]

Corrigez moi si je me trompe, mais les formules ne fonctionnent que si l'hexagone possède tous ses côtés égaux.

Dans les textures de Wesnoth, les hexagones sont plus grand que large, ce qui provoque un décalage plus on avance dans les coordonnées.

Dans ce cas la, ne serait t'il pas mieux de calculer les coordonnées suivant la largeur et la hauteur de l'image ?

[Harparine]

Effectivement, les formules sont basées sur les longueurs des côtés d'hexagones réguliers et non pas sur les tailles d'image.

Je n'ai pas retrouvé les textures de wesnoth mais je me souviens qu'elles étaient complètement fausses et inutilisables : il simulait le relief en étirant ses hexagones vers le bas, ce qui va contre la logique isométrique qui consiste à rajouter des "couches de relief" par rapport à un plan bien défini au départ (la carte assemblée par Gottferdom à partir d'une image de relief que j'avais postée).

Il est possible de raisonner à partir des tailles des images (pour de l'iso de carrés, c'est ce que j'ai fait dans un jeu que j'ai partiellement développé) mais ce tuto est en réalité une réflexion née d'un problème apparu au cours d'un topic sur les créations de cartes. Et c'est plus la logique mathématique qui m'intéressait (je sais que j'avais annoncé une suite pratique mais je suis plutôt occupé, cette année).

Donc, c'est possible et tout dépend de tes besoins, de tes textures, etc. Mais si tu as pigé le tuto, c'est très simple de convertir tout ça pour utiliser les dimensions de l'image.
Par contre, des quadrilatères ou des hexagones non réguliers sont une hérésie dans un jeu isométrique. Aucun jeu n'a jamais utilisé des figures imparfaites à la base : le résultat serait terrible.

@+

[naholyr]

Par contre, des quadrilatères ou des hexagones non réguliers sont une hérésie dans un jeu isométrique. Aucun jeu n'a jamais utilisé des figures imparfaites à la base : le résultat serait terrible.

Ben si, Wesnoth Le résultat n'est pas si mal, et personnellement quand j'avais fait mon gestionnaire de carte hexa j'étais parti sur des hexagones pas tout à fait réguliers, et j'ai été agréablement surpris quand j'ai voulu utiliser les textures de Wesnoth de découvrir... qu'elles collaient parfaitement

Le rendu n'est pas si mauvais et les hexagones "théoriques" (ceux calculés par mon script pour générer les zones cliquables) correspond tout à fait aux hexagones "réels" (ceux affichés) :


Tu vois, finalement la déformation n'est pas si énorme, et ça rend plutôt pas mal je trouve (si on ignore les trucs bizarres autour de la map, cherchez pas c'est mes tests xD)

[Anthor]

Je ne dirais pas qu'elles sont inutilisables, mon premier essai fait en 3h ressemble à peu près à ça.



Je ne trouve pas le rendu si laid ^^

J'avais commencé en dynamique avec les formules mais me rendant compte que les hexagones de bases étaient mauvais, j'ai refais en statique, avec CSS.
En redécalement à la main suivant le décalage que les formules m'avaient données.