+- 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 : Équivalent de la viewBox SVG sur canvas (/showthread.php?tid=6662)
Équivalent de la viewBox SVG sur canvas - niahoo - 25-02-2013
Hello,
Je voudrais tester la balise canvas pour dessiner la carte de mon jeu, mais je ne sais pas comment faire la viewbox :
Mettons que ma fenêtre fasse 800x600 pixels, et que j'ai un vaisseau aux coordonnées 1500:-452, comment je fais pour dire à mon canvas de placer le coin en haut à gauche sur 1100:-852 afin d'avoir le vaisseau au milieu de l'écran ?
RE: Équivalent de la viewBox SVG sur canvas - Maks - 25-02-2013
il n'y a pas d'équivalent
pour le reste je comprends pas trop, tu peux faire un canvas très grand (1500x1500) par exemple, et utiliser translate() pour positionner ton vaisseau au milieu du canvas (principe du viewport).
RE: Équivalent de la viewBox SVG sur canvas - niahoo - 25-02-2013
Non je veux faire un petit canvas mais que ce ne soit qu'une fenêtre sur un monde plus grand.
Par exemple; si tu faisais sonic en canvas, au fur et à mesure que le hérisson avance, la fenêtre se déplace sur la droite du niveau. Et les arbres derrière ils se déplacent vers la gauche.
Sauf que je voudrais ne pas recalculer mes coordonnées tout le temps. Je voudrais dire "cet arbre est à 10:15, si je me déplace vers la droite fais le moi aller vers la gauche"
RE: Équivalent de la viewBox SVG sur canvas - Maks - 25-02-2013
Je me suis mal expliqué ^^
Tu as toujours ton "petit" canvas, <canvas width="800" height="600"></canvas>
Cependant, tu peux parfaitement mettre en cache un canvas de 1500x1500 par exemple.
function buffer() {
var buffer = document.createElement('canvas');
buffer.width = 1500;
buffer.height = 1500;
var ctx = buffer.getContext('2d');
// bon ensuite tu fais ce que tu as à faire avec ton contexte
return buffer; // tu peux retourner un canvas tel quel, petite astuce niveau perf, tu peux renvoyer une image ou un blob mais c'est pas le sujet
}
Ensuite tu utilises drawImage() sur ton canvas de 800x600 en passant en premier paramètre ton buffer et en jouant sur les 8 paramètres pour "découper" ton buffer (https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Using_images à titre Slicing) en fonction de ton viewport car je te déconseille de redessiner les 1500x1500 pixels à chaque fois sous peine de performances médiocres
Ensuite lorsque tu te déplaces, il faudra alors utiliser translate() vers la gauche lorsque tu te déplaceras vers la droite par exemple
RE: Équivalent de la viewBox SVG sur canvas - niahoo - 25-02-2013
Ok merci mais du coup c'est mort pour moi, il me faut beaucoup plus que 1500 ! Il faudra donc que je calcule les coordonnées du centre de l'écran et que je les soustraie aux coordonnées des objets à dessiner pour avoir les coordonnées de ces derniers en fonction du canvas et non plus du jeu.
En gros si notre vue est au dessus d'un point situé à 10'000;5'000, et que je veux afficher un vaisseau qui est à 10'050;5'030 ben je soustrais et donc j'affiche mon vaisseau à 50;30
Mais ça me paraît un peu relou pour gérer les décors et tout. Je vais d'abord finir mon implémentation en SVG.
RE: Équivalent de la viewBox SVG sur canvas - Maks - 25-02-2013
Oui c'est relou en effet, avec canvas tu es obligé de tout calculer relativement à un autre élément (binding des clicks par exemple). C'est une boite noire, c'est moins complet que SVG
RE: Équivalent de la viewBox SVG sur canvas - niahoo - 25-02-2013
Ouaip, je m'en servirai peut-être plus tard, au moins pour faire les arrière plans derrière le SVG.
On peut mettre du canvas en background-image ?
RE: Équivalent de la viewBox SVG sur canvas - Maks - 25-02-2013
Tu peux faire canvas.toDataURL() et récupérer une URL sous la forme data:image/png;base64,.... que tu peux mettre en background-image du coup
RE: Équivalent de la viewBox SVG sur canvas - niahoo - 25-02-2013
je vois mal changer la propriété CSS de ma div 60 fois par secondes
, si ?J'aurai qu'à positionner mon div derrière ma carte ce sera plus simple.
RE: Équivalent de la viewBox SVG sur canvas - Maks - 25-02-2013
Si elle varie souvent, ça fait beaucoup ouais
Vaut mieux jouer avec l'index en effet ^^