Équivalent de la viewBox SVG sur canvas

[niahoo]

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 ?

[Maks]

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).

[niahoo]

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"

[Maks]

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...ing_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

[niahoo]

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.

[Maks]

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

[niahoo]

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 ?

[Maks]

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

[niahoo]

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.

[Maks]

Si elle varie souvent, ça fait beaucoup ouais
Vaut mieux jouer avec l'index en effet ^^