[Résolu] Map 2D vue de dessus

[Soleo]

Yo, bonjour, bien le bonsoir.

Cette fois ci, je viens avec un tout autre problème.
Pour nous mettre dans l'ambiance il s'agit d'un jeu de combat RPG, avec gestion des distances et portées.
J'ai besoin d'afficher une mini map représentant le terrain, les obstacles et les joueurs. (Ces derniers n'étant que représentés par un point)

Les joueurs auront des simples coordonnées X-Y, le problème est que je n'utilise pas de cases, les distances sont dans de assez conséquentes échelles (Un déplacement simple = 25 +-, un tir à l'arc a une portée de 400... etc).
Je compte donc pouvoir afficher tous les pixels d'une map qui devrait faire 1000 x 1000 (Ou au moins une zone scrollable) avec bien entendu la possibilité de zoom dezoom, car le visuel en lui même ne fera que 30% x 20% des dimensions de la page.

Les joueurs sont censés pouvoir choisir l'emplacement de leur prochain déplacement, CaD un vecteur qui apparaît entre le point du joueur et la souris, et dont la taille se limite au déplacement maximum que peut effectuer ce joueur. (C'est un jeu en tour par tour sans rechargement de page complête via pubnub)

Le problème étant que je n'ai aucune idée de quelles technologies / frameworks pourraient mener à bien cet affichage.

J'aurais par défaut voulu faire des divs ayant une taille de 1px par 1px mais je suppose qu'il y a beaaaaucoup mieux.
Si j'arrive à ce résultat par exemple ce serait parfait : http://puu.sh/bag3C/f2faa15b88.png (Les lignes noires sur les joueurs étant les directions, et les autres des obstacles.)
Auriez vous des suggestions, idées ?

Je vous remercie d'avance !

[Thêta Tau Tau]

J'aurais par défaut voulu faire des divs ayant une taille de 1px par 1px mais je suppose qu'il y a beaaaaucoup mieux.

Canvas.

[Soleo]

En effet, après avoir regardé il semble que Canvas puisse répondre à tous mes besoins héhé.

Merci beaucoup ! Je pars sur la route de l'apprentissage (à nouveau).

[Xenos]

Si tu as une image de fond qui représente le décor, je conseillerai plutôt SVG, qui te permettra de dessiner des cercles (pour les portées), des points (pour les personnages), des flèches (pour les directions) et de leur donner des couleurs (pour les équipes) sans difficulté.
De plus, ces éléments feront partis du DOM et seront donc manipulables par CSS également (et pas uniquement par javascript).
Enfin, il sera possible d'y poser des liens (balises <a>) qui permettront au joueur d'interagir avec d'autres éléments dessinés sur la carte (et ainsi, de ne pas se prendre la tête à se dire "c'est onclick? ontouch? ontap? onspeak? on...?).

SVG me semble parfaitement adapté pour une mini-map dont le fond serait une image du serveur (ou dont le fond est dessiné en canvas car là canvas a parfaitement sa place ).

[Soleo]

Canvas a me semble t'il une fonction pour charger une image n'est-ce pas ? Et de ce que j'ai compris SVG est utilisé avec le format XML, simplement cette minimap ne sert "qu'aux" déplacement et à vérifier ce que vois le joueur (en fonction de l'angle de son personnage). Je ne sais pas du tout si j'aurais besoin de plus que ce que j'ai vu sur Canvas, après je n'ai pas encore jeté d'oeil à SVG réellement, j'y ferais certainement un tour si je bloque avec l'autre.