A la recherche des bonnes formules pour positionner des hexagones

[Sephi-Chan]

Coucou ! Merci pour votre aide ! J'ai implémenté ça et j'ai le résultat que je voulais.




J'ai défini l'origine de ma carte :

Code :

const originX = map.offsetWidth/2 - tileOriginX * scale;
const originY = map.offsetHeight/2 - tileOriginY * scale;

J'ai calculé les distances A et B du diagramme de mon sauveur Thêta Tau Tau :

Code :

const distanceBetweenOriginsX = hexagonWidth * 2/3;
const distanceBetweenOriginsY = hexagonHeight;

J'ai appliqué la formulé proposée pour chaque tuile afin de déterminer son décalage :

Code :

tile.style.left = Math.round(originX + (distanceBetweenOriginsX * (x - y) * scale));
tile.style.top = Math.round(originY - (distanceBetweenOriginsY / 2 * (x + y) * scale));

J'ai ensuite dû gérer le zIndex pour afficher correctement les chevauchements. Je suis parti du principe que plus un Y était bas (vers la droite), plus son affichage était prioritaire, puis on ordonnait ensuite par X le plus bas. J'ai besoin de valeurs positives donc je transforme ma valeur de Y et X.

Code :

function assignZIndex(tiles) {
  tiles.elements.map(function(tile) {
    const scoreY = Math.round(mapValue(parseInt(tile.dataset.y), tiles.maxY, tiles.minY, 1, 100));
    const scoreX = Math.round(mapValue(parseInt(tile.dataset.x), tiles.minX, tiles.maxX, 1, 100));
    tile.style.zIndex = scoreY * 100 - scoreX;
  });
}

Merci à tous !


Pour info, ces jolis graphismes créés par Steven Colling ne coûtent qu'une dizaine d'euros !