Hoora

Comment tester son jeu HTML5 sur mobile avant de le publier

Votre jeu est parfait, il tourne nickel sur votre ordinateur. Vous l'envoyez à un ami, il l'ouvre sur son téléphone, et il vous répond : « les boutons sont minuscules », « ça scrolle bizarrement », « j'ai zoomé sans faire exprès ».

C'est sûrement le moment le plus frustrant, parce qu'il arrive quand vous pensiez avoir terminé. Pourtant, une petite demi-heure de test sur mobile suffit à éviter la plupart de ces messages.

Pourquoi tester son jeu sur mobile change tout

La plupart des gens qui joueront à votre jeu seront sur téléphone. Ils joueront d'une main, avec le pouce, sur un petit écran, et parfois en plein soleil.

Le problème, c'est que les IA écrivent d'abord pour un clavier et un grand écran. Si vous ne le demandez pas explicitement, votre jeu sera pensé pour un contexte où presque personne ne jouera. C'est pour ça que notre guide sur la création d'un jeu avec l'ia insiste autant sur le format portrait. Un jeu qui n'est pas adapté au mobile, même très bon, perd une grande partie de ses joueurs dès la première seconde.

Ce que le mode responsive ne vous dira jamais sur votre jeu

Réduire la fenêtre de Chrome ou activer le mode « appareil mobile » des outils de développement, c'est utile, mais ça peut vous induire en erreur. Ce mode simule la taille d'un écran, mais pas un vrai téléphone. Il ne reproduit pas :

  • Le doigt. Un pouce est bien plus gros qu'un curseur, et il cache une partie de l'écran.
  • Les gestes du téléphone. Le double-tap qui zoome, l'appui long qui sélectionne du texte, le glissement vers le bas qui recharge la page, etc.
  • Les barres du navigateur. Elles apparaissent et disparaissent, ce qui change la hauteur réelle de l'écran.
  • L'encoche et les bords arrondis. Ils peuvent grignoter vos coins sans prévenir.
  • La vraie performance d'un téléphone qui a quatre ans.
  • Les règles sur le son. Sur mobile, le son ne démarre qu'après une action du joueur.

Retenez simplement ceci : le mode responsive sert à avoir un aperçu, mais pour vraiment tester, il vous faut un téléphone.

Comment tester son jeu sur mobile

Méthode 1 : le mode responsive du navigateur

Sur votre ordinateur, ouvrez votre jeu, activez le mode appareil mobile et vérifiez l'essentiel. Est-ce que tout tient dans l'écran en portrait, sans scroller ? Est-ce que les boutons sont visibles ? C'est un premier filtre pour repérer les grosses erreurs, rien de plus.

Méthode 2 : l'aperçu jouable à l'import

C'est la méthode la plus rapide, et vous n'avez aucun fichier à transférer. Rendez-vous sur le site hooragames.com, cliquez sur le bouton violet « Import » dans le menu de gauche et déposez votre fichier .html, qui doit faire moins de 100 Ko.

Le bouton Import dans le menu latéral du site Hoora

Un aperçu jouable s'affiche : vous voyez votre jeu tel que les joueurs le verront, avant même de le publier. Si quelque chose ne va pas, vous ne publiez pas, vous corrigez et vous réimportez. Vous pouvez aussi l'enregistrer en brouillon le temps de faire vos ajustements.

Aperçu jouable et champ de nom avant publication

Méthode 3 : le test sur un vrai téléphone

C'est le seul test qui compte vraiment. Le plus simple est d'ouvrir le jeu en ligne directement sur votre téléphone. Vous pouvez aussi transférer le fichier sur le téléphone, mais c'est souvent pénible, pour les raisons qu'on explique dans notre guide pour transformer un fichier html en jeu jouable en ligne. Si vous pouvez, testez aussi sur un autre appareil que le vôtre : le plus vieux téléphone de votre entourage est votre meilleur testeur.

La checklist de test mobile avant de publier son jeu

Passez ces points dans l'ordre, téléphone en main. Dès qu'un point bloque, notez-le : c'est une correction à demander à l'IA.

  • Tout tient à l'écran en portrait, sans scroller ni dézoomer.
  • Les zones tactiles sont assez grandes. Au moins la taille d'un pouce, et pas collées au bord.
  • Les commandes sont en bas de l'écran, pour qu'on les atteigne sans changer de main.
  • Le double-tap ne zoome pas et l'appui long ne sélectionne pas de texte.
  • Glisser vers le bas ne recharge pas la page en pleine partie. C'est l'un des bugs les plus fréquents, et l'un des plus énervants pour le joueur.
  • Le jeu supporte la rotation de l'écran, ou reste bien bloqué en portrait.
  • Rien n'est caché par l'encoche ou la barre du navigateur.
  • Le jeu reste fluide après une minute de partie.
  • Le son ne démarre pas tout seul. Il se lance au premier appui, et un bouton permet de le couper.
  • Le jeu se met en pause quand on quitte l'onglet, et reprend quand on revient.
  • Rien ne dépend du survol de la souris, qui n'existe pas sur téléphone.
  • Le texte se lit sans zoomer, score compris.

Les corrections à demander à l'IA après un test mobile

Copiez ces demandes telles quelles, une par message. Elles règlent la plupart des problèmes de la checklist :

  • « Adapte le jeu à un affichage plein écran en portrait sur téléphone, sans scroll ni zoom possible. »
  • « Agrandis les zones tactiles et place les commandes en bas de l'écran, atteignables au pouce. »
  • « Empêche le zoom au double-tap, la sélection de texte à l'appui long et le rechargement par glissement vers le bas. »
  • « Utilise la hauteur d'écran dynamique pour que l'apparition des barres du navigateur ne coupe pas le jeu. »
  • « Respecte les zones sûres de l'écran pour que rien ne soit masqué par l'encoche. »
  • « Ne démarre le son qu'après le premier appui du joueur, et ajoute un bouton pour le couper. »
  • « Mets le jeu en pause quand la page perd le focus, et reprends proprement au retour. »
  • « Optimise pour un téléphone d'entrée de gamme : réduis les effets visuels coûteux. »

Si votre jeu demande beaucoup de précision, comme un jeu de plateforme, ces réglages comptent encore plus. Notre guide pour créer un jeu de plateforme avec l'ia détaille les contrôles tactiles adaptés.

Publier son jeu HTML5 une fois testé sur mobile

Une fois la checklist validée, la publication prend moins d'une minute. Depuis l'import, ajoutez un titre et une description, puis publiez. C'est gratuit, et vos joueurs n'ont rien à installer ni de compte à créer. Le détail de chaque écran se trouve dans notre guide sur la publication de vos créations ia.

Votre jeu apparaît ensuite dans le feed, où les joueurs Hoora peuvent tomber dessus sans l'avoir cherché, sur le site comme dans l'application, disponible sur Android et iOS. Vous la trouverez aussi sur la fiche téléchargement de Clubic.

Un jeu publié sur Hoora avec ses statistiques de communauté

Vos statistiques prennent ensuite le relais du test. Si votre jeu a beaucoup de vues mais peu de likes ou de partages, c'est souvent le signe d'un problème de confort sur mobile. Repassez la checklist, corrigez, et comparez.

Questions fréquentes sur le test d'un jeu HTML5 sur mobile

  • Peut-on tester un jeu HTML5 sur mobile sans le publier ? Oui. L'aperçu jouable de l'import vous permet de jouer avant de publier, et le mode brouillon vous laisse le temps de tout ajuster.
  • Le mode responsive du navigateur suffit-il ? Non. Il vérifie la taille de l'écran, mais pas le tactile, les gestes du téléphone, le son ni la vraie performance.
  • Faut-il tester sur iPhone et sur Android ? Idéalement oui, parce que le zoom et le son ne se comportent pas tout à fait pareil. Sinon, testez au moins sur l'appareil le plus ancien que vous avez sous la main.
  • Pourquoi mon jeu est coupé en bas sur téléphone ? À cause de la barre du navigateur, qui change la hauteur de l'écran. Demandez à l'IA d'utiliser la hauteur dynamique plutôt qu'une hauteur fixe.
  • Pourquoi le son ne démarre pas sur mobile ? Les navigateurs mobiles bloquent le son automatique. Il doit se lancer à la première action du joueur.
  • Mon jeu rame sur téléphone, que faire ? Réduisez le nombre d'éléments animés en même temps et les effets visuels lourds. Demandez à l'IA une optimisation pour les téléphones d'entrée de gamme.
  • Faut-il passer par un store pour que le jeu tourne sur téléphone ? Non, le navigateur suffit. On explique pourquoi dans notre guide pour publier un jeu mobile sans app store.
  • Faut-il coder pour appliquer ces corrections ? Non, toutes les demandes plus haut sont en français. Si vous débutez, commencez par notre guide pour créer un jeu vidéo sans savoir coder.

Prenez cette demi-heure pour passer la checklist sur un vrai téléphone et corriger ce qui coince. Vous publierez ensuite un jeu qui marche aussi bien chez vos amis que chez vous.