[canvas] Utiliser la fonction rotate() sur une image

Version imprimable

24/12/2021, 00h20
Programir

[canvas] Utiliser la fonction rotate() sur une image

Salut

j'ai regardé sur plusieurs lieux pour trouver comment faire tourner une image autour de son centre avec canvas de HTML5, mais c'est toujours la meme méthode de faire tourner le canvas.
Moi c'est l'image que je veux tourner pas la surface, car le canvas reçoit aussi d'autres images qui ne doivent pas etre retournées.

j'avais vu une fonction sur gamecreator qui tournait des images (rotate) sans toucher au reste, c'est dommage que canvas le propose pas.

Le html et javascript ne proposent que le css et le canvas pour faire tourner une image, hors si on touche au canvas ça se répercute sur les autres images qui sont sur le canvas, c'est en plus dommage de gérer un canvas juste pour une image, imaginons que j'ai plusieurs munitions qui tournent dans le ciel, je vais pas faire un canvas pour chacune, la gestion de rotate par le canvas c'est pas pratique.
Et le CSS ça fait pas vraiment programmation jeu, ça fait programmation site internet, et c'est pas fluide en plus.
C'est dommage, y a des langages de programmation qui proposent la rotation d'images, et une grande pub est faite pour le canvas mais il est pas pratique pour les jeux.
Je me demande comment font les jeux androids pour avoir plein d'effets de rotation ?
24/12/2021, 16h01
Dave Hiock

\ô/
l'Api canvas te permet d'avoir une ardoise comme terrain de jeu, une image bitmap en quelque sorte ni plus ni moins.

Citation:

Moi c'est l'image que je veux tourner pas la surface,

Lorsque tu dessines une image et que tu souhaites la redessiner plus loin ou en rotation, il te faut effacer la zone et redessiner ton image.

Peut-être devrais-tu montrer le code que tu as pour que quelqu'un puisse t'aider.

Lecture : Efficient animation for web games
26/12/2021, 03h05
Programir

Salut, merci de ta réponse, pour le moment je n'ai pas de code ayant besoin de la rotation mais je souhaite en faire un, ce sera un bonhomme vu de dessus comme dans GTA2 et qu'on pourrait tourner selon l'angle qu'on veut, pas seulement les 8 angles, mais sur 360 degrés.
Mais il serait affiché sur la même surface que d'autres personnages, alors c'est ce qui m'embette avec la rotation du canvas, c'est qu'elle vise tout le canvas, alors que je voudrais seulement tourner l'image du perso principal.

Merci pour le lien ;=
27/12/2021, 21h25
Archimède

Salut, avec contexte.save() et contexte.restore(), tu dois pouvoir le faire...Après, il faut effacer entre chaque frame avec contexte.clearRect(..... ) pour une animation.
28/12/2021, 11h37
Programir

Je te remercie, je ferais surement avec ça, canvas c'est pas la facilité :/

Après, canvas, c'est plutôt simple et efficace seulement c'est du bitmap avec les inconvénients associés...
J'avais tenté hier un essai de rotation d'une image au centre avec un trait en déplacement horizontal simultanément...
(Si ça peut t'aider pour te montrer que c'est possible) Après j'utilise Snap SVG et peu les méthodes de canvas...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>rotation composée</title>
<style>
  canvas { 
    border: 1px solid black; 
  }
</style>
</head>
<body>
 
<canvas id="cancan" width="1000" height="500"></canvas>
 
<script>
let ctx = document.getElementById("cancan").getContext("2d");
let image = new Image();
image.src = "image.png";
 
const dgTord= Math.PI/180;
const ctxw=ctx.canvas.width, ctxh=ctx.canvas.height;
const posx = ctxw / 2, posy = ctxh / 2;
const pw=6;
 
const cx=64, cy=64;//centre de ton image
var angle=0,dx=0;// angle de rotation en degrés et déplacement dx horizontal d'un trait
 
 
function newframe() {
  draw();
  rotation();
}
 
function rotation() {
   angle += dgTord;
   dx++;
}
 
function draw() {
  ctx.clearRect(0,0,ctxw,ctxh );
  ctx.lineWidth=pw;
  ctx.beginPath();
  ctx.moveTo(20+dx,posy-pw/2);
  ctx.lineTo(dx,posy-pw/2);
  ctx.stroke();
  ctx.save();
  ctx.translate(posx, posy);
  ctx.rotate(angle);
  ctx.translate(-cx,-cy);
  ctx.drawImage(image,0,0);
  ctx.restore();
}
 
setInterval(newframe, 1000/60); 
</script>
 
</body>
 
</html>

Sinon pour le faire en vectoriel, voici un lien intéressant :
https://darchevillepatrick.info/svg/svg20.php

28/12/2021, 17h10
NoSmoking

Bonjour,

Citation:

Envoyé par Archimède

setInterval(newframe, 1000/60);

:nono: il existe window.requestAnimationFrame(callback) qui est plus adapté.

Citation:

Envoyé par Programir

je ferais surement avec ça, canvas c'est pas la facilité

...c'est vrai avec tout ce que l'on connais mal.
Il existe également des bibliothèques, qui sont bien faites, pour t'aider à réaliser tes animations.

Il te faut savoir que ce n'est pas forcément la seule solution car si j'en crois ce que tu souhaites faire, rotation d'une image sur un fond, tu peux tout aussi bien l'envisager en CSS pur avec ou sans keyframe.
28/12/2021, 17h58
Archimède

Citation:

Bonjour,
:nono: il existe window.requestAnimationFrame(callback) qui est plus adapté.

Oui, mais avec les machines de guerre que l'on a maintenant, setInterval() ne provoque pas de saccades dans la plupart des cas...Au moins les intervalles entre chaque frame sont constants. Après 30 fps suffisent largement...
Mais window.requestAnimationFrame(newframe) est plus recommandé pour les diesels...
28/12/2021, 18h54
Programir

Oh merci, bien sûr que ça va m'aider ;)

requestframe je l'ai essayé en premier mais vraiment j'ai été déçu par mes animations mais dés que je l'ai remplacé par interval tout s'est réglé ;)

En plus un des avantages supposé de request d'aprés ce que j'ai lu, c'est le fait que le navigateur stoppe l'anim quand on est passe à un autre onglet, mais je me suis apperçu qu'interval fait de même.

EDIT :

Archimède : Ton code fonctionne bien ;)
il rotate autour du coin haut gauche de l'image mais c'est normal et c'est un truc que je peux régler je crois en donnant un nouveau centre à l'image avec les commentaires que tu as mis dedans ;)
28/12/2021, 20h29
Archimède

En effet, il faut adapter Cx et Cy en fonction de la taille de ton image. Pour moi, c'était une image de 128 sur 128 pixels, d'où mes valeurs fixées à 64...
29/12/2021, 12h30
NoSmoking

Citation:

Envoyé par Archimède

Oui, mais avec les machines de guerre que l'on a maintenant, setInterval() ne provoque pas de saccades dans la plupart des cas...

• Les méthodes setTimeout, setIntervalet requestAnimationFrame n’utilisent pas la même gestion des piles d’appel.

• setTimeout ne met à jour l'écran que lorsqu'il le « souhaite/peut », et non lorsque le contexte le permet.

• requestAnimationFrame est synchronisées avec la GPU et monopolise moins de CPU.
Le navigateur optimise l’affichage de l’animation fonction de la configuration, c’est lui qui fixe la fréquence de rafraichissement.

Citation:

Au moins les intervalles entre chaque frame sont constants. Après 30 fps suffisent largement...

• Que cela soit la méthode, setTimeout, setInterval ou encore requestAnimationFrame on n’a absolument aucune garantie que les frames se succèdent à intervalle régulier ou toutes les xms.

Citation:

Mais window.requestAnimationFrame(newframe) est plus recommandé pour les diesels...

• Non toutes les littératures, récentes, que tu pourras trouver te dirons qu'il est préférable d'utiliser requestAnimationFrame.

Citation:

Envoyé par Programir

requestframe je l'ai essayé en premier mais vraiment j'ai été déçu par mes animations mais dés que je l'ai remplacé par interval tout s'est réglé ;)

... sur ce coup j'aimerais voir le code que tu as utilisé car au pire cela ne peut pas être pire :mrgreen:

Salut, je n'ai pas dit que tu avais tort mais l'objectif était de combiner une rotation du context avec une autre animation donc je ne me suis pas polarisé sur la manière d'afficher les frames qui me paraissait secondaire vis à vis de la question...
Et puis, je ne vois pas une différence fondamentale entre les deux propositions en terme de fluidité :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>rotation composée</title>
<style>
  canvas { 
    border: 1px solid black; 
  }
</style>
</head>
<body>
 
<canvas id="cancan" width="1000" height="500"></canvas>
 
<script>
let ctx = document.getElementById("cancan").getContext("2d");
let image = new Image();
image.src = "image.png";
 
const dgTord= Math.PI/180;
const ctxw=ctx.canvas.width, ctxh=ctx.canvas.height;
const posx = ctxw / 2, posy = ctxh / 2;
const pw=6;
 
const cx=64, cy=64;//centre de ton image
var angle=0,dx=0;// angle de rotation en degrés et déplacement dx horizontal d'un trait
 
 
function newframe() {
  draw();
  rotation();
  window.requestAnimationFrame(newframe);
}
 
function rotation() {
   angle += dgTord;
   dx++;
}
 
function draw() {
  ctx.clearRect(0,0,ctxw,ctxh );
  ctx.save();
  ctx.translate(posx, posy);
  ctx.rotate(angle);
  ctx.translate(-cx,-cy);
  ctx.drawImage(image,0,0);
  ctx.restore();
  ctx.lineWidth=pw;
  ctx.beginPath();
  ctx.moveTo(20+dx,posy-pw/2);
  ctx.lineTo(dx,posy-pw/2);
  ctx.stroke();
}
//setInterval(newframe,1000/60);
window.requestAnimationFrame(newframe); 
</script>
 
</body>
 
</html>

29/12/2021, 13h42
Archimède

Citation:

Envoyé par Programir

requestframe je l'ai essayé en premier mais vraiment j'ai été déçu par mes animations mais dés que je l'ai remplacé par interval tout s'est réglé ;)

En effet comme le dit NoSmoking, il ne faut pas exagérer tout de même, c'est du plus ou à peu près l'équivalent mais pas du moins... ;)
30/12/2021, 16h58
Programir
Pour ceux qui seraient interessés, voici une formule pour calculer x et y pour une rotation voulue, en déplaçant chaque pixel de l'image.

Rotation d'une image par pixel :
Code:

1 2 3 4 5 6 pxX = pxX + width/2 pxY = pxY + height/2 newPxX = imgX + width/2 + pxX.cos(a) - pxY.sin(a) newPxY = imgY + height/2 + pxX.sin(a) + pxY.cos(a)
Ce code pourrait être mis dans le dossier jeux 2D peut-être.

Ce code est issu d'une aide d'un matheu à un programmeur sur un forum d'entraide.