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 - Shudrum - 07-06-2007

Magnifique tuto, tout simplement magnifique !


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

Bonjour à tous ! Je n'ai pas trop le temps de passer sur le forum, en ce moment mais je vois qu'il est toujours aussi actif Wink

Alors, je vais essayer de répondre rapidement à chacun :

Pour ceux qui s'étonnent de la complexité de la formule, faut savoir qu'à la base, ce n'était pas vraiment un tuto, mais plutôt une réflexion assez générale sur la 3D iso avec des hexotuiles, donc mes formules sont le plus larges possibles et elles permettent (normalement) de placer des tuiles de taille variable (c'est à dire que l'utilisation du sinus laisse la possibilité d'implémenter une fonction de zoom, par exemple).

Mais il est possible de simplifier considérablement les formules si on utilise toujours des tuiles de taille fixe. Celà reviendrait à remplacer les complexes formules faisant appel à la trigonométrie par des constantes calculées avant en fonction
de la taille de vos tuiles.

Teclis, j'avoue que tes coordonnées sont étranges car tu devrais normalement placer ta première tuile aux coordonnées 0,0 (Damën, ces coordonnées correspondent à la position en pixels, puisque tu le demandais : la formule transforme la "position cases" en "position pixels"). Ce tuto (si on peut appeler ça un tuto, vu qu'il n'y a pas encore de cas pratique), est relativement compliqué et il vaut mieux le suivre à la lettre au début.

Teclis, j'ai l'impression que tu pars de 1 dans tes boucles pour placer tes tuiles, alors qu'il faut impérativement partir de 0 (c'est écrit, je crois) : les les calculs sont plutôts complexes et la position abscisse est fonction de la position en ordonnée (et inversement), donc un décalage de 1 au début peut effectivement tout fausser. Je rappelle aussi que la valeur de côté n correspond au côté de l'hexagone en vue 2D (vue de dessus), c'est à dire avant toute déformation iso. Il ne faut pas utiliser la taille de l'image mais bien la taille théorique de la figure (je proposerai une formule en fonction de la taille de l'image si j'ai le temps).

Pour répondre à ta question, Teclis, je suis quasiment sûr de mes formules, même si elles peuvent sans doute être optimisées. Elles sont testées sous Flash mais je me suis assuré avant que les positions ne seraient pas faussées. Actuellement, j'ai encore deux semaines de taf intensif devant moi (je dois produire plus de 10 pages de synthèse par jour) mais je ferai des tests en php dès que j'aurai le temps pour transformer mon explication mathématique en un vrai tuto.

Je rajouterai sans doute une partie sur la réalisation graphique de tuiles (ça peut servir) et une dernière sur la conversion de la position de la souris en position iso pour hexagones, ce qui est indispensable si on utilise GD pour générer la carte (ce qui suppose encore pas mal de calculs).

Bref, j'ai pas trop le temps de détailler mes calculs pour l'instant, mais j'essaierai de le faire plus tard, pour rendre plus accessible ce gros morceau.

Merci, Shudrum, ça fait plaisir Wink

@+

EDIT : Teclis, pourrais-tu résumer ce que tu as modifié dans ma formule et ce qui te posais problème ?


RE: Application de la 3D isométrique sur des tuiles hexagonales - Caribou - 08-06-2007

Ouai merci pour l'explication, en effet c'est ce que j'ai voulu dire en disant qu'un formule complex n'est pas indispensable dans le cas ou la map est toujours identique, on bidouille un peu manuellement pour placer ses tuiles, et puis voila c'est fini.
Par contre je me disais bien que si on devait faire des changements, sans formule pour calculer les positions, ça impliquait de refaire encore des manipulations manuelles donc ça peux devenir penible et une perte de temps certaines, sauf que je voyais pas trop pourquoi on devrait changer... mais le zoom tu apportes un element de reponse, en effet si on veux integrer des zoom-out pour un plan plus large, une formule c'est forcément l'ideal.

C'est jolie en tout cas la 3Dih (trois-dimensions-isometrique-hexotuilale, lol histoire de faire complex), beau boulot et bon courage pour tes 2semaines de taf intense.


RE: Application de la 3D isométrique sur des tuiles hexagonales - khiguard - 08-06-2007

Teclis01, je pense que tu cherche à faire compliquer ou tu peut trouver une façon de faire simple.

Refléchis de façon différente quand tu est bloquer sur un problème.

Ici tu prend ta ligne 1 avec les case 1,2,3,4.

Fait différement. Fait en sorte que chaque "ligne de case" soit sur la même ligne d'impressions pour que l'affichage soit "linéaire".
Ainsi, ta ligne 1 sera composer de tes cases 1 et 3. Ta ligne 2 de tes cases 2 et 4, ect...

Tu devrais avoir plus facile et ca donne le même résultat.

Tu aura donc ton moteur d'affichage avec 2 boucles imbriquées, 2,3 calcul simple (multiplication) et une condition.

Si tu le souhaite, je peut peut passer un code de moteur hexa (simple) pour te faire une idée.
Mais ce n'est pas la peine de sortir des sin pour un moteur si simple. Smile enfin je pense.

@+


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

khiguard, si tu parviens à trouver un moteur de placement générique (c'est à dire avec une dimension de tuiles dynamiques et pas fonction de la taille de tes images) de tuiles hexa EN 3D ISO sans utiliser la trigo, je suis preneur Smile C'est faisable si tu utilise des tailles fixes. Mais pas autrement, je crois (et ici, je rappelle que l'objectif était d'expliquer la logique du placement des tuiles, pas de donner un code tout fait. Personnellement, si j'utilisais la 3Diso avec des hexotuiles, je n'utiliserais pas non plus de trigo dans mes calculs de placement, même avec du zoom car il serait plus rapide d'utiliser des coef de grossissement mais il faut impérativement savoir comment ça marche). Si en parlant de moteur simple, tu penses à la 2D, c'est vrai que ça marche nickel. Mais la principale difficulté d'une carte composée d'hexotuiles isométriques n'est pas vraiment leur forme hexagonale, mais surtout l'isométrie qui complique considérablement les calculs (on a des positions négatives en abscisses, par exemple).

Personnellement, j'ai aussi raisonné en lignes et en colonnes. Après, il faut simplement tenir compte de l'aspect crénelé d'une carte hexagonale (en 2D ou en 3D iso) et donc décaler une tuile sur deux (en iso, celà revient à affecter un coef de décalage au côté dentelé).

Teclis, je ne capte pas bien pourquoi tu veux absolument laisser toutes les numéros de ligne et de colonne à 0 Wink. Je rappelle ma formule (sans le décalage correctif pour placer la carte au centre, pour ne pas compliquer, c'est à dire qu'ici, la moitié de la carte sera à gauche de l'axe vertical ayant pour abscisse 0) :
Code :
posX = X*(sin(75)+sin(45))*n - (Y+arrondi.sup(X/2))*(sin(15) + sin(75))*n
posY = (Y+arrondi.sup(X/2))*(sin(75)+sin(15))*n/2 + X*sin(13.5)*n
posX et posY correspondent aux positions absolues des images de tuiles en pixels (c'est à dire des rectangle dont l'origine est en haut à gauche).
X et Y sont les numéros respectifs des lignes et colonnes, commencés à 0 (en gros, c'est tes variables j et i dans ta boucle).
n, enfin, est la longueur d'un côté en vue de dessus (2D), sachant que tous les côtés sont égaux (si tu observes bien mes schémas, tu ne peux pas le louper). CETTE VALEUR RESTE LA MEME LORSQUE LA FIGURE SUBI LA TRANSFORMATION ISO. C'est une valeur théorique qui suppose d'utiliser la trigonométrie mais on peut simplifier les calculs.

ici, n vaut 20.

Donc, première tuile de la première ligne :
X = 0, Y = 0.
posX = 0
posY = 0

la deuxième tuile de la première ligne
X = 1, Y = 0.
posX = 8.96
posY = 16.92

Et ainsi de suite... (je ne vais pas tout faire, parce que j'ai fait le truc à la calculette (donc, si il y a une erreur, c'est manuel). Mais ça a l'air logique.

Et pour ceux qui n'aiment pas la trigo, voilà ce que peut donner ma formule un peu dégraissée, avec une base n=20.

posX = X*33.5 - (Y+arrondi.sup(X/2))*24.5
posY = (Y+arrondi.sup(X/2))*12.2 + X*4.7

C'est tout de suite vachement moins indigeste, comme ça... (h) Mais c'est légèrement plus imprécis, évidemment.
Pour X=1 et Y=0, on a donc :
posX = 9
posY = 16.9

@+


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

Teclis01 a écrit :Ok ca marche nikel mais j ai oublié l algo au taf donc je vais le retaper voir si ca couvre les soucis de plans sinon c nikel pr l indexation donc rien a redire ^^
en fait j'avais confondu n et 2n apparement... -_-' n est en fait la longueur d un des 6 cotés du polygones soit longueur(du carré contenant l'hexagone)/2
En tt K merci Harpa ^^

ouf ravi de voir que ça marche, je commençaisà m'inquiéter. Sinon, c'est bien ça : n = largeurImage/2 pour l'hexa en 2D.

Bon dev', j'ai hâte de voir ce que ça donne dans les faits. Si tu t'intéresses aux positions de souris en iso hexa avant moi, n'hésite pas à poster tes résultats, ça m'intéresse Wink


RE: Application de la 3D isométrique sur des tuiles hexagonales - Caribou - 09-06-2007

Trop complex pour moi, je galère assez pour ma map normal vue de haut lol, mais bon j'ai pas mal avancer, corriger des bugs de calcul... ca c'est chiant alors la trigo laisse béton mdr.
Bon au final avec tout ça, pour afficher la map ca varie à fond, parfois 0.016sec et d'autres ça monte à 0.1sec... c'est peut etre dû à free.fr, j'espere que le code est pas trop lourd en tout cas, surtout que j'ai pas fini lol.

Bon en meme temps je dis ça mais en faite je pourrais tres bien passé en 3D iso ou 3D iso hexotuile, ça change rien au mapping en faite c'est juste à la sortie c'est traiter differemment.


RE: Application de la 3D isométrique sur des tuiles hexagonales - Loetheri - 09-06-2007

Je confirme. Les deux méthodes ne donnent pas la même solution. Fais le test avec un rectangle de 2 sur 4 ;-)


RE: Application de la 3D isométrique sur des tuiles hexagonales - P0ulp0r - 10-06-2007

Vraiment merci pour cette aide Big Grin

C'est super !


RE: Application de la 3D isométrique sur des tuiles hexagonales - Harparine - 10-06-2007

Effectivement, tu as refait les calculs, teclis et ils semblent bon, mais je ne vois pas vraiment où tu veux en venir... Tu essaies de transformer la position de la souris en numéro coordonnées d'hexagone ?