MANETTE VIRTUELLE (HTML5)

🇫🇷 Forum français (French Forums) Discussions générales
#1

Bonjour,

Voici un projet qui permet d’avoir une manette virtuelle tactile sur son application HTML5, et qui s’utilise à travers les évènements de votre scène. Le projet est commenté.
freetalent.fr/gd/samples/virtualpad.zip

Il suffit d’ajouter aux sources de votre projet le script vpad.js, ainsi que l’évènement javascript dans votre scène. Des variables globales seront automatiquement ajoutées à votre application et pourront être tester depuis les évènements de votre scène.

Les variables :

  • vpad_opacity : entre 0.0 (non visible) et 1.0 (par défaut, totalement visible). 0.5 = 50% de l’opacité
  • vpad_A_Button : 0 (caché) ou 1 (Visible)
  • vpad_B_Button : 0 (caché) ou 1 (Visible)
  • vpad_C_Button : 0 (caché) ou 1 (Visible)
  • vpad_A_Button_state : 0 (non pressé) ou 1 (pressé)
  • vpad_B_Button_state : 0 (non pressé) ou 1 (pressé)
  • vpad_C_Button_state : 0 (non pressé) ou 1 (pressé)
  • vpad_UP : 0 (non pressé) ou 1 (pressé)
  • vpad_LEFT : 0 (non pressé) ou 1 (pressé)
  • vpad_DOWN : 0 (non pressé) ou 1 (pressé)
  • vpad_RIGHT : 0 (non pressé) ou 1 (pressé)

La manette propose jusqu’à 3 boutons (A, B et C) qui peuvent être affichés ou non (selon vos besoins). Vous pouvez également paramétrer l’opacité de la manette.

Freetalent.

#2

Super boulot (pour cet exemple et les autres diffusés !), je ne suis juste pas sûr de l’emplacement où tu postes. Je verrais ça plus sur le wiki voir peut-être carrément intégré à Gdevelop !

#3

Bonjour Kink,

Oui, je dois avoué que je ne suis pas sûr moi-même de l’emplacement. J’espère ne pas avoir mit “le brin” dans le forum :slight_smile:

Freetalent.

#4

Non non je pense pas qu’il y ait mort d’hommes ! La plus value des posts compense largement le préjudice :stuck_out_tongue:

Non perso j’aurais juste vu ça plus dans la section “vos créations et ressources”, ou directement sur le wiki (qui est ouvert à tous du moment qu’on créé un compte) !

Sur la manette virtuelle, étant au travail je ne peux tester, et mes projets sont en mode natifs… Mais dans l’optique d’un développement HTML5 à venir (portage de projet natif), j’avoue qu’un joystick serait pas mal du tout pour un platformer, d’où l’idée même d’en faire une extension pour le mode html5…

Je ne sais pas ce qu’il en est mais un truc pas mal en mobile, c’est les “sticks analogiques”, là je pense que tu as juste fait des boutons pour les directions cardinales, mais souvent on se fait avoir sur mobile car on ne sent pas les boutons sous les doigts… une zone tactile alogique généralement permet de s’affranchir du problème, c’est en tout cas ce que je constate à l’expérience : j’aime bcp jouer sur mobile via des émulateurs à de vieux titres supernes/megadrive, et les boutons h/b/d/g sont vraiment une plaie pour jouer… En face sur des jeux android natif, les sticks analogiques ne crééent pas cette frustration.

En gros j’ai toujours été surpris que ce ne soit pas proposé de base en extension/examples car nombreux débutant ont du abandonner au stade “zut comment je fais une manette virtuelle sur un platformer”.

Admin edit:
Si vous cherchez le support des manettes suivez ce lien pour savoir comment l’ajouter à vôtre jeu.
Puis celui ci pour voir les mise à jours.

image
image996×477 30.9 KB

#5

En fait, il est possible, pour l’avoir testé, d’utiliser un stick analogique en HTML5. Il y a des API javascript qui détectent les manettes branchées et permettent de les gérer.

Je sais que cela fonctionne pour Firefox. D’ailleurs, voici un jeu HTML5 que j’ai développé il y a 2 ans dans lequel on peut utiliser un manette USB (il est jouable également au clavier et sur mobile (en glissant de doigt)).
baptiste-bideaux.com/demos/laby3d/index.html

Après, sur les périphériques mobiles, souvent les manettes blutooth sont reconnues comme un clavier et il faut les paramétrer comme telles pour les utiliser.

Freetalent.

#6

Je parlais d’un stick analogique en touchscreen : c’est à dire une zone circulaire qui fonctionnerait comme un stick analogique. Je pense pas que ça compliqué à faire dans l’absolue, mais vu que j’arrive déjà pas avancer sur mes projets en natif ces temps-ci…

#7

OK, en fait c’est déjà un peu le principe sauf que je ne fais que détecter 4 positions. Il faudrait juste que je donne une valeur verticale et horizontale plus précise comprise par exemple entre -1.0 et 1.0. Donc, 2 variables que l’on pourrait utiliser dans les évènements.

Mais pour quel genre de jeu avons nous besoin de ce type de précisions ?

Freetalent.

#8

Jeu de plateforme ! Aussi parce que les écrans sont limités en termes de multitouches : si tu as deja 2 points en interactions pour faire un mouvement diagonal, et que tu dois en plus sauter tirer avec 2 autres boutons… ça flanche ! Si tu ne suis qu’un point de pression pour le pouce, c’est tjrs d’économiser…

je t’assure test des émulateurs Supernes par exemple, c’est l’enfer dans certains jeux ! Le mieux pour moi c’est la synergie avec ce qu’on a sur les gamepad en terme de valeur , en X de -100 à 100 et en y pareil, après si les gens veulent en plus que le muvement soit précis/progressif c’est un autre problème et ça code facilement aussi avec un multiplicateur lié à la vitesse max de l’extension palteforme… Bon je divague, mais je pense que franchement ça a de quoi devenir une extension officielle sur la plateforme html5.

#9

Tu peux appuyer sur les boutons A et B en même temps, et dans un évènement faire une action en rapport avec l’état de ces 2 boutons.

De même, le contrôle de directions peut gérer (à ce jour) haut, bas, gauche, droite, mais également les diagonales. En fait, les directions sont définies en fonction de la position de la boule rouge à l’intérieur du cercle. Si la boule est en haut à gauche, les variables vpad_UP et vpad_LEFT seront à 1. Et ce contrôle ne nécessite qu’un point de pression (celui du pouce).

On peut donc déjà prévoir plein de combinaisons possibles.

OK, je vais ajouter 2 autres variables pour les valeurs horizontales et diagonales (comprises entre -100 et 100)…

Virtual Joystick
#10

L’archive a été mise à jour. 2 nouvelles variables globales :

  • vpad_HORIZONTAL : 100(gauche) à -100 (droite)
  • vpad_VERTICAL : 100(haut) à -100 (bas)

Freetalent.

#11

Freetalent, beau boulot en effet pour ces modifications en JS. Leur place irait bien sur le wiki je pense, en faisant une petite page ou un tuto qui les recense et explique rapidement comment les utiliser :slight_smile:

Comme ça tout le monde pourra connaitre leur existence en listant simplement les tutoriels sur le wiki :smiley:

#12

Je l’ai PM sur le sujet, ainsi que pour ses autres contributions qui peuvent être très intéressantes :slight_smile:

Au Passage 4ian j’ai ajouté quelques pages il y a un moment, à priori tu ne les as pas ajouter aux pages d’index, on ne les trouve que par la recherche…

La page en question que j’ai en tête, il me semble qu’il y en a une autre mais je ne sais plus de quoi ça traitait (environ 3 mois) : http://wiki.compilgames.net/doku.php/liste_de_logiciels_utiles (FR/EN mais la EN est plus complète, j’espère d’autres contributeurs à défaut d’avoir finalisé moi meme).

Admin edit:
Si vous cherchez le support des manettes suivez ce lien pour savoir comment l’ajouter à vôtre jeu.
Puis celui ci pour voir les mise à jours.

image
image996×477 30.9 KB

#13