concevoir une interface utilisateur pour plusieurs résolutions

Les jeux et les applications modernes doivent souvent supporter une grande variété de résolutions d'écran et les mises en page UI doivent être adaptées à cela. Le système d'interface utilisateur dans Unity comprend une variété d'outils à cet effet qui peuvent être combinés de diverses façons.

Dans ce mode d'emploi, nous allons utiliser une simple étude de cas, examiner et comparer les différents outils dans le contexte. Dans notre étude de cas, nous avons trois boutons dans les coins de l'écran, comme indiqué ci-dessous, et l'objectif est d'adapter cette mise en page à différentes résolutions.

Interface utilisateur à adapter
Interface utilisateur à adapter.

Pour ce faire, nous allons examiner quatre résolutions d'écran : Phone HD en portrait (640 x 960) et landscape (960 x 640) et Phone SD en portrait (320 x 480) et landscape (480 x 320). La mise en page est initialement configurée dans Phone HD Portrait resolution.

Utilisation d'ancres pour s'adapter à différents rapports d'aspect

Les éléments d'UI sont par défaut ancrés au centre du rectangle parent. Cela signifie qu'ils gardent un décalage constant du centre.

Si la résolution est modifiée en un rapport d'aspect paysage avec cette configuration, les boutons peuvent ne plus être dans le rectangle de l'écran.

Interface utilisateur sortant du cadre en mode paysage
Interface utilisateur sortant du cadre en mode paysage.

Une façon de garder les boutons à l'intérieur de l'écran est de modifier la disposition de sorte que les emplacements des boutons soient liés à leurs coins respectifs de l'écran. Les ancrages du bouton supérieur gauche peuvent être réglés sur le coin supérieur gauche à l'aide du menu déroulant Ancres préétablis (Anchors Preset) dans l'inspecteur, ou en faisant glisser les poignées d'ancrage triangulaires dans la vue de scène. Il est préférable de le faire pendant que la résolution d'écran actuelle définie dans la vue de jeu est celle dont la mise en page a été conçue pour la première fois, là où le placement de bouton semble correct. De même, les ancrages pour les boutons inférieur gauche et inférieur droit peuvent être réglés respectivement dans le coin inférieur gauche et le coin inférieur droit.

Une fois que les boutons ont été ancrés dans leurs coins respectifs, ils s'accrochent à eux lors de la modification de la résolution à un rapport d'aspect différent.

L'interface utilisateur ne sort plus du cadre
L'interface utilisateur ne sort plus du cadre.

Dans ce sens, nous savons que les plus petites résolutions de Phone SD Portrait et Landscape ne correspondent pas aux écrans physiquement plus petits, mais plutôt aux écrans avec une densité de pixels inférieure. Sur ces écrans de densité inférieure, les boutons ne devraient pas apparaître plus grands que sur les écrans haute densité - ils devraient plutôt apparaître avec la même taille.

Cela signifie que les boutons devraient être plus petits par le même pourcentage que l'écran est plus petit. En d'autres termes, l'échelle des boutons devrait suivre la taille de l'écran. C'est là que le composant Canvas Scaler peut vous aider.

Mise à l'échelle avec la taille de l'écran

Le composant Canvas Scaler peut être ajouté à la racine d'un Canvas, un Game Object avec un composant de Canvas sur lequel tous les éléments d'IU sont des enfants. Il est également ajouté par défaut lors de la création d'un nouveau Canvas via le menu GameObject.

Dans le composant Canvas Scaler, vous pouvez configurer son mode d'échelle UI avec la taille de l'écran (Scale With Screen Size). Avec ce mode d'échelle, vous pouvez spécifier une résolution à utiliser comme référence. Si la résolution d'écran actuelle est plus petite ou plus grande que cette résolution de référence, le facteur d'échelle du canevas est réglé en conséquence, de sorte que tous les éléments d'interface utilisateur soient mis à l'échelle ou diminue avec la résolution de l'écran.

Dans notre cas, nous avons configuré le Canvas Scaler pour être la résolution de portrait de téléphone HD de 640 x 960. Maintenant, lorsque vous configurez la résolution de l'écran sur la résolution d'un téléphone SD portrait de 320 x 480, l'ensemble de la mise en page est réduite, de sorte qu'elle apparaît proportionnellement la même que celle de la résolution complète. Tout est réduit : Les tailles des boutons, leurs distances sur les bords de l'écran, les graphiques des boutons et les éléments du texte. Cela signifie que la mise en page apparaîtra de la même manière que dans la résolution du portrait du téléphone SD comme dans le portrait du téléphone HD; Seulement avec une densité de pixels inférieure.

UI qui diminue sur un écran de basse qualité
UI qui diminue sur un écran de basse qualité.

Une chose à savoir : Après avoir ajouté un composant Canvas Scaler, il est important de vérifier également comment la mise en page correspond à d'autres ratios d'aspect. En réglant la résolution sur le paysage Phone HD, nous pouvons voir que les boutons apparaissent maintenant plus grands qu'ils ne le devraient.

Les éléments graphiques sont trop grands en mode paysage
Les éléments graphiques sont trop grands en mode paysage.

La raison pour laquelle les boutons sont plus grands en mode paysage se résume à la façon dont fonctionne le paramètre Canvas Scaler. Par défaut, il compare la largeur ou la résolution actuelle avec la largeur du Canvas Scaler et le résultat est utilisé comme facteur d'échelle pour l'échelle de tout. Étant donné que la résolution actuelle en paysage de 960 x 640 a une largeur de 1,5 fois plus grande que le Portrait de 640 x 960, la mise en page est augmentée de 1,5.

Le composant a une propriété appelée Match qui peut être 0 (Largeur), 1 (Hauteur) ou une valeur entre les deux. Par défaut, il est défini sur 0, ce qui compare la largeur d'écran actuelle avec la largeur du Canvas Scaler.

Si la propriété Match est réglée à 0,5 à la place, elle comparera à la fois la largeur actuelle à la largeur de référence et la hauteur actuelle à la hauteur de référence, et choisira un facteur d'échelle entre les deux. Étant donné que dans ce cas, la résolution du paysage est 1,5 fois plus large, mais 1,5 fois plus courte aussi, ces deux facteurs égalisent et produisent un facteur d'échelle final de 1, ce qui signifie que les boutons gardent leur taille d'origine.

À ce stade, la mise en page prend en charge les quatre résolutions d'écran en utilisant une combinaison d'ancrage approprié et le composant Canvas Scaler sur le Canvas.

L'interface utilisateur s'adapte parfaitement à toutes les résolutions
L'interface utilisateur s'adapte parfaitement à toutes les résolutions.

les réactions

Pour laisser un avis, vous devez être inscrit et connecté

Se connecter