Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

Résolutions multiples

Le problème des résolutions multiples

Les développeurs ont souvent du mal à comprendre comment bien supporter plusieurs résolutions dans leurs jeux. Pour jeu sur consoles et pc cela est plus ou moins simple, car la plupart des formats d'écrans sont en 16:9 et les résolutions d'écrans standard (720p, 1080p, 1440p, 4K, ...).

Pour les jeux mobiles, au début, c'était facile. Pendant de nombreuses années, l'iPhone et l'iPad ont utilisé la même résolution. Lorsque Retina a été implémenté, ils ont juste doublé la densité de pixels ; la plupart des développeurs ont dû fournir des assets en résolution par défaut et double.

Aujourd'hui, cela n'est plus le cas, comme il y a pleins de différentes tailles d'écrans, densités et résolutions. Des tailles non-conventionnelles sont devenu plus populaire, tel que les écrans ultra-larges.

Pour les jeux 3D il n'y a pas vraiment besoin de supporter différentes résolutions (d'un point de vue esthétique). La geometry 3D va juste remplir l'écran grâce au champ de vision (FOV), peu importe la résolution. Dans notre cas la principale raison de vouloir cela est une question de performance (rendre en plus petite résolution pour améliorer les images par seconde).

Pour la 2D et les interfaces c'est différent, vu que les ressources graphiques doivent être créés en utilisant un nombre spécifique de pixel dans des logiciels comme Photoshop, GIMP ou Krita.

Comme les agencements, les ratios d'aspect, les résolutions, et la densité des pixels peuvent beaucoup changer, il n'est plus possible de concevoir des interfaces utilisateur pour chaque écran spécifique. Une autre méthode doit être utilisée.

Une taille qui convient pour tous

L'approche la plus courante est d'utiliser une seule résolution base et de l'adapter ensuite à tout le reste. Cette résolution correspond à la façon dont la plupart des joueurs sont censés jouer au jeu (compte tenu de leur matériel). Pour le mobile, Google a des stats utiles en ligne, et pour le bureau, Steam a aussi.

A titre d'exemple, Steam montre que la résolution d'affichage primaire la plus courante est 1920×1080, donc une approche sensée consiste à développer un jeu pour cette résolution, puis à gérer la mise à l'échelle pour différentes tailles et différents rapports d'aspect.

Godot fournit plusieurs outils utiles pour le faire facilement.

Voir aussi

You can see how Godot's support for multiple resolutions works in action using the Multiple Resolutions and Aspect Ratios demo project.

Taille de base

Une taille de base pour la fenêtre peut être spécifiée dans les Paramètres du projet sous Display → Window.

../../_images/screenres.png

Cependant, cela fait n'est pas complètement évident ; le moteur ne tentera pas de faire passer le moniteur à cette résolution. Considérez plutôt ce paramètre comme la "taille de la conception", c'est-à-dire la taille de la zone avec laquelle vous travaillez dans l'éditeur. Ce paramètre correspond directement à la taille du rectangle bleu dans l'éditeur 2D.

Il est souvent nécessaire de prendre en charge des appareils dont les tailles d'écran et de fenêtre sont différentes de cette taille de base. Godot offre plusieurs façons de contrôler comment le viewport sera redimensionnée et étirée à différentes tailles d'écran.

To configure the stretch base size at runtime from a script, use the get_tree().root.content_scale_size property (see Window.content_scale_size). Changing this value can indirectly change the size of 2D elements. However, to provide an user-accessible scaling option, using Stretch Scale is recommended as it's easier to adjust.

Note

Godot suit une approche moderne des résolutions multiples. Le moteur ne changera jamais la résolution du moniteur par lui-même. Bien que le changement de la résolution du moniteur soit l'approche la plus efficace, c'est aussi la moins fiable car elle peut laisser le moniteur bloqué sur une résolution basse si le jeu plante. C'est particulièrement fréquent sous MacOS ou Linux qui ne gèrent pas les changements de résolution aussi bien que Windows.

La modification de la résolution de l'écran supprime également tout contrôle du développeur de jeu sur le filtrage et le rapport d'étirement hauteur/largeur, qui peuvent être importants pour garantir un affichage correct pour les jeux en pixel art.

De plus, le changement de résolution du moniteur rend alt-tabbing dans et hors d’un jeu beaucoup plus lent, puisque le moniteur doit changer de résolution à chaque fois.

Redimensionner

There are several types of devices, with several types of screens, which in turn have different pixel density and resolutions. Handling all of them can be a lot of work, so Godot tries to make the developer's life a little easier. The Viewport node has several functions to handle resizing, and the root node of the scene tree is always a viewport (scenes loaded are instanced as a child of it, and it can always be accessed by calling get_tree().root or get_node("/root")).

In any case, while changing the root Viewport params is probably the most flexible way to deal with the problem, it can be a lot of work, code and guessing, so Godot provides a set of parameters in the project settings to handle multiple resolutions.

Parametre d'étirement

Les paramètres d'étirement sont situés dans les paramètres du projet et fournissent plusieurs options :

../../_images/stretchsettings.png

Mode d’étirement

Le paramètre Mode d'étirement définit comment la taille de base est étirée pour s'adapter à la résolution de la fenêtre ou de l'écran.

../../_images/stretch.png

Les animations ci-dessous utilisent une "taille de base" de seulement 16×9 pixels pour démontrer l'effet des différents modes d'étirement. Un seul sprite, également de taille 16×9 pixels, couvre la totalité du viewport, et une diagonale Line2D est ajoutée par-dessus :

../../_images/stretch_demo_scene.png
  • Stretch Mode = Disabled (par défaut) : Il n'y a pas d'étirement. Une unité dans la scène correspond à un pixel sur l'écran. Dans ce mode, le réglage Stretch Aspect n'a aucun effet.

    ../../_images/stretch_disabled_expand.gif
  • Stretch Mode = Canvas Items: In this mode, the base size specified in width and height in the project settings is stretched to cover the whole screen (taking the Stretch Aspect setting into account). This means that everything is rendered directly at the target resolution. 3D is unaffected, while in 2D, there is no longer a 1:1 correspondence between sprite pixels and screen pixels, which may result in scaling artifacts.

    ../../_images/stretch_2d_expand.gif
  • Stretch Mode = Viewport : La mise à l'échelle du Viewport signifie que la taille de la racine Viewport est définie précisément à la taille de base spécifiée dans la section Display des paramètres du projet. La scène est d'abord rendue dans ce viewport. Enfin, ce viewport est mise à l'échelle pour s'adapter à l'écran (en tenant compte du paramètre Stretch Aspect).

    ../../_images/stretch_viewport_expand.gif

To configure the stretch mode at runtime from a script, use the get_tree().root.content_scale_mode property (see Window.content_scale_mode and the ContentScaleMode enum).

Stretch Aspect

Le deuxième réglage est le stretch aspect. Notez que cela ne prend effet que si Stretch Mode est réglé sur autre chose que Désactivé.

Dans les animations ci-dessous, vous remarquerez des zones grises et noires. Les zones noires sont ajoutées par le moteur et ne peuvent pas être dessinées. Les zones grises font partie de votre scène, et peuvent être dessinées. Les zones grises correspondent à la région en dehors du cadre bleu que vous voyez dans l'éditeur 2D.

  • Stretch Aspect = Ignore : Ignore le ratio d'aspect lorsque vous étirez l'écran. Cela signifie que la résolution d'origine sera étirée pour remplir exactement l'écran, même s'il est plus large ou plus étroit. Cela peut entraîner un étirement non uniforme : les objets semblent plus larges ou plus hauts que prévu.

    ../../_images/stretch_viewport_ignore.gif
  • Stretch Aspect = Keep : Conservez le ratio d'aspect lorsque vous étirez l'écran. Cela signifie que le viewport conserve sa taille d'origine quelle que soit la résolution de l'écran, et des barres noires seront ajoutées en haut/en bas de l'écran ("letterboxing") ou sur les côtés ("pillarboxing").

    C'est une bonne option si vous connaissez à l'avance le ratio d'aspect de vos appareils cibles ou si vous ne voulez pas gérer des rapports d'aspect différents.

    ../../_images/stretch_viewport_keep.gif
  • Stretch Aspect = Keep Width : Conserve le ratio d'aspect lorsque vous étirez l'écran. Si l'écran est plus large que la taille de base, des barres noires sont ajoutées à gauche et à droite (pillarboxing). Mais si l'écran est plus grand que la résolution de base, la fenêtre sera agrandie dans le sens vertical (et plus de contenu sera visible vers le bas). Vous pouvez aussi considérer cela comme une "Expansion Verticale".

    C'est généralement la meilleure option pour créer des interfaces graphiques ou des HUDs à l'échelle, comme cela certaines commandes peuvent être ancrées au bas (Taille et ancrages).

    ../../_images/stretch_viewport_keep_width.gif
  • Stretch Aspect = Keep Height : Conserve le ratio d'aspect lorsque vous étirez l'écran. Si l'écran est plus grand que la taille de base, des barres noires sont ajoutées en haut et en bas (letterboxing). Mais si l'écran est plus large que la résolution de base, le viewport sera agrandi dans le sens horizontal (et plus de contenu sera visible à droite). Vous pouvez aussi considérer cela comme une "Expansion Horizontale".

    C'est généralement la meilleure option pour les jeux 2D qui défilent horizontalement (comme les runners ou les platformers).

    ../../_images/stretch_viewport_keep_height.gif
  • Stretch Aspect = Expand : Conserve le ratio d'aspect lorsque vous étirez l'écran, mais ne conserve ni la largeur ni la hauteur de base. En fonction du ratio d'aspect de l'écran, le viewport sera plus grand dans le sens horizontal (si l'écran est plus large que la taille de base) ou dans le sens vertical (si l'écran est plus haut que la taille d'origine).

    ../../_images/stretch_viewport_expand.gif

Astuce

Pour prendre en charge les modes portrait et paysage avec un facteur d'échelle similaire déterminé automatiquement, définissez la résolution de base de votre projet comme étant un carré (rapport d'aspect 1:1) plutôt qu'un rectangle. Par exemple, si vous souhaitez concevoir une résolution de base de 1280×720 mais que vous souhaitez prendre en charge les modes portrait et paysage, utilisez 720×720 comme taille de fenêtre de base du projet dans les paramètres du projet.

Pour permettre à l'utilisateur de choisir l'orientation de son écran au moment de l'exécution, n'oubliez pas de définir Display > Window > Handheld > Orientation sur sensor.

To configure the stretch aspect at runtime from a script, use the get_tree().root.content_scale_aspect property (see Window.content_scale_aspect and the ContentScaleAspect enum).

Stretch Scale

The Scale setting allows you to add an extra scaling factor on top of what the Stretch options above already provide. The default value of 1.0 means that no additional scaling occurs.

For example, if you set Scale to 2.0 and leave Stretch Mode on Disabled, each unit in your scene will correspond to 2×2 pixels on the screen. This is a good way to provide scaling options for non-game applications.

If Stretch Mode is set to canvas_items, 2D elements will be scaled relative to the base window size, then multiplied by the Scale setting. This can be exposed to players to allow them to adjust the automatically determined scale to their liking, for better accessibility.

If Stretch Mode is set to viewport, the viewport's resolution is divided by Scale. This makes pixels look larger and reduces rendering resolution (with a given window size), which can improve performance.

To configure the stretch scale at runtime from a script, use the get_tree().root.content_scale_factor property (see Window.content_scale_factor).

Stretch Scale Mode

Since Godot 4.2, the Stretch Scale Mode setting allows you to constrain the automatically determined scale factor (as well as the manually specified Stretch Scale setting) to integer values. By default, this setting is set to fractional, which allows any scale factor to be applied (including fractional values such as 2.5). When set to integer, the value is rounded down to the nearest integer. For example, instead of using a scale factor of 2.5, it would be rounded down to 2.0. This is useful to prevent distortion when displaying pixel art.

Compare this pixel art which is displayed with the viewport stretch mode, with the stretch scale mode set to fractional:

Fractional scaling example (incorrect pixel art appearance)

Checkerboard doesn't look "even". Line widths in the logo and text varies wildly.

This pixel art is also displayed with the viewport stretch mode, but the stretch scale mode is set to integer this time:

Integer scaling example (correct pixel art appearance)

Checkerboard looks perfectly even. Line widths are consistent.

For example, if your viewport base size is 640×360 and the window size is 1366×768:

  • When using fractional, the viewport is displayed at a resolution of 1366×768 (scale factor is roughly 2.133×). The entire window space is used. Each pixel in the viewport corresponds to 2.133×2.133 pixels in the displayed area. However, since displays can only display "whole" pixels, this will lead to uneven pixel scaling which results in incorrect appearance of pixel art.

  • When using integer, the viewport is displayed at a resolution of 1280×720 (scale factor is 2×). The remaining space is filled with black bars on all four sides, so that each pixel in the viewport corresponds to 2×2 pixels in the displayed area.

This setting is effective with any stretch mode. However, when using the disabled stretch mode, it will only affect the Stretch Scale setting by rounding it down to the nearest integer value. This can be used for 3D games that have a pixel art UI, so that the visible area in the 3D viewport doesn't reduce in size (which occurs when using canvas_items or viewport stretch mode with the integer scale mode).

Scénarios d'utilisation courante

Les paramètres suivants sont recommandés pour bien prendre en charge les résolutions et les rapports d'aspect multiples.

Jeu d'ordinateur de bureau

Art non pixelisé :

  • Set the base window width to 1920 and window height to 1080. If you have a display smaller than 1920×1080, set Window Width Override and Window Height Override to lower values to make the window smaller when the project starts.

  • Si vous ciblez principalement les appareils haut de gamme, réglez la largeur de la fenêtre de base sur 3840 et sa hauteur sur 2160. Cela vous permet de fournir des ressources 2D de plus haute résolution, ce qui donne des visuels plus nets au prix d'une utilisation plus importante de la mémoire et de la taille des fichiers. Notez que cela rendra les textures non-mipmapées granuleuses sur les appareils à basse résolution, assurez-vous donc de suivre les instructions décrites dans Réduction de l'aliasing lors du sous-échantillonnage.

  • Set the stretch mode to canvas_items.

  • Définissez l'aspect de l'étirement sur expand. Cela permet de prendre en charge plusieurs rapports d'aspect et de mieux utiliser les grands écrans de smartphones (tels que les rapports d'aspect 18:9 ou 19:9).

  • Configurez les ancrages des nœuds de Control pour qu'ils s'accrochent aux bons coins en utilisant le menu Layout.

Pixel art :

  • Set the base window size to the viewport size you intend to use. Most pixel art games use viewport sizes between 256×224 and 640×480. 640×360 is a good baseline, as it scales to 1280×720, 1920×1080, 2560×1440, and 3840×2160 without any black bars when using integer scaling. Higher viewport sizes will require using higher resolution artwork, unless you intend to show more of the game world at a given time.

  • Définissez le mode d'étirement sur viewport.

  • Définissez l'aspect de l'étirement sur keep pour appliquer un seul rapport d'aspect (avec des barres noires). Vous pouvez également définir l'aspect de l'étirement sur expand pour prendre en charge plusieurs rapports d'aspect.

  • Si vous utilisez l'aspect d'étirement expand, configurez les ancrages des nœuds Control pour qu'ils s'accrochent aux bons coins à l'aide du menu Layout.

  • Set the stretch scale mode to integer. This prevents uneven pixel scaling from occurring, which makes pixel art not display as intended.

Note

The viewport stretch mode provides low-resolution rendering that is then stretched to the final window size. If you are OK with sprites being able to move or rotate in "sub-pixel" positions or wish to have a high resolution 3D viewport, you should use the canvas_items stretch mode instead of the viewport stretch mode.

Jeu mobile en mode paysage

Godot est configuré pour utiliser le mode paysage par défaut. Cela signifie que vous n'avez pas besoin de modifier le paramètre du projet relatif à l'orientation de l'affichage.

  • Définissez la largeur de la fenêtre de base à 1280 et la hauteur de la fenêtre à 720.

  • Si vous ciblez principalement les appareils haut de gamme, réglez la largeur de la fenêtre de base sur 1920 et sa hauteur sur 1080. Cela vous permet de fournir des ressources 2D de plus haute résolution, ce qui donne des visuels plus nets, mais au prix d'une utilisation de la mémoire et d'une taille de fichier plus élevées. De nombreux appareils ont des écrans de résolution encore plus élevée (1440p), mais la différence avec le 1080p est à peine visible étant donné la petite taille des écrans de smartphones. Notez que cela rendra les textures non-mipmapées granuleuses sur les appareils à basse résolution, assurez-vous donc de suivre les instructions décrites dans Réduction de l'aliasing lors du sous-échantillonnage.

  • Set the stretch mode to canvas_items.

  • Définissez l'aspect de l'étirement sur expand. Cela permet de prendre en charge plusieurs rapports d'aspect et de mieux utiliser les grands écrans de smartphones (tels que les rapports d'aspect 18:9 ou 19:9).

  • Configurez les ancrages des nœuds de Control pour qu'ils s'accrochent aux bons coins en utilisant le menu Layout.

Astuce

To better support tablets and foldable phones (which frequently feature displays with aspect ratios close to 4:3), consider using a base resolution that has a 4:3 aspect ratio while following the rest of the instructions here. For instance, you can set the base window width to 1280 and the base window height to 960.

Jeu mobile en mode portrait

  • Set the base window width to 720 and window height to 1280.

  • Si vous ciblez principalement les appareils haut de gamme, définissez la largeur de la fenêtre de base sur 1080 et sa hauteur sur 1920. Cela vous permet de fournir des ressources 2D de plus haute résolution, ce qui donne des visuels plus nets, mais au prix d'une utilisation de la mémoire et d'une taille de fichier plus élevées. De nombreux appareils ont des écrans de résolution encore plus élevée (1440p), mais la différence avec le 1080p est à peine visible étant donné la petite taille des écrans de smartphones. Notez que cela rendra les textures non-mipmapées granuleuses sur les appareils à basse résolution, assurez-vous donc de suivre les instructions décrites dans Réduction de l'aliasing lors du sous-échantillonnage.

  • Définissez Display > Window > Handheld > Orientation sur portrait.

  • Set the stretch mode to canvas_items.

  • Définissez l'aspect de l'étirement sur expand. Cela permet de prendre en charge plusieurs rapports d'aspect et de mieux utiliser les grands écrans de smartphones (tels que les rapports d'aspect 18:9 ou 19:9).

  • Configurez les ancrages des nœuds de Control pour qu'ils s'accrochent aux bons coins en utilisant le menu Layout.

Astuce

To better support tablets and foldable phones (which frequently feature displays with aspect ratios close to 4:3), consider using a base resolution that has a 3:4 aspect ratio while following the rest of the instructions here. For instance, you can set the base window width to 960 and the base window height to 1280.

Application n'étant pas des jeux vidéos

  • Définissez la largeur et la hauteur de la fenêtre de base sur la plus petite taille de fenêtre que vous avez l'intention de cibler. Ce n'est pas obligatoire, mais cela vous permet de concevoir votre interface utilisateur en tenant compte des petites tailles de fenêtre.

  • Gardez le mode d'étirement à sa valeur par défaut, disabled.

  • Conservez l'aspect d'étirement à sa valeur par défaut, ignore (sa valeur ne sera pas utilisée puisque le mode d'étirement est disabled).

  • Vous pouvez définir une taille de fenêtre minimale en définissant OS.min_window_size dans la fonction _ready() d'un script. Cela empêche l'utilisateur de redimensionner l'application en dessous d'une certaine taille, ce qui pourrait casser la disposition de l'interface utilisateur.

Note

Godot ne prend pas encore en charge le remplacement manuel du facteur d'échelle 2D, il n'est donc pas possible d'avoir un support hiDPI dans les applications non liées au jeu. Pour cette raison, il est recommandé de laisser Allow Hidpi désactivé dans les applications non liées au jeu pour permettre au système d'exploitation d'utiliser sa solution de repli à faible DPI.

Support hiDPI

Par défaut, les projets Godot ne sont pas considérés comme DPI-aware par le système d'exploitation. Ceci est fait pour améliorer les performances sur les systèmes bas de gamme, puisque la mise à l'échelle DPI du système d'exploitation sera plus rapide que de laisser l'application s'adapter elle-même (même en utilisant le mode d'étirement viewport).

Cependant, l'échelle de repli DPI fournie par le système d'exploitation ne fonctionne pas bien avec le mode plein écran. Si vous souhaitez obtenir des images nettes sur des écrans hiDPI ou si votre projet utilise le mode plein écran, il est recom Display > Window > Dpi > Allow Hidpi dans les paramètres du projet.

Allow Hidpi n'est efficace que sur Windows et macOS. Elle est ignorée sur toutes les autres plateformes.

Note

L'éditeur Godot lui-même est toujours marqué comme DPI-aware. L'exécution du projet à partir de l'éditeur ne sera DPI-aware que si Allow Hidpi est activé dans les paramètres du projet.

Réduction de l'aliasing lors du sous-échantillonnage

If the game has a very high base resolution (e.g. 3840×2160), aliasing might appear when downsampling to something considerably lower like 1280×720.

To resolve this, you can enable mipmaps on all your 2D textures. However, enabling mipmaps will increase memory usage which can be an issue on low-end mobile devices.

Manipulation des rapports d'aspect

Une fois que vous avez pris en compte la mise à l'échelle pour les différentes résolutions, assurez-vous que votre interface utilisateur est également mise à l'échelle pour les différents ratio d'aspect. Cela peut être fait en utilisant anchors et/ou containers.

Mise à l'échelle du champ de vision

La propriété Keep Aspect du nœud Caméra 3D est par défaut le mode de mise à l'échelle Keep Height (également appelé Hor+). C'est généralement la meilleur valeur pour les jeux de bureau et les jeux mobiles en mode paysage, car les écrans larges utilisent automatiquement un champ de vision plus large.

Cependant, si votre jeu 3D est destiné à être joué en mode portrait, il peut être plus judicieux d'utiliser Keep Width à la place (aussi appelé Vert-). Ainsi, les smartphones dont le rapport hauteur/largeur est supérieur à 16:9 (par exemple 19:9) utiliseront un champ de vision plus grand, ce qui est plus logique ici.

Mettre à l'échelle différemment des éléments 2D et 3D à l'aide de Viewports

En utilisant plusieurs nœuds Viewport, vous pouvez avoir différentes échelles pour divers éléments. Par exemple, vous pouvez utiliser cela pour rendre le monde en 3D à une faible résolution tout en gardant les éléments en 2D à la résolution native. Cela peut améliorer considérablement les performances tout en conservant la netteté du HUD et des autres éléments 2D.

This is done by using the root Viewport node only for 2D elements, then creating a Viewport node to display the 3D world and displaying it using a SubViewportContainer or TextureRect node. There will effectively be two viewports in the final project. One upside of using TextureRect over SubViewportContainer is that it allows enable linear filtering. This makes scaled 3D viewports look better in many cases.

Voir la démo de mise à l'échelle du viewport 3D pour des exemples.