Unity UI square che riempie larghezza O altezza

Sto cercando di creare una scheda con questi requisiti:

• DEVE essere quadrato.
• Si adatta alla larghezza o all'altezza disponibili.
• DEVE essere centrato nella tela.
• Può essere avvolto in tutte le tele intermedie aggiuntive necessarie.

Sto giocando con le ancore ma non trovo alcuna combinazione per farlo. L'unica soluzione che posso pensare è lo script una sorta di "OnResize" del contenitore e impostare le dimensioni della scheda a livello di codice.

Questo è il layout originale. (1) è il BoardCanvas. (2) è il consiglio di amministrazione.

Voglio che se lo schermo diventa più alto, il quadrato aumenta, ma è ancora quadrato:

O riduce:

Ma, anche se quegli esempi precedenti si agganciano ai bordi superiore e inferiore, voglio anche che se lo spazio verticale diventa più alto della larghezza disponibile, allora il quadrato limita le sue dimensioni a seconda dei bordi sinistro e destro:

Q1: c'è un modo per farlo con le ancore / i perni? Va bene per me creare tele intermedie tra BoardCanvas e Board stesso, se funziona.

Q2: In tal caso, dove devo posizionare le ancore? Ho bisogno di oggetti intermedi?

D3: In caso contrario, lo scripting è la soluzione? C'è qualche OnResize sulla tela da gestire? Non riesco a vedere alcun evento di ridimensionamento nell'elenco, ma forse non so dove cercarlo. Sento che testarlo su ogni frame sembra un po 'eccessivo, guidato dagli eventi sembra migliore.

Grazie!

Finalmente ho trovato un modo per farlo (testato in v5.0.0), in un modo che:

• Non necessita di codice o condizionali per controllare l'orientamento.
• Non hackera con le scale e non necessita di una risoluzione di riferimento.

Nelle esercitazioni video sull'interfaccia utente manca una grande parte, sebbene ben documentata nella documentazione testuale: il sistema "auto-layout".

I layout automatici sono meccanismi costituiti da "layout" e "controller di layout". I controller di layout sono componenti che è possibile collegare all'oggetto di gioco dell'interfaccia utente. I controller possono ridimensionare Rect Transforms in modo intelligente.

Alcuni controller possono ridimensionare l'oggetto a cui viene applicato il componente, mentre altri controller possono ridimensionare i figli di quell'oggetto.

Ci sono alcuni controller integrati. Uno di questi è il Aspect Ratio Fitter.

Innanzitutto, seleziono il mio Boardpannello e allego un nuovo Aspect Ratio Fittercomponente:

La Aspect Ratio Fittersembra mirare a "mantenere" le proporzioni voluto dell'oggetto. Per fare ciò, o l'oggetto può essere impostato per "avvolgere" attorno a un oggetto figlio (mantenendo le proporzioni), oppure può essere impostato per espandere e adattare il suo contenitore (mantenendo le proporzioni).

Seleziono quindi l' Fit In Parentopzione e specifica che voglio un quadrato perfetto impostando le proporzioni desiderate su 1:

Questo produce un layout molto simile a quello che volevo, ma non ho dovuto dire alla tavola le sue dimensioni. Tuttavia, sa che deve essere quadrata, come rappresentato:

Se si restringe verticalmente o si espande, il quadrato segue il genitore, mantenendo le proporzioni:

Magicamente, quando il cambiamento viene apportato riducendo la larghezza, non ci sono script da allegare e nessuna proprietà da modificare, poiché "Aspect Ratio Fitter" lo fa automaticamente per noi:

Infine, poiché volevo un po 'di margine lì, ho appena posizionato una trasformazione rettangolo del contenitore che funge da distanziatore e sposta il Boardda al BoardCanvasin MarginCanvas:

Questo è possibile, ma probabilmente con solo una piccola riga di codice o due per definire se lo schermo è orizzontale o verticale e modificare un paio di valori.

Nell'area di disegno, è necessario impostare la "Modalità scala Ui" dello scalatore dell'area di disegno su "Ridimensiona con dimensioni schermo" e impostare "Modalità corrispondenza schermo" su "Larghezza o altezza corrispondenza":

Supponendo che venga utilizzata la risoluzione di riferimento predefinita di 800x600 e supponendo che il viewport dello schermo sia orizzontale (ad esempio, Screen.widthè maggiore di Screen.height), il dispositivo di scorrimento Abbinamento deve essere impostato completamente su Altezza come 1.

Quindi vuoi un'immagine sulla tela usando il predefinito di ancoraggio centrale / centrale. Vuoi anche che la larghezza e l'altezza dell'immagine corrispondano al valore Y della risoluzione di riferimento del tuo scalatore di tela.

È quindi possibile ridimensionare il viewport della telecamera e vedere che l'immagine mantiene la sua forma mentre si estende la sua altezza in modo che corrisponda all'altezza del viewport:

Se lo schermo è verticale - ed è qui che probabilmente dovrai codificare per controllare e / o cambiare come richiesto - devi fare in modo che il valore di Corrispondenza dello scalatore sia 0e cambiare l'altezza e la larghezza dell'immagine per adattarle alla risoluzione di riferimento Valore X. (nelle immagini sottostanti, la larghezza e l'altezza dell'immagine sono entrambe 800)

Se stai cercando di adattare un'immagine più piccola all'interno, puoi "ridimensionare" l'immagine regolandone la larghezza e l'altezza rispetto al valore X o Y della risoluzione di riferimento (a seconda del paesaggio o del ritratto). Ad esempio, ho creato un quadrato blu che utilizza metà del valore X delle risoluzioni di riferimento (poiché la finestra è verticale) e si ridimensiona e si restringe bene:

Inoltre, se si desidera una scacchiera o qualcosa del genere, la posizione X e Y di ogni immagine, l'altezza e la larghezza possono essere basate su una percentuale della risoluzione dello scalatore di tela per fare ciò che si desidera: