Utilisation en français de librairie 2D JS ou pouvoir cliquer sur une image issue d'un spritesheet.

salut,

Problèmatique secondaire :
je programme en javascript en amateur et j'ai actuellement besoin de chercher l'utilisation d'une librairie 2D js, et je préfère chercher par moi-même quand je peux au lieu de poser des questions sur le forum, mais chaque fois que je fais une recherche je trouve ce que je veux apparement en français sur youtube mais quand je clique sur le lien je m'apperçois que c'est en anglais avec un sous-titrage français plus ou moins juste.
Avez-vous une méthode pour trouver sur youtube des vidéos seulement en français ?
Par exemple recement je cherchais des infos pour utiliser la librairie 2D createjs ou bien gamejs.

J'en ai trouvé sur phaser.js mais je n'arrive pas à l'utiliser meme pour juste afficher une image de fond.

Problématique principale :
En fait cette question m'est venue du fait que je cherchais à afficher des images à partir d'un spritesheet avec javascript/canvas, sans librairie 2D et j'y arrive bien mais comme je n'arrive pas à pouvoir cliquer sur ces images affichées, je recherche une librairie qui me permette de le faire, cependant je préfererais me passer d'une librairie ;)

Bonjour,

la plupart des ressources sont en « non français », il faut s'y faire !


Important : défini clairement ce que tu souhaites faire par la suite car les « Canvas Libraries  » sont nombreuses et plus ou moins intéressantes suivant ton besoin final.

Certaines n'ont pas été mise à jour depuis pas mal de temps, cela ne veut pas dire pour autant qu'elles sont à jeter.

Citation:

---

... et j'y arrive bien mais comme je n'arrive pas à pouvoir cliquer sur ces images affichées

---

La situation n'est pas des plus simples attendu qu'un canvas n'est qu'une « bitmap à plat » et que dans la plupart des cas cela sera à toi de définir ta façon de procéder en utilisant une « hit region map » ou de simple opération de recherche dans des polygones.

Salut, Merci pour ta réponse ;)

Citation:

---

la plupart des ressources sont en « non français », il faut s'y faire !

---

Oui c'est dommage, faut que je me mette à l'anglais mais j'ai du mal...

Sinon pour mon code je veux bien une ancienne librairie du moment quelle est simple et permet de faire deux choses :
- Le click sur des zones rectangles
- La rotation d'une image.

Mais pour le moment le plus prioritaire c'est le click sur une zone rectangle, et j'y arrive pas, j'ai enregistré des zones dans un tableau mais quand je clique dessus ça ne marche pas car la position souris n'est pas précise sur le canvas, j'ai essayé plusieurs codes de lecture position souris en javascript sur le canvas, et c'est pareil.
alors je cherche une méthode qui marche.

Citation:

---

car la position souris n'est pas précise sur le canvas, ...

---

dans un « système simple » il n'y a rien de plus simple :

Code:

---

1 2 3

canvas.addEventListener("click", (e) => { console.log( e.offsetX, e.offsetY); });

---

Merci beaucoup, je vais utiliser ça ;)

Sinon pour mes erreurs de pointeur souris; je viens de constater que c'était dû aux dimensions en % du div qui contient le canvas, ce qui est bizarre puisque moi je testais la position souris sur le canvas, bon pas grave maintenant j'ai ta méthode plus ma compréhension du problème, donc je mets en résolu, merci pour tout, heureusement que vous êtes là sinon on galèrerais beaucoup ;)

Citation:

---

que c'était dû aux dimensions en % du div qui contient le canvas

---

https://www.developpez.com/template/kit/kitwarning.png j'ai précisé « système simple », ce qui signifie que le <canvas> à les mêmes dimensions internes, déclarées via les attributs height et width, que celles de ses dimensions sur la page fixées par la feuille de style par exemple.

Ce qui suit ne fonctionnera pas avec la méthode fournie

Code:

---

1 2 3 4 5 6 7

<style> #canvas {   width: 800px;   height: 600px; } </style> <canvas id="canvas" width="400" height="300"></canvas>

---

Un clic dans le coin en bas à droite donnera :

Code:

---

1 2	console.log( e.offsetX, e.offsetY); //> 800 600

---

Merci de la précision, ça peut me servir.
Heureusement ma page correspond au bon cas qui fonctionne ;)
(enfin, surtout depuis que j'ai supprimé les % )