Sviluppare con Unity

2D e 3D
User interface

A cura di Federico Bachis, [email protected]

In questa lezione:

1. I compononenti della UI
2. Come collegare l’interfaccia al codice
3. I Player Settings
4. Input Manager o Input System
5. Caricare le scene e Buildare il gioco
I componenti della UI
● Canvas
● Event System
● Panel
● Text - TextMeshPro
● Image
● Button
● Slider
● Input Field
● Toggle
● Dropdown
Il Canvas
Ogni elemento della UI ha bisogno di essere
collegato a un canvas, il canvas deve essere il
game object parent, degli elementi della UI.

Render Mode:

● Screen space - Overlay

● Screen space - Camera
● World space
Canvas Scaler
La UI Scale mode determina come gli elementi
della vostra UI scaleranno alle differenti
risoluzioni.
Un buon punto di partenza è usare Scale with
screen size e reference pixel per Unit a 100.
L’event system
L'Event System serve per inviare eventi agli
oggetti all'interno dell'applicazione basati
sull'input, che sia da tastiera, mouse, touch o
input personalizzati.
Il Rect Transform
Il RectTransform sostituisce il Transform negli
oggetti della UI.
Mostra comunque i valori di rotazione e scala.
Ma la posizione e le dimensioni sono gestite in
maniera diversa, è possibile ancorare un
RectTransform in una posizione relativa al parent

Potete usare un pivot e indicare la sua

dimensione in pixel, oppure usare la funzione
stretch e indicare la distanza in pixel dai bordi del
parent.
Text, Image e Button
Sono i componenti UI che utilizzerete di più:

● TextMeshPro, ha rimpiazzato il vecchio componente

Text, permette di scrivere sulla UI, scegliere un font, uno
stile e l’allineamento
● Image, permette di utilizzare una sprite 2D all’interno
della UI
● Button, è un elemento composto, da un Image e da un
Text, sul componente Button potete impostare le funzioni
da eseguire quando viene cliccato.
Slider, Input Field, Toggle, Dropdown
Sono tutti componenti UI che permettono di inviare un valore ai nostri script:

● Lo slider invia un numero float o int in un range definito sull’inspector

● L’input field, serve a digitare su un campo, può essere configurato per
inviare stringhe, interi e float, spesso è necessario fare un cast del tipo
● Toggle, invia un booleano true/false ai nostri script
● Dropdown, permette di scegliere un elemento da una lista definita da noi,
può essere letto come intero o come stringa, è spesso utile in combinazione
con gli enum

Lo ScrollView, permette di creare delle aree movibili all’interno della UI.

Input Field
Linkare Funzioni dinamiche alla UI
Quando collegate una funzione a un elemento
della UI questa può avere un parametro
dinamico o statico.
Un bottone solitamente chiama funzioni senza
parametri o con parametri statici.
Uno slider o un toggle invece chiamano funzioni
con parametri dinamici.
Ad esempio lo slider chiamerà una funzione in
cui passa il valore selezionato attraverso il
cursore.
I parametri statici invece dovete inserirli voi nel
campo sull’inspector.
Audio Mixer
Potete reindirizzare gli AudioSource a
un AudioMixer groups per gestire
gruppi di volume.

Potete utilizzare degli snapshots per

impostare l’audio velocemente ad
esempio nel menu di pausa.

Potete infine esporre i parametri di un

gruppo per gestirlo dai settings del
gioco attraverso uno script.

Click destro sul parametro del gruppo

nell’inspector “expose ‘parameter’ to
script”
Spiegazione Youtube
Esercizio
1. Creare un canvas e un panel figlio
2. Creare 1 slider per il Master Volume dell’audio mixer all’interno del panel
3. Impostare il range dello slider tra -80 e 20
4. Crea uno script AudioManager
a. Esponi sull’inspector una variabile AudioMixer chiamata masterMixer
b. Esponi sull’inspector una variabile string chiamata masterVolumeName
c. Inizializza la variabile masterVolumeName al valore “MasterVolume”
5. Scrivere una funzione SetVolume(float volume) in una classe AudioManager
a. Usate la funzione SetFloat della variabile master mixer
b. Individuate i parametri da passare alla funzione SetFloat, aiutatevi con la documentazione se
necessario
6. Collegare la funzione allo slider
Esplorare la scena Main Menu
1. Fare play e cliccare i button
2. Esplorare lo script CustomSceneManager
3. Singleton?
4. Build Settings
5. Esplorate il canvas e inserite il vostro nome nel TextMeshPro
6. Alzate il Panel con il nome e create un altro panel con un Image
7. Scegliete dall’inspector l’immagine che preferite o importarne una
Singleton
Un singleton è una classe di cui vogliamo che possa esistere massimo una sola
istanza. In Unity questo si realizza così:
I Namespace
I Namespace sono raccoglitori di classi e permettono di usare le classi che
contengono all’interno dei nostri script.
Possiamo anche raccogliere i nostri stessi script all’interno di namespace definiti
da noi.
Quando usiamo un name space lo dichiariamo all’inizio del nostro codice con la
keyword using.
Se proviamo a usare una classe che non è
presente nello spazio dei nomi importati l’IDE
ci darà un errore e spesso suggerirà il namespace
appropriato da importare.
Caricare una scena
Usando la funzione LoadScene della classe SceneManager è possibile caricare
una scena usando il suo “buildIndex”.
Il build index è un indice che va da 0 a N, dove N è la quantità di scene che
abbiamo incluso nel nostro gioco.
Dobbiamo inserire le scene che vogliamo utilizzare nei build settings (build
profiles) alla voce scene list
I Player Settings
Il “Vecchio” Input Manager
Il “Nuovo” Input System
L’Input System
È composto da:
● Schemi di controllo (ovvero device)
● Mappe (Ovvero raggruppamenti di azioni)
● Azioni (Ovvero gli eventi che chiameranno le nostre funzioni)
● Tasti (Ovvero i bottoni del joystick, della tastiera, del mouse etc)
Map e Action dell’Input System
Permettono di disattivare o attivare gruppi di azioni.
Evita di dover gestire input uguali in situazioni diverse direttamente dal codice.

Usando le action del nuovo input system possiamo mappare un tasto per ogni device
sull’action Move.
Posso poi mappare quello stesso tasto sull’action Accelerate.
Quando il personaggio è a piedi solo la map Vehicles è attiva, mentre la map player
viene disattivata.

Le action mi permettono di fare un’astrazione dal device e lavorare a più alto livello.
Posso impostare un input per ogni device sulla stessa action.
I device sono definiti come control scheme e possono essere sostituiti automaticamente
sulla base del device che sto usando.
Esercizio
● Creare un nuovo Input Asset
● Creare una mappa Player e una mappa PauseMenu
● Creare una Action Pause per la mappa Player
● Creare una Action Play per la mappa PauseMenu
● Usare il component PlayerInput
● Scrivere una funzione Pause
● Chiamare le funzione Pause dal PlayerInput
La classe Time
Time.time, è una variabile statica della classe Time, rappresenta il tempo di gioco trascorso dal momento in cui si
preme play, in forma di float.

Se volete controllare che un’azione non possa ripetersi prima di un certo ritardo:
float delay = 5f;
if(Time.time>=nextAction)
{
nextAction = Time.time + delay;
//Fai l’azione
}else{
Debug.Log(“Non puoi ancora fare questa azione”);
}

Time.deltaTime, ci dice quanto tempo è passato tra il frame precedente e quello corrente, utile per normalizzare uno
spostamento, se un oggetto si muove di v=10m/s e deltaTime vale 2s, quell’oggetto si sarà mosso di 20 metri

Link spiegazione matematica

La classe Time: Time.timeScale
Time.timeScale, è una variabile statica della classe Time, rappresenta la velocità
di scorrimento del tempo di gioco, normalmente il suo valore è 1f.

Manipolandola si possono ottenere alcuni effetti interessanti come il bullet time.

Può essere usata per mettere in pausa il

gioco, ma in molti casi non è la scelta
migliore e può avere effetti collaterali.

In generale è meglio tenere uno stato del

gioco e far funzionare le logiche sulla base
dello stato.

Il timeScale influenza anche la fisica e le

animazioni
Ricordi tutti i termini usati?
● Canvas ● Singleton ●
● Event System ● NameSpace
● Panel ●
● Text - TextMeshPro
● Image
● Button
● Slider
● Input Field
● Toggle
● Dropdown
● Screen space - Overlay
● Screen space - Camera
● World space
Esercizio ciclo for:
● Crea un prefab (anche un cubo va bene)
● Allo Start Instanzia 10 volte quel prefab usando il ciclo for per i che va da 0 a
10 (escluso)
● Fai in modo che ogni istanza sia spostate di 1 metro in z rispetto alla
precedente
● Fai in modo che ogni istanza sia posizionata in un punto casuale tra 0 e 10 in
z e in x
● Riesci a creare una griglia 10x10 di cubi a distanza regolare l’uno dall’altro?
Suggerimento: devi annidare due cicli for.
Esercizio ciclo for + Coroutine:
Usa una Coroutine per fare in modo che l’Instantiate di ogni cubo avvenga dopo 1
secondo rispetto al precedente
● Allo Start Instanzia 10 volte quel prefab usando il ciclo for per i che va da 0 a
10 (escluso)
● Fai in modo che ogni istanza sia spostate di 1 metro in z rispetto alla
precedente
● Fai in modo che ogni istanza sia posizionata in un punto casuale tra 0 e 10 in
z e in x
● Riesci a creare una griglia 10x10 di cubi a distanza regolare l’uno dall’altro?
Suggerimento: devi annidare due cicli for.
Promemoria esercizi
Ciclo for annidato:
for(int x=0; x<10; x++){
for(int z=0; z<10; z++){
//Task eseguito 10*10 volte
}
}
Dichiarare una Coroutine:
public IEnumerator NomeCoroutine(){
yield return new WaitForSeconds(1f);
}
Chiamare una Coroutine:
StartCoroutine(NomeCoroutine());