Carré UI Unity remplissant la largeur OU la hauteur

J'essaie de créer un tableau avec ces exigences:

• Il DOIT être carré.
• Il DOIT s'adapter à la largeur OU à la hauteur disponible.
• Il DOIT être centré dans la toile.
• Il PEUT être emballé dans autant de toiles intermédiaires supplémentaires que nécessaire.

Je joue avec des ancres mais je ne trouve aucune combinaison pour le faire. La seule solution que je puisse penser est de scripter une sorte de "OnResize" du conteneur et de définir la taille de la carte par programme.

Ceci est la disposition d'origine. (1) est le BoardCanvas. (2) est la Commission.

Je veux que si l'écran devient plus grand, le carré grandit, mais est toujours carré:

Ou réduit:

Mais, bien que ces exemples précédents soient accrochés aux bords supérieur et inférieur, je veux également que si l'espace vertical devient plus grand que la largeur disponible, le carré limite sa taille en fonction des bordures gauche et droite:

Q1: Existe - t-il un moyen de le faire avec les ancrages / pivots? C'est ok pour moi de créer des toiles intermédiaires entre BoardCanvas et Board lui-même si cela fonctionne.

Q2: Si oui, où dois-je positionner les ancrages? Ai-je besoin d'objets intermédiaires?

Q3: Sinon, le script est-il la solution? Y a-t-il un OnResize sur la toile à gérer? Je ne vois aucun événement de redimensionnement dans la liste, mais je ne sais peut-être pas où le chercher. Je pense que le tester à chaque image semble un peu exagéré, piloté par les événements semble meilleur.

Merci!

Enfin, j'ai trouvé un moyen de le faire (testé en v5.0.0), d'une manière qui:

• N'a pas besoin de code ni de conditions pour vérifier l'orientation.
• Ne pirate pas avec des échelles et n'a pas besoin d'une résolution de référence.

Dans les didacticiels vidéo de l'interface utilisateur, il manque une grande partie, bien que bien documentée dans la documentation textuelle: le système "auto-layouts".

Les mises en page automatiques sont des mécanismes constitués de "mises en page" et de "contrôleurs de mise en page". Les contrôleurs de disposition sont des composants que l'on peut attacher à l'objet de jeu UI. Les contrôleurs peuvent redimensionner Rect Transformintelligemment.

Certains contrôleurs peuvent redimensionner l'objet auquel le composant est appliqué, tandis que d'autres contrôleurs peuvent redimensionner les enfants de cet objet.

Il y a quelques contrôleurs intégrés. L'un d'eux est le Aspect Ratio Fitter.

Tout d'abord, je sélectionne mon Boardpanneau et j'attache un nouveau Aspect Ratio Fittercomposant:

Le Aspect Ratio Fittersemble viser à "maintenir" le rapport d'aspect souhaité de l'objet. Pour ce faire, soit l'objet peut être défini pour «envelopper» autour d'un objet enfant (tout en conservant le rapport hauteur / largeur), soit il peut être défini pour s'étendre et s'adapter à son conteneur (tout en conservant le rapport hauteur / largeur).

Je sélectionne ensuite l' Fit In Parentoption et je précise que je veux un carré parfait en définissant le rapport d'aspect souhaité à 1:

Cela donne une disposition très similaire à celle que je voulais, mais je n'ai pas eu à dire à la planche ses dimensions. Mais encore, il sait qu'il doit être carré, comme illustré:

Si je rétrécis verticalement ou agrandis, le carré suit le parent, tout en conservant le rapport hauteur / largeur:

Magiquement, lorsque le changement est effectué en réduisant la largeur, il n'y a aucun script à attacher et aucune propriété à modifier, comme le "Monteur de rapport d'aspect" le fait pour nous de manière automagique:

Enfin, comme je voulais un peu de marge là-bas, je place juste une transformée rectangle conteneur qui agit comme l'entretoise et déplace le Boarddu BoardCanvasdans le MarginCanvas:

C'est possible, mais avec probablement juste une petite ligne de code ou deux pour définir si l'écran est paysage ou portrait et changer quelques valeurs.

Sur le canevas, vous devez faire en sorte que le "mode échelle Ui" du scaler sur toile soit "échelle avec la taille de l'écran" et que le "mode correspondance écran" soit "largeur ou hauteur correspondante":

En supposant que la résolution de référence par défaut de 800x600 est utilisée, et en supposant que la fenêtre d'affichage de l'écran est paysage (par exemple, Screen.widthest supérieure à Screen.height), le curseur de correspondance doit être réglé jusqu'à la hauteur comme 1.

Vous allez ensuite vouloir une image sur la toile en utilisant le préréglage d'ancrage central / central. Vous souhaitez également que la largeur et la hauteur de l'image correspondent à la valeur Y de la résolution de référence de votre scaleur de canevas.

Vous pouvez ensuite redimensionner la fenêtre de la caméra et voir que l'image conserve sa forme tout en étirant sa hauteur pour correspondre à la hauteur de la fenêtre:

Si l'écran est en mode portrait - et c'est là que vous devrez probablement coder pour vérifier et / ou modifier au besoin - vous devez définir la valeur de correspondance du scaler 0et modifier la hauteur et la largeur de votre image pour qu'elles correspondent à la résolution de référence. Valeur X. (dans les images ci-dessous, la largeur et la hauteur de l'image sont les deux 800)

Si vous essayez d'ajuster une image plus petite à l'intérieur, vous pouvez "mettre à l'échelle" l'image en ajustant sa largeur et sa hauteur par rapport à la valeur X ou Y de la résolution de référence (en fonction du paysage ou du portrait). Ainsi, par exemple, j'ai créé un carré bleu qui utilise la moitié de la valeur X des résolutions de référence (puisque la fenêtre est portrait), et il évolue et se rétrécit bien:

Et en outre, si vous vouliez un damier ou quelque chose, la position et la hauteur et la largeur X et Y de chaque image peuvent être basées sur un pourcentage de la résolution du scaler de toile pour faire ce que vous voulez: