Kartvizitiniz için bir AR Instagram filtresi yapın
00oylar
Makale Puanı
Gerekli zaman
Karmaşıklık
Araçlar ve Malzemeler
30 dakika
Kolay
Ücretsiz Yazılımlar
Bu fikir sıklıkla olduğu gibi başladı: Bir şey üzerinde çalışıyordum tamamen farklı bir proje adlı bir sanatçının eserine rastladıktan sonra yoldan çıktığımda Catalina Villegas sosyal medyada. Çıkartma olarak sattığı çizimleri hayata geçiren Instagram AR filtreleri yaratıyor. AR yeni bir şey değil, 2012'de yepyeni Sony akıllı telefonumda bu tür efektleri sergileyen bir uygulamam vardı. Ancak AR efektlerini kolayca oluşturup bunları Instagram gibi yaygın bir platformda yayınlamak için bir aracın mevcut olduğunu keşfetmek gerçekten hoşuma gitti.
Daha sonra kişisel ve profesyonel faaliyetlerimi göz önünde bulundurarak böyle bir teknolojiden nasıl faydalanabileceğimi düşünmeye başladım. Keşke yaratabilseydim güzel dijital çizimler ve onları etkileşimli hale getirerek onlara yeni bir boyut kazandırmak ama şimdilik bu benim beceri setimden çok uzak. Bu yüzden benim için bir şekilde mantıklı olacak basit bir proje yapmaya karar verdim: kamera kartvizitlerimden birine doğrultulduğunda 3B animasyon oynayacak bir filtre oluşturmak. Küçük bir etsy mağazam var ve müşterilerimi siparişlerini ve kartvizitimi aldıklarında bu AR filtresini denemek için meraklı olabilecekleri için sosyal ağlarda bununla ilgili gönderi paylaşmaya teşvik etmenin eğlenceli bir yolu olabileceğini düşündüm.
/Dokular – Kesin olarak söylemek gerekirse, bu eğitimi tamamlamak için gereken tek dosyalar bunlar.
/Metin animasyonu Çerçeveleri
Arkaplan.png
Vücut.png
Kartvizit_hedef_görüntüsü.jpg
SolKanat.png
Aylar.png
Sağ Kanat.png
Yıldızlar.png
Gezinti
AR Animasyonu için Kartvizit ve Maket Tasarımı
Kartvizit
Tamamlamanız gereken ilk görev, kendi kartvizit tasarımınızı oluşturmak olacaktır.
Bu eğitimde, tarafından tasarlanmış bir güve çizimi kullanacağız. yetenekli arkadaşım Hui Chen. Çalışmanızı kullanmamıza izin verdiğiniz için teşekkürler Hui!
Tasarımınızdan memnun kaldığınızda, yazdırın ve kartın bir fotoğrafını çekin. Gerçekten de, takip etmek istediğiniz gerçek dünya nesnesinin dijital karşılığı yerine bir resmini kullanırsanız hedef takibinin daha iyi çalıştığını gördüm.
AR animasyonunun maketi ve görsel öğelerin hazırlanması
Ardından AR animasyonunuzu yukarıdan görüldüğü gibi nasıl hayal ettiğinize dair bir maket tasarlayın. Bu, Spark AR Studio'daki sahnenizin farklı öğelerini düzenlemenize ve konumlandırmanıza yardımcı olacaktır.
Ana öğelerinizi vektör düzenleyicide farklı katmanlarda düzenleyin ve bunları dışa aktarın .png şeffaf arka planlı resimler.
Animasyonlu metin: bunun benim için projenin en sorunlu kısımlarından biri olduğu ortaya çıktı. Kısacası, metnin vuruşunu Inkscape'te tasarladım ve kare kare animasyon oluşturmak için Blender'a yükledim. Bu süreç hakkında daha fazla ayrıntı isteyen varsa yorumlarda bana bildirsin, belki bu konuda kısa bir eğitim yazısı yazabilirim.
Bu programla çalışmak için bir Facebook hesabına ihtiyacınız var.
Yeni Bir Proje Oluştur
Spark AR Studio'yu başlatmayı ve oturum açmayı başardıktan sonra, tıklayarak yeni bir proje oluşturun Yeni Oluştur -> Yeni Proje -> Hedef Takibi.
Bu yazılım oldukça hatalı ve dengesizdir, bu yüzden projenizi hemen kaydetmek isteyebilirsiniz ve önemli bir ilerleme kaydettikten sonra periyodik olarak kaydetmeyi hatırlayabilirsiniz.
Dokuları Projeye Aktarın
Daha önce .png olarak kaydettiğimiz sahne öğelerini hatırlıyor musunuz? Bunları şu şekilde yüklememiz gerekiyor: Dokular böylece bunları projemiz içerisinde kullanabiliriz.
Yazılımın dokümantasyonundan alıntı yapmak gerekirse:
Bir doku, sahnenizdeki bir nesnenin görünümünü tanımlamaya yardımcı olmak için kullanılan bir görüntü dosyasıdır. Bir malzemeye bir veya daha fazla doku uygulayabilir, ardından malzemeyi bir nesneye uygulayabilirsiniz.
İçinde Varlıklar paneli Pencerenin sol alt köşesindeki Bilgisayardan İçe Aktar ve tüm dosyaları yükleyin Dokular Google Drive deposunun klasörü, /Text animasyon karelerinin içeriği hariç (şimdilik).
Sonra seçin tüm yeni ithal edilen dokular Arka Plan ve Business_card_target_image hariç. Doku paneli sağınızda Sıkıştırma alt paneli, üç sıkıştırma seçeneğinin hepsini ayarlayın HiçbiriBunu yapıyoruz çünkü resimler zaten yeterince hafif ve programın sıkıştırma modülü çok fazla CPU ve GPU kaynağı kullanarak hiçbir açık neden olmaksızın sonsuza dek takılıp kalma eğiliminde.
Şimdi metin animasyonunun karelerini içe aktaracağım. Bir kez daha sıkıştırma modülünün işini yapmasını (yapmaması) için sonsuza kadar beklemek zorunda kalmamak için geçici bir çözüm kullanmam gerekiyor. Sağ altta Varlıklar paneli, tıklayın + Varlık Ekle -> İçe aktarmak -> Bilgisayardan. Tüm görselleri yükle /Metin animasyon kareleri klasör, her seferinde bir yarı. Programın çökmesini önlemek için bunu yapmak zorundayım... Programı çökertmezse kullanımı daha uygun olacak bir Texture Animation içe aktarma seçeneği var.
50 kare içe aktarıldıktan sonra hepsini seçin ve değiştirin Tip ile Doku Dizisi en üstte Doku paneli.
Sıkıştırmayı şu şekilde ayarlayın: Hiçbiri Diğer dokularda yaptığımız gibi, üç sıkıştırma seçeneği için de aynısını yaptık.
Son olarak animasyonumuzla çalışmak için başka bir nesne türü oluşturmamız gerekiyor. + Varlık Ekle menü, seç Animasyon DizisiSağınızda açılan panelde, açılır ok önünde Doku ve seçin doku dizisi ki biz az önce yarattık.
Malzemeleri Oluşturun
Gerekli materyalleri oluşturmak için tıklayın + Varlık Ekle -> MalzemeBunlardan 7 tanesine ihtiyacımız olacak, o yüzden devam edin ve çoğaltın 6 zamanlarla CTRL + D.
Tüm malzemelere daha anlamlı bir isim verin. Şimdi her birine birkaç parametre ayarlamamız gerekiyor.
Arka Plan haricindeki tüm materyalleri seçin.
Üzerinde Malzeme paneli sağınızda seçin Çift taraflı içinde Render Seçenekleri alt panel. Bu, dokularımızın alttan bakıldığında da görülebilmesi içindir - bu, özellikle kanatlar ve güve gövdesi için önemli olacaktır çünkü havada asılı kalacaklardır.
İçinde Gelişmiş Render seçeneği alt panel, işaretini kaldır Derinlemesine YazBu, dokularımızın şeffaf arka planının gerçekten kaybolmasını ve daha sonra düzlemlerle çalışırken birbirlerini etkilememesini sağlayacaktır.
Daha sonra ilgili olanı seçin Doku her malzeme için Gölgelendirici Özellikleri alt panel.
Dokuyu Hedef İzleyiciye Ekleyin
Şimdi Hedef Takipçimize bir hedef vermemiz gerekiyor - animasyonu tetikleyecek gerçek dünya nesnesini bulmaktan ve ona yönlendirilmesi gereken düzlem hakkında bilgi vermekten sorumlu olan programın modülü.
Seçme sabitHedefİzleyici0 içinde Sahne sol üstünüzdeki panelde ve Hedef İzleyici sağınızdaki menüyü seçin Kartvizit_hedef_görüntüsü olarak Doku.
Sahnenin Elemanları İçin Uçakları Oluşturun
Yapacağımız ilk şey, sahnemizin 3B görünümünden 2B görünümüne geçmek olacak. Mod.
Sonraki Sağ Tık Açık sabitHedefİzleyici0 ile Eklemek yeni bir Uçak olay yerine.
Kullanmak CTRL + D ile kopyalamak bu uçak 6 kez 7 uçak elde edebilmek için.
Sahnemize dahil edilecek tüm öğeleri yansıtacak şekilde uçakların isimlerini değiştirin.
İçinde Uçak paneli sağınızda ilgili olanı ekleyin Malzeme her bir uçağa.
Uçakları Ölçeklendirin ve Konumlandırın
Artık düzlemlerimiz dokulandırıldığına göre, sahnemizin öğelerine uygun boyutlarını ve konumlarını vermek için onları ayarlamamız gerekiyor. Bunu yapmak için bir seferde bir düzlem üzerinde çalışacağız.
Bu nedenle, çalışacağınız ilk uçak (bu durumda Yıldızlar) hariç tüm uçakları seçerek başlayın ve bunları gizlenmiş işaretini kaldırarak Görünür.
Hedef görüntüyü referans olarak kullanın ölçek Ve yeniden konumlandırmak yıldızları bir şekilde arka planla eşleşene kadar. İşiniz bittiğinde, Yıldızlar düzleminin görünürlüğünü gizli olarak ayarlayın ve başka bir düzleme geçin. Bu işlemi Arka Plan ve TextAnimation hariç tüm düzlemlerle tekrarlayın.
Memnun kaldığınızda, üzerinde çalıştığınız tüm uçakları ve Arkaplanı ortaya çıkarın. Arka plan uçak ve ölçek İstediğiniz boyutlara getirin – ideal olarak hedef görüntüyü tamamen kaplamasını istersiniz.
Sonra yap Metin Animasyonu görünür hale getirin ve tekrar orijinal oranlarına geri döndürüp uygun şekilde konumlandırın.
Güve artık arka plana kıyasla biraz küçük görünüyor. Gerçekten de, hedef görseli referans olarak kullanarak güveyi ölçeklendirdik ancak arka planı kartvizitten daha büyük yaptık. Bu nedenle oranlarımız artık maket ile pek de uyumlu değil.
Bunu çözmek için, arka plan hariç her şeyi tutarlı bir şekilde ölçeklendirmek istiyoruz. Bunu, tüm bu öğeleri bir Boş Konteyner, Ve ölçekleme tüm bireysel uçaklar yerine bu konteyner.
Metni Canlandırın
Sağ Tık Açık sabitHedefİzleyici0 ve seç Yama OluşturBu, yama düzenleyici.
Sağ Tık yama düzenleyicide ve bir tane ekleyin Animasyon yama. Bağlamak , Kurmak bağlayıcı sabitHedefİzleyici yama Oynamak bağlayıcı Animasyon yama. Bu, hedef görüntü bulunduğu için AR filtresi etkinleştirildiğinde metin animasyonunun oynatılmaya başlamasını sağlayacaktır.
Bunu yapmak, otomatik olarak araya bir Pulse yaması ekleyecektir. Kapalı bağlayıcı Nabız yama Sıfırla bağlayıcı Animasyon yama. Bu, kamera hedef görüntünün yolundan çekildiğinde metin animasyonunun yeniden ayarlanması ve hedef yeniden bulunduğunda tekrar oynatılabilmesi içindir.
Bir tane ekle Çerçeve Geçişi yama ve bağla İlerlemek bağlayıcı, muadili olana Animasyon yama. Ayarla çerçeve sayısı = 51.
Seçin MetinAnimasyonSırası açmak için Animasyon Dizisi paneli sağınızda. Üzerine tıklayın ok önceki Mevcut Çerçeve Sahnede gösterilen kareyle etkileşime girmemizi sağlayacak yeni bir yama eklemek. Bağlamak bu yama, mevcut bağlayıcıya Çerçeve Geçişi yama.
Animasyon yamasının Duration parametresini kurcalayarak animasyonun hızını kontrol edebilirsiniz.
Kanatları Canlandırın
Her bir kanadı sırayla seçin ve bunların konum üzerinde Z ekseni dır 0.
Kanatların çırpınmasını sağlamak zor değil. Sadece her iki kanat nesnesine Y ekseninde bir dönüş animasyonu eklememiz gerekiyor. Ancak böyle bir efekti doğrudan kanat nesnesine uygulamak işe yaramaz. Gerçekten de nesnenin kütle merkezi kanadın ortasında yer alır, bu nedenle onu döndürürsek merkezden döner. İhtiyacımız olan şey, gövdeyle temas eden kanat kenarının bir kısmından dönmesi. Umarım burada biraz mantıklı konuşuyorumdur...
Yani wing nesnelerinin kütle merkezini bir şekilde kaydırmanın bir yolunu bulmamız gerekiyor. Bunu yapmak için sahnenin ortasına merkezlenmiş bir kütle merkeziyle otomatik olarak oluşturulacak Null Nesneleri kullanacağız. Bu Null Nesneleri wings nesnelerini tutacak ve dönüş Null Nesnelerinin kendilerine uygulanacak. Hadi yapalım!
Sağ tıklama üzerinde Konteyner Ve Eklemek A Boş Nesne içinde. Adını RightWingContainer olarak değiştirin ve kopyalamak onunla CTRL + D. Yinelenen LeftWingContainer'ı yeniden adlandırın. kanat nesneleri Ve sürükle ve bırak onları kendi ilgili alanlarına Boş Nesne kapsayıcıları.
İçinde Yama düzenleyici, Sağ tıklama ve bir tane ekle Döngü Animasyonu yama. Ayarla süre = 2 ve işaretleyin Yansıtılmış onay kutusu (bu, animasyonun sorunsuz bir şekilde dönmesi ve bir kanat çırpışının sonunda baştan başlamaması içindir. Mirrored (Yansıtma) açıkken, kanat yukarı doğru bir kanat çırpışının üst sınırına ulaştıktan sonra geriye doğru çırpmaya başlayacaktır).
Sonra bir tane ekle Geçiş yama ve kopyalamak o. Bağlantıyı yap İlerlemek bağlayıcı Döngü Animasyonu her ikisindeki muadillerine yama Geçiş yamalar.
Geçiş yamalarının parametrelerini şu şekilde doldurun:
[0, -40, 0,
0, 35, 0]
[0, 40, 0,
0, -35, 0]
Seçin Sağ Kanat Konteyner ve üzerinde Boş Nesne paneli sol taraftaki tıklamada ok önceki Rotasyon. Bu, yama düzenleyicisine bir yama ekleyecek, böylece bu değerlerle etkileşime girebileceğiz. Bağlan Değer en üstteki bağlayıcı Geçiş bağlayıcıya yama Sağ Kanat Konteyner yama yeni oluşturuldu.
İşlemi şu şekilde tekrarlayın: SolKanatKonteyner ve en alttaki Geçiş yaması.
Bu noktada her iki kanadınızın da çırpınmaya başladığını görmelisiniz! Şimdi güveyi Z ekseni boyunca daha mantıklı bir konuma getirmemiz gerekiyor. Konum üzerinde Z ekseni of'un Sağ Kanat Konteyner, SolKanatKonteyner Ve Vücut Hoşunuza giden bir sonuca ulaşana kadar nesneleri tekrar tekrar deneyin.
Sonucu Önizleyin
İndirmeniz gerekecek Spark AR Oyuncusu Öncelikle uygulamayı telefonunuza yükleyin.
Telefonunuz bilgisayarınıza bağlandığında, Spar AR Studio'nun sol alt kısmındaki telefon simgesine eklenen küçük mavi bir nokta göreceksiniz. Üzerine tıklayın ve seçin Göndermek cihazınıza.
Daha önce bastırdığınız kartvizite kameranızı tutun ve keyfini çıkarın!
Bu noktada telefonunuzdaki uygulamayı kullanarak efektin videosunu çekin; çünkü bir sonraki adımda buna ihtiyacımız olacak.
AR Filtresini Facebook veya Instagram'da yayınlayın
Üzerine tıklayın Yayımla sol alt köşedeki Önizleme simgesinin altındaki ok simgesi. Bu, projenizi paketleyecek, yükleyecek ve sizi yönlendirecektir Spark AR Merkezi'nin web sayfası.
Filtrenizi başarıyla yayınlamak için şu adımları izleyin:
Filtreniz için bir kategori seçin ve insanların filtreler arama motorunda bulmasını kolaylaştırmak istiyorsanız bazı anahtar kelimeler ekleyin.
İşte son adımda kaydettiğimiz videonun faydalı olduğu yer burasıdır. demo videosu filtrenizin.
Birini seçin simge filtreniz için.
Hızlıca yaz Tanım Filtrenizde neler olup bittiğini ve inceleme sürecine yardımcı olmak için nasıl kullanılacağını açıklıyoruz.
Vurmak Göndermek Sağ üst köşede.
Bekle gözden geçirmek tamamlanması gereken süreç.
Şunu kontrol etmek isteyebilirsiniz: Spark AR Politikaları İncelemeye göndermeden önce. İlk girişimim reddedildi çünkü web sitemin adresi demo videoda görünüyordu.
Sonuç
Şu ana kadar üzerinde çalıştığım filtrelerin bir demosunu sizlerle paylaşacağım.
Umarım bu eğitimi takip etmekten keyif almışsınızdır.
Her zaman olduğu gibi, bu eğitimle ilgili geri bildirimlerinizi veya burada yayınlanmasını istediğiniz herhangi bir proje fikrini paylaşmaktan çekinmeyin.
Dipnotlar
Aşağıdaki çevrimiçi içerik, bu projenin oluşturulması sırasında bir miktar yardım ve/veya ilham sağladı:
Sosyal Giriş düğmesini kullanarak ilk kez oturum açtığınızda, gizlilik ayarlarınıza göre Sosyal Giriş sağlayıcısı tarafından paylaşılan hesabınızın genel profil bilgilerini toplarız. Ayrıca web sitemizde sizin için otomatik olarak bir hesap oluşturmak için e-posta adresinizi alırız. Hesabınız oluşturulduktan sonra, bu hesaba giriş yapmış olacaksınız.
Aynı fikirde olmamakKabul etmek
Bir hesap oluşturmaya izin veriyorum
Sosyal Giriş düğmesini kullanarak ilk kez oturum açtığınızda, gizlilik ayarlarınıza göre Sosyal Giriş sağlayıcısı tarafından paylaşılan hesabınızın genel profil bilgilerini toplarız. Ayrıca web sitemizde sizin için otomatik olarak bir hesap oluşturmak için e-posta adresinizi alırız. Hesabınız oluşturulduktan sonra, bu hesaba giriş yapmış olacaksınız.
Aynı fikirde olmamakKabul etmek
2 Yorumlar
Eskiler
En YenilerBeğenilenler
Satır İçi Geri Bildirimler
Tüm yorumları görüntüle
Noémie BSG
2 yıl önce
, merci beaucoup, très claires'in açıklamalarını sunuyor! en iyisi! intikam almak için, küçük bir miktar, Facebook'ta dışa aktarılmayan ve Instagram ile uyumlu olmayan bir dosya gibi görünüyor… ve bir kez daha kabul edildi ve bir sonraki gün için yayınlanacağı duyuruldu!!! bu bir sorun! ne yapmalı? Mükemmel bir gün geçirmek istiyorsunuz.
Instagram'daki görsellerin güncellenmesi veya tamamen değiştirilmesi için poster oluşturma ve efektleri geri alma konusunda eğitici bir seçenek sunuyormuş gibi görünüyor.
Yapılışı
Kartvizitiniz için bir AR Instagram filtresi yapın
30 dakika
Kolay
Ücretsiz Yazılımlar
Bu fikir sıklıkla olduğu gibi başladı: Bir şey üzerinde çalışıyordum tamamen farklı bir proje adlı bir sanatçının eserine rastladıktan sonra yoldan çıktığımda Catalina Villegas sosyal medyada. Çıkartma olarak sattığı çizimleri hayata geçiren Instagram AR filtreleri yaratıyor. AR yeni bir şey değil, 2012'de yepyeni Sony akıllı telefonumda bu tür efektleri sergileyen bir uygulamam vardı. Ancak AR efektlerini kolayca oluşturup bunları Instagram gibi yaygın bir platformda yayınlamak için bir aracın mevcut olduğunu keşfetmek gerçekten hoşuma gitti.
Daha sonra kişisel ve profesyonel faaliyetlerimi göz önünde bulundurarak böyle bir teknolojiden nasıl faydalanabileceğimi düşünmeye başladım. Keşke yaratabilseydim güzel dijital çizimler ve onları etkileşimli hale getirerek onlara yeni bir boyut kazandırmak ama şimdilik bu benim beceri setimden çok uzak. Bu yüzden benim için bir şekilde mantıklı olacak basit bir proje yapmaya karar verdim: kamera kartvizitlerimden birine doğrultulduğunda 3B animasyon oynayacak bir filtre oluşturmak. Küçük bir etsy mağazam var ve müşterilerimi siparişlerini ve kartvizitimi aldıklarında bu AR filtresini denemek için meraklı olabilecekleri için sosyal ağlarda bununla ilgili gönderi paylaşmaya teşvik etmenin eğlenceli bir yolu olabileceğini düşündüm.
Gereksinimler
Yazılımlar
Bu projeyi oluşturmak için aşağıdaki yazılımlar kullanılmıştır:
Dosyalar
Tüm proje dosyalarını Google Drive'a yükledim.
Proje dosyaları deposunun yapısı:
Gezinti
AR Animasyonu için Kartvizit ve Maket Tasarımı
Kartvizit
Tamamlamanız gereken ilk görev, kendi kartvizit tasarımınızı oluşturmak olacaktır.
Bu eğitimde, tarafından tasarlanmış bir güve çizimi kullanacağız. yetenekli arkadaşım Hui Chen. Çalışmanızı kullanmamıza izin verdiğiniz için teşekkürler Hui!
Bu makaleye bir göz atın Spark AR Studio'da hedef takibi için en iyi uygulamalar Kartvizit tasarımınızın filtre tarafından kolayca tanınabilmesi için nasıl görünmesi gerektiği konusunda iyi bir anlayışa sahip olmak.
Tasarımınızdan memnun kaldığınızda, yazdırın ve kartın bir fotoğrafını çekin. Gerçekten de, takip etmek istediğiniz gerçek dünya nesnesinin dijital karşılığı yerine bir resmini kullanırsanız hedef takibinin daha iyi çalıştığını gördüm.
AR animasyonunun maketi ve görsel öğelerin hazırlanması
Ardından AR animasyonunuzu yukarıdan görüldüğü gibi nasıl hayal ettiğinize dair bir maket tasarlayın. Bu, Spark AR Studio'daki sahnenizin farklı öğelerini düzenlemenize ve konumlandırmanıza yardımcı olacaktır.
Ana öğelerinizi vektör düzenleyicide farklı katmanlarda düzenleyin ve bunları dışa aktarın .png şeffaf arka planlı resimler.
Animasyonlu metin: bunun benim için projenin en sorunlu kısımlarından biri olduğu ortaya çıktı. Kısacası, metnin vuruşunu Inkscape'te tasarladım ve kare kare animasyon oluşturmak için Blender'a yükledim. Bu süreç hakkında daha fazla ayrıntı isteyen varsa yorumlarda bana bildirsin, belki bu konuda kısa bir eğitim yazısı yazabilirim.
Spark AR Studio'yu yükleyin
Başlamak için Spark AR Studio'nun indirme sayfası, kurulum dosyasını indirin ve programı kurmak için talimatları izleyin.
Bu programla çalışmak için bir Facebook hesabına ihtiyacınız var.
Yeni Bir Proje Oluştur
Spark AR Studio'yu başlatmayı ve oturum açmayı başardıktan sonra, tıklayarak yeni bir proje oluşturun Yeni Oluştur -> Yeni Proje -> Hedef Takibi.
Bu yazılım oldukça hatalı ve dengesizdir, bu yüzden projenizi hemen kaydetmek isteyebilirsiniz ve önemli bir ilerleme kaydettikten sonra periyodik olarak kaydetmeyi hatırlayabilirsiniz.
Dokuları Projeye Aktarın
Daha önce .png olarak kaydettiğimiz sahne öğelerini hatırlıyor musunuz? Bunları şu şekilde yüklememiz gerekiyor: Dokular böylece bunları projemiz içerisinde kullanabiliriz.
Yazılımın dokümantasyonundan alıntı yapmak gerekirse:
İçinde Varlıklar paneli Pencerenin sol alt köşesindeki Bilgisayardan İçe Aktar ve tüm dosyaları yükleyin Dokular Google Drive deposunun klasörü, /Text animasyon karelerinin içeriği hariç (şimdilik).
Sonra seçin tüm yeni ithal edilen dokular Arka Plan ve Business_card_target_image hariç. Doku paneli sağınızda Sıkıştırma alt paneli, üç sıkıştırma seçeneğinin hepsini ayarlayın HiçbiriBunu yapıyoruz çünkü resimler zaten yeterince hafif ve programın sıkıştırma modülü çok fazla CPU ve GPU kaynağı kullanarak hiçbir açık neden olmaksızın sonsuza dek takılıp kalma eğiliminde.
Şimdi metin animasyonunun karelerini içe aktaracağım. Bir kez daha sıkıştırma modülünün işini yapmasını (yapmaması) için sonsuza kadar beklemek zorunda kalmamak için geçici bir çözüm kullanmam gerekiyor. Sağ altta Varlıklar paneli, tıklayın + Varlık Ekle -> İçe aktarmak -> Bilgisayardan. Tüm görselleri yükle /Metin animasyon kareleri klasör, her seferinde bir yarı. Programın çökmesini önlemek için bunu yapmak zorundayım... Programı çökertmezse kullanımı daha uygun olacak bir Texture Animation içe aktarma seçeneği var.
50 kare içe aktarıldıktan sonra hepsini seçin ve değiştirin Tip ile Doku Dizisi en üstte Doku paneli.
Sıkıştırmayı şu şekilde ayarlayın: Hiçbiri Diğer dokularda yaptığımız gibi, üç sıkıştırma seçeneği için de aynısını yaptık.
Son olarak animasyonumuzla çalışmak için başka bir nesne türü oluşturmamız gerekiyor. + Varlık Ekle menü, seç Animasyon DizisiSağınızda açılan panelde, açılır ok önünde Doku ve seçin doku dizisi ki biz az önce yarattık.
Malzemeleri Oluşturun
Gerekli materyalleri oluşturmak için tıklayın + Varlık Ekle -> MalzemeBunlardan 7 tanesine ihtiyacımız olacak, o yüzden devam edin ve çoğaltın 6 zamanlarla CTRL + D.
Tüm malzemelere daha anlamlı bir isim verin. Şimdi her birine birkaç parametre ayarlamamız gerekiyor.
Arka Plan haricindeki tüm materyalleri seçin.
Üzerinde Malzeme paneli sağınızda seçin Çift taraflı içinde Render Seçenekleri alt panel. Bu, dokularımızın alttan bakıldığında da görülebilmesi içindir - bu, özellikle kanatlar ve güve gövdesi için önemli olacaktır çünkü havada asılı kalacaklardır.
İçinde Gelişmiş Render seçeneği alt panel, işaretini kaldır Derinlemesine YazBu, dokularımızın şeffaf arka planının gerçekten kaybolmasını ve daha sonra düzlemlerle çalışırken birbirlerini etkilememesini sağlayacaktır.
Daha sonra ilgili olanı seçin Doku her malzeme için Gölgelendirici Özellikleri alt panel.
Dokuyu Hedef İzleyiciye Ekleyin
Şimdi Hedef Takipçimize bir hedef vermemiz gerekiyor - animasyonu tetikleyecek gerçek dünya nesnesini bulmaktan ve ona yönlendirilmesi gereken düzlem hakkında bilgi vermekten sorumlu olan programın modülü.
Seçme sabitHedefİzleyici0 içinde Sahne sol üstünüzdeki panelde ve Hedef İzleyici sağınızdaki menüyü seçin Kartvizit_hedef_görüntüsü olarak Doku.
Sahnenin Elemanları İçin Uçakları Oluşturun
Yapacağımız ilk şey, sahnemizin 3B görünümünden 2B görünümüne geçmek olacak. Mod.
Sonraki Sağ Tık Açık sabitHedefİzleyici0 ile Eklemek yeni bir Uçak olay yerine.
Kullanmak CTRL + D ile kopyalamak bu uçak 6 kez 7 uçak elde edebilmek için.
Sahnemize dahil edilecek tüm öğeleri yansıtacak şekilde uçakların isimlerini değiştirin.
İçinde Uçak paneli sağınızda ilgili olanı ekleyin Malzeme her bir uçağa.
Uçakları Ölçeklendirin ve Konumlandırın
Artık düzlemlerimiz dokulandırıldığına göre, sahnemizin öğelerine uygun boyutlarını ve konumlarını vermek için onları ayarlamamız gerekiyor. Bunu yapmak için bir seferde bir düzlem üzerinde çalışacağız.
Bu nedenle, çalışacağınız ilk uçak (bu durumda Yıldızlar) hariç tüm uçakları seçerek başlayın ve bunları gizlenmiş işaretini kaldırarak Görünür.
Hedef görüntüyü referans olarak kullanın ölçek Ve yeniden konumlandırmak yıldızları bir şekilde arka planla eşleşene kadar. İşiniz bittiğinde, Yıldızlar düzleminin görünürlüğünü gizli olarak ayarlayın ve başka bir düzleme geçin. Bu işlemi Arka Plan ve TextAnimation hariç tüm düzlemlerle tekrarlayın.
Memnun kaldığınızda, üzerinde çalıştığınız tüm uçakları ve Arkaplanı ortaya çıkarın. Arka plan uçak ve ölçek İstediğiniz boyutlara getirin – ideal olarak hedef görüntüyü tamamen kaplamasını istersiniz.
Sonra yap Metin Animasyonu görünür hale getirin ve tekrar orijinal oranlarına geri döndürüp uygun şekilde konumlandırın.
Güve artık arka plana kıyasla biraz küçük görünüyor. Gerçekten de, hedef görseli referans olarak kullanarak güveyi ölçeklendirdik ancak arka planı kartvizitten daha büyük yaptık. Bu nedenle oranlarımız artık maket ile pek de uyumlu değil.
Bunu çözmek için, arka plan hariç her şeyi tutarlı bir şekilde ölçeklendirmek istiyoruz. Bunu, tüm bu öğeleri bir Boş Konteyner, Ve ölçekleme tüm bireysel uçaklar yerine bu konteyner.
Metni Canlandırın
Sağ Tık Açık sabitHedefİzleyici0 ve seç Yama OluşturBu, yama düzenleyici.
Sağ Tık yama düzenleyicide ve bir tane ekleyin Animasyon yama. Bağlamak , Kurmak bağlayıcı sabitHedefİzleyici yama Oynamak bağlayıcı Animasyon yama. Bu, hedef görüntü bulunduğu için AR filtresi etkinleştirildiğinde metin animasyonunun oynatılmaya başlamasını sağlayacaktır.
Bunu yapmak, otomatik olarak araya bir Pulse yaması ekleyecektir. Kapalı bağlayıcı Nabız yama Sıfırla bağlayıcı Animasyon yama. Bu, kamera hedef görüntünün yolundan çekildiğinde metin animasyonunun yeniden ayarlanması ve hedef yeniden bulunduğunda tekrar oynatılabilmesi içindir.
Bir tane ekle Çerçeve Geçişi yama ve bağla İlerlemek bağlayıcı, muadili olana Animasyon yama. Ayarla çerçeve sayısı = 51.
Seçin MetinAnimasyonSırası açmak için Animasyon Dizisi paneli sağınızda. Üzerine tıklayın ok önceki Mevcut Çerçeve Sahnede gösterilen kareyle etkileşime girmemizi sağlayacak yeni bir yama eklemek. Bağlamak bu yama, mevcut bağlayıcıya Çerçeve Geçişi yama.
Animasyon yamasının Duration parametresini kurcalayarak animasyonun hızını kontrol edebilirsiniz.
Kanatları Canlandırın
Her bir kanadı sırayla seçin ve bunların konum üzerinde Z ekseni dır 0.
Kanatların çırpınmasını sağlamak zor değil. Sadece her iki kanat nesnesine Y ekseninde bir dönüş animasyonu eklememiz gerekiyor. Ancak böyle bir efekti doğrudan kanat nesnesine uygulamak işe yaramaz. Gerçekten de nesnenin kütle merkezi kanadın ortasında yer alır, bu nedenle onu döndürürsek merkezden döner. İhtiyacımız olan şey, gövdeyle temas eden kanat kenarının bir kısmından dönmesi. Umarım burada biraz mantıklı konuşuyorumdur...
Yani wing nesnelerinin kütle merkezini bir şekilde kaydırmanın bir yolunu bulmamız gerekiyor. Bunu yapmak için sahnenin ortasına merkezlenmiş bir kütle merkeziyle otomatik olarak oluşturulacak Null Nesneleri kullanacağız. Bu Null Nesneleri wings nesnelerini tutacak ve dönüş Null Nesnelerinin kendilerine uygulanacak. Hadi yapalım!
Sağ tıklama üzerinde Konteyner Ve Eklemek A Boş Nesne içinde. Adını RightWingContainer olarak değiştirin ve kopyalamak onunla CTRL + D. Yinelenen LeftWingContainer'ı yeniden adlandırın. kanat nesneleri Ve sürükle ve bırak onları kendi ilgili alanlarına Boş Nesne kapsayıcıları.
İçinde Yama düzenleyici, Sağ tıklama ve bir tane ekle Döngü Animasyonu yama. Ayarla süre = 2 ve işaretleyin Yansıtılmış onay kutusu (bu, animasyonun sorunsuz bir şekilde dönmesi ve bir kanat çırpışının sonunda baştan başlamaması içindir. Mirrored (Yansıtma) açıkken, kanat yukarı doğru bir kanat çırpışının üst sınırına ulaştıktan sonra geriye doğru çırpmaya başlayacaktır).
Sonra bir tane ekle Geçiş yama ve kopyalamak o. Bağlantıyı yap İlerlemek bağlayıcı Döngü Animasyonu her ikisindeki muadillerine yama Geçiş yamalar.
Geçiş yamalarının parametrelerini şu şekilde doldurun:
[0, -40, 0,
0, 35, 0]
[0, 40, 0,
0, -35, 0]
Seçin Sağ Kanat Konteyner ve üzerinde Boş Nesne paneli sol taraftaki tıklamada ok önceki Rotasyon. Bu, yama düzenleyicisine bir yama ekleyecek, böylece bu değerlerle etkileşime girebileceğiz. Bağlan Değer en üstteki bağlayıcı Geçiş bağlayıcıya yama Sağ Kanat Konteyner yama yeni oluşturuldu.
İşlemi şu şekilde tekrarlayın: SolKanatKonteyner ve en alttaki Geçiş yaması.
Bu noktada her iki kanadınızın da çırpınmaya başladığını görmelisiniz! Şimdi güveyi Z ekseni boyunca daha mantıklı bir konuma getirmemiz gerekiyor. Konum üzerinde Z ekseni of'un Sağ Kanat Konteyner, SolKanatKonteyner Ve Vücut Hoşunuza giden bir sonuca ulaşana kadar nesneleri tekrar tekrar deneyin.
Sonucu Önizleyin
İndirmeniz gerekecek Spark AR Oyuncusu Öncelikle uygulamayı telefonunuza yükleyin.
Telefonunuz bilgisayarınıza bağlandığında, Spar AR Studio'nun sol alt kısmındaki telefon simgesine eklenen küçük mavi bir nokta göreceksiniz. Üzerine tıklayın ve seçin Göndermek cihazınıza.
Daha önce bastırdığınız kartvizite kameranızı tutun ve keyfini çıkarın!
Bu noktada telefonunuzdaki uygulamayı kullanarak efektin videosunu çekin; çünkü bir sonraki adımda buna ihtiyacımız olacak.
AR Filtresini Facebook veya Instagram'da yayınlayın
Üzerine tıklayın Yayımla sol alt köşedeki Önizleme simgesinin altındaki ok simgesi. Bu, projenizi paketleyecek, yükleyecek ve sizi yönlendirecektir Spark AR Merkezi'nin web sayfası.
Filtrenizi başarıyla yayınlamak için şu adımları izleyin:
Şunu kontrol etmek isteyebilirsiniz: Spark AR Politikaları İncelemeye göndermeden önce. İlk girişimim reddedildi çünkü web sitemin adresi demo videoda görünüyordu.
Sonuç
Şu ana kadar üzerinde çalıştığım filtrelerin bir demosunu sizlerle paylaşacağım.
Birincisi kendi kartvizitim için oluşturduğum, ikincisi ise bunlardan birini kullanarak yaptığım ilk test. kurutulmuş çiçek yapraklarıyla yaptığım kartpostallar ve üçüncüsü bu eğitim için oluşturulmuş filtredir.
Umarım bu eğitimi takip etmekten keyif almışsınızdır.
Her zaman olduğu gibi, bu eğitimle ilgili geri bildirimlerinizi veya burada yayınlanmasını istediğiniz herhangi bir proje fikrini paylaşmaktan çekinmeyin.
Dipnotlar
Aşağıdaki çevrimiçi içerik, bu projenin oluşturulması sırasında bir miktar yardım ve/veya ilham sağladı:
, merci beaucoup, très claires'in açıklamalarını sunuyor! en iyisi! intikam almak için, küçük bir miktar, Facebook'ta dışa aktarılmayan ve Instagram ile uyumlu olmayan bir dosya gibi görünüyor… ve bir kez daha kabul edildi ve bir sonraki gün için yayınlanacağı duyuruldu!!! bu bir sorun! ne yapmalı? Mükemmel bir gün geçirmek istiyorsunuz.
Merhaba Noémie,
Instagram'daki görsellerin güncellenmesi veya tamamen değiştirilmesi için poster oluşturma ve efektleri geri alma konusunda eğitici bir seçenek sunuyormuş gibi görünüyor.
Avustralya'da iyi bir yolculuk!