JeuWeb - Crée ton jeu par navigateur
Drag & drop à l'intérieur d'une image - 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 : Drag & drop à l'intérieur d'une image (/showthread.php?tid=7559)

Pages : 1 2 3


RE: drag&drop à l'intérieur d'une image - Xenos - 07-01-2016

Si tu les charges toutes, je ne vois pas l'intérêt.
et 1000x1000, à mon avis, c'est pas énorme (on parle bien de pixels d'image là?).


RE: drag&drop à l'intérieur d'une image - fortz - 07-01-2016

non mais ct un exemple prenons 20000x20000 pixels, le joueur regarde le centre de la carte, je charge 1000x1000 au centre puis si il se déplace à droite ben je charge une sous-image de plus à droite et une sous-image en moins à gauche ? je ne sais pas du tout si ce que je dis est correct, n'hésite pas à me corriger ou m'expliquer Wink


RE: Drag & drop à l'intérieur d'une image - Xenos - 07-01-2016

C'est ce que je ferai (enfin, c'est ce qu'un framework/plugin existant ferait pour moi, car cela existe surement déjà si je devais implémenter ce genre de truc).


RE: Drag & drop à l'intérieur d'une image - niahoo - 07-01-2016

oui ça s'appelle LeafLet ou OpenLayers ...

En gros ça fonctionne comme ça : tu as ton image géante que tu découpes en sous-images.

Ensuite dans leaflet tu crées une couche de type image, en renseignant l'URL : http://ma-machine/tiles/{x}/{y}/{z}.png

Enfin, Leaflet va contacter le serveur pour avoir les bonnes images. Il doit être configuré pour savoir que les images sont découpés en N pixels afin de demander les coordonnées {x} et {y} correctes ({z} étant sans intérêt en 2D mais tu peux t'en servir pour implémenter des grottes par exemple).

À toi ensuite de configurer correctement et de monter les images en statique sur le serveur sur la bonne URL. Tu peux tout aussi bien procéder dynamiquement en donnant par exemple http://ma-machine/map-layer.php?x={x}&y={y}&z={z} (en fait Z doit être facultatif je pense). Comme ça, tu peux servir un fond de carte différent selon le joueur afin de gérer un brouillard de guerre ou je ne sais quoi d'autre qui ne serait pas géré en rajoutant d'autres éléments par dessus le fond de carte.


RE: Drag & drop à l'intérieur d'une image - fortz - 07-01-2016

okok, merci beaucoup pour ces informations, je vais travailler là-dessus sur la map, merci encore.

Cordialement, je réécrit sur ce sujet si j'ai des questions sur leaftlet ou j'en créer un nouveau ?


RE: Drag & drop à l'intérieur d'une image - niahoo - 08-01-2016

Bah y a surtout la Doc ! Et tu peux quand même essayer l'implémenter par toi même si tu as envie. Moi je disais ça parce que Xenos parle de librairies Smile


RE: Drag & drop à l'intérieur d'une image - Xenos - 08-01-2016

A mon avis, l'ordre de préférence dans un code est
Natif > JS lib > JS perso

D'où le fait que je suggérais une lib (mai c'est pas une obligation; disons qu'elle a plus de chances de bien faire qu'un code perso, et que le natif a plus de chances de bien faire que la lib) Wink

C'est intéressant de faire soi-même, au moins pour un prototype.