JeuWeb - Crée ton jeu par navigateur
Module de carte héxagonale 2D - 3D Iso avec relief - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Module de carte héxagonale 2D - 3D Iso avec relief (/showthread.php?tid=4044)

Pages : 1 2 3 4 5 6 7


RE: Module de carte héxagonale 2D - 3D Iso avec relief - comg - 06-06-2009

C'est gentil mais je vais me limiter au Php, et lorsque je parlais du JS, c'était surtout pour gerer l'edition de la carte (je clique sur l'outil, je clique sur la case...)
Mon affichage se fait en div en position absolute.

Merci de ton interet.

Bon débutant en POO, j'ai un premier problème qui se pose.
Pour ma carte 2D, je veux generer les tuiles en GD.

Donc dans ma class carte j'ai fait une methode (private) _Hexagone().

Comment dois je faire l'appel à cette methode dans la methode afficher_carte ?

Ne marche pas...

Merci d'avance (je ne suis pas sur d'être clair :p)

PS : Je suis aussi débutant en GD x-)

Edit : Je vais vous poster tout le code plutot...
Code PHP :
<?php 
private function _Hexagone($n)
{
$points = array( $n/2 , 0,
3*$n/2 , 0,
2*$n , $n*sin(deg2rad(60)),
3*$n/2 , 2*$n*sin(deg2rad(60)),
$n/2 , 2*$n*sin(deg2rad(60)),
0 , $n*sin(deg2rad(60)));

header ("Content-type: image/png");
$tailleX = 2*$n;
$tailleY = sin(deg2rad(60))*2*$n;
$image = imagecreate($tailleX,$tailleY);
$couleur = imagecolorallocate($image, 255, 255, 255);
$noir = imagecolorallocate($image, 0, 0, 0);
ImagePolygon ($image, $points, 6, $noir);

return
imagepng($image);
}

function
afficherCarte($x_debut,$x_taille,$y_debut,$y_taille,$n)
{
$x_fin = $x_debut + $x_taille;
$y_fin = $y_debut + $y_taille;

$aff = '<div style="position: absolute; margin: 100px;">';
for(
$x=$x_debut;$x<$x_fin;$x++)
{
for(
$y=$y_debut;$y<$y_fin;$y++)
{
$aff .= $this->creerCase($x,$y,$n);
}
}
$aff .= '</div>';
return
$aff;
}

private function
creerCase($x,$y,$n)
{
$posX = $x*1.5*$n;
$posY = $y*sin(deg2rad(60))*2*$n + ($x%2)*sin(deg2rad(60))*$n;

return
'<div style="width:'. 2*$n.'px; height:' . sin(deg2rad(60))*2*$n . 'px;
position:absolute; top:'
.$posY.'px;left:'.$posX.'px;
background-image: url("'
. $this->_Hexagone($n) .'");
border:1px solid black;
">'
.$x.':'.$y.'</div>';
}



RE: Module de carte héxagonale 2D - 3D Iso avec relief - Shao - 06-06-2009

Je pense que pour ce module rien ne l'empêche de faire les deux types de rendu (en Flash et en JS) afin de satisfaire tout le monde :p
Bon c'est sûr que ça prendra plus de temps, mais au moins son outil sera assez complet, à lui de décider ce qu'il veut dans un premier temps. Wink
Je veux bien répondre aussi pour tout ce qui concerne Flex si jamais ça t'intéresse. Smile


RE: Module de carte héxagonale 2D - 3D Iso avec relief - comg - 06-06-2009

Faut voir, je ne me suis jamais penché sur le Flex.

De toute manière, j'espere pouvoir vous presenter mon module et qu'on y rajoute eventuellement des methode (dont par exemple une generation de la carte en flex :p)


RE: Module de carte héxagonale 2D - 3D Iso avec relief - OncleJames - 06-06-2009

Peut tu mettre le code d'appel ainsi que le message d'erreur ou ce qu'il se passe quand tu l'appel ?


RE: Module de carte héxagonale 2D - 3D Iso avec relief - comg - 06-06-2009

Y'a pas d'erreur ou quoi, c'est juste qu'il m'affiche UN hexagone et s'tout :p
Bon de toute façon c'est pas viable de bosser avec GD pour ce que je veux faire, donc on va oublier, je vais me faire des images (putain de sinus)
Bon pour me structurer dans ma tête, liste des méthodes publiques :

- loadCarte($id)
- saveCarte($id)
- newCarte($nom,$tailleX,$tailleY)
- afficherCarte2D($x_centre,$x_taille,$y_centre,$y_taille,$zoom=1,$brouillard=0,$perception=0)
- afficherCarte3D($x_centre,$x_taille,$y_centre,$y_taille,$zoom=1,$brouillard=0,$perception=0,$angle=0)
- setTypeCase($x,$y,$type)
- setTextureCase($x,$y,$texture)
- setAltitudeCase($x,$y,$altitude)

Comment fonctionneront les cases sans texture, sans altitude définie ?
- On prend la case x,y
- On évalue l'altitude/texture des cases adjacentes et on adapte en fonction.
Bordel... Les formules en sinus de Harparine sont super, mais inexploitable en PHP. Les images de 86,34 pixel il connait pas x)


RE: Module de carte héxagonale 2D - 3D Iso avec relief - comg - 06-06-2009

[Image: carte.jpg]

Voici ce que donne mes premiers essais avec séparation de la texture et de la case (altitude)

Je n'en suis qu'à géré 2 altitudes et 2 textures, mais peut être comprendrez vous mieux mon idée ainsi Wink
NB : Cela ne se voit peut être pas bien avec seulement 2 textures, mais en fait les cases d'altitude 1 utilise une case (contour noir) avec un gris-transparent de remplissage (assombrissant la texture en dessous donc)
NB2 : J'arrive aussi à gerer plusieur niveau de zoom, cependant la texture (en background-image) ne s'adapte pas :/


RE: Module de carte héxagonale 2D - 3D Iso avec relief - comg - 06-06-2009

Hop : Et un premier essai (texture, forme et map area)
>> http://kgoyon.free.fr/map


RE: Module de carte héxagonale 2D - 3D Iso avec relief - OncleJames - 06-06-2009

Je comprend pas très bien l'altitude, pourquoi ne pas passer avec des tuiles qui ont une hauteur.

Pour l'altitude tu enlèves Y pixel sur le top, la on voit pas trop que c'est en altitude :non:


RE: Module de carte héxagonale 2D - 3D Iso avec relief - comg - 07-06-2009

Eih ! C'est qu'une première étape ! La c'est une carte 2D pure !
Surtout qu'en faite, dans la version "3D", ce sera vraiment une tuile a part et non un decalage de tuile...
C'est pour ça Smile


RE: Module de carte héxagonale 2D - 3D Iso avec relief - comg - 07-06-2009

Et voici le premier essai avec les raccords de relief.
(A savoir que j'ai pris le parti, lorsque la case est adjacente à des reliefs "disjoints" d'afficher une case "plate")

[Image: map2.tif]
Si on ne comprend pas bien : Je n'ai fait que mettre des altitudes de 1 aux cases 04,05,06,12,15,16,22,25,30, 32,33,34. L'algorithme a ensuite automatiquement adapté les cases adjacentes au relief.
La liste des "hexas" gabarits :
[Image: hexas.tif]
Nommé de la façon suivante : hexa-[n]-[d]

n : nombre de cases adjacentes d'altitude 1
d : directions des cases adjacentes ayant une altitude de 1 (nommés suivant les points cardinaux N,NE,SE,S,SO,NO)
NB : La génération des "raccords" leur affecte une altitude "moyenne" entre 0 et 1.
Le personnage ne pourra se déplacer que vers des zone ayant une différence d'altitude avec lui inférieur à 1, pour empecher qu'il travers les "falaises"

NB2 : On peut "forcer" le relief d'une case en lui affectant un type precis de gabarit hexa.
Avec des contours ajoutés aux gabarits, et apres avoir enlever les cases "inesthétiques"
[Image: map3.tif]

Votre avis m'importe beaucoup ! SVP :p
Bon désolé je flood de grosse image mais c'est pour rendre des rendus sympas.
Donc voici le premier test avec texture !
[Image: map4.tif]