Snapchat Lens Studio per sviluppatori Unity

TL; DR - Snapchat Lens Studio è uno strumento AR potente ed espressivo che ha molto in comune con Unity. Per gli sviluppatori che trascorrono gran parte del loro tempo in Unity, questo articolo offre una rapida panoramica di come i due programmi sono simili e diversi, inclusi esempi di congruenze tra i due, in modo da poter immergersi direttamente con una base di base confortevole.

Al nostro team di Fathom è stato chiesto più volte di sviluppare obiettivi Snapchat da quando lo strumento per crearli, Snapchat Lens Studio, è stato reso pubblico all'inizio del 2018. Ad essere sinceri, inizialmente avevamo scontato il software come una sorta di giocattolo, ma una volta iniziato scavando, abbiamo trovato lo strumento super robusto e che offre un'entusiasmante opportunità per creare rapidamente micro interazioni immersive. Scommetto anche che l'architettura basata sui componenti e l'interfaccia utente generale di Lens Studio sono state fortemente ispirate da Unity, quindi questo articolo!

Siamo arrivati ​​a vedere Lens Studio come una piattaforma per "haikus interattivi", piccoli mondi AR che possono essere un esperimento di interattività AR, un'esperienza di marchio coinvolgente o un'esplorazione puramente creativa che utilizza input basati sul viso. Queste esperienze possono essere pubblicate in pochi minuti e condivise con il mondo utilizzando uno Snapcode generato.

Puoi iniziare subito a costruire obiettivi Snapchat scaricando qui l'applicazione.

E solo per caso, recentemente è stato riferito che Snapchat annuncerà la propria piattaforma di gioco ad aprile 2019. Quale modo migliore per gli sviluppatori di giochi Unity di esplorare questo nuovo ecosistema che attraverso gli strumenti esistenti di Lens Studio?

Prima di immergerci nelle somiglianze dei due programmi, ecco come i progetti di Lens Studio sono diversi da quelli di Unity:

  • Piccole dimensioni del progetto: gli obiettivi confezionati devono essere inferiori a 4 MB
  • JavaScript non tipizzato: vaniglia JS, no C # con digitazione
  • Input limitati: input touch e gesture, input basati sul viso, tracciamento di superficie AR e marker di immagini, quindi nessun gamepad, tastiere, mouse, ecc.
  • Nessuna compilation: tutti gli script qui, che mantengono il flusso di lavoro dell'editor rapido e senza interruzioni
  • Pubblicazione: gli obiettivi possono vivere solo sulla piattaforma mobile di Snapchat, non è possibile condividere file di build esterni
  • Distribuzione ad hoc: gli obiettivi pubblicati ottengono uno Snapcode che è il gateway per la tua esperienza di obiettivo personalizzato
  • Nessuna fisica integrata: molte classi di algebra lineare, ma dovrai codificare la tua fisica e il tuo sistema di collisione o falsificarla
  • Base di codice della comunità limitata: molti esempi di obiettivi funzionanti, ma in realtà non molta condivisione del codice nella comunità. I modelli di Snapchat sono la migliore risorsa esistente che abbiamo trovato finora. Non c'è equivalente a Unity's Asset Store per portare risorse esterne nel tuo progetto

Funzionalità integrate

  • Rilevazione e mappatura del viso: ancoraggio 2D / 3D con semplice occlusione della testa
  • Eventi di gesti del viso: bocca aperta / chiusa, sopracciglia sollevate / abbassate, bacio, sorriso
  • Manipolazione del viso: distorsione / liquefazione, taglio, duplicazione / composito, effetti di immagine (sbiancamento dei denti, mappatura dei toni, cambiamento del colore degli occhi)
  • Risorse 2D / 3D: mesh, testo, gif / immagini come cartelloni pubblicitari, animazione truccata
  • Tracciamento ambientale: marcatori di immagini, marcatori Snapcode, tracciamento di superfici 3D

Interfaccia

Gran parte dell'interfaccia utente tra Unity e Lens Studio è equivalente, mostreremo solo immagini affiancate dei pannelli principali e noteremo come differiscono.

Gerarchia = Oggetti La struttura principale della scena viene visualizzata nel pannello Oggetti. In Lens Studio non esiste il concetto di più scenari come in Unity. L'intero progetto esiste in un singolo oggetto globale di tipo ScriptScene.

Unity Hierarchy panel e Lens Studio Objects panel

Progetto (risorse) = risorse Tutte le risorse importate per il progetto sono gestite nel pannello Risorse. Questi sono mappati nella cartella {Percorso progetto} / Pubblico allo stesso modo in cui la cartella Asset di un progetto Unity rispecchia la struttura del file. È possibile trascinare file esterni su questo pannello per aggiungerli al progetto.

Pannello Progetto Unity e pannello Risorse di Lens Studio

Scene = Scene Lo spazio principale dell'editor per entrambi i programmi è la vista Scene. Le stesse scorciatoie dello strumento di trasformazione in Unity insieme ai tasti QWERTY funzionano anche in Lens Studio. La differenza principale è la vista scena 2D in Lens Studio, che mostrerà una vista 2D contestuale, a seconda di quale SceneObject è selezionato. Ad esempio, un oggetto FaceMask selezionato visualizzerà le ancore di rilegatura faccia 2D quando si seleziona Visualizza scena 2D.

Viste della scena di Unity e Lens Studio

Gioco = Anteprima Puoi visualizzare l'anteprima dell'obiettivo dal vivo in qualsiasi momento nel pannello di anteprima. A differenza di Unity, qui non c'è riproduzione o pausa. L'obiettivo funziona costantemente e si riavvierà quando rileva script o cambiamenti di scena. È possibile forzare il riavvio dell'obiettivo facendo clic sulla freccia circolare per ripristinare l'anteprima. È possibile visualizzare l'obiettivo attraverso la webcam facendo clic sull'icona piccola. Infine, puoi eseguire lo streaming dell'obiettivo direttamente sul tuo telefono dopo aver associato Lens Studio al tuo dispositivo. Questo è super utile per le interazioni dell'obiettivo con tracciamento AR.

Unity Game panel e Lens Studio Preview panel

Inspector = Inspector Quando viene selezionato SceneObject nel pannello Oggetti, Inspector mostrerà le impostazioni e i componenti collegati a quell'oggetto. Guarda come simile!

Unity Inspector e Lens Studio Inspector

Console = Logger Ottieni feedback dai tuoi script nel pannello Logger. Invece di Debug.Log ("You say Console"); a la Unity, è possibile utilizzare la funzione di stampa globale ("I say Logger") ;.

Unity Console e Lens Studio Logger

GameObject, incontra SceneObject

L'elemento generico di Unity in una scena è GameObject e l'equivalente in Lens Studio è SceneObject. Ogni SceneObject ha una trasformazione che definisce il suo orientamento nello spazio 3D. Sono disposti in una gerarchia padre-figlio, quindi SceneObjects vuoti possono essere usati come cartelle che contengono più figli.

Esiste anche un sistema prefabbricato simile a quello di Unity. Qualsiasi SceneObject può essere trascinato nel pannello Risorse per creare un prefabbricato.

Creazione di un prefabbricato in Lens Studio

La grande differenza qui è che un prefabbricato è configurato sull'istanza, non sull'asset prefabbricato nel pannello Risorse. Vale a dire, prima di creare un'istanza di un prefabbricato trascinandolo nella gerarchia degli oggetti, apportare alcune modifiche e quindi premere il pulsante Applica. Ciò spingerà le modifiche a tutti gli altri prefabbricati istanziati di questo tipo e a tutte le istanze future.

Premi il pulsante Applica per eseguire il commit delle modifiche prefabbricate

MonoBehaviour, incontra Component

Una delle migliori caratteristiche di Unity è la sua architettura basata su componenti. Come avrai notato nel confronto del pannello Inspector sopra, Lens Studio utilizza un sistema quasi identico. È possibile collegare un numero qualsiasi di componenti a un determinato SceneObject per definirne il comportamento.

Tutti i componenti Unity derivano dalla classe MonoBehaviour e tutti i componenti Lens Studio derivano dalla classe Component. Ogni componente che puoi collegare a SceneObject e ogni script che crei deriverà automaticamente da questa classe.

Esistono numerosi componenti integrati che possono essere utilizzati per creare comportamenti personalizzati. Premi il pulsante + Aggiungi componente nel pannello Impostazioni per visualizzarli.

Aggiunta di un componente integrato a SceneObject

Basta con l'interfaccia utente, vediamo il codice!

Ok ok. Abbiamo visto come Unity e Lens Studio siano simili dal punto di vista dell'interfaccia. Entriamo nel codice!

Associare uno script a SceneObject Come Unity, tutta la logica personalizzata viene creata nelle istanze di ScriptComponent. Per prima cosa crea una risorsa Script nel pannello Risorse.

Dopo aver creato e nominato la tua risorsa Script, ora puoi allegare lo script a qualsiasi SceneObject dal pannello Impostazioni. Uno ScriptComponent può contenere qualsiasi numero di risorse di script, la cui logica verrà attivata da un ScriptEvent corrispondente. Per gli script che non hanno alcuno stato, puoi semplicemente scegliere l'evento rilevante e il codice verrà eseguito di conseguenza.

Se sei come me e desideri un'esperienza di scripting più simile a Unity, puoi eseguire un singolo script dall'evento Inizializzato e associare i callback a qualsiasi altro evento che si verifica nella scena. Ecco un esempio di quella sintassi.

Gli eventi vengono associati utilizzando i nomi delle loro classi di eventi come stringa. Puoi trovare tutti gli eventi disponibili qui.

Se si desidera includere lo stato nello script (che esiste per istanza dello script nella scena), utilizzare le variabili nella parte superiore dell'ambito dello script ed eseguire lo script durante l'evento Script inizializzato a livello di componente.

Ora probabilmente stai pensando a tutti i bizzarri micro giochi che puoi fare usando il rilevamento delle sopracciglia come input! So di esserlo…

Creazione di proprietà di script in Inspector In Unity, le proprietà pubbliche sono esposte a Inspector a livello di componente. Ovviamente, Lens Studio ha una funzione equivalente, sebbene la sintassi appaia diversa. Puoi fornire molti tipi di dati del campo di input e riferimenti ad altri SceneObjects e componenti usando il seguente codice:

// Il simbolo @input dopo le barre dei commenti indica un campo di input // @ input int myScore // @ input vec3 myColor {"widget": "color"} // @ input SceneObject someObjectReference // @ input Component.ScriptComponent someOtherScript // @input Component.MeshVisual someOtherMesh
// Accedere a tutte queste proprietà dall'oggetto `script` print (script.myScore);

Notare come tipi specifici di componente utilizzano il componente. prefisso per esporli all'ispettore. Senza questo prefisso, lo script genererà un errore.

In alcuni casi, vorrai un'interfaccia utente migliore per il tipo di dati che stai esponendo a Inspector. Unity fa un ottimo lavoro scegliendo l'interfaccia utente di input corretta per il tipo di dati. Con Len Studio, dovrai essere un po 'più esplicito. Vedi la riga del widget myColor sopra e trova altri esempi di UI di input personalizzato qui.

Ora, tutte le nostre proprietà sono disponibili in Inspector

Far accadere le cose

Come prendere riferimenti a SceneObject e Component Tutto inizia con la variabile di script, che è un riferimento all'istanza di script corrente, come questa nel contesto di Unity. Una volta che hai un riferimento a SceneObject, puoi iniziare a prendere i componenti e manipolarne i valori. Ecco come afferrare quei riferimenti nel codice:

// Ottieni un riferimento a questo SceneObject // Equivalente a `gameObject` in Unity var so = script.getSceneObject ();
// Ottieni un riferimento a Transform di SceneObject // Equivalente a `transform` in Unity var t = so.getTransform ();
// Equivalente a `gameObject.GetComponent () `in Unity var meshViz = so.getComponentByIndex (" MeshVisual ", 0);

Trova altri metodi disponibili per SceneObject, come l'aggiunta o la rimozione di componenti in fase di esecuzione qui.

Comunicazione tra script Quando si scrive uno script, è possibile esporre proprietà e metodi "pubblici" tramite l'oggetto script.api.

// Script 1
// Stampa un messaggio script.api.showWelcomeMessage = function (msg) {print (msg); }
// Script 2
// Imposta il riferimento all'altro oggetto in Inspector // @ input Component.ScriptObject welcomeScript
// Controlla il riferimento Script1 e che il // metodo che vogliamo usare esista se (script.welcomeScript && script.welcomeScript.api.showWelcomeMessage) {// Invia un messaggio di benvenuto usando il nostro riferimento a Script 1 script.welcomeScript.api .showWelcomeMessage ("Ciao!"); }

Infine, lo spazio dei nomi globale è disponibile per l'accesso statico a proprietà e metodi. I valori impostati qui sono disponibili per tutti i tuoi, purché siano definiti prima di provare ad accedervi:

global.myMessage = "Ciao, mondo!"; global.sayHello = function (message) {global.myMessage = message; stampare (global.myMessage); }

Prossimi passi

Ormai è probabilmente chiaro quanto Unity sia simile a Lens Studio, il che è ottimo per i creatori di Unity che vogliono iniziare a sperimentare con obiettivi AR condivisibili. C'è molto altro da imparare, come attivare l'animazione 3D, gestire l'input tattile e condividere le tue creazioni.

Se hai sperimentato Lens Studio, condividi i tuoi obiettivi nei commenti. Oppure, se sei un utente Unity che è passato allo sviluppo dell'obiettivo, facci sapere cosa ne pensi dello strumento!

Eric Howard è capo tecnologo e co-fondatore di Fathom, uno studio creativo digitale che dà vita alle esperienze del marchio attraverso la narrazione e l'interazione. www.fathom.company