Unity 4.6 - Comment adapter les éléments de l'interface graphique à la bonne taille pour chaque résolution
La nouvelle Unity 4.6 est livrée avec une nouvelle interface utilisateur. Lorsque je change de résolution sur Unity, le bouton de l'interface utilisateur est parfaitement adapté, mais lorsque je teste sur le périphérique Nexus 7, il semble trop petit. Aucune idée sur la façon de résoudre ça?
Le nouveau système d'interface graphique de Unity utilise des "ancres" pour contrôler la manière dont les éléments de l'interface graphique (tels que les boutons) sont mis à l'échelle par rapport à leur conteneur parent.
Unity propose un didacticiel vidéo sur l’utilisation du nouveau composant "Rect Transform" (où les ancres sont configurées) ici: http://unity3d.com/learn/tutorials/modules/beginner/ui/rect-transform .
La dernière moitié du didacticiel est entièrement consacrée aux ancres. Cette page contient des liens vers toute la série de didacticiels. Ce n'est pas trop long Vous devriez regarder le tout.
Spécifique à votre question:
Les ancres sont visibles dans votre première capture d'écran. Ce sont ces 4 petites flèches en haut à gauche de votre bouton.
Pour le moment, votre bouton est uniquement ancré par son coin supérieur gauche.
Les deux ancres de droite doivent être glissées vers la droite pour que le bord droit de votre bouton soit ancré dans un espace à l'intérieur de son conteneur parent.
En fonction de votre situation, vous devrez peut-être faire glisser les deux flèches du bas pour que le bord inférieur de votre bouton soit également ancré.
La vidéo que j'ai liée ci-dessus couvre tout cela en détail.
Enfin, pour que la taille de police s'adapte parfaitement à différentes résolutions, vous devez ajouter et configurer un composant de résolution de référence dans la trame de base de votre interface utilisateur, comme Ash-Bash32 l'avait écrit précédemment.
Update: le meilleur moyen d'ajouter un composant de résolution de référence consiste à utiliser la fenêtre d'inspecteur du canevas de base de votre interface utilisateur.
1) Cliquez sur le bouton "Ajouter un composant" en bas de l'inspecteur.
2) tapez le mot "Référence" dans le champ du filtre de recherche.
3) sélectionnez le composant "Résolution de référence" dans les résultats de la recherche.
La résolution de référence est à présent renommée en Canvas Scaler. Parallèlement au changement de nom, ils ont ajouté de nombreuses fonctionnalités supplémentaires pour la dynamicité du canevas. Vous pouvez consulter le Unity Doc de Canvas Scaler et également jeter un coup d'œil à cet article pour obtenir un exemple concret de l'utilisation et de la raison d'utilisation de Canvas Scaler. Assurez-vous également que vous utilisez les points d'ancrage à bon escient afin de les rendre plus robustes ...
Pour mettre à l'échelle l'interface utilisateur, ajoutez le composant ReferenceResolution au canevas que vous souhaitez mettre à l'échelle .
P.S. Il n'y a pas de documentation pour ReferenceResolution
Si vous voulez que le bouton ait la même taille pour tous les écrans et toutes les résolutions, vous devez ajouter le composant scaler de la toile à la toile et définir le mode de correspondance de l'écran sur: faire correspondre la largeur ou la hauteur, voici le lien vers la documentation, aide beaucoup si vous souhaitez viser différentes tailles ou résolutions:
Cela devient gigantesque et compliqué une fois que vous commencez à mettre les choses en code ET À utiliser un détartreur, je souhaite donc apporter une réponse complète pour éviter à quelqu'un les heures que j'ai passées.
Tout d'abord, n'utilisez pas anchoredPosition pour positionner quoi que ce soit, à moins que vous ne réalisiez qu'il s'agit d'un nombre compris entre 0.0 et 1.0. Utilisez la position locale RectTransform pour effectuer la mise en page réelle et rappelez-vous que c'est en relation avec l'ancre parente. (Je devais disposer une grille du centre)
Deuxièmement, placez un écailleur de toile sur l'objet de mise en page parent ET sur les éléments d'interface utilisateur internes. L'un fait la mise en page dans la bonne position, l'autre redimensionne vos éléments afin qu'ils apparaissent bien. Vous ne pouvez pas compter sur le parent à moins que les enfants aient aussi des scalers (et des raycasters graphiques pour les toucher).
Troisièmement, si vous avez un détartreur, NE PAS utiliser Screen.width et height, supposez plutôt que l’écran est la même valeur que celle que vous donnez aux détartreurs (espérons que vous avez utilisé le même ou que vous savez ce que vous faites). La largeur de l'écran renvoie toujours les pixels réels du périphérique, ainsi que les périphériques de la rétine, mais les scalers de la toile ne tiennent pas compte de cela. Cela donne probablement à l'unité le dernier moyen de trouver le dpi réel à l'écran si votre jeu le souhaite. Éditer: Ce paragraphe s’applique à n’importe quel canevas parent connecté au code faisant votre mise en page. Non des toiles égarées, vous pouvez probablement les mélanger. Rappelez-vous simplement les directives de l’unité sur la performance avec les toiles.
Quatrièmement, la toile est encore un peu buggée. Même si ce qui précède fonctionne, certaines choses ne seront pas rendues tant que vous ne supprimerez pas et ne recréerez pas une toile, si vous rouvrez la scène ou si elle se bloque. Sinon, ce qui précède correspond aux "règles" générales que j'ai trouvées.
Pour centrer une "grille d'objets", vous ne pouvez pas utiliser seulement la moitié de la largeur ou de la hauteur du canevas, vous devez calculer la hauteur de votre grille et en régler le décalage de moitié, sinon elle sera toujours légèrement décalée. Je viens d'ajouter ceci comme un conseil supplémentaire. Ce calcul fonctionne pour toutes les orientations.