Interface d'un jeu web

[Aleskweb]

Bonjour,

Simple question pour avoir vos avis :

Prenons un jeu 3D utilisant three.js, serait il pertinent d'afficher l'interface du jeu par dessus avec Canvas?
Il serait possible de faire l'interface a l'aide de Divs, mais j'ai l'impression que Canvas permet beaucoup plus de possibilités ( au niveau de la gestion d'inventaire par exemple ).
Si Canvas est pertinent, quelle est la methode la plus optimisée pour connaitre l’élément sur lequel on clique?

Sinon globalement, comment marchent les interfaces de jeux?

Merci d'avance

[BAK]

Salut,

Utiliser une interface HTML est une bonne idée, et je dirais même que c'est souvent ce qui est utilisé. Pour tout ce qui est interface, avec des boutons, ou des formulaires, le HTML est fait pour. BrowserQuest utilise ce système.

Trouver l'élément sur lequel on clique dans un canvas 3D (ou 2D, c'est pareil) est compliqué", puisqu'il faut le faire soit même: à partir de la position du click sur le canvas, et connaissant les transformations et positions de tout les éléments graphiques, il faut calculer lesquels sont touchés. C'est ce qu'on appelle le Mouse Picking.

Avec le canvas, on peut dire que tu as plus de possibilités, mais c'est parce que tu doit tout recoder. Pourquoi pas utiliser l'HTML, surtout maintenant qu'on a les flexbox pour centrer nos menus ?

[Aleskweb]

Merci,

Oui, c'est sur que html est pas mal niveau interface, mais au final, on est limité a du "carré" niveau boutons.
Niveau performance, lequel des deux serait le mieux?

[Xenos]

Niveau performances, je dirai que HTML sera meilleur, s'il est bien utilisé (animations CSS et non javascript par exemple).

Du "carré niveau bouton", pas vraiment. Si tu veux des formes hyper-exotiques, tu peux parfaitement les faire en SVG (et poser un "onclick=" sur l'élément SVG utilisé). Tu peux alors faire des losanges, des cercles, des courbes, des assemblages de formes...
N'oublies pas que html est peut-être "limité à des boutons carrés", mais il est au moins accessible à tout le monde, y compris aux moteurs de recherche (qui pourront donc mieux "comprendre" le jeu et le feront remonter dans les résultats).
De plus, avec canvas, pas moyen d'utiliser CSS et donc, tu vas au devant d'énormes difficultés pour gérer des trucs comme la taille de l'écran, son ratio, les alignements, les animations...

Enfin, si tu le fais en canvas, alors tu es "dans ton monde": le jour où HTML6 sortira, tu n'auras aucun moyen d'utiliser ses fonctionnalités.

[Aleskweb]

Bon et bien, je vais suivre vos avis, on va rester sur de l'html, merci a vous !

[Ditret]

Je te conseil aussi de l'HTML ( léger et rapide avec du CSS ) et avec du javascript il est facile de rentre des bouts de html utilisables ( bouton ) avec l’événement onClick()