Imparare UnityPrincipianti

Le UI di Unity

Dalla versione 4.6 di Untiy è stata inserita una nuova e potente caratteristica, le UI (User Interface).
Nelle versioni precedenti di Unity, il vecchio sistema di interfaccia utente (ancora presente anche nelle ultime versioni di Unity) era decisamente macchinoso. Richiedeva di gestire le UI tramite codice all’interno del metodo “OnGUI“. Il loro sviluppo era molto incentrato sul lavoro del programmatore, il che va contro la natura artistic-visiva di uno strumento che rappresenta un output grafico. Per non menzionarne l’estrema lentezza e inefficienza.

Per fortuna ora le cose sono cambiate radicalmente.
Tramite le UI ora potremmo inserire testi, pulsanti, sliders, finestre, pannelli, maschere e moltissime altre cose.
Nella versione 2018 è stato aggiunto anche un nuovo elemento chiamato
TextMeshPro per l’inserimento di testi “potenziati” e migliori sotto l’aspetto visivo, ma per ora noi useremo i semplici Text UI di Unity.
Potremmo poi inserire animazioni, effetti grafici come ombre e bordi e potremmo gestire le UI tramite codice, modificandone ogni aspetto anche a runtime. Per poter gestire le UI da scripts dovremmo per prima cosa aggiungere il namespace
UnityEngine.UI al nostro script.

using UnityEngine;
using System.Collections;
using UnityEngine.UI;   //Con questa linea potremmo gestire le UI da questo script
 
public class UserInterfaceScript : MonoBehaviour {
    ......

 Vedremo in seguito come modificare e giocare con le UI da codice, per ora concentriamoci sul loro inserimento nella scena.

Dopo qualche tentativo e con un po’ di lavoro potrete ottenere un effetto simile a quello che ottenni per l’UI del casco e di uno dei menu di Star Shift visibile in questo breve video:

Effetti animati, finestre con icone, pop-ups, elementi selezionabili, pulsanti animati…
Figo no?

Inseriamo una UI nel nostro gioco

Come prima cosa inseriamo una UI di base, tramite il menu GameObject scegliamo un elemento UI, per esempio “Image“:

Ovviamente anche ogni elemento di una UI è un gameObject.

Nel momento in cui inseriamo un elemento UI nella scena (come un’immagine), verrà creato anche un altro elemento (se non già presente) necessario per la visualizzazione di ogni elemento UI. La Canvas  (tela).
Una Canvas rappresenta il contenitore degli elementi UI al cui interno verranno posizionati tutti gli elementi di un’interfaccia o di un menu.

Non può esistere un elemento UI (pulsante, immagine, testo ecc…) senza un Canvas  che li contenga

Se infatti provassimo a spostare un testo al di fuori del suo Canvas  , esso non verrà più visualizzato. Possono essere presenti molteplici Canvas in una scena, a seconda delle nostre esigenze e del numero di menu che vorremmo avere.

Un altro oggetto che verrà generato automaticamente all’interno della scena (se non era già presente) è l’Event System. Esso si occuperà della gestione i diversi input ricevuti dagli oggetti della nostra UI a seconda del dispositivo su cui sta girando il gioco.
Se per esempio il gioco è in esecuzione su un PC, andremo a premere sui pulsanti della UI tramite il puntatore del mouse, mentre se stiamo giocando su un tablet o cellulare, lo faremo tramite il touchscreen. L’Event System gestirà questi diversi tipi di input senza che noi dovremo preoccuparci di altro. Una bella comodità.

Andiamo ad esaminare quali componenti compongono la Canvas .

Il Rect Transform

Tutti i gameObject che abbiamo visto fin’ora possedevano un componente Transform per gestirne posizione, dimensione e rotazione.
Il Rect Transform ha la stessa identica funzione di un Transform ma è leggermente più complesso ed è necessario per tutti gli oggetti bidimensionali come gli elementi di una UI.
Questo si rende necessario perché esistono un’infinità di schermi differenti, con dimensioni e risoluzioni diverse, e un’interfaccia deve necessariamente essere visibile per intero in qualsiasi tipo di schermo.

Canvas 

Ecco qua l’elemento più importante di una UI, il componetene che gestisce la Canvas ovvero l’intera UI.

Nell’immagine ho cliccato sul menu a tendina “Render Mode” dove possiamo ammirare tre tipologie di visualizzazione tra cui scegliere.

– Screen Space – Overlay
Di default la Canvas viene visualizzata con l’opzione Screen Space – Overlay ovvero come se fosse una normale interfaccia 2D a tutto schermo e sempre in primo piano. Se lo schermo viene ridimensionato o cambia la risoluzione, la Canvas cambierà automaticamente le dimensioni per riadattarsi.
Questo sistema è ottimale quando avremo una normale interfaccia a due dimensioni che non necessita di particolari effetti posti su una telecamera specifica.
Infatti questo sistema non necessita della presenza di una telecamera e non risente di nessun effetto posto sulle telecamere del gioco. Come suggerisce il termine
Overlay, l’UI verrà visualizzata sopra ad ogni oggetto 3D.
Usando questo sistema non sarà necessario spostare/ruotare l’oggetto in un punto specifico della scena perché esso sarà sempre posizionato al centro dello schermo e sarà dunque impossibile gestire manualmente il suo Rect Transform che verrà gestito automaticamente in base alle dimensioni dello schermo.

– Screen Space – Camera
Questo modo di visualizzazione ha bisogno di una telecamera. In questo caso è come se la Canvas fosse un oggetto 3D posto ad una certa distanza di fronte alla telecamera specificata.
Gli elementi dell’interfaccia saranno renderizzati dalla telecamera scelta, il che significa che le impostazioni della
telecamera influenzeranno l’aspetto della Canvas . Se per esempio la telecamera è impostata su “Perspective“, gli elementi dell’interfaccia verranno renderizzati in prospettiva e la quantità di distorsione prospettica sarà quella della Field of View della telecamera.

– World Space
In questa modalità, la Canvas si comporterà come qualsiasi altro oggetto 3D nella scena. Le dimensioni della Canvas possono essere impostate manualmente utilizzando il Rect Transform e gli elementi dell’interfaccia grafica verranno visualizzati davanti o dietro altri oggetti nella scena in base al posizionamento 3D nella scena. Questo è utile per le interfacce utente che devono essere parte del mondo di gioco. Questo sistema è anche noto come “diegetic interface” ovvero dei menu posti nello spazio 3D che risentono dei movimenti dell’oggetto padre come un qualsiasi altro oggetto nella scena.

Sta a voi scegliere quale di queste tre tipologie usare.
Se per esempio non avete bisogno di particolari effetti, la prima opzione è sicuramente quella più semplice da gestire. Sempre a pieno schermo e perfettamente allineato con la visuale.
Se invece avete bisogno di uno speciale effetto 3D (menu tipo Crysis 3) la seconda opzione potrebbe fare al caso vostro.
Se invece volete posizionare la vostra UI in un punto specifico del livello (per esempio su uno schermo 3D o sull’avambraccio del PG stile Pip Boy di Fallout) allora dovrete usare la terza opzione.


La spunta PixelPerfect


PixelPerfect forza tutti gli elementi nella Canvas ad allinearsi con i pixel. Si applica solo con renderMode su Screen Space.

L’attivazione di pixelPerfect può rendere gli elementi più nitidi e prevenire la sfocatura. Tuttavia, se molti elementi sono ridimensionati, ruotati o animati, quest’opzione rallenta pesantemente l’aggiornamento della Canvas. Potrebbe essere vantaggioso disabilitare pixelPerfect .

Il Rect Transform di un elemento UI

Badate bene che ora andremo a lavorare sul Rect Transform dell’emento UI (in questo caso un’immagine) e non del Canvas).
Una delle cose più importanti di un elemento di una UI è la sua “ancora” ovvero il punto focale che gestisce anche il modo in cui potremmo manipolare l’elemento.
Se per esempio volessimo impostare un’immagine a tutto schermo (tipo lo sfondo della UI), dovremmo impostare l’ancora su stretch.

Come si può notare, impostando l’ancora su stretch, non andremo più ad impostare le sue posizioni e le sue dimensioni (PosX, PosY, PosZ, Width, Height) che cambieranno in Left-Right-Top-Bottom. Questo perché abbiamo scelto di “stretchare” (spalmare) l’immagine su tutto lo schermo e potremmo dunque lavorare sulle distanze dai bordi.
Allo stesso modo potremmo scegliere di
“stretchare” solo in orizzontale, solo in verticale o cambiare il punto di ancoraggio a nostro piacimento.

Allineare oggetti UI

Quando avremo molti oggetti in una UI potremmo usare i comodissimi componenti “Layout Group” per posizionarli correttamente.
Per mettere delle icone in una specifica finestra per esempio, potremmo usare il componente “Grid Layout Group“.

Nel momento in cui volessimo generare nuovi elementi (nel caso del video, dei pulsanti) all’interno della finestra (nel caso del video, una semplice immagine che fa da padre), essi saranno allineati automaticamente e generati senza dover pensare a posizionarli. Come succede nel video di Star Shift che vi ho mostrato all’inizio, le icone, appena istanziate, vengono poste correttamente in modo automatico senza dover fare altro.

 Una bella comodità!

Le maschere (Mask)

Come abbiamo notato però c’è qualcosa che non va, ovvero, quando gli elementi sono in numero maggiore delle dimensioni dell’elemento padre, escono fuori e vengono visualizzate anche se all’esterno della finestra padre.
Per fare in modo che questo non accada dovremmo usare un componente chiamato Mask, appunto maschera, che renderà visibili gli elementi childrens solo entro i limiti di essa.

Un pensiero su “Le UI di Unity

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *