+- 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 : [RESOLU]Comment positionner sur une grande map (/showthread.php?tid=7821)
[RESOLU]Comment positionner sur une grande map - Air - 11-06-2017
Bonjour,
J'ai une grosse carte de 5000 pixels sur 5000. Mes cases sont sur 20 pixels sur 20 pixels. cette carte est une image jpg en background
Je ne sais pas comment me positionner à un endroit précis de la carte. Par exemple, aux coordonnées 2500- 2500
Code :
<div id="map" data-begin-x-position="198" data-begin-y-position="116" data-related-place="16930" data-map-size="5000" data-map-ratio="20" style="width: 5000px; height: 5000px;">
<div id="background"></div>
</div>J'ai essayé les liens href interne en insérant d'autres image dans ma map. cela fonctionne mais le résultat n'est pas terrible.
Auriez-vous une autre méthode ?
RE: Comment positionner sur une grande map - Xenos - 11-06-2017
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
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
RE: Comment positionner sur une grande map - Air - 13-06-2017
Merci pour l'édit du post en y ajoutant la balise qui va bien
Code :
<div id="map" data-begin-x-position="198" data-begin-y-position="116" data-related-place="16930" data-map-size="5000" data-map-ratio="20" style="width: 5000px; height: 5000px;">
<div id="background"></div>
</div>Je ne suis pas encore parvenu à un résultat satisfaisant.
Mais ça m'a permis de voir qu'il y avait des sujets similaires :
http://www.jeuweb.org/showthread.php?tid=5831
http://www.jeuweb.org/showthread.php?tid=9201
Je vais reprendre ces posts et + ta réponse, je pense pouvoir m'en sortir.
En tout cas encore merci.
RE: Comment positionner sur une grande map - Air - 13-06-2017
Je vais utiliser la fonction js window.scrollTo(x,y) dans mon body au chargement de la page. ça réponds à mon besoin.
Merci.