+- 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 : coloration automatique de zone avec forme exotique? (/showthread.php?tid=6055)
Pages :
1
2
coloration automatique de zone avec forme exotique? - Argorate - 27-03-2012
Bonjour,
j'aimerais mettre en place une map réunissant les zones de mon jeu, mais avec des formes un peu aléatoire (en tout cas pas quelques chose de carré ou de rectangulaire), et remplir ces zone de la couleur de l'équipe qui contrôle la zone.
Du coup la solution qui apparait c'est de faire des images avec la couleur que je souhaite qui aurait la même forme que la zone, pour pouvoir superposer les deux, mais ayant un impératif de 5 couleurs différente, ça fait donc 5 images de la même zone pour chaque zone... ça fait beaucoup au final...
Donc avez-vous une meilleure solution?
PS: je n'utilise pas SVG, donc pas la peine de me parler de cette solution.
RE: coloration automatique de zone avec forme exotique? - Myrina - 27-03-2012
(27-03-2012, 06:36 PM)Argorate a écrit : PS: je n'utilise pas SVG, donc pas la peine de me parler de cette solution.Dommage...
Pourquoi s'en priver?
RE: coloration automatique de zone avec forme exotique? - Argorate - 28-03-2012
Trop lourd, je veux une technique simple et rapide.
RE: coloration automatique de zone avec forme exotique? - Roworll - 28-03-2012
Trop lourd ?
En quoi estimes-tu que c'est trop lourd ?
Si j'ai bien compris, ta technique actuelle te demande d'avoir pour chaque zone, 5 images (donc structure de base rectangulaire) représentant un territoire de forme exotique. J'imagine que tu dois positionner ces images au poil près pour avoir un rendu correcte. De plus, leur forme rectangulaire doit sacrément limiter toute interaction liée au survol de zone (mouseover).
En SVG, le mouseover ne pose pas de problème et le changement de couleur d'une zone se résumerait au changement d'un seul attribut, accessible via JS.
Si le SVG en tant que tel te pose des problèmes, une librairie comme RaphaelJS peut t'offrir d'autres alternatives.
RE: coloration automatique de zone avec forme exotique? - niahoo - 28-03-2012
C'est sur, 5 images fois le nombre de zones, c'est une solution légère. Allez, tu t'essaies au troll c'est ça ?
RE: coloration automatique de zone avec forme exotique? - Argorate - 29-03-2012
Je n'ai jamais dit que c'était pas lourd, tout le contraire, c'est même pour ça que je demande une autre solution.
Roworll :
http://raphaeljs.com/ ça fait joli, mais s'il faut décrire les zones a la main avec toutes les coordonnées des points dans le code, j'ai pas fini ^^ Comment définit-on les formes avec cet outil?
Car "ma" méthode utilise les <map> et du coup aucun problème de onmouseover, je définis les coordonnées en plaçant les points sur l'image (ça crée les coordonnées correspondant à la forme tout seul du coup...), le seul truc chiant c'est l'histoire des différentes couleurs qui oblige plusieurs images.
Après, pour le placement des images, oui c'est au pixel près, mais c'est pas un souci, puisque toutes les images font la même taille (avec du transparent pour combler) et qu'elles se superposent. (comme des calques sous photoshop en fait).
RE: coloration automatique de zone avec forme exotique? - niahoo - 29-03-2012
ben si tu crées te images à la main tu peux créer les formes de base sur inkscape aussi. ensuite c'est chiant à nettoyer les svg inkscape (faut déjà penser à les enregistrer en "SVG classique").
Sinon tu peux choper une libraire qui te fera ça avec du canvas mais tu n'auras pas forcément à toucher au canvas si tu ne veux pas.
RE: coloration automatique de zone avec forme exotique? - Roworll - 30-03-2012
(29-03-2012, 07:09 PM)Argorate a écrit : http://raphaeljs.com/ ça fait joli, mais s'il faut décrire les zones a la main avec toutes les coordonnées des points dans le code, j'ai pas fini ^^ Comment définit-on les formes avec cet outil?
Car "ma" méthode utilise les <map> et du coup aucun problème de onmouseover, je définis les coordonnées en plaçant les points sur l'image (ça crée les coordonnées correspondant à la forme tout seul du coup...), le seul truc chiant c'est l'histoire des différentes couleurs qui oblige plusieurs images.
J'imagine que ta balise MAP utilise l'attribut Poly pour faire une zone bien tordue.
Tu dois donc avoir une succession de coordonnées à l'intérieur au format X1, Y1, X2, Y2, X3, Y3, ...
Convertir ça en chemin (path) pour SVG ou RaphaelJS devrait être super simple.
Pour faire court, il suffit d'utiliser l'attribut path avec une syntaxe proche de path="MX1 Y1 LX2 Y2 LX3 Y3 ... Z"
Le M indique à quelle coordonnée commence ton dessin
Le L demande à tracer une ligne vers les coordonnées sélectionnées
Le Z indique que le dessin est fermé
La conversion n'est vraiment pas compliquée et permet une intégration hyper rapide dans RaphaelJS. De cette manière, tu éviteras de mettre le doigt dans le SVG pure, ce qui semble te rebuter.
Maintenant, si tu veux dessiner tes propres formes, tu peux toujours utiliser SVG-Edit qui fonctionne avec un simple navigateur.
Le code généré est assez propre et facilement réutilisable.
A part utiliser SVG/RaphaelJS ou Canvas, je ne vois pas d'autre alternative à ton problème.
RE: coloration automatique de zone avec forme exotique? - Argorate - 02-04-2012
En effet, ma méthode semble utilisé le principe comme ici: http://www.vigicrues.gouv.fr/
le truc c'est que grâce au logiciel frontpage (pack office), je n'ai pas a calculer les coordonnées, je trace ma forme "bizarre" point par point de manière graphique et ça donne les bonnes coordonnée tout seul coté code.
Faut que je compare avec ton SVG-edit.
merci !
RE: coloration automatique de zone avec forme exotique? - niahoo - 02-04-2012
Ok donc tu fais ton level design avec frontpage !