Coordonnées des points d'une case hexagonale en vue 3D iso.

[Roworll]

Dans l'exemple que j'ai donné, mon code PHP génère un fichier XML qui est mis en forme via une feuille XSL.
Le but de tout ça est de délocaliser un maximum vers le client.

Chaque hexagone est encodé comme suit

<hex type="hwo" x="-8" y="0" z="-8"  r="d0" w="a5"/>

- Type est le type de terrain
- x/y/z sont les coordonnées
- r est utilisé pour la surcouche des routes
- w est utilisé pour la surcouche des rivières

Voici la définition d'un hexagone de type hwo

<g id="hwo">

	<use xlink:href="#hex" fill="#96c864" />

	<use xlink:href="#tree" fill="#96c864" transform="translate(10 3)"/>

	<use xlink:href="#tree" fill="#96c864" transform="translate(5 5)"/>

	<use xlink:href="#tree" fill="#96c864" transform="translate(15 5)"/>

	<use xlink:href="#tree" fill="#96c864" transform="translate(10 9)"/>

</g>

Comme on peut le voir, cet hexagone se compose d'une forme de base (#hex) et de quatres éléments #tree placés à divers endroits.

Tout ceci est inclus dans la section defs pour être réutilisé facilement.

A l'affichage, mon XSL calcule les coordonnées grâce aux attributs @x/@y/@z ce qui me permet de définir les coordonnées cartésiennes attendues ($posx/$posy)

Le code pour le rendu de la case est le suivant

<!-- Création d'un groupe correctement positionné grâce au transform en utilisant les coordonnées calculées -->

<g id="h_{@x}_{@y}_{@z}" transform="translate({$posx + 180} {$posy + 210})">

	<xsl:if test="(($dx) > $view or ($dy) > $view or ($dz) > $view) ">

		<!-- Hexagone hord du champ de vision - passage au gris-->

		<xsl:attribute name="filter">url(#GrayScale)</xsl:attribute>

	</xsl:if>

	<!-- Affichage du modèle de base -->

	<use xlink:href="#{@type}"/>

	<xsl:if test="@w != ''">

		<!-- Il y a une rivière à afficher -->

		<use xlink:href="#water_{substring(@w,1,1)}" transform="rotate({substring(@w,2,1) * 60} 15 12.8)" />

	</xsl:if>

	<xsl:if test="@r != ''">

		<!-- Il y a une route à afficher -->

		<use xlink:href="#road_{substring(@r,1,1)}" transform="rotate({substring(@r,2,1) * 60} 15 13)" />

	</xsl:if>

</g>

J'ai mis à jour mon lien original pour y inclure une petite fonctionnalité additionnelle. permettant de simuler un rayon de vision.

Si l'hexagone est hors du rayon de perception, il est affiché dans une nuance de gris via l'ajout de l'attribut filter="url(#GrayScale)"

Pour obtenir l'effet, j'ai juste fait appel à un filtre, lui aussi créé dans la section defs

<filter id="GrayScale" filterUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">

	<feColorMatrix in="SourceGraphic" type="matrix"

		 values="0.3333 0.3333 0.3333 0 0

			0.3333 0.3333 0.3333 0 0 

			0.3333 0.3333 0.3333 0 0 

			0      0      0      1 0"/>

</filter>

Si tu veux regarder plus en profondeur, tu peux jeter un œil au source de la page pour voir le xml et cliquer sur ce lien pour regarder le xsl.

Attention, c'est du vieux code qui me servait uniquement à faire quelques tests. Pas toujours cohérent ni propre donc.