# Laissez la disposition en portrait soutenir la décision principale du jeu

> Créez un jeu axé d'abord sur le portrait autour d'un terrain de jeu clair, d'un statut lisible et de fenêtres d'affichage changeantes avant d'ajouter du contenu ou la prise en charge du paysage.

- URL: https://oneshotgems.ai/fr/topics/portrait-mobile-game-design
- Catégorie: Pour les développeurs de jeux
- Type: Guide
- Mis à jour le: 5 octobre 2026

Un jeu en mode portrait ne consiste pas à comprimer une scène horizontale dans un rectangle vertical. Déterminez ce que le joueur doit voir et faire dans les prochaines secondes, puis disposez ces éléments pour qu’ils restent visibles ensemble. Testez une situation de jeu dans la zone d’affichage la plus étroite prise en charge avant de créer un long niveau.

## Réservez un terrain de jeu lisible

Dessinez trois zones sur l’écran : l’action, les informations permanentes et les indications temporaires. Réservez en priorité le centre à la mécanique de jeu. Placez le score, les vies et les informations de pause là où un coup d’œil suffit, sans masquer les dangers ni les objectifs. Dans un jeu de plateforme vertical, gardez la prochaine zone d’atterrissage visible au-dessus du personnage. Dans un puzzle de mots, laissez assez de largeur pour l’indice et la rangée de lettres active, sans les encombrer de panneaux superposés.

Utilisez la largeur de la fenêtre d'affichage plutôt que la résolution estimée du combiné. MDN explique comment l'élément méta viewport indique à un navigateur mobile d'utiliser la largeur de l'appareil pour sa mise en page. Vérifiez le terrain de jeu séparément : une page correctement configurée peut toujours contenir un canevas ou un panneau qui prend une taille fixe.

## Choisissez comment le jeu s'adapte

Décidez si le monde se réorganise, si la caméra suit l’action ou si l’espace inutilisé forme des marges. La réorganisation convient lorsque les règles autorisent un nombre variable de colonnes ; une caméra convient à un monde plus grand que l’écran ; l’ajout de bandes préserve le terrain de jeu lorsque son rapport largeur/hauteur doit rester fixe. Évitez d’étirer les personnages ou de déplacer les objectifs simplement pour remplir chaque pixel.

Vérifiez l’interface utilisateur du système et les encoches avant d’épingler les commandes sur un bord. Les conseils de mise en page d'Apple décrivent les zones sûres et recommandent de garder les éléments importants à l'écart des fonctionnalités matérielles ; pour Android, testez les ratios de téléphone et de tablette séparément si les deux sont des cibles. Un jeu en mode portrait uniquement devrait toujours gérer un joueur faisant tourner l'appareil avec élégance, avec une politique de mise en page claire plutôt qu'une scène en demi-écran cassée.

## Réviser un tour complet

Exécutez le didacticiel, un moment chargé et l'écran de fin sur une largeur de téléphone étroite et une largeur d'appareil plus grande. À chaque étape, demandez si le joueur peut voir simultanément l'objectif, la menace immédiate et l'état actuel. Corrigez le découpage et la hiérarchie avant d’ajouter des étapes.

## Questions

**Un jeu en portrait devrait-il également prendre en charge le paysage ?** Seulement si le game design en profite. Une décision portrait uniquement est valide, mais fournit une mise en page utilisable lorsque l'appareil tourne plutôt que de s'appuyer sur un verrouillage d'orientation particulier.

**Le HUD doit-il toujours rester en haut ?** Non. Placez les informations là où elles restent visibles sans détourner l’attention de la mécanique de jeu. Testez pendant l’action, avec des éléments superposés et sur l’écran de fin : le meilleur emplacement dépend de l’aire de jeu.

## Suivez votre curiosité

- [Développement de jeux mobiles : choisissez d’abord votre cible](https://oneshotgems.ai/fr/topics/mobile-game-development): Planifiez un jeu pour téléphones, comparez les versions de navigateur et natives, et choisissez un premier flux de travail pratique avant d'ajouter des systèmes spécifiques aux mobiles.
- [Créer des mises en page adaptatives pour les jeux web](https://oneshotgems.ai/fr/topics/responsive-game-layouts): Adaptez une surface de jeu à son conteneur sans lier l'état de simulation aux dimensions de l'écran et testez la disposition dans des fenêtres changeantes.
- [Gérer les changements d’orientation des jeux web](https://oneshotgems.ai/fr/topics/game-orientation-changes): Gardez le jeu lisible lorsqu'un appareil tourne en recalculant la disposition et le mappage des entrées sans traiter l'orientation comme un redémarrage du jeu.
- [Concevoir des retours de jeu qui expliquent chaque action](https://oneshotgems.ai/fr/topics/game-feedback-design): Les retours du jeu doivent montrer ce qui a changé, pourquoi et ce que le joueur peut faire ensuite, sans masquer la zone de jeu.

## Pour aller plus loin

- [Élément méta de la fenêtre d'affichage MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport)
- [Directives de l'interface humaine Apple : mise en page](https://developer.apple.com/design/human-interface-guidelines/layout)
- [Directives de conception de jeux Android](https://developer.android.com/games/design/overview?hl=en)

---
Page canonique: https://oneshotgems.ai/fr/topics/portrait-mobile-game-design