Unity Geliştiricileri için Snapchat Lens Stüdyosu

TL; DR - Snapchat Lens Studio, Unity ile çok ortak noktası olan güçlü ve etkileyici bir AR aracıdır. Zamanlarının çoğunu Unity'de geçiren geliştiriciler için, bu makale, ikisi arasındaki uyum örnekleri de dahil olmak üzere, iki programın nasıl benzer ve farklı olduğuna hızlı bir genel bakış sunar, böylece rahat bir başlangıç ​​çizgisine girebilirsiniz.

Fathom'daki ekibimizden, Snapchat lens stüdyosu, 2018'in başlarında halka açıldığından beri Snapchat lenslerini birkaç kez geliştirmesi istendi. Dürüst olmak gerekirse, yazılımı başlangıçta bir çeşit oyun olarak indirdik, ancak bir kez başladık kazarken, aracı süper sağlam bulduk ve sürükleyici AR mikro etkileşimlerini hızlı bir şekilde oluşturmak için heyecan verici bir fırsat sunduğunu gördük. Ben de, Lens Studio'nun bileşen tabanlı mimarisinin ve genel UI'sının Unity'den büyük ölçüde ilham aldığını iddia ediyorum, bu nedenle bu makale!

Lens Studio'yu “etkileşimli haikus”, AR etkileşimlerinde bir deney, ilgi çekici bir markalı deneyim veya yüz tabanlı girdileri kullanarak tamamen yaratıcı bir keşif olabilecek küçük AR dünyaları için bir platform olarak görmeye geldik. Bu deneyimler dakikalar içinde yayınlanabilir ve oluşturulan bir Snapcode kullanılarak dünyayla paylaşılabilir.

Uygulamayı buradan indirerek Snapchat lenslerini derhal oluşturmaya başlayabilirsiniz.

Ve şans eseri, geçtiğimiz günlerde Snapchat'in Nisan 2019'da kendi oyun platformunu açıklayacağı bildirildi. Unity oyun geliştiricilerinin bu yeni ekosistemi mevcut Lens Studio araçlarından daha iyi keşfetmesi için daha iyi bir yol var mı?

İki programın benzerliklerine dalmadan önce, Lens Studio projelerinin Unity projelerinden farkı şu şekildedir:

  • Küçük proje boyutu: paketlenmiş lensler 4 MB'ın altında olmalıdır
  • Şifrelenmemiş JavaScript: vanilya JS, yazarken C # yok
  • Sınırlı girişler: dokunma ve hareket girişi, yüz tabanlı giriş, AR yüzeyi ve görüntü işaretleyici izleme, bu nedenle gamepad, klavye, fare vb.
  • Derleme yok: burada tüm komut dosyaları, düzenleyici iş akışını hızlı ve kesintisiz tutar
  • Yayınlama: lensler yalnızca Snapchat'in mobil platformunda yaşayabilir, harici yapı dosyaları paylaşılamaz
  • Geçici dağıtım: yayınlanan lensler, özel lens deneyiminize açılan bir Snapcode alır
  • Yerleşik fizik yok: bol miktarda lineer cebir sınıfı, ancak fizik ve çarpışma sisteminizi kodlamanız veya taklit etmeniz gerekecek
  • Sınırlı topluluk kod tabanı: çok sayıda çalışma lensi örneği, ancak toplulukta gerçekten fazla kod paylaşımı yok. Snapchat'in şablonları, şimdiye kadar bulduğumuz en iyi kaynak. Harici kaynakları projenize getirmek için Unity'nin Varlık Mağazası'na eşdeğer yoktur.

Yerleşik Özellikler

  • Yüz algılama ve haritalama — Basit kafa oklüzyonu ile 2D / 3D ankraj
  • Yüz hareket olayları — ağız açma / kapama, kaşlar kaldırıldı / alçaltıldı, öpücük, gülümse
  • Yüz manipülasyonu - deforme etme / sıvılaştırma, dilim, çoğaltma / kompozit, görüntü efektleri (diş beyazlatma, ton eşleme, göz rengi değişimi)
  • 2D / 3D varlıklar - reklam panoları olarak kafes, metin, gifler / görüntüler, hileli animasyon
  • Ortam izleme - görüntü işaretleri, Snapcode işaretleri, 3D yüzey izleme

Arayüz

Unity ve Lens Studio arasındaki UI'nin çoğu eşdeğerdir, sadece ana panellerin yan yana görüntülerini göstereceğiz ve nasıl farklı olduklarını not edeceğiz.

Hierarchy = Nesneler Ana sahne ağacı Nesneler panelinde görüntülenir. Lens Studio'da Unity'de olduğu gibi multipleScenes kavramı yoktur. Tüm proje ScriptScene türünde tek bir global nesnede bulunur.

Unity Hiyerarşi paneli ve Lens Studio Nesneleri paneli

Project (Varlıklar) = Kaynaklar Proje için içe aktarılan tüm kaynaklar Kaynaklar panelinde yönetilir. Bunlar, bir Unity projesinin Varlıklar klasörü dosya yapısının aynası gibi {Proje Yolu} / Ortak klasörüne eşlenir. Harici dosyaları projeye eklemek için bu panele sürükleyebilirsiniz.

Unity Project paneli ve Lens Studio Kaynakları paneli

Scene = Scene Her iki program için ana editör alanı Sahne görünümüdür. QWERTY anahtarları boyunca Unity'deki aynı dönüştürme aracı kısayolları da Lens Studio'da çalışır. Temel fark, hangi SceneObject öğesinin seçildiğine bağlı olarak, bağlamsal bir 2B görünüm gösteren Lens Stüdyosu'ndaki 2B Sahne Görünümüdür. Örneğin, 2B Sahne Görüntüle seçildiğinde seçilen bir FaceMask nesnesi 2B yüz bağlama bağlantılarını görüntüler.

Unity ve Lens Studio Scene görünümleri

Oyun = Önizleme Canlı lensinizi Önizleme panelinde her zaman önizleyebilirsiniz. Unity'den farklı olarak, burada Oynat veya Duraklat yoktur. Lens sürekli çalışıyor ve kodlama veya sahne değişiklikleri algıladığında yeniden başlayacak. Önizlemeyi Sıfırla için dairesel oku tıklatarak lensi yeniden başlatmaya zorlayabilirsiniz. Küçük simgeyi tıklayarak lensi web kameranızdan görüntüleyebilirsiniz. Son olarak, Lens Studio'yu cihazınızla eşledikten sonra lensi doğrudan telefonunuza aktarabilirsiniz. Bu, AR-izlemeli lens etkileşimleri için çok kullanışlıdır.

Unity Oyun paneli ve Lens Studio Önizleme paneli

Inspector = Inspector Nesneler panelinde bir SceneObject seçildiğinde, Inspector bu nesneye bağlı ayarları ve bileşenleri gösterir. Bakın ne kadar benzer!

Birlik Müfettişi ve Lens Stüdyosu Müfettişi

Console = Logger Logger panelindeki komut dosyalarınızdan geri bildirim alın. Debug.Log ("Konsol diyorsun") yerine; a la Unity, global işlev print'i kullanabilirsiniz ("I Logger" diyorum);

Unity Console ve Lens Studio Kaydedici

GameObject, SceneObject ile tanışın

Unity'nin bir sahnedeki genel öğesi GameObject ve Lens Studio'daki eşdeğeri de SceneObject'tir. Her SceneObject, 3B alanda yönelimini tanımlayan bir Dönüşüme sahiptir. Bir üst-alt hiyerarşisinde düzenlenirler, bu nedenle boş SceneObjects birden çok alt öğe içeren klasörler olarak kullanılabilir.

Birliğe benzer bir Prefabrik sistem de vardır. Herhangi bir SceneObject, bir prefabrik oluşturmak için Kaynak paneline sürüklenebilir.

Lens Stüdyosunda Prefabrik Oluşturma

Buradaki en büyük fark, Kaynaklar panelindeki prefabrik öğede değil, örnekte bir prefabrik yapılandırılmış olmasıdır. Yani, önce bir prefabrik nesneyi Nesneler hiyerarşisine sürükleyerek başlatır, bazı değişiklikler yapar ve ardından Uygula düğmesine basarsınız. Bu, değişiklikleri bu türdeki diğer tüm örneklenmiş prefabriklere ve gelecekteki tüm örneklere gönderecektir.

Prefabrik değişiklikler yapmak için Uygula düğmesine basın

MonoBehaviour, Bileşenle tanışın

Unity'nin en iyi özelliklerinden biri, bileşen tabanlı mimarisidir. Yukarıdaki Müfettiş paneli karşılaştırmasında fark etmiş olabileceğiniz gibi, Lens Studio neredeyse aynı sistemi kullanır. Davranışını tanımlamak için belirli bir SceneObject öğesine istediğiniz sayıda Bileşen ekleyebilirsiniz.

Tüm Unity bileşenleri MonoBehaviour sınıfından türetilir ve tüm Lens Studio bileşenleri Component sınıfından türetilir. Bir SceneObject öğesine ekleyebileceğiniz her bileşen ve oluşturduğunuz her komut dosyası otomatik olarak bu sınıftan türetilir.

Özel davranış oluşturmak için kullanılabilecek bir dizi yerleşik bileşen vardır. Bunları görüntülemek için Denetçi panelindeki + Bileşen Ekle düğmesine basın.

Bir SceneObject öğesine yerleşik bir bileşen ekleme

UI Hakkında Yeter, Hadi Kodu Görelim!

Tamam, tamam. Unity ve Lens Studio'nun arayüz açısından ne kadar benzer olduğunu gördük. Kodun içine girelim!

Bir SceneObject Like Unity'ye bir komut dosyası eklediğinizde, tüm özel mantık ScriptComponent örneklerinde oluşturulur. Önce Kaynaklar panelinde bir Komut Dosyası kaynağı oluşturun.

Komut Dosyası kaynağınızı oluşturduktan ve adlandırdıktan sonra, komut dosyasını Inspector panelinden herhangi bir SceneObject öğesine ekleyebilirsiniz. Bir ScriptComponent, mantığı karşılık gelen bir ScriptEvent tarafından tetiklenecek herhangi bir sayıda komut dosyası kaynağını tutabilir. Durumu olmayan komut dosyaları için, ilgili etkinliği seçmeniz yeterlidir; kod buna göre çalışır.

Benim gibiyseniz ve daha Unity benzeri bir komut dosyası oluşturma deneyimi istiyorsanız, Başlatılan olaydan tek bir komut dosyası çalıştırabilir ve geri çağrıları sahnede gerçekleşen diğer olaylara bağlayabilirsiniz. İşte bu sözdiziminin bir örneği.

Olaylar, Olay sınıfı adlarını dize olarak kullanarak bağlanır. Mevcut tüm etkinlikleri burada bulabilirsiniz.

Kodunuza durum eklemek istiyorsanız (sahnede kodun örneği başına mevcut olan) kod kapsamının üstündeki değişkenleri kullanın ve bileşen düzeyinde Başlatılan komut dosyası olayı sırasında komut dosyasını çalıştırın.

Şimdi muhtemelen giriş olarak kaş algılamayı kullanarak yapabileceğiniz tüm tuhaf mikro oyunları düşünüyorsunuz! Biliyorum, oyleyim…

Müfettiş'te komut dosyası özellikleri oluşturma Unity'de genel özellikler, bileşen düzeyinde Müfettiş'e maruz bırakılır. Elbette, sözdizimi farklı görünse de, Lens Studio'nun eşdeğer bir özelliği vardır. Aşağıdaki kodu kullanarak birçok türde Girdi alanı verisi ve diğer SceneObjects ve Bileşenlerine başvurular sağlayabilirsiniz:

// Yorumun kesilmesinden sonraki @input sembolü bir Giriş alanını gösterir // @ input int myScore // @ input vec3 myColor {"widget": "color"} // @ input SceneObject someObjectReference // @ input Component.ScriptComponent someOtherScript // @input Component.MeshVisual someOtherMesh
// Bu özelliklerin tümüne "script` nesnesi print (script.myScore) 'dan erişin;

Belirli Bileşen türlerinin Bileşeni nasıl kullandığına dikkat edin. onları Müfettiş'e göstermek için önek. Bu önek olmadan, komut dosyası bir hata verir.

Bazı durumlarda, Denetçiye gösterdiğiniz veri türü için daha iyi bir kullanıcı arayüzü istersiniz. Unity, veri türü için doğru giriş kullanıcı arayüzünü seçerek harika bir iş çıkarır. Len Studio ile biraz daha açık olmalısınız. Yukarıdaki myColor widget satırına bakın ve burada Özel Giriş Kullanıcı Arayüzü için daha fazla örnek bulabilirsiniz.

Artık tüm mülklerimiz Müfettiş'te

Bir Şeyleri Gerçekleştirmek

SceneObject ve Component referanslarını kapma Her şey, Unity bağlamında olduğu gibi, geçerli script örneğine bir referans olan script değişkeniyle başlar. SceneObject'e bir referansınız olduğunda, bileşenleri yakalamaya ve değerlerini değiştirmeye başlayabilirsiniz. Koddaki bu referansları nasıl alacağınız aşağıda açıklanmıştır:

// Unity var so = script.getSceneObject () içindeki “gameObject” e eşdeğer // Bu SceneObject öğesine bir referans alın;
// Unity var t = so.getTransform ();
// gameObject.GetComponent öğesine eşdeğerdir () `Unity var meshViz = so.getComponentByIndex (" MeshVisual ", 0);

SceneObject için burada çalışma zamanında bileşenler eklemek veya kaldırmak gibi daha fazla yöntem bulun.

Komut dosyaları arasında iletişim kurma Bir komut dosyası yazarken, script.api nesnesi aracılığıyla “public” özelliklerini ve yöntemlerini gösterebilirsiniz.

// Kod 1
// Bir mesaj yazdırır script.api.showWelcomeMessage = function (msg) {print (msg); }
// Kod 2
// Müfettiş içindeki diğer nesneye başvuruyu ayarlayın // @ input Component.ScriptObject welcomeScript
// Script1 referansını kontrol edin ve kullanmak istediğimiz // yönteminin (script.welcomeScript && script.welcomeScript.api.showWelcomeMessage) {{Script 1 script.welcomeScript.api referansımızı kullanarak hoş geldiniz mesajı gönderin. .showWelcomeMessage ("Merhaba!"); }

Son olarak, global ad alanı özelliklere ve yöntemlere statik erişim için kullanılabilir. Burada ayarlanan değerler, bunlara erişmeye çalışmadan önce tanımlandığı sürece herkes tarafından kullanılabilir:

global.myMessage = "Merhaba, Dünya!"; global.sayHello = function (message) {global.myMessage = mesaj; (Global.myMessage) yazdırır; }

Sonraki adımlar

Şimdiye kadar, Unity'nin paylaşılabilir AR lenslerle denemeye başlamak isteyen Unity yaratıcıları için harika olan Lens Studio'ya ne kadar benzer olduğu açıktır. 3D animasyonu tetiklemek, dokunmatik girişi kullanmak ve eserlerinizi paylaşmak gibi daha öğrenilecek çok şey var.

Lens Studio'yu denediyseniz, yorumlarınızda lenslerinizi paylaşın. Veya lens geliştirmeye atlayan Unity kullanıcısıysanız, araç hakkında ne düşündüğünüzü bize bildirin!

Eric Howard, teknoloji anlatıcılığı ve etkileşim yoluyla marka deneyimlerini hayata geçiren dijital bir yaratıcı stüdyo olan Fathom'un Baş Teknoloji Uzmanı ve Kurucu Ortağıdır. www.fathom.company