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.
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 :
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.
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 :
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.
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.
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).
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.
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.
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).
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).
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).
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
:
This pixel art is also displayed with the viewport
stretch mode, but the
stretch scale mode is set to integer
this time:
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 to1080
. 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 sur2160
. 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 surexpand
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 sur1080
. 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 to1280
.Si vous ciblez principalement les appareils haut de gamme, définissez la largeur de la fenêtre de base sur
1080
et sa hauteur sur1920
. 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 estdisabled
).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.