# Faire du redimensionnement une transition de mise en page maîtrisée

> Gardez les coordonnées du jeu, les dimensions du canevas et la mise en page synchronisées lorsque le joueur redimensionne la fenêtre ou change l’orientation.

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

Un jeu dans le navigateur peut être redimensionné lorsque la fenêtre change, qu’un appareil pivote, que les commandes du navigateur apparaissent ou que la mise en page change. Si le canevas change de taille sans mise à jour de son tampon interne et du mappage des entrées, l’image peut s’étirer et les clics tomber ailleurs. Traitez la taille comme une donnée d’entrée pour la mise en page et le rendu, puis mettez à jour ensemble les systèmes qui en dépendent. Un redimensionnement ne devrait ni réinitialiser la progression ni déclencher des calculs coûteux à répétition pour chaque petite fluctuation de mesure.

## Observez l’élément réellement utilisé par le jeu

Utilisez ResizeObserver lorsque le conteneur du canevas peut changer indépendamment de la fenêtre, par exemple dans un panneau divisé ou une page dont les commandes évoluent. Lisez la taille de son contenu, ne mettez à jour les dimensions du tampon interne du canevas que si elles ont changé, et recalculez l’échelle entre les coordonnées CSS et celles du monde du jeu.

Évitez de réécrire sans condition des dimensions qui affectent la mise en page dans l’élément observé lui-même. MDN indique qu’un redimensionnement depuis une fonction de rappel de l’observateur peut créer une boucle ; planifiez soigneusement le travail et ignorez l’écriture si la taille attendue n’a pas changé. Séparez la zone d’affichage du jeu du système de coordonnées fixe du monde si la conception doit ajouter des bandes sans déformer l’image.

## Testez ensemble la mise en page et les commandes

Aux formats étroit, large et après rotation, cliquez ou appuyez sur une cible près de chaque bord du canevas et vérifiez que le jeu détecte la même position dans le monde que celle de l’élément visible. Redimensionnez pendant un niveau et vérifiez que la stratégie de caméra ou d’ajout de bandes s’applique sans déplacement inattendu des positions.

Observez le conteneur au lieu de supposer que window.innerWidth détecte tous les changements de mise en page. Si le clavier mobile ou l’interface du navigateur modifie l’espace disponible, décidez si la zone de jeu doit rétrécir, garder sa taille ou défiler. Testez ce choix avec les commandes visibles, car elles peuvent occuper l’espace dont le jeu a besoin.

## Questions

**Chaque redimensionnement doit-il modifier la taille du monde du jeu ?** Non. De nombreux jeux conservent des coordonnées stables et ne changent que la caméra ou ajoutent des bandes. Redimensionner le monde lui-même peut modifier la difficulté, les collisions et la composition des niveaux.

**Quand préférer ResizeObserver à un gestionnaire de redimensionnement de la fenêtre ?** Utilisez ResizeObserver lorsque la taille de l’élément concerné peut changer en fonction de son conteneur ou de la mise en page environnante, même si les dimensions globales de la fenêtre restent identiques.

## Suivez votre curiosité

- [Régler la résolution du canevas pour obtenir des graphismes de jeu nets](https://oneshotgems.ai/fr/topics/canvas-pixel-density): Équilibrez la résolution du support de toile, le rapport de pixels de l'appareil, l'utilisation de la mémoire et le coût de dessin lorsqu'un jeu doit être clair sur tous les écrans.
- [Trouver les goulots d’étranglement du rendu Canvas](https://oneshotgems.ai/fr/topics/canvas-game-performance): Profilez un jeu 2D sur Canvas avec des scènes reproductibles et ne réduisez les opérations de dessin coûteuses qu’après avoir mesuré où le temps est passé.

## Pour aller plus loin

- [MDN : ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)

---
Page canonique: https://oneshotgems.ai/fr/topics/game-resize-handling