JeuWeb - Crée ton jeu par navigateur
Centrer son canvas sur le joueur - Version imprimable

+- 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 : Centrer son canvas sur le joueur (/showthread.php?tid=4977)



Centrer son canvas sur le joueur - Kassak - 11-06-2013

Hello !

Je suis en train de faire mumuse avec les canvas, et j'ai un début de map que vous pouvez apercevoir ici : http://8*8.1*9*1.1*6*1.2*3*5/dontdie/web/app_dev.php/carte <= SUPPRIMER LES * ... Smile

Donc, mon player à une position sur la map, X et Y, chaque tuile à une position également en X et Y. J'ai une fonction centerMap() qui se lance une fois au début, et après chaque move() de mon player.

Je suppose que je dois modifier les 2 propriétés de mon canvas regX et regY pour centrer la map, et là je coince.

Je ne comprends pas vraiment l'algo, comment à partir de la position du joueur et de la taille de mes tuiles je peux centrer dynamiquement ma map ? Zavez un exemple ? Une idée ?

Merci !


RE: Centrer son canvas sur le joueur - BAK - 11-06-2013

Salut,

Plutôt que d'utiliser la position de ton player en case, tu peut récupérer les coordonnées véritable en X/Y (dans player.content si je ne me trompe pas).
A partir de ça, pour une map centrée, la formule est:


this.regX = player.content.x - (this.getStage().canvas.width / 2) + (largeur_du_player /2);
this.regY = player.content.y - (this.getStage().canvas.heigth / 2) + (hauteur_du_player /2);

Attention, dans ton code commenté tu utilise l'opérateur +=, donc les effets se cumulent.

Note: j'ai testé rapidement avec Chrome, ça à l'air de bien marcher. Mais si les valeurs de player.content.x et player.content.y ne sont pas encore définies dans certains cas (j'ai juste survolé ton code), tu devrais pouvoir calculer la valeur en copiant le code d'assignation de updatePos().


RE: Centrer son canvas sur le joueur - Kassak - 11-06-2013

Nice !

Ça marche nickel Smile

Ben merci à toi, c'est sympa ! C'est le genre de truc que je galère à faire à chaque fois...


RE: Centrer son canvas sur le joueur - Cawrotte - 01-07-2013

Et après tu peux rajouter 4 if pour caler la map dans un coin du canvas si le joueur est au bord :

Code :
if(playerTop <= map.height / 2)      map.position.top = 0;
if(playerRight <= map.width / 2)     map.position.left = (gameWidth - mapWidth);
if(playerBottom <= map.height / 2) map.position.top = (gameHeight - mapHeight);
if(playerLeft <= map.width / 2)       map.position.left = 0;