Kullanıcı Kılavuzu İptal

Mobil uygulamalar ve oyun motorları için animasyonları dışa aktarma

Ara

Son güncelleme: 25 May 2023

Hareketli grafik sayfası veya doku atlası oluşturun ve mobil uygulamalar ile oyun motorları için animasyonlarınızı dışa aktarın. Eklentiyi kullanarak Unity'ye veya sevdiğiniz oyun motorlarına bir doku atlasını içe aktarın.

Genel Bakış

Animate, hareketli grafik sayfası veya doku atlası animasyonları oluşturup bunları mobil uygulamalar ve oyun motorları için dışa aktarmanıza olanak sağlar.

Hareketli Grafik Sayfası

Hareketli grafik sayfası, döşenmiş ızgara düzeninde birkaç daha küçük grafik içeren bitmap görüntü dosyasıdır. Birden fazla grafiği tek bir dosyada derleyerek, yalnızca tek bir dosyanın yüklenmesiyle Animate'in ve diğer uygulamaların grafikleri kullanmasına olanak tanırsınız. Bu yükleme verimliliği, performansın özellikle önemli olduğu oyun geliştirme gibi alanlarda faydalı olabilir.

Film kliplerinin, düğme sembollerinin, grafik sembollerinin veya bitmap'lerin herhangi bir kombinasyon seçiminden hareketli grafik sayfası oluşturabilirsiniz. Öğeleri Kütüphane panelinde veya Sahne Alanı'nda seçebilirsiniz, ancak ikisinden aynı anda seçemezsiniz. Seçili sembollerin her bitmap'i ve her karesi, hareketli grafik sayfasında ayrı bir grafik olarak görünür. Sahne Alanı'ndan dışa aktarırsanız, sembol örneğine uyguladığınız tüm dönüştürmeler (örneğin, ölçekleme, eğme vb.) görüntü çıktısında korunur.

Doku atlası

Doku atlası, istenen boyutta tek bir büyük görüntü/birden çok görüntüden oluşan bir doku koleksiyonudur. Oyununuzu doku atlası oluşturarak ve bunu oyun uygulamanızda kullanarak en iyileştirebilirsiniz.

Animate'te film klipleri, grafikler veya düğmeler gibi sembollerden doku atlası oluşturabilirsiniz. Öğeleri Kütüphane panelinde veya Sahne Alanı'nda seçebilirsiniz, ancak ikisinden aynı anda seçemezsiniz. Seçili sembollerin her vektörü ve her anahtar karesi, doku atlasında ayrı bir bitmap olarak görünür. Sahne Alanı'ndan dışa aktarırsanız, sembol örneğine uyguladığınız tüm dönüştürmeler (ör. ölçekleme, eğme vb.) görüntü çıktısında korunur.

Hareketli grafik sayfası ve doku atlası arasındaki farklar

Mobil uygulamalarınızda gereksiniminize göre hareketli grafik sayfası veya doku atlası kullanabilirsiniz. Hareketli grafik sayfası ile doku atlası arasındaki bazı temel farklılıklar aşağıdaki tabloda verilmiştir.

Özellik	Hareketli Grafik Sayfası	Doku Atlası
Mobil uygulamalarda performans	Düşük	Yüksek
Yüklenen uygulamada verimlilik	İşlem olmadığı için yüksek	JSON dosya işlemi olduğu için düşük
Boyut	Daha fazla alan kaplıyor	Daha az alan kaplıyor
Animasyonun kalitesi	Orta	Yüksek
Oluşturulan dosya sayısı	İki dosya: bir bitmap ve bir json	Değişken: Görüntü boyutuna bağlıdır.
Oluşturulan bitmap sayısı	Hareketli grafik sayfasında kullanılan kare sayısına göre bitmap dosyalarının sayısı artabilir, bu da hareketli grafik sayfası boyutunun artmasına yol açar	Hareketli grafikte yalnızca benzersiz bitmapler oluşturulur, böylece toplam boyut azaltılır.

Hareketli grafik sayfası oluşturma

Hareketli grafik sayfası oluşturmak için şu adımları uygulayın:

Kütüphane'de bir veya daha fazla sembol ya da Sahne Alanı'nda sembol örnekleri seçin. Seçim bitmap de içerebilir.
Seçimi sağ tıklatın ve Grafik Sayfası Oluştur'u seçin.

Hareketli Grafik Sayfası Oluştur iletişim kutusunda, gerekli seçenekleri belirleyin ve ardından Dışa Aktar'ı tıklatın.

Dışa Aktar seçeneği	Açıklama
Görüntü boyutu	Hareketli grafik sayfasının piksel cinsinden toplam boyutu. Varsayılan ayar, eklediğiniz tüm hareketli grafikleri sığdıracak şekilde sayfayı boyutlandıran Otomatik Boyut ayarıdır.
Görüntü biçimi	Dışa aktarılan hareketli grafik sayfasının dosya biçimi. PNG 8 bit ve PNG 32 bit, saydam bir arka plan (alfa kanalı) kullanarak destekler. PNG 24 bit ve JPG saydam arka planları desteklemez. Genel olarak, PNG 8 bit ve PNG 32 bit arasındaki görsel farklılık çok azdır. PNG 32 bit dosyaları, 8 bit PNG dosyalarından dört kat daha büyüktür.
Kenarlık Dolgusu	Hareketli grafik sayfasının kenarlarının etrafındaki dolgu (piksel cinsinden).
Şekil Dolgusu	Hareketli grafik sayfasındaki her bir görüntünün arasındaki dolgu (piksel cinsinden).
Algoritma	Görüntüleri hareketli grafik sayfasında paketlemek için kullanılan teknik. İki seçenek vardır: Temel (varsayılan) MaxRects
Veri Biçimi	Görüntü verisi için kullanılan dahili biçim. Dışa aktarmadan sonra istediğiniz hareketli grafik sayfası iş akışına en iyi şekilde uyan biçimi seçin.
Döndür	Hareketli grafikleri 90° döndürür. Bu seçenek yalnızca bazı veri biçimleri için kullanılabilir.
Kes	Bu seçenek, sayfaya eklenen her sembol karesindeki kullanılmayan pikselleri keserek hareketli grafik sayfasında yer tasarrufu yapar.
Kareleri Yığınlama	Bu seçeneğin belirlenmesi, seçili sembollerdeki aynı karelerin sonuç olarak ortaya çıkan hareketli grafik sayfasında çoğaltılmasını engeller.

Animasyonları mobil uygulamalara veya oyun motorlarına dışa aktarma

Animate, animasyonları oyun platformlarına ve mobil uygulamalara dışa aktarmanıza yardımcı olur. Animasyonu cep telefonlarınızda veya oyun motorunuzda mı görüntülemek istiyorsunuz? Bu örneğin sonundaki eğitimi izleyin ve bu adımları takip edin.

Kitaplık'ta film klibini sağ tıklayın.
Hareketli Grafik Sayfası Oluştur seçeneğini belirleyin.
Hareketli Grafik Sayfası Oluştur iletişim kutusunda gerekli seçenekleri belirleyin.
Dışa Aktar'ı tıklayın.

Mobil uygulamalar veya oyun motorları için animasyonları dışa aktarma

Animasyonları dışa aktarmaya yönelik diğer seçenekler hakkında daha fazla şey öğrenmek için videoyu izleyin.

Doku atlası oluşturma

Oyun geliştiricileri, Animate'i animasyonları düzenleyip Unity oyun motoruna veya diğer sevilen oyun platformlarından birine Doku atlası olarak dışa aktarmak için kullanabilir.

Animate'te doku atlası oluşturma ve bu atlası Unity'ye içe aktarma süreçleri aşağıdaki şemada tasvir edilmiştir:

flow-diagram-Texture-Atlas — Doku atlası oluşturmaya ve bunu Unity'ye içe aktarmaya yönelik iş akışını gösteren bir çizim.

Animasyonunuz için doku atlası oluşturmak üzere aşağıdaki adımları uygulayın:

Animate'te Kütüphane'den seçilen bir sembol veya sahne alanından sembol örneği için doku atlası oluşturabilirsiniz.
Sembolü sağ tıklatın ve menüden Doku Atlası Oluştur seçeneğini belirleyin. Doku Atlası Oluştur penceresi görünür.

Doku atlası oluşturma

Doku atlası için uygun dışa aktarma seçeneklerini belirleyin.

Dışa Aktar seçeneği	Açıklama
Görüntü boyutu	Doku atlasının piksel cinsinden toplam boyutu. Varsayılan ayar, eklediğiniz tüm görüntüleri sığdıracak şekilde sayfayı boyutlandıran Otomatik Boyut ayarıdır.
Boyutları optimize et	Boyutları optimize et seçeneği işaretlendiğinde bitmap'teki boş pikseller kaldırılır ve boyutlar ikinin katı olmaz (varsayılan seçenek). Bu, oluşturulan tüm bitmap'ler için geçerlidir. Boyutları optimize et seçeneğinin işareti kaldırıldığında seçilen boyutlara göre bitmap oluşturulur.
Görüntü biçimi	Dışa aktarılan hareketli grafik sayfasının dosya biçimi. PNG 8 bit ve PNG 32 bit, saydam bir arka plan (alfa kanalı) kullanarak destekler. Genel olarak, PNG 8 bit ve PNG 32 bit arasındaki görsel farklılık çok azdır. PNG 32 bit dosyaları, 8 bit PNG dosyalarından dört kat daha büyüktür.
Çözünürlük	0,3-3,0 aralığında herhangi bir değeri seçin
Kenarlık Dolgusu	Doku atlasının kenarlarının etrafındaki dolgu (piksel cinsinden)
Şekil Dolgusu	Doku atlasındaki her bir görüntünün arasındaki dolgu (piksel cinsinden).
Algoritma	Görüntüleri doku atlasında paketlemek için kullanılan teknik. İki seçenek vardır: Temel MaxRects (varsayılan)
Veri Biçimi	Görüntü verisi için kullanılan dahili biçim. Varsayılan biçim JSON biçimidir.
Döndür	Görüntüleri 90° derece döndürür. Bu seçenek yalnızca bazı veri biçimleri için kullanılabilir.
Eğriltilmiş nesneleri bitmap'e düzleştir	Nesneleriniz için eğim dönüştürmeleri kullanıyorsanız bu seçeneği belirleyin. Bazı oyun motorları eğim dönüştürmelerini yorumlayamadığından Animate bu nesneleri bitmap görüntülerine dönüştürür.
Animation.json dosyasını optimize et	Animation.json dosyasını optimize et seçeneği işaretlendiğinde bu seçenek girintiyi, sıkıştırılmış matrisi kaldırır ve kullanılan adları kısaltır (varsayılan seçenek). Animation.json dosyasını optimize et seçeneğinin işareti kaldırıldığında bu seçenek girinti ve anlamlı adlarla birlikte dışa aktarma gerçekleştirir.

Boyuta bağlı olarak, sembolü birden çok bitmap'e dışa aktarmayı tercih edebilirsiniz.

Birden çok bitmap için doku atlası oluşturma

Seçilen görüntü boyutunu aşan varlıklar için bir uyarı görüntülenir.
Doku atlası çıktısını önizlemek için Önizleme sekmesini tıklayın.

Oluşturduktan sonra doku atlası önizlemesi
Gözat seçeneğini tıklatıp çıktı dosyası için bilgisayarınızdaki hedef yolunu seçin veya metin alanına yolu girip Dışa Aktar'ı tıklatın.

Doku atlası için oluşturulan çıktı klasörü şu dosyaları içerir:

Animation.json

Bu dosya Animasyon hakkındaki bilgileri içerir. Aynı kareler varsayılan olarak Animation.json dosyasında optimize edilir ve birleştirilir.

spritemap.json

Bu dosya, spritesheet.png dosyası hakkındaki bilgileri içerir.

spritemap.png

Bu dosya, dışa aktarılan sembol için animasyonu yeniden oluşturmak üzere gereken minimum benzersiz dokuların tümünün Bitmap gösterimini içerir.

Oluşturulan doku atlasını Unity gibi uygun içe aktarıcı eklentisini içeren tüm oyun motorlarında kullanabilirsiniz.

Doku atlasını Unity'ye içe aktarma

Animate'te oluşturulan doku atlası dosyalarınızı sevilen oyun motorlarına içe aktarabilirsiniz. Doku atlası dosyalarını içe aktarmak için oyun motorlarınıza uygun eklentiler oluşturabilirsiniz. Unity aracı için örnek bir içe aktarma eklentisi sağlanır.

Şu adımları uygulayarak doku atlasını Unity'ye içe aktarın:

Unity'de, belirli herhangi bir konumda bir proje oluşturun. Bu konumda, içinde Varlıklar alt klasörünü içeren bir klasör oluşturulur.
Varlıklar altında Kaynaklar ve Düzenleyici olarak iki alt klasör oluşturun.
Unity için örnek içe aktarma eklentisini indirmek üzere burayı tıklatın. İndirilenler sekmesinden Unity Plugin seçeneğini belirleyin ve indirilecek ilgili sürümü seçin.

unity-plugin.zip; Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs ve Effect.shader dosyalarından oluşur.

Örneği indirerek Kullanım Koşulları'nı ve Çevrimiçi Gizlilik İlkesi'ni kabul etmiş olursunuz.
Animation.json, spritemap.json, spritemap.png gibi doku atlası dosyalarını ve Plugin.cs ile Effect.shader gibi Unity eklenti dosyalarını Varlıklar > Kaynaklar yoluna taşıyın.
AnimateEditor.cs ve WrapperPlugin.cs dosyalarını Varlıklar klasörüne taşıyın.
Unity'de, AnimateEditor.cs dosyasını tıklatın ve bunu Ana Kamera'ya sürükleyin.
Oynatın. Projeyi oynatmak, spritemap öğesini farklı hareketli grafiklere böler.
AnimateEditor.cs öğesini Düzenleyici klasörüne taşıyın.
Unity'de, WrapperPlugin.cs dosyasını tıklatın ve Ana Kamera'ya sürükleyin. Ayrıca, Ana Kamera öğesinden AnimateEditor.cs seçimini kaldırın veya öğesini çıkarın.
Çıktıyı ihtiyaçlarınıza uygun şekilde oynatın veya yayınlayın.

WrapperPlugin.cs dosyasını ihtiyaçlarınıza uygun şekilde değiştirerek eklentiyi bile özelleştirebilirsiniz.

Unity eklentisi, Animate tarafından oluşturulan doku atlası dosyaları için renk efektlerini destekler. Ayrıca, eklenti katmanlar boyunca maskelemeyi de destekler. Maskeleme özelliği yalnızca Unity 2017 sürümünden itibaren geçerlidir.

Doku yayımlama

Animasyoncu olarak vektör formatında içerik oluşturmaya devam edip içeriği HTML 5 platformları için vektör veya raster formatında dışa aktarabilirsiniz. Animasyonların performansını iyileştirmek için yayımlama ayarlarına animasyonları bir doku atlası olarak dışa aktarma seçeneği eklendi.

1. Tuval belgesi oluşturun. Yeni Belge penceresini görüntülemek için Dosya>Yeni seçeneğini belirleyin.

2. Gelişmiş sekmesini seçin ve HTML5 Canvas seçeneğini tıklatın. Yeni bir FLA belgesi açılır.

3. Dosya > Yayımlama Ayarları seçeneklerini tıklatın.Belgeyi doku olarak dışa aktar seçeneği Temel sekmesinde etkinleştirilmişse Görüntü Ayarları sekmeside Doku Yayımlama seçenekleri görüntülenir. Varsayılan olarak, tüm semboller Doku yayımlamaya dahildir. Dokular için ayrı ayrı sembol seçmek üzere yanındaki ayarlar simgesini tıklatın.

Ancak bu seçenek varlıkların boyutunu artırabilir ancak performansı geliştirir. Ayrıca, HiDPI ekranları için görüntülerin çözünürlüklerini orijinal görüntü çözünürlüklerinin 2 ve 3 katı kadar artırabilirsiniz. Çözünürlük ayarlarını değiştirmek için aşağıdaki ekran görüntüsünde gösterilen şekilde Belgeyi doku olarak dışa aktar seçeneğinin yanındaki anahtar simgesini tıklatın. 2 ve 3 katını elde etmek için sayıları Çözünürlük kısmına sürükleyin.

Varsayılan olarak, doku yayımlama 2 kat çözünürlükte ayarlıdır. Ayrıca, çözünürlük aralığı 0,3 iken 3 katı olarak değiştirilebilir.

Doku yayımlama, yalnızca HTML5 Canvas belgesi türüne yöneliktir.

Vektör veya raster dosyası seçme, dosya türleri ve performans arasında seçim yapmak gibidir. HTML5 platformları, raster içeriği için optimize edilir. Dolayısıyla bazı karmaşık şekiller için vektör görüntülerini önceden raster'e dönüştürmek daha iyidir. Bazı temel içerikler için yine de vektör içeriği kullanabilirsiniz. Animate'te bu seçeneğe kısmi sembol seçimi iletişim kutusundan erişebilirsiniz. Kısmi sembol seçimi, raster'e dönüştürülmesi gereken sembolleri seçerken geri kalanları vektör olarak tutmanıza olanak sağlar.

Kısmi sembol seçimini açın ve Yayınlama ayarları iletişim kutusundaDeğiştir'i tıklatıp listeden bir sembol seçin. Varsayılan olarak tüm semboller seçilir.

İstediğiniz sembolü listeden seçin.

Bitmap Dokuları ile grafik performansını artırma

Animate'te bitmap dokuları, farklı platformlardaki animasyonların performansını artırır. Bitmap dokularına sahip vektörlerin karmaşıklığını azaltmak ister misiniz? Bu örneğin sonundaki eğitimi izleyin ve bu adımları takip edin.

Özellikler Denetçisi panelinde Yayınlama Ayarları'nı tıklayın.
Temel sekmesinde, Belgeyi doku olarak dışa aktar 'a bitişik spanner simgesini seçin.
Görüntü Ayarları sekmesinde Değiştir'i tıklayın ve istediğiniz sembolleri seçin.
Tamam'ı tıklayın.