Salut,
je ne suis pas certain de comprendre la problématique exacte... si tu as une image de la carte à placer en background d'un élément HTML, utilise simplement "background-image: url()" et eventuellement ses dérivés (background-repeat: no-repeat; background-position: center center; background-size: 100% 100% ou cover). Et pour te placer dessus, tu fixes le ratio de ta carte (1:1), tu fixes la taille du conteneur en conséquence (même width & height, peut importe leur valeur) et tu utilises du % (top/left/right/bottom) pour te positionner dessus.
Mais si tu as une carte composée de cases d'environ 20x20 pour un total de 250*250 cases, alors mieux vaut simplement faire des éléments DOM (une table HTML si les cases sont nécessairement carrées, ou une carte SVG façon https://isometry.reinom.com ) et poser une texture dessus en arrière-plan (note que sur le SVG d'Isometry, j'ai aligné les background les uns avec les autres: on ne voit donc pas de cassure de texture à la frontière entre des cases contigües).
Le positionnement sera alors simplement la réponse à la question "sur quelle case suis-je?", dont tu as certainement la réponse en BDD (ou dans ton modèle de manière générale).
PS: et avec les @media queries et la fonction CSS calc(), tu peux sans problème fixer le ratio d'un élément HTML
J'utilise cette méthode pour des points-n-clicks que je suis en train de finaliser en cette belle-journée-qu'il-fait-si-beau-qu'on-irait-bien-dehors-mais-faut-pas-déconner-quand-même
je ne suis pas certain de comprendre la problématique exacte... si tu as une image de la carte à placer en background d'un élément HTML, utilise simplement "background-image: url()" et eventuellement ses dérivés (background-repeat: no-repeat; background-position: center center; background-size: 100% 100% ou cover). Et pour te placer dessus, tu fixes le ratio de ta carte (1:1), tu fixes la taille du conteneur en conséquence (même width & height, peut importe leur valeur) et tu utilises du % (top/left/right/bottom) pour te positionner dessus.
Mais si tu as une carte composée de cases d'environ 20x20 pour un total de 250*250 cases, alors mieux vaut simplement faire des éléments DOM (une table HTML si les cases sont nécessairement carrées, ou une carte SVG façon https://isometry.reinom.com ) et poser une texture dessus en arrière-plan (note que sur le SVG d'Isometry, j'ai aligné les background les uns avec les autres: on ne voit donc pas de cassure de texture à la frontière entre des cases contigües).
Le positionnement sera alors simplement la réponse à la question "sur quelle case suis-je?", dont tu as certainement la réponse en BDD (ou dans ton modèle de manière générale).
PS: et avec les @media queries et la fonction CSS calc(), tu peux sans problème fixer le ratio d'un élément HTML
Code :
.scene {
height: calc(100vw / (16 / 9));
width: 100vw;
}
@media (min-aspect-ratio: 16/9) {
.scene {
left: calc(50vw - (100vh * (16 / 9)) / 2);
margin: 0 auto;
height: 100vh;
width: calc(100vh * (16 / 9));
}
}J'utilise cette méthode pour des points-n-clicks que je suis en train de finaliser en cette belle-journée-qu'il-fait-si-beau-qu'on-irait-bien-dehors-mais-faut-pas-déconner-quand-même