Codifica per HoloLens con Unity 5 – Parte #7 – Creazione di un HUD di base

Codifica per HoloLens con Unity 5 – Parte #7 – Creazione di un HUD di base

Uno degli elementi della realtà aumentata probabilmente più conosciuti è un HUD:questo è un Heads Up Display. Se hai giocato a un gioco per computer FPS, avrai familiarità con questo dato che è l'area dello schermo che mostra la tua salute, il tuo punteggio o il numero di vite rimaste nel gioco.

Questo non è davvero un ologramma in quanto tale, ma è comunque qualcosa che possiamo sviluppare per HoloLens. La chiave è assicurarsi che gli artefatti resi da HoloLens siano mantenuti nella stessa posizione di fronte a te e, in sostanza, significa rendere quegli artefatti come oggetti secondari della fotocamera.

Diamo un'occhiata più da vicino.

Mantenere un oggetto in un posto

Dimostrerò il principio di mantenere un oggetto in un posto nei passaggi seguenti, in seguito vedremo come eseguire il rendering del testo.

Innanzitutto, crea un nuovo progetto in Unity per HoloLens (in precedenza ho descritto come farlo qui).

Quindi, fai clic con il pulsante destro del mouse sull'oggetto Fotocamera principale nella gerarchia. Aggiungi un nuovo Cube GameObject.

Cambia la posizione di questo oggetto Cubo in modo che sia a 2 m di fronte a te e ridimensionalo a 0,1 della sua dimensione originale. Dovrebbe essere un cubo bianco, situato a 2 m davanti alla telecamera, con lati lunghi circa 10 cm.

Se ora crei questo progetto e lo distribuisci all'emulatore, vedrai un cubo bianco come descritto sopra. Se provi a muoverti nell'emulatore, non succederà nulla (apparentemente). Questo perché il cubo è in una posizione statica davanti alla telecamera, quindi anche se ti muovi, il cubo si muove con te.

Dimostriamolo aggiungendo un altro oggetto. Questa volta, aggiungi un altro cubo al pannello Gerarchia principale, ma non come figlio dell'oggetto fotocamera. Rendilo 2m davanti a te e 1m a sinistra, ridimensionalo in scala 0,1 e aggiungi un materiale per colorare il cubo di rosso (scrivo qui su come cambiare il colore di un oggetto).

Ancora una volta, costruisci questo progetto, distribuiscilo all'emulatore e prova a spostarti. Questa volta potrai guardare intorno al cubo rosso e spostare la tua posizione rispetto ad esso, ma il cubo bianco rimarrà nello stesso punto.

Se hai un HoloLens, prova a eseguire il deployment su HoloLens e sarai in grado di vederlo più chiaramente, mentre puoi camminare intorno al cubo rosso, il cubo bianco rimane fermo di fronte a te.

Un esempio più utile

Quindi avere un cubo bianco come HUD non è molto utile, ma era solo per dimostrare come mantenere un oggetto in una posizione statica di fronte a te. Ora, diamo un'occhiata all'aggiunta di testo al nostro HUD.

Apri di nuovo il progetto HUD e rimuovi i cubi bianchi e rossi che abbiamo creato nell'ultimo passaggio.

Ora aggiungi un oggetto canvas come figlio della fotocamera principale:questo è disponibile facendo clic con il pulsante destro del mouse sulla fotocamera principale, selezionando l'interfaccia utente dal menu contestuale e quindi selezionando Tela dal menu a comparsa.

  • Posiziona la tela in modo che sia 1 m davanti a te, il che significa che cambia la posizione Z in modo che sia 1.
  • Cambia la larghezza su 460 e l'altezza su 280.
  • Cambia la scala in modo che sia 0,001 per gli assi X, Y e Z.
  • Inoltre, cambia i pixel dinamici per unità nel componente Canvas Scaler da 1 a 10 (questo rende il testo che aggiungeremo in seguito meno sfocato).

Quindi, aggiungi un oggetto GUI di testo come figlio di questo oggetto Canvas (disponibile anche dallo stesso menu dell'interfaccia utente).

  • Posizionalo in modo che sia in alto a sinistra della tela usando le opzioni Paragrafo -> Allineamento.
  • Cambia il testo in "In alto a sinistra".
  • Cambia il carattere in 14.
  • Cambia il colore in modo che sia qualcosa di distintivo. Ho usato il verde nel mio esempio.
  • Assicurati che le posizioni negli assi X, Y e Z siano tutte zero e che le scale siano tutte impostate su 1.
  • Infine, nel componente Rett Transform dell'oggetto Testo, assicurati che l'oggetto sia impostato per allungarsi in entrambe le direzioni verticale e orizzontale.

Ora costruisci il tuo progetto e distribuiscilo all'emulatore.

Questa volta, dovresti vedere del testo verde fluttuante nell'angolo in alto a sinistra del tuo campo visivo.

Puoi andare un po' oltre, come ho mostrato nell'immagine qui sotto, dove puoi allineare il testo in diverse posizioni sulla tela.

Questa è una tecnica molto potente:puoi utilizzare gli script per regolare questo testo in base alle azioni nell'ambiente circostante. Inoltre, non sei costretto a usare solo oggetti di testo:potresti usare un'immagine o qualcos'altro.

Si spera che questa sia un'ispirazione utile per creare un HUD per il tuo HoloLens.