Codifica per HoloLens con Unity 5 – Parte #2:Creazione di un semplice progetto Hello World

Codifica per HoloLens con Unity 5 – Parte #2:Creazione di un semplice progetto Hello World

L'ultima volta ho esaminato la configurazione del mio ambiente di sviluppo per consentirmi di sviluppare per l'emulatore Microsoft HoloLens. Questa volta creerò un progetto in Unity, aggiungerò un semplice oggetto primitivo e userò un po' di C# per fare qualcosa di interessante con questo oggetto.

Creazione di un nuovo progetto Unity 5

Se hai installato Unity correttamente, ti verrà mostrata una schermata come quella qui sotto dopo aver aperto Unity 5 HTP per la prima volta.

Fai clic sul pulsante "Nuovo progetto" e la schermata dovrebbe cambiare in una simile a quella seguente. Ho scelto il nome "HelloWorld" per il mio progetto e l'ho salvato sul desktop.

Dopo aver inserito il nome e la posizione del nuovo progetto Unity, ho fatto clic sul pulsante "Crea progetto" e Unity mostra la schermata seguente. Questo è un progetto (quasi) vuoto, che ha solo la fotocamera principale del progetto e la luce direzionale predefinita.

Il passaggio successivo consiste nell'aggiornare la scena con alcune impostazioni che hanno senso per un'app HoloLens.

Aggiornamento della scena per HoloLens

La telecamera predefinita è impostata a circa 10 m dietro il punto di origine della scena. Apporteremo alcune modifiche a questa fotocamera utilizzando la scheda Impostazioni sul lato destro.

  • In primo luogo, ho cambiato la posizione della fotocamera in (0,  0, 0), che significa X =0, Y =0 e Z =0;
  • Successivamente, nella sezione Fotocamera, ho modificato il valore del menu a discesa Cancella flag in Tinta unita .
  • Infine, cambio la proprietà Sfondo in Nero (R =0, G =0, B =0, A =0).

Questi assicurano che la fotocamera, ovvero il punto attraverso il quale osserveremo il mondo con l'HoloLens, si trovi nel punto di origine.

Inoltre, abbiamo rimosso lo Skybox predefinito (cioè l'immagine di sfondo) e tutti i pixel resi neri nella nostra scena appariranno come trasparenti in HoloLens.

Aggiungi un cubo

Ora che abbiamo configurato la scena per HoloLens, è il momento di aggiungere un semplice oggetto alla nostra scena.

Innanzitutto, facciamo clic con il pulsante destro del mouse sul riquadro Gerarchia a sinistra e a lato, selezioniamo "Oggetto 3d", quindi selezioniamo "Cubo" dal sottomenu visualizzato.

Un semplice cubo dovrebbe apparire al centro della scena, come nell'immagine qui sotto. Se l'immagine non appare nella posizione corretta, assicurati che l'oggetto cubo appaia nel menu Gerarchia allo stesso livello di rientro della fotocamera principale e della luce direzionale.

Crea un materiale

Vorrei che il mio cubo fosse un po' più interessante di un semplice blocco grigio, mi piacerebbe che avesse un colore rosso. In Unity, possiamo raggiungere questo obiettivo creando un Materiale asset e aggiungendo questo componente al cubo grigio.

Per creare un materiale, faccio clic con il pulsante destro del mouse su Risorse nodo nel pannello Progetto in basso a sinistra dello schermo. Dal menu contestuale che compare seleziono “Crea”, e dal menu successivo che compare seleziono “Materiale”.

Viene creato un nuovo elemento e viene visualizzato nel pannello Risorse:il cursore e lo stato attivo sono su questo elemento e ho inserito il valore "Rosso". Inoltre, nell'angolo in basso a destra compare una pallina grigia. Nel pannello Impostazioni, ho fatto clic sul selettore colore accanto all'etichetta "Albedo". Nel pop-up che appare, ho selezionato un colore rosso, che aggiorna il colore della pallina nell'angolo in basso a destra, come mostrato di seguito.

Ora che ho creato un materiale, posso assegnarlo al cubo. Per prima cosa ho selezionato l'oggetto Cubo nel pannello Gerarchia. Successivamente, ho trascinato il materiale denominato "Rosso" sul pannello Impostazioni sul lato destro. Questa è una superficie su cui posso trascinare e rilasciare i componenti. Non appena trascino il materiale rosso nell'Inspector del cubo, il cubo diventa rosso.

Spostare il cubo

Non è molto utile avere questo cubo che circonda il nostro punto di vista:ha più senso che questo sia posizionato di fronte al nostro punto di vista.

Il modo più semplice per spostare il cubo è utilizzare l'asse trascinabile che punta verso l'esterno rispetto alle facce visibili del blocco. Ho cliccato sulla freccia blu, corrispondente alla direzione Z, e l'ho trascinata in avanti di circa 3,5 unità.

Solo per rendere questo blocco un po' più visivamente interessante, vorrei ruotarlo attorno ai suoi assi. Per fare ciò, clicco sul pulsante di rotazione nell'angolo in alto a sinistra (è il terzo pulsante nel gruppo di cinque ed è selezionato nell'immagine qui sotto). Il cubo rosso ora ha una serie di cerchi che lo circondano, invece delle tre frecce. Puoi fare clic su questi cerchi e trascinarli per ruotare il cubo, come mostrato di seguito.

Questo è tutto per la prima sezione. Puoi visualizzare in anteprima ciò che vedrai attraverso HoloLens facendo clic sul pulsante Riproduci nella parte superiore centrale dello schermo, che mostrerà qualcosa di simile alla schermata qui sotto. Il cubo ruotato fluttua in un mondo nero, direttamente davanti al nostro punto di vista.

Alla fine ho salvato la scena premendo Ctrl+S e digitato HelloWorld:puoi vederlo nel pannello delle risorse.

Crea uno script C# per far ruotare l'oggetto

Alziamo la complessità. Possiamo scrivere script C# e applicarli agli oggetti nel nostro mondo virtuale.

È molto semplice creare uno script:fai clic con il pulsante destro del mouse sulla nota Risorse nel pannello Progetti e crea uno script C# dai menu contestuali, come mostrato di seguito.

Ho creato uno script chiamato RotatorScript. Per modificarlo, faccio doppio clic su di esso. Questo apre VS2015 per me, anche se durante l'installazione potrebbe aprire MonoDevelop.

Ho inserito il codice qui sotto:

using UnityEngine;
 
public class RotationScript : MonoBehaviour {
 
	public float YAxisRotationSpeed;
 
	// Update is called once per frame
	void Update () {
            this.transform.Rotate(0, YAxisRotationSpeed * Time.deltaTime, 0, Space.Self);
	}
}

Il codice sopra fa una cosa:ogni volta che il frame viene aggiornato dal motore di rendering, l'oggetto a cui viene applicato lo script ruota leggermente attorno ai propri assi. In particolare, in questo caso, ho specificato che la rotazione dell'asse X e la rotazione dell'asse Z è zero e la rotazione attorno all'asse Y sarà YAxisRotationSpeed gradi al secondo.

Il codice sopra si riferisce a Time.deltaTime – questa è una funzione Unity incorporata per dirci quanto tempo è passato dall'ultimo fotogramma. Pertanto, se moltiplichiamo la velocità – YAxisRotationSpeed – per il tempo trascorso – Time.deltaTime – il risultato è il numero di gradi di cui ruotare il nostro cubo.

Dopo aver salvato lo script in Visual Studio, sono tornato a Unity. Ho selezionato il mio cubo nel pannello Gerarchia, quindi ho trascinato il RotationScript nell'ispettore per il cubo. Nella pagina delle proprietà che appare nell'Inspector, ho modificato il valore della "Velocità di rotazione dell'asse Y" in 50.

Ora, quando faccio clic sul pulsante Riproduci in Unity, sono in grado di vedere di nuovo la vista di gioco della scena, ma questa volta il cubo ruota attorno al proprio asse Y.

Ciao mondo!

Mi è venuto in mente che con le semplici abilità apprese in questo post che avrei potuto fare qualcosa di abbastanza interessante con Unity – invece di un cubo rotante, potevo aggiungere una sfera alla scena, applicare un materiale che era un'immagine della Terra e mostrare un globo rotante, che sarebbe un progetto "Hello, World" molto più appropriato. Potrei anche aggiungere una seconda sfera da ruotare attorno a questa, che potrebbe rappresentare la Luna.

  • Come primo passaggio, ho fatto clic sull'oggetto Cubo nella mia gerarchia e l'ho eliminato. Questo ha rimosso il cubo rosso dalla mia scena.
  • Successivamente, ho fatto clic con il pulsante destro del mouse sul pannello Gerarchia e ho selezionato "Crea vuoto". Questo ha creato un GameObject vuoto nella gerarchia.
  • Utilizzando il pannello Trasforma nell'Inspector per il GameObject, ho cambiato la posizione Z in 4, posizionando così il GameObject 4m davanti al mio punto di vista.

  • Successivamente, ho fatto clic con il pulsante destro del mouse su GameObject nella Gerarchia e ho aggiunto una sfera 3d Object. Ho rinominato questa "Terra" e ho cambiato i valori di scala X, Y e Z in 2 (cioè raddoppiandone le dimensioni). Nota come questo è rientrato in GameObject e anche come la sua posizione nella casella Trasforma nell'Inspector è a (0, 0, 0). Ciò significa che il suo centro si trova all'origine del GameObject padre e le modifiche alla posizione lo sposteranno rispetto al GameObject padre.

  • In seguito, ho fatto di nuovo clic con il pulsante destro del mouse su GameObject nella Gerarchia e ho aggiunto un'altra sfera 3D:ho chiamato questo oggetto "Luna" e ho modificato i valori delle scale X, Y e Z in 0,5 (ovvero dimezzandone le dimensioni ). Ho anche cambiato il valore della posizione X in 2, spostando così il suo centro di 2 m a destra del centro dell'oggetto "Terra".

  • Infine per questa parte, ho selezionato il GameObject padre nella vista Gerarchia e trascinato il "RotationScript" sulla superficie dell'Inspector. Nella pagina delle proprietà che appare nell'Inspector, cambio la "Velocità di rotazione dell'asse Y" in 50.

Quando premo il pulsante Riproduci, posso vedere l'animazione renderizzata e mostrare una scena da questa di seguito.

Posso vedere che entrambi gli oggetti ruotano correttamente:la sfera centrale più grande ruota attorno al proprio asse verticale centrale e la sfera più piccola orbita attorno allo stesso asse. Tuttavia, non sembra molto buono con il colore bianco predefinito. Posso migliorarlo utilizzando alcune risorse gratuite dell'Unity Asset Store.

Download delle risorse da Unity Asset Store

Ho cercato nel negozio Unity Asset tramite un browser, all'indirizzo http://www.assetstore.unity3d.com, i rendering gratuiti di Earth e ho trovato la risorsa mostrata di seguito (e collegata a qui).

Ho fatto clic sul pulsante "Apri in Unity" e questo ha cambiato la mia applicazione in primo piano su Unity. La scheda Asset Store era aperta e sono stato in grado di fare clic sul pulsante "Download" per acquisire questa risorsa (ho visto un avviso di compatibilità su come è stato creato con Unity 4). Dopo un paio di pop-up, mi è stata mostrata la finestra in basso e ho scelto di importare uno dei file di materiale di Earth, mostrato di seguito.

Dopo aver fatto clic sul pulsante "Importa", questo file jpeg è apparso nel mio elenco di Risorse, utilizzando la sua struttura di directory originale.

Sono stato in grado di selezionarlo dalla cartella Assets/EarthSimplePlanets/Textures nel pannello Progetto e trascinare il file "EarthSimple1.jpg" sulla superficie dell'Inspector per la sfera terrestre e la superficie di questa sfera si aggiorna per assomigliare molto di più mondo più caratteristico.

Infine, ho selezionato GameObject dalla Gerarchia e ho inclinato l'asse Z di -15 gradi, per dare una leggera inclinazione planetaria. Dopo aver premuto il pulsante Riproduci, l'animazione mostra una sfera bianca che ruota attorno a un pianeta.

Potremmo migliorarlo ulteriormente scaricando più risorse dal negozio per la Luna (un buon candidato è il paesaggio lunare collegato qui), ma per ora, penso che sembrerà abbastanza buono nel nostro mondo di realtà mista di HoloLens.

Conclusione

Questo è tutto per questo post – finora abbiamo:

  • creato un nuovo progetto con Unity,
  • ha aggiunto alcuni oggetti primitivi a questo mondo,
  • ha cambiato il colore di questi oggetti con i materiali,
  • aggiunto uno script C# per spostare questo oggetto,
  • disporre gli oggetti in modo che orbitino attorno a un asse esterno all'oggetto e
  • utilizzato Unity Asset Store per scaricare risorse che rendono il nostro modello più realistico.

La prossima volta parleremo dell'effettiva distribuzione nell'emulatore HoloLens:ci sono alcuni suggerimenti e trucchi che voglio condividere per rendere il viaggio delle altre persone un po' più agevole del mio.