Codifica per HoloLens con Unity 5 – Parte #8 – Aggiunta di un'immagine all'HUD (e quindi modifica in codice C#)

Codifica per HoloLens con Unity 5 – Parte #8 – Aggiunta di un'immagine all'HUD (e quindi modifica in codice C#)

L'ultima volta, abbiamo esaminato la creazione di un semplice HUD per HoloLens e visualizzato testo con colori diversi in ciascuno degli angoli dello schermo visualizzabile.

Ovviamente non vorrai sempre avere solo del testo sul tuo HUD, quindi questa volta esamineremo un'estensione molto semplice di questo:aggiungendo un'immagine all'HUD.

Riprendiamolo da dove abbiamo lasciato l'ultimo post. Abbiamo già creato un HUD con il testo ai quattro angoli, come mostrato nell'emulatore qui sotto.

Supponiamo di voler aggiungere una sorta di segnale visivo, ad esempio un'icona di stato per mostrare se è presente una connessione Wi-Fi.

Eliminerò l'elemento rosso dell'interfaccia utente di testo in basso a destra dell'applicazione, poiché è qui che ho deciso che voglio che appaia la mia immagine.

Ora voglio aggiungere un nuovo elemento dell'interfaccia utente all'area di disegno, in particolare un elemento RawImage. Puoi selezionarlo dal menu contestuale, come mostrato di seguito.

Questo aggiungerà semplicemente una nuova immagine bianca vuota alla tua tela, come mostrato nella scena qui sotto.

Ovviamente abbiamo bisogno di regolare questa immagine grezza in modo che sia la posizione e le dimensioni corrette e per avere la fonte corretta. Possiamo fare tutto questo nel pannello Inspector. Il pannello sottostante mostra le impostazioni predefinite fornite dalla mia versione di Unity.

Innanzitutto, vorrei modificare la posizione dell'immagine in modo che si trovi in ​​basso a destra nella tela. Posso farlo facendo clic sull'icona della posizione (la parte che sembra un mirino in alto a sinistra nell'immagine sopra). Dopo aver fatto clic su di esso, premo "Alt" sulla tastiera per ottenere un menu alternativo, mostrato di seguito.

Utilizzando il mouse, seleziono l'icona – evidenziata con un riquadro rosso sopra – che posiziona l'immagine in basso a destra della tela.

Ora devo selezionare un'immagine da aggiungere:ho l'immagine di un cloud che userò per indicare una connessione al cloud. Questa immagine misura 100 px per 100 px, è un PNG e ha uno sfondo trasparente.

Per prima cosa creo una nuova cartella chiamata "Risorse" in Risorse nella vista Unity Project. Quindi faccio clic con il pulsante destro del mouse, seleziono "Importa nuova risorsa..." e accedo alla posizione in cui ho salvato l'immagine cloud.

Ora seleziono l'oggetto RawImage che è memorizzato sotto l'oggetto Canvas principale in modo da poter vedere il pannello RawImage Inspector. In questo momento, la proprietà Texture di RawImage è vuota, ma successivamente trascinerò l'immagine dalla cartella Risorse alla proprietà Texture.

L'immagine sotto mostra l'immagine della nuvola renderizzata sulla nostra tela HUD.

Ora, se lo costruiamo e lo distribuiamo all'emulatore, vedrai l'immagine cloud nel tuo HUD.

Cambiare l'immagine nel codice

A volte vorremo cambiare la nostra immagine nel codice, poiché trascinare l'immagine dalla cartella Risorse al pannello Impostazioni in fase di progettazione non è abbastanza flessibile.

Fortunatamente, farlo nel codice è piuttosto semplice:dobbiamo solo definire quale immagine (o nei termini di Unity, quale "Texture") che vogliamo visualizzare e impostare la trama di RawImage in modo che sia questa.

Innanzitutto, aggiungo un nuovo GameObject alla scena chiamato "ScriptManagerCollection".

Quindi aggiungo un'altra immagine alla mia cartella Risorse, chiamata "NotConnected.png":questa immagine è quella che userò quando il WiFi non è connesso.

Successivamente, aggiungo un nuovo script C# alle risorse chiamato "ImageManager". Ho aperto ImageManager in Visual Studio e ho aggiunto il codice seguente.

using UnityEngine.VR.WSA.Input;
using UnityEngine.UI;
 
public class ImageManager : MonoBehaviour {

    GestureRecognizer recognizer;
 
    public RawImage wifiConnection;
 
    // Use this for initialization
    void Start () {
        recognizer = new GestureRecognizer();
 
        recognizer.TappedEvent += Recognizer_TappedEvent;
 
        recognizer.StartCapturingGestures();
    }

    private void Recognizer_TappedEvent(InteractionSourceKind source, int tapCount, Ray headRay)
    {
        var myGUITexture = (Texture2D)Resources.Load("NotConnected");
 
        wifiConnection.texture = myGUITexture;
    }
}

Puoi vedere che ho scritto un semplice codice che riconosce un gesto di tocco e cambia l'origine dell'immagine wifiConnection in "NotConnected.png".

Ho trascinato questo script nella ScriptManagerCollection GameObject in Unity e ho selezionato questo GameObject. L'ispettore si aggiorna e mostra una proprietà RawImage pubblica chiamata "Connessione WiFi". Trascina l'oggetto RawImage dall'area di disegno nella finestra Gerarchia su questa proprietà.

Ora posso creare questo progetto ed eseguirlo nell'emulatore HoloLens.

Quindi, quando l'applicazione viene eseguita per prima, mostra l'icona del cloud in basso a destra dello schermo:

E se emulo un gesto di clic, l'immagine cambia nell'icona della nuvola "Non connesso".

Conclusione

Quindi ora possiamo integrare le immagini - e modificare le immagini - nel nostro HUD per HoloLens. La prossima volta cercherò di creare un'applicazione completa per HoloLens utilizzando alcuni dei tutorial che ho creato nelle ultime settimane.