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 - Maelstrom - 12-06-2007

Bon après avoir lu et relu, avoir essayé de comprendre sans succès :pleure2:,
j'aimerais savoir si il est possible que tu fasses un tuto Teclis, expliquant la manière d'écrire ce script, parce que là je dois avouer que j'en touche pas une (je crois que je reste un peu trop calé sur les calculs :ningaSmile.
Tout est décousu dans ce topic, alors si les solutions étaient réunies en un seul tuto ce serait sans doute plus facile à comprendre :heuuu:...

Voilà, en esperant que ça soit possible *o*,
merci d'avance !


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

Ouai bien sur que c'est possible, Teclis il va faire ça avec plaisir

Bon ça fera 100€ Big Grin lol

(Teclis je suis ton agent, je t'arrange les coups, je prend 20% ça te va ?)


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

Maelstrom a écrit :Bon après avoir lu et relu, avoir essayé de comprendre sans succès :pleure2:,
j'aimerais savoir si il est possible que tu fasses un tuto Teclis, expliquant la manière d'écrire ce script, parce que là je dois avouer que j'en touche pas une (je crois que je reste un peu trop calé sur les calculs :ningaSmile.
Tout est décousu dans ce topic, alors si les solutions étaient réunies en un seul tuto ce serait sans doute plus facile à comprendre :heuuu:...

Voilà, en esperant que ça soit possible *o*,
merci d'avance !

Euh, c'est pas ici, le tuto... C'est normal que ce soit décousu, vu que ce topic ci est consacré à la discussion de mon tuto. Tous les calculs sont expliqués avec force schémas Wink Il n'y a pas d'exemple en php mais il devrait arriver dans deux semaines, dès que j'aurai rendu mon travail de recherche à la fac ! Une petite partie est aussi prévue pour expliquer la création graphique d'hexotuiles iso.

http://www.jeuweb.org/board/showthread.php?tid=1714


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

OUi je sais que c'est normal que tout soit décousu ici, je ne faisais que le souligner :p.
Et malgré ta très bonne explication, je suis une grosse douille quand ça concerne les maths (ho malheur), enfin bon, j'ai encore relu et je comprendre à saisir un peu mieux qu'avant >_< (encore heureux), je vais donc tenter d'ici quelques jours de mettre en pratique ce que je crois avoir compris, avec un peu de chance j'y arriverai tout seul (mais j'y compte pas trop u_u).

PS : comptes-tu toujours réaliser tout ça sous flash et expliquer le fonctionnement ? ça risque d'être intéressant .. >.>


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

Oui oui, je ferai un cas pratique en php et un autre en flash (mais pas non plus une création de map pas à pas parce que ce genre de truc ne s'adresse pas forcément à des novices) dès que j'aurai un peu de temps mais là, j'ai un boulot monstre dans mes études (plus que deux petites semaines et c'est bon) Wink

Mais je peux déjà donner quelques pistes rapidement. Tout d'abord, il faut créer des tuiles en suivant la procédure expliquée au début du tuto, en oubliant pas de conserver sur un bout de papier la longueur d'un côté de l'hexagone de base (que tu appelleras n par la suite).

Ensuite, l'algo de placement des tuiles est relativement simple, c'est simplement deux boucles imbriquées dont la valeur de départ est 0. Dans ces deux boucles, tu calcules la position de chaque image de case en pixels et tu les insères sur le plan de jeu (dans un table ou dans des div si tu fais l'assemblage avec xhtml/css ou bien avec gd. Pour flash, si tu connais un peu le logiciel, c'est encore plus simple, tu fais un clip pour chaque tuile).

En gros, en php, ça doit donner quelque chose comme ça (non vérifié car j'ai la flemme de faire des tests. Dis moi si ça bugue) :

Code PHP :
<?php
//Infos sur la carte
$n = 20;
$nbLignes = 3;
$nbColonnes = 4;

//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;

/* ... Ici, tu places tes tuiles... */
}
}
?>

Personnellement, je trouve plus clair de créer une petite classe qui transforme proprement le numéro de la case en pixels.

@+ Wink


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

Elle est centrée : sauf que je fais le recentrage au niveau des tuiles et pas au niveau de la carte (dernière partie de la formule en X).

Sinon, fais un tuto de ton côté si tu veux, mais je pense que je finirai le mien comme je l'ai commencé, c'est à dire tout seul comme un grand, parce que l'on a pas abordé le truc exactement de la même manière !^^ (et puis j'aime bien essayer d'expliquer, c'est justement ce qui me plaît dans les tutos et dans l'enseignement).

@+ Wink


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

Pour ma part, je me suis penché sur une carte avec des cases octogonales et carrés ^^
Cela donne 4 octogonaux pour 1 carrés. J'avoue que la gestion d'une telle carte serait plutôt ... complexe. Mais bon, c'est juste le sens du défi.
Si jamais cela intéresse quelqu'un, qu'il me le dise, je pourrais lui expliquer. Cependant, je n'ai pas encore d'algorithme de placement ^^

Sinon une carte composée de triangles est, je pense, plus utile qu'une carte avec des octogones ^^


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

Harparine a écrit :Elle est centrée : sauf que je fais le recentrage au niveau des tuiles et pas au niveau de la carte (dernière partie de la formule en X).

Sinon, fais un tuto de ton côté si tu veux, mais je pense que je finirai le mien comme je l'ai commencé, c'est à dire tout seul comme un grand, parce que l'on a pas abordé le truc exactement de la même manière !^^ (et puis j'aime bien essayer d'expliquer, c'est justement ce qui me plaît dans les tutos et dans l'enseignement).

@+ Wink

Si l'envie t'en dis jsuis entièrement pour que tu continue à nous expliquer (on évitera de dire que je capte pas une brelle aux maths xD mais vu les ptits dessins et tout ca avait l'air d'être un super tuto) ^^


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

Bonjour à tous !

J'ai testé ton turo que je trouve vraiment sympa, pour me faire une carte.
Si j'utilises des tuiles sans relief, ça se passe super bien, aucun soucis.
Par contre si je reprend tes tuiles en relief, j'ai un problème sur l'image, que je n'arrive pas à résoudre.
En fait tout les 2 rangs de tuiles, on dirait qu'elles ne se superposent pas. Comme c'est pas facile a expliquer, voici ce que ça donne :
[Image: bugvl2.jpg]

J'ai essayé de refaire l'image de la tuile de A à Z pour voir, et j'obtiens toujours le même problème.
Je pense que c'est lié aux calculs mathématiques et aux arrondis, mais j'avoue que les maths et moi ça fait 2.
En fait on dirait que l'image de gauche, au lieu de passer sous celle de droite, reste au dessus, d'ou l'effet de profondeur et d'escalier.
J'ai essayé de comprendre comment résoudre ça mais je n'y suis pas arrivé. Donc si vous avez une idée, ça m'aiderai énormement !

D'avance merci


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

je pense que c'est plutôt un problème de profondeur, il faut que tu dessines tes tuiles de haut en bas, ou bien que tu attribues une valeur de profondeur si tu peux (z-index si ce sont des div)