Crea un gioco AR con AR Foundation di Unity

1. Panoramica

ARCore è il framework di Google per la creazione di esperienze di realtà aumentata sugli smartphone. Puoi utilizzare la piattaforma AR di Unity per creare applicazioni AR multipiattaforma.

Cosa creerai

In questo codelab, creerai un gioco semplice utilizzando AR Foundation. L'obiettivo del gioco è raccogliere pacchi utilizzando un'auto controllata da te con il tuo dispositivo portatile.

Tuttavia, non accade in un mondo interamente virtuale. Metterai atomi fisici e frammenti digitali per creare un nuovo tipo di esperienza con un gioco che comprenda l'ambiente circostante.

Al termine di questo codelab, il tuo gioco sarà in grado di:

  • Rileva gli aerei del mondo reale e disegna un campo di gioco sopra.
  • Proietta i raggi provenienti dall'inquadratura della videocamera e rileva le incroci con gli aerei.
  • Reagisci alle condizioni di illuminazione del mondo reale per dare al tuo gioco più realismo.

Obiettivi didattici

  • Come configurare un progetto che utilizza AR Foundation di Unity.
  • Come utilizzare ARPlaneManager per abbonarsi a nuovi aerei.
  • Come utilizzare Raycast per trovare incroci con geometria virtuale
  • Come usare ARLightEstimationData per illuminare la scena.

Che cosa ti serve

2. Configurazione dell'ambiente di sviluppo

In questo passaggio, prepara il tuo ambiente per lo sviluppo con la piattaforma AR di Unity.

Assicurati che il tuo dispositivo sia compatibile con l'AR

Le esperienze AR sui dispositivi Android si basano su ARCore, disponibile sui dispositivi supportati da ARCore. Assicurati che il tuo dispositivo di sviluppo sia compatibile con l'AR. In alternativa, puoi utilizzare un'istanza dell'emulatore Android compatibile con AR configurata correttamente.

Configura il debug USB sul tuo dispositivo

Per eseguire le app di debug, devi attivare le Opzioni sviluppatore sul dispositivo. Se non l'hai ancora fatto, consulta la documentazione di Android relativa all'attivazione delle opzioni sviluppatore e del debug USB.

Installa Unity (2020.3 LTS)

Sulla workstation, installa Unity 2020 LTS. In questo codelab, vengono mostrati screenshot dell'UI di Unity nella versione 2020.3 (LTS). Altre versioni di Unity potrebbero funzionare, ma potrebbero richiedere passaggi aggiuntivi. Il video potrebbe avere un aspetto diverso rispetto agli screenshot mostrati qui.

Crea un nuovo progetto

Crea un nuovo progetto utilizzando il modello della pipeline di Universal Render. Assegnagli un nome descrittivo e una posizione appropriata, quindi premi CREA.

Installa i framework richiesti

La pagina di base per l'AR di Unity è disponibile nel gestore di pacchetti Unity.

  1. Aprila facendo clic su Finestra > Gestione pacchetti.

  1. In questa finestra, installa i pacchetti che utilizzerai in questo codelab. Visualizza le ultime versioni di questi framework espandendo la relativa voce tramite l'icona ►. Installa la versione più recente di ciascuno di questi framework:
    • Elementi di base AR
    • Plug-in ARCore XR

Al termine, il gestore di pacchetti dovrebbe avere il seguente aspetto:

Installa il pacchetto di base

Per questo codelab, abbiamo fornito uno starter pacchetto che contiene prefabbricati e script che velocizzano alcune parti del codelab, in modo che tu possa concentrarti sull'utilizzo di AR Foundation.

  2. Installa il pacchetto iniziale aprendo Asset > Importa pacchetto > Pacchetto personalizzato... e apertura di starter-package.unitypackage.
  3. Nella finestra visualizzata, assicurati che sia tutto selezionato.
  4. Fai clic su Importa.

Modifica impostazioni build

Dato che l'applicazione verrà eseguita su Android, cambia la piattaforma di sviluppo in Android:

  1. Apri File > Impostazioni build.
  2. Nel riquadro Piattaforma, seleziona Android.
  3. (Facoltativo) Abilita Buildment Build e Debug degli script per conservare le informazioni di debug durante l'esecuzione dell'app.
  4. Fai clic su Cambia piattaforma.

Modifica impostazioni progetto

AR Foundation deve essere configurato per inizializzare i sistemi XR all'avvio.

  1. Apri Modifica > Project Settings... (Impostazioni progetto) e fai clic sulla sezione XR Plug-in Management (Gestione plug-in XR).
  2. Nella scheda Android, attiva ARCore.

  1. Nel riquadro di sinistra, fai clic sulla sezione Player.
  2. Nella scheda Android, in Altre impostazioni, rimuovi Vulkan dalle API grafiche.

  1. Le app richieste AR che utilizzano ARCore richiedono un livello API minimo di 24. Scorri verso il basso fino a Livello API minimo. Imposta il livello API minimo su 24.

Aggiungi gli elementi richiesti per la scena

Il modello di pipeline di Universal Render include alcuni oggetti di gioco che non userai in questo tutorial.

  1. Elimina tutti gli oggetti di gioco in SampleScene.

  1. Aggiungi oggetti di base AR. Fai clic con il tasto destro del mouse sul riquadro Gerarchia. Utilizza questo menu per aggiungere:
  • XR > Sessione AR: questo oggetto controlla il ciclo di vita di un'esperienza AR.
  • XR > Origine della sessione AR: questo oggetto trasforma le coordinate AR in coordinate del mondo Unity.
  • Chiaro > Luce direzionale: fornisce una fonte di luce per illuminare gli oggetti del gioco.

La gerarchia dovrebbe essere simile alla seguente:

  1. Espandi l'origine della sessione AR che hai creato nella gerarchia e seleziona l'oggetto Fotocamera AR. Nella finestra di ispezione, cambia il tag in MainCamera.

Configura il rendering

È necessaria una modifica per la pipeline Universal Render di Unity per essere compatibile con AR Foundation.

  1. Nel riquadro Progetto, vai ad Asset > Impostazioni per trovare l'asset ForwardRenderer.

  1. Seleziona ForwardRenderer.
  2. Nel riquadro Controllo, utilizza Aggiungi funzionalità del renderer per aggiungere una funzionalità di rendering in background AR. Questo componente eseguirà il rendering del feed della videocamera nella scena.

Verifica la configurazione

  1. Assicurati che il dispositivo sia collegato e che il debug ADB sia attivo.
  2. Fai clic su File > Crea ed esegui... L'applicazione verrà caricata sul tuo dispositivo e avviata una volta installata.
  3. Dovresti vedere il feed della videocamera sullo schermo del dispositivo.

Nel passaggio successivo, inizierai ad aggiungere funzionalità alla tua app.

3. Rileva gli aerei nel mondo reale

Ora che hai definito una scena di base, puoi iniziare a sviluppare il gioco. In questo passaggio rileverai gli aerei e li attirerai sulla scena.

Aggiungi un componente ARPlaneManager

Un ARPlaneManager rileva ARPlane e crea, aggiorna e rimuove gli oggetti del gioco quando la comprensione dell'ambiente da parte del dispositivo cambia.

  1. Utilizzando il riquadro Gerarchia, crea un campo GameObject vuoto.
  2. Rinominalo in Driving Surface Manager. Questo componente mostrerà i piani finché non ne verrà selezionato uno dal player.
  3. Seleziona il nuovo oggetto del gioco. Nel riquadro Controllo, fai clic su Aggiungi componente per aggiungere un Gestore dei piani AR.

  1. Configura ARPlaneManager impostando il campo Plane Prefab:
    1. Fai clic sul pulsante accanto a None per visualizzare la finestra Seleziona GameObject.
    2. Seleziona la scheda Asset e cerca Piano di superficie di guida.

Questo prefabbricato del pacchetto base fornisce una texture granulosa per il pavimento che verrà utilizzata come decorazione dell'aereo.

  1. Cambia Detection Mode in Horizontal. In questo modo, il ARPlaneManager viene configurato in modo da fornire solo aerei orizzontali, ideali per la guida.

Aggiungi un componente ARRaycastManager

Un elemento ARRaycastManager espone la funzionalità Raycast. Nel passaggio successivo, utilizzeremo questo oggetto per fornire i controlli all'utente.

  1. Assicurati che l'oggetto denominato Driving Surface Manager sia selezionato nel riquadro Gerarchia.
  2. Nell'ispezione, fai clic su Aggiungi componente per aggiungere un componente ARRaycastManager all'oggetto del tuo gioco.

Non sono necessarie ulteriori configurazioni per questo componente.

Aggiungi un componente DrivingSurfaceManager

Un DrivingSurfaceManager è uno script di supporto del pacchetto iniziale che consente la selezione di un ARPlane. Dopo aver selezionato ARPlane, tutti gli altri aerei verranno nascosti e i nuovi aerei verranno disattivati.

  1. Assicurati che l'oggetto denominato Driving Surface Manager sia selezionato nel riquadro Gerarchia.
  2. Nell'ispezione, fai clic su Aggiungi componente per aggiungere un componente DrivingSurfaceManager all'oggetto del tuo gioco.

Non sono necessarie ulteriori configurazioni per questo componente.

Esegui l'app

  1. Fai clic su File > Build and Run... per testare le modifiche.
  2. Punta il dispositivo verso una superficie orizzontale reale e muovilo per migliorare la comprensione del mondo da parte di ARCore.

  1. Quando ARCore ha rilevato un aereo, dovresti vedere una texture sporca che copre le superfici del mondo reale. ARPlaneManager crea un'istanza del valore Plane Prefab specificato per ogni piano rilevato. L'elemento prefabbricato Driving Surface Plane ha un componente ARPlaneMeshVisualizer che crea un mesh per un determinato ARPlane.

Nel passaggio successivo, utilizzerai un aereo rilevato come campo di gioco.

4. Eseguire un test degli hit sugli aerei rilevati

Nel passaggio precedente hai programmato un'applicazione in grado di rilevare gli aerei. Questi aerei si riflettono nella scena del gioco. Ora aggiungerai interattività con questi piani creando un reticolo di mira e un'auto che guiderà sulla superficie dell'aereo rilevato.

Creare un reticolo di mira

Lo schema di controllo per questa app prevede che il giocatore punti il telefono verso una superficie. Per fornire un feedback visivo chiaro per il luogo designato, userai un reticolo di mira.

Per "rimanere" questo reticolo a un aereo AR, usa un test di successo. Un test degli hit è una tecnica che calcola le intersezioni quando si proietta un raggio in una data direzione. Utilizzerai un test di hit per rilevare un incrocio nella direzione del campo visivo della videocamera.

Aggiungi il reticolo

  1. Nel riquadro Progetto nella parte inferiore dello schermo, seleziona Asset > pacchetto iniziale.
  2. Posiziona il Reticolo Prefab nella scena trascinandolo nel riquadro Gerarchia del progetto.
  3. Seleziona il reticolo nella gerarchia.
  4. Nella finestra di ispezione, fai clic su Aggiungi componente. Aggiungi lo script ReticleBehaviour dal pacchetto iniziale. Questo script contiene un boilerplate per il controllo del reticolo.
  5. Lo script ReticleBehaviour dipende dal Driving Surface Manager che hai creato in precedenza, quindi aggiungi la dipendenza facendo clic sul selettore Driving Surface Manager. Seleziona la scheda Scena e scegli Driving Surface Manager.

Modifica ReticleBehaviour

Lo script ReticleBehavior posizionerà il reticolo sul piano che si trova al centro dell'area visibile del dispositivo.

  1. Apri lo script ReticleBehaviour.cs facendo doppio clic sul campo Script.
  2. Determina il centro dello schermo utilizzando ViewToScreenPoint della fotocamera. Modifica il metodo Update() per aggiungere quanto segue:
var screenCenter = Camera.main.ViewportToScreenPoint(new Vector3(0.5f, 0.5f));
  1. Usa questo punto per condurre un raycast. Aggiungi quanto segue:
var hits = new List<ARRaycastHit>();
DrivingSurfaceManager.RaycastManager.Raycast(screenCenter, hits, TrackableType.PlaneWithinBounds);

La variabile hits conterrà ARRaycastHit che descrivono i punti sui tracciabili che sono intersecati da ray.

  1. Determina il punto di interesse di intersezione eseguendo una query sull'elenco hits. Dai la priorità all'aereo bloccato contenuto in DrivingSurfaceManager e, se non esiste, utilizza il primo aereo colpito. Aggiungi il seguente codice alla fine di Update():
CurrentPlane = null;
ARRaycastHit? hit = null;
if (hits.Length > 0)
{
    // If you don't have a locked plane already...
    var lockedPlane = DrivingSurfaceManager.LockedPlane;
    hit = lockedPlane == null
        // ... use the first hit in `hits`.
        ? hits[0]
        // Otherwise use the locked plane, if it's there.
        : hits.SingleOrDefault(x => x.trackableId == lockedPlane.trackableId);
}
  1. Se hit contiene un risultato, sposta la trasformazione di GameObject nella posizione dell'hit.
if (hit.HasValue)
{
    CurrentPlane = DrivingSurfaceManager.PlaneManager.GetPlane(hit.Value.trackableId);
    // Move this reticle to the location of the hit.
    transform.position = hit.Value.pose.position;
}
Child.SetActive(CurrentPlane != null);

Testa il reticolo

  1. Fai clic su File > Build and Run... per testare le modifiche.
  2. Quando punti il dispositivo verso un aereo, dovresti vedere il reticolo che segue i movimenti della videocamera.

Crea un'auto

Il giocatore controllerà un'auto giocattolo che si muoverà verso la posizione del reticolo. Lo Starter Package include un modello e un comportamento dell'auto.

Aggiungi CarManager alla scena

  1. In Gerarchia, crea un nuovo GameObject vuoto.
  2. Rinominalo in Car Spawner.
  3. Seleziona l'oggetto che hai creato. Nel riquadro Gerarchia, fai clic su Aggiungi componente per aggiungere il componente CarManager.
  4. Configura le dipendenze di CarManager facendo clic sul selettore per ogni campo:
    • Prefabbricati auto: in Asset, seleziona Prefabbricati auto.
    • Reticolo: in Scena, seleziona Reticolo prefabbricato.
    • Drive Surface Manager: in Scena, seleziona Drive Surface Manager.

Questo comportamento di CarManager fa sentire una macchinina sull'aereo su cui si trova il reticolo. Se preferisci, puoi consultare lo script CarBehaviour per sapere come è programmata l'auto.

Test drive

  1. Fai clic su File > Crea ed esegui per testare le modifiche.
  2. Quando tocchi un aereo, dovresti vedere apparire in quella posizione una piccola auto. Quest'auto seguirà il reticolo.

Aggiungi l'elemento del gioco

Ora che il giocatore può controllare un'entità nella scena, assegnagli una destinazione da raggiungere.

  1. Crea un nuovo GameObject vuoto nella gerarchia.
  2. Rinominalo in Package Spawner.
  3. Seleziona l'oggetto che hai creato. Nel riquadro Gerarchia, fai clic su Aggiungi componente per aggiungere il componente PackageSpawner.
  4. Configura le dipendenze di PackageSpawner facendo clic sul selettore per ogni campo:
    • Pacchetto prefabbricato: in Asset, seleziona Pacchetto prefabbricato.
    • Guida di Surface Manager In Scena, seleziona Guida di Surface Manager.

Questo comportamento di PackageSpawner genera un nuovo pacco in una posizione casuale su un ARPlane bloccato se non esiste già un pacco.

Testa il gioco

  1. Fai clic su File > Crea ed esegui per testare le modifiche. 2. Dopo aver creato un'auto, dovrebbe apparire un pacco.
  2. Raggiungi il pacco con l'auto.
  3. Ne verrà visualizzato uno nuovo in una posizione casuale.

5. Configura la stima dell'illuminazione

Ora che il gioco di base è stato completato, aggiungi un tocco di realismo alla tua scena AR. In questo passaggio utilizzerai l'API Lighting Estimation di ARCore per rilevare l'illuminazione presente nel mondo reale in base ai fotogrammi della fotocamera in arrivo. Queste informazioni verranno utilizzate per adattare l'illuminazione della scena all'illuminazione del mondo reale.

Attiva la stima dell'illuminazione

  1. In Gerarchia, espandi la sezione Origine sessione AR e seleziona l'oggetto Videocamera AR.
  2. In Ispetore, espandi lo script Gestione fotocamera AR.
  3. Modifica il campo Stima dell'illuminazione in Tutto.

Modifica la luce direzionale

  1. In Gerarchia, seleziona l'oggetto Luce direzionale.
  2. Aggiungi il componente LightEstimation. Questo componente del pacchetto base fornisce alcuni boilerplate per l'iscrizione ai cambiamenti dell'illuminazione.
  3. Nella funzione FrameReceived(), aggiungi:
ARLightEstimationData lightEstimation = args.lightEstimation;

if (lightEstimation.averageBrightness.HasValue)
    Light.intensity = lightEstimation.averageBrightness.Value;

if (lightEstimation.averageColorTemperature.HasValue)
    Light.colorTemperature = lightEstimation.averageColorTemperature.Value;

if (lightEstimation.colorCorrection.HasValue)
    Light.color = lightEstimation.colorCorrection.Value;

if (lightEstimation.mainLightDirection.HasValue)
    Light.transform.rotation = Quaternion.LookRotation(lightEstimation.mainLightDirection.Value);

if (lightEstimation.mainLightColor.HasValue)
    Light.color = lightEstimation.mainLightColor.Value;

if (lightEstimation.mainLightIntensityLumens.HasValue)
    Light.intensity = lightEstimation.averageMainLightBrightness.Value;

if (lightEstimation.ambientSphericalHarmonics.HasValue)
{
    RenderSettings.ambientMode = AmbientMode.Skybox;
    RenderSettings.ambientProbe = lightEstimation.ambientSphericalHarmonics.Value;
}

Testa le modifiche

  1. Fai clic su File > Crea ed esegui per testare le modifiche.
  2. Guardando gli oggetti presenti nella scena, puoi notare che sono colorati a seconda dell'illuminazione dell'ambiente.
  3. Se possibile, prova a modificare l'illuminazione. Ad esempio, prova a spegnere le luci nella stanza in cui ti trovi. Dovresti vedere l'illuminazione degli oggetti che si adatta al cambiamento dell'illuminazione reale.

6. Conclusione

Complimenti! Hai completato il codelab su Unity AR Foundation.

Argomenti trattati

  • Come configurare un progetto di base utilizzando la piattaforma AR di Unity e la pipeline di rendering universale.
  • Come utilizzare ARPlaneManager per abbonarsi a nuovi aerei.
  • Come utilizzare Raycast per trovare incroci con geometria virtuale.
  • Come usare ARLightEstimationData per illuminare la scena.

Passaggi successivi

Compiti bonus

Se vuoi approfondire il gioco che hai creato qui, ecco alcune idee che potresti perseguire:

  • Aggiungi un segnalino punteggio al tuo gioco modificando TextMeshPro quando PackageManager genera un nuovo pacchetto.
  • Controlla le informazioni sulle prestazioni quando il gioco è in esecuzione attivando l'overlay prestazioni.
  • Usa i Raycast permanenti per posizionare per primi i nuovi oggetti nella scena. Quando viene rilevato un piano nell'area, l'oggetto si aggiorna per agganciarsi a quell'area.