+- 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 : Map avec canvas ? (/showthread.php?tid=5836)
Pages :
1
2
Map avec canvas ? - PommeCassis - 03-12-2011
Bonjour,
j'aimerai avoir votre opinion sur la façon de gérer l'affichage d'une carte de type "damier".
Mon objectif est de créer une sorte de MMORPG persistant se basant sur un damier géant avec les classiques PA et compagnies.
La particularité de celui ci se porte principalement sur la dimension "RTS communautaire" et aussi sur l'environnement totalement modifiable par les joueurs. (pas la peine de vous précisez que tout plus ou moins reste à faire, les idées sont là mais les implémenter dans un jeu c'est autres chose)
J'ai pu tester la technique des autotiles de RPG Maker pour générer une map en PHP, actuellement l'affichage consiste juste à une superposition de div. Ca se passe plûtot bien malgré quelque soucis liés aux performances de symfony2 sous windows.
Seulement à la base la technique des autotiles est faites pour des maps figés et je ne sais pas encore comment résoudre certains cas de transitions d'environnement. (ex: eau peu profonde vers eau profonde)
Bon bref plûtot que de gérer l'affichage avec PHP, je me demande si je ne devrai pas utiliser du JS, HTML5 et canvas pour l'affichage. A la place j'enverrai juste les données en JSON et JS se débrouillerait pour afficher la carte correctement au sein d'un canvas.
J'imagine que dans ce cas l'affichage sera plus lent avec un chargement de la zone de jeu. Mais d'un coté ca fait un peu moins de boulot pour le serveur. Et surtout les possibilités offertes par canvas sont à des années lumières que ce qu'un bête assemblage de div peut offrir, ce qui me laisserait une grande marge d'évolution pour toutes les folies imaginables.
Mais voila actuellement je connais pas tout les avantages et inconvénients de tout cela et je suis un peu perdu. Canvas est il adapté pour manipuler plein de petites images ? Utiliser canvas pour une simple map 2D, ce ne serait pas sortir l'artillerie lourde pour tuer une mouche ? Existe t'il d'autres techniques intéressantes que les autotiles pour une carte simple modifié par les joueurs ?
Merci d'avance.
RE: Map avec canvas ? - Angelblade - 04-12-2011
A mon avis la balise canvas est tout à fait approprié à ton besoin.
Je m'en sers pour afficher des maps 2D et si ton code est bien fait ça ne demande pas trop de processeur.
En tous cas je crois que ça passe mieux que des centaines de divs.
Canvas n'est pas prévu pour manipuler plein de petites images mais il le fait très bien.
RE: Map avec canvas ? - Sephi-Chan - 04-12-2011
J'ai fais quelques tests avec Canvas et j'ai rencontré deux problèmes majeurs.
Déjà, il n'y a pas de couche interactive : le canvas est une image. Si tu veux avoir des effets au survol de certains éléments de cet image, il faut détecter toi-même les coordonnées de la souris avec ceux de l'élément survolé. Ensuite il faut redessiner l'élément survolé. Tout ça représente pas mal de travail, pour le développeur comme pour la machine.
Ensuite, le dessin peut prendre pas mal de temps si la carte est conséquente. Dans mon cas, un simple dessin de 100x100 hexagones prenait bien 5 secondes (mais je calculais les coordonnées de chaque point, puis je traçais l'hexagone). Mon but étant de dessiner sur toute la surface du navigateur, c'est pas évident. D'autant plus pour une résolution d'écran très élevé (genre 2560*1440).
RE: Map avec canvas ? - PommeCassis - 04-12-2011
Merci beaucoup pour vos réponses.
Alors effectivement le soucis du survol est plutôt gênant, afficher une simple infobulle risque d'être compliqué pour pas grand chose mais étant donné que je travaille avec des tile "carré" ça devrait être gérable (calculer si le curseur est sur un hexagone doit être coton).
Citation :Je m'en sers pour afficher des maps 2D et si ton code est bien fait ça ne demande pas trop de processeur.Problème j'ai pas vraiment l'habitude des api bas niveau, je crains que si je me lance la dedans mon code va être crade et pas du tout optimisé dans un premier temps.
En tous cas je crois que ça passe mieux que des centaines de divs.
Après recherche je suis tombé sur ce bon article (un comparatif SVG/canvas) :
http://blogs.msdn.com/b/davrous/archive/2011/05/20/introduction-aux-apis-graphiques-d-html5-svg-amp-canvas-2-4.aspx
A première vue SVG me tente plus que canvas. Faut que j’approfondisse la question.
Donc du coup j'ai une autre question : SVG est il adapté pour manipuler plein de petites images ? :langue2:
RE: Map avec canvas ? - srm - 04-12-2011
Ça dépend, plein comment ?
RE: Map avec canvas ? - PommeCassis - 04-12-2011
Je pense qu'il est clair que j'en aurai moins de 10k donc logiquement SVG s'impose. Ce qui me dérange c'est que SVG est taillé pour du vectoriel et que j'en aurai quasiment pas.
Bon le mieux est de tester, alors je pense que je vais partir sur SVG pour l'instant.
RE: Map avec canvas ? - Myrina - 04-12-2011
(04-12-2011, 06:57 PM)PommeCassis a écrit : Ce qui me dérange c'est que SVG est taillé pour du vectoriel et que j'en aurai quasiment pas.Oui mais ça gère également bien le reste, les filtres et traitements applicables sur les images sont bluffants.
Ensuite, il est facile de gérer le survol sans trop de code à écrire. J'ai réalisé récemment, en SVG inline (donc inclus dans du HTML) une carte de France où j'affiche un tooltip différent par département; un peu de JQuery (hover()) et le tour est joué. De plus, comme le fonctionnement du tooltip est dans la partie HTML, j'utilise le même tooltip sur ma carte en SVG ou sur le reste de la page.
RE: Map avec canvas ? - atra27 - 04-12-2011
c'est un sujet intéréssant ça!
J'aurais une préférence pour svg vu que les interactions sont plus simples, mais e pense que c'est plus long a executer dans le cas d'un map avec défilement horizontal et vertical...
De plus, qu'en est il du support pour les navigateurs?
RE: Map avec canvas ? - php_addict - 05-12-2011
(04-12-2011, 10:52 PM)atra27 a écrit : De plus, qu'en est il du support pour les navigateurs?
je ne sais pas si cette source est très fiable : http://www.codedread.com/svg-support.php
mais avec de vraies div html il n'y aura pas ce genre de questionnements
RE: Map avec canvas ? - Sephi-Chan - 05-12-2011
Des outils comme Raphael peuvent générer du SVG (et du VML pour IE). Ça fonctionne bien. Après, il faut tester.