Comment créer un jeu de navigateur qui marche sur téléphone

La plupart des gens essaieront votre jeu sur un téléphone : il lui faut des commandes tactiles, une mise en page adaptée à un petit écran et un son qui démarre après un toucher. Go Bananas intègre tout cela dans chaque jeu qu'il crée.

Un jeu de navigateur tourne sur téléphone sans rien installer : le joueur ouvre un lien et joue. Mais un téléphone n'est pas un petit ordinateur. Il n'y a pas de clavier, l'écran peut faire 320 pixels de large, le processeur est plus lent, et certains navigateurs refusent de jouer du son tant que le joueur n'a pas touché l'écran. Ce guide explique ce qui change sur téléphone, ce que Go Bananas fait déjà pour vous, et comment tester et améliorer votre jeu sur un vrai appareil.

Ce qui change sur téléphone

Le tactile au lieu des touches. Les flèches, la barre d'espace et la souris n'existent pas. Chaque action demande quelque chose à toucher, à faire glisser ou à balayer, et les doigts sont moins précis qu'un pointeur de souris. Un bouton facile à cliquer sur un ordinateur portable peut être trop petit pour un pouce.

Les petits écrans. Les téléphones les plus étroits font environ 320 pixels de large dans le navigateur. Les compteurs de score, barres de vie et menus qui tiennent confortablement sur un écran d'ordinateur peuvent couvrir la moitié de la zone de jeu sur un téléphone. Les joueurs tournent aussi leur téléphone à l'horizontale : le jeu doit donc s'adapter quand l'écran change de forme.

Les performances. Les téléphones ont moins de mémoire et une puce graphique plus lente que la plupart des ordinateurs. Les grandes images, les modèles 3D lourds et les scènes 3D photoréalistes se chargent lentement et peuvent faire saccader un jeu.

Le son après un toucher. Sur iPhone, une page web ne peut pas jouer de son tant que le joueur n'a pas touché l'écran au moins une fois. Un jeu qui essaie de lancer la musique avant le premier toucher reste muet.

Ce que Go Bananas intègre

Quand Go Bananas crée un jeu, l'IA a pour consigne de traiter les téléphones comme une exigence, pas comme un détail de dernière minute. Chaque nouveau jeu est censé fonctionner sur des écrans de seulement 320 pixels de large. Concrètement :

Des commandes tactiles adaptées au type de jeu. Les jeux 3D ont un joystick virtuel sur le côté gauche de l'écran, un glisser-pour-regarder à droite, et des boutons d'action d'environ 60 pixels de large. Les jeux de plateau se jouent en touchant pour sélectionner, avec des zones tactiles d'au moins 40 pixels.
Des boutons assez grands pour un pouce. Les boutons à l'écran font au moins 44 pixels, un minimum courant pour toucher confortablement.
Une interface (HUD) qui ne gêne pas. Les scores et les textes d'état restent hors de la zone de jeu, et leur taille de police s'adapte à l'écran au lieu de rester fixe.
Des graphismes nets sur les écrans haute densité. Le canvas du jeu remplit l'écran et est mis à l'échelle selon la densité de pixels du téléphone, pour ne pas paraître flou sur les écrans modernes.
Un redimensionnement quand le téléphone pivote. Les jeux réagissent quand la fenêtre change de taille : tourner le téléphone à l'horizontale réorganise la mise en page.
Des touchers là où on les attend. Les positions tactiles sont converties dans les coordonnées du jeu : un toucher tombe là où est votre doigt, même sur un canvas mis à l'échelle.
Un son qui marche sur iPhone. Chaque jeu reçoit un outil audio qui débloque le son au premier toucher et suit le bouton muet du site. Vous n'avez aucun code spécial à écrire pour ça.

Rien de tout cela n'est garanti parfait pour chaque idée : testez donc votre jeu sur un téléphone avant de le partager.

Jouer en plein écran

Dans un jeu, ouvrez le Menu du jeu et choisissez le plein écran. Sur les téléphones qui ne permettent pas à une page web de passer en plein écran, Go Bananas vous le dit et vous suggère plutôt de tourner le téléphone à l'horizontale, ce qui donne plus de place au jeu.

Ajouter Go Bananas à votre écran d'accueil

Vous pouvez ajouter Go Bananas à l'écran d'accueil de votre téléphone pour qu'il s'ouvre comme une appli, sans la barre d'adresse du navigateur. Quand le navigateur le permet, Go Bananas propose de s'installer. Sur iPhone, il affiche la marche à suivre depuis Safari, et si vous utilisez un autre navigateur sur iPhone, il vous demande d'abord d'ouvrir la page dans Safari, car sur iPhone, seul Safari peut l'ajouter à l'écran d'accueil.

Tester sur un vrai téléphone

L'aperçu téléphone d'un navigateur d'ordinateur est un bon début, mais il ne montre pas comment les commandes se ressentent sous le pouce, à quelle vitesse le jeu se charge en données mobiles, ni si le son démarre. Testez sur un vrai téléphone :

Jeux publiés : ouvrez le jeu sur Go Bananas et utilisez le QR code (« Scan to play on mobile », scannez pour jouer sur mobile). Pointez l'appareil photo de votre téléphone dessus et le jeu s'ouvre sur le téléphone.
Brouillons : un brouillon est privé, donc le QR code n'est pas proposé. Connectez-vous à votre compte sur le téléphone et ouvrez le jeu depuis vos brouillons.
Jouez quelques minutes, téléphone à la verticale puis à l'horizontale. Vérifiez que chaque bouton est facile à toucher, que rien d'important n'est caché derrière le score ou le menu, et que le son démarre après votre premier toucher.
Essayez en données mobiles comme en Wi-Fi si votre jeu utilise de grandes images ou des fichiers 3D.

Demander des modifications pour téléphone

Si quelque chose ne marche pas bien sur téléphone, décrivez le problème avec des mots simples dans le chat de modification. Précisez ce que vous avez vu et où. Par exemple :

« Sur téléphone, le bouton de saut est trop petit. Le rendre deux fois plus grand et le déplacer en bas à droite. »
« Le texte du score couvre le haut du plateau sur un petit téléphone. Le déplacer dans une fine barre au-dessus du plateau. »
« Ajouter des flèches gauche et droite à l'écran pour les téléphones, et les masquer sur ordinateur. »
« Quand je tourne mon téléphone à l'horizontale, le jeu ne remplit pas l'écran. Le redimensionner à la nouvelle taille d'écran. »
« La scène 3D est lente sur mon téléphone. Mettre moins d'arbres et des ombres plus simples sur téléphone. »

Les modifications prennent en général moins d'une minute, et chacune est enregistrée comme une nouvelle version : vous pouvez revenir en arrière si un changement empire les choses.

Garder des fichiers légers pour les téléphones

Les fichiers que vous ajoutez à un jeu ont le plus d'effet sur le temps de chargement. Quelques règles simples :

Images : utilisez des images pas plus grandes que leur taille à l'écran. Un arrière-plan affiché sur 1 080 pixels de large n'a pas besoin de faire 6 000 pixels de large. Les fichiers WebP sont en général beaucoup plus légers que les PNG ou JPEG à qualité égale. Voyez Les fichiers WebP dans les jeux de navigateur.
Modèles 3D : le GLB est le meilleur format pour les modèles 3D. Gardez un nombre de polygones et des tailles de textures modestes. Les modèles FBX importés sur Go Bananas sont convertis en GLB avec leurs textures réduites à 512 sur 512 pixels, ce qui aide sur téléphone. Voyez Les fichiers GLB dans les jeux de navigateur.
Scènes 3D photoréalistes (Gaussian splats) : elles sont impressionnantes mais lourdes sur téléphone. Go Bananas les allège à l'import, à 500 000 points pour les fichiers PLY et 300 000 splats pour les fichiers SPZ, mais elles peuvent rester lentes sur les vieux téléphones. Voyez Les fichiers PLY dans les jeux de navigateur.
Son : chaque fichier audio importé est converti en MP3 compressé, et chaque fichier est limité à 5 Mo et 120 secondes : le son pose donc rarement des problèmes de chargement.

Une liste de vérification rapide pour téléphone

Avant de partager votre jeu, vérifiez que :

Chaque action peut se faire au toucher.
Les boutons sont faciles à toucher avec un pouce.
Le score et les menus ne couvrent pas la zone de jeu sur un petit écran.
Le jeu se redimensionne quand vous tournez le téléphone.
Le son démarre après le premier toucher, et le bouton muet le coupe.
Le jeu se charge en un temps raisonnable en données mobiles.