Metlivi Blog

Birden Fazla Evcil Hayvan Animasyon Durumu İçin Yeniden Kullanılabilir Bir Sprite Sheet Nasıl Planlanır?

Birden fazla animasyona ihtiyaç duyan bir evcil hayvan sprite'ı için sayfayı her durumun nasıl seçileceği ve oynatılacağı etrafında planlayın: ortak bir kare boyutu ve sabitleme noktası (anchor) tanımlayın, kareleri durum adlarına göre gruplandırın ve her kareyi çizmeden önce öngörülebilir bir ızgarada karar kılın. Katmanlı bir kaynak dosyası bulundurun ve aracınız ile çalışma zamanı (runtime) desteklediğinde görseli meta verilerle birlikte dışa aktarın. Bu, durumların revize edilmesini kolaylaştırır ve kırpmaların kaymasını veya yanlış sırada okunmasını önlemeye yardımcı olur.

15 Ekim 20266 dakikalık okumaYazan: Metlivi Editorial Team
Bölüm 1

Evcil hayvanın gerçekten ihtiyaç duyduğu durumlarla başlayın

Sayfa boyutlarını seçmeden önce evcil hayvanın gerekli durumlarını listeleyin. Küçük bir set; bekleme (idle), hareket etme ve kısa bir tepki içerebilir; kesin liste projeye bağlıdır. Her durum için döngüye mi gireceğine, bir kez mi oynatılacağına yoksa sonunda tersine mi döneceğine karar verin. İlk ve son kareyi belirleyin ve hareketin kaç farklı poza ihtiyaç duyduğunu tahmin edin. Bu bir planlama yardımcısıdır, zorunlu bir animasyon formülü değildir.

Aseprite'ta kare etiketleri (frame tags), aralıkları adlandırılmış animasyonlar olarak işaretleyebilir ve her etiket ileri, geri veya ping-pong oynatmayı belirtebilir. Planlama yaparken aralıkları adlandırmak ve etiketlemek, daha sonra bunları birlikte dışa aktarsanız bile durum sınırlarını kaynak dosyada görünür kılar. Aseprite: Etiketler

Bölüm 2

Her duruma hizmet edebilecek bir kare kutusu ve sabitleme noktası (anchor) seçin

Alıcı araç düzenli bir ızgara beklediğinde animasyon kareleri için tutarlı bir hücre genişliği ve yüksekliği belirleyin. Evcil hayvanın en geniş pozu, kalkık kulakları veya kuyruğu ve gövdenin ötesindeki her türlü küçük hareket için yer bırakın. Evcil hayvanı, ayaklarının merkezi veya dinlenme pozunun merkezi gibi ortak bir sabitleme noktasına göre yerleştirin. Evcil hayvan poz değiştirdiğinde, sabitleme noktasını kaydırmak yerine çizimi bu sabitleme noktası etrafında hareket ettirin; aksi takdirde evcil hayvan kareler arasında zıplıyor gibi görünebilir.

Sabit bir ızgarayı dilimlemek kolaydır çünkü her hücre aynı boyutlara ve satır veya sütun konumuna sahiptir. Aseprite'ın sprite sheet içe aktarma özelliği kare genişliğini ve yüksekliğini sorar ve görselde boşluklar olduğunda ofset ile dolguyu (padding) destekler. Kareler boyut olarak önemli ölçüde farklılık gösteriyorsa veya ayrı pivot noktalarına ihtiyaç duyuyorsa, kare başına meta veri içeren bir atlas (doku haritası), tek tip bir ızgaradan daha uygun olabilir. Aseprite: Sprite sheet'ler

Bölüm 3

Çizimden önce durumları satırlarla veya etiketlerle eşleyin

Durum adlarını ve kare aralıklarını içeren küçük bir düzen planı çizin. Düzenli bir ızgara için her duruma bir satır ayırın ve her durumun karelerini soldan sağa oynatma sırasına göre tutun. Kare sayısı duruma göre değişiyorsa, kullanılmayan hücreleri boş bırakın veya her durum için ayrı bir şerit kullanın; bir satırı sırf doldurmak için ilgisiz pozlar yerleştirmeyin. Düz bir dizi kompakttır ancak incelenmesi daha zor olabilir; bir matris, hem insanlar hem de basit ızgara tabanlı içe aktarıcılar için durum gruplamasını daha net hale getirir.

Evrensel bir satır sırası kuralı yoktur. İçe aktarıcının beklediği sıra önemlidir: Aseprite belgeleri, içe aktarırken karelerin alınma sırasını sayfa türünün etkilediğini ve dışa aktarımının yatay, dikey ve matris düzenlerini desteklediğini belirtir. Hedef motorun yorumlayabileceği bir sıra seçin, ardından bunu proje notlarına veya meta verilere kaydedin. Aseprite: Sprite sheet'ler

Bölüm 4

Düzenlenebilir kaynağı dışa aktarılan sayfadan ayrı tutun

Sprite sheet'i tek düzenlenebilir kaynak olarak değil, bir teslimat görseli olarak ele alın. Katmanları, kareleri, etiketleri ve dilimleri içeren yerel projeyi saklayın, böylece düzleştirilmiş dışa aktarımdan yeniden oluşturmak zorunda kalmadan tek bir durumu değiştirebilirsiniz. Aseprite, .aseprite dosyasının katmanlar, kareler, etiketler ve dilimler gibi bilgileri koruduğunu belgelerinde belirtir; PNG dışa aktarımı, çizimi başka bir yerde kullanmak için faydalıdır. Aseprite: Dosyalar

Çalışma zamanının kareleri bulması veya zamanlamayı ve durum adlarını okuması gerekiyorsa meta veriler ekleyin. Aseprite'ın dışa aktarma seçenekleri arasında JSON verileri, dolgu kontrolleri, kırpma ve etiket seçimi bulunur. Paketlenmiş (packed) bir düzen veya değişken boyutlu kırpmalar kullanırken, bu meta verileri görselle birlikte saklayın: piksel koordinatları yalnızca satır ve sütundan güvenli bir şekilde çıkarılamaz. Aseprite dilimleri ayrıca adlandırılmış sınırları ve bir pivot noktasını depolayabilir ve dilim bilgileri sprite sheet JSON'ına dahil edilebilir. Aseprite: ExportSpriteSheet, Aseprite: Dilimler

Bölüm 5

Dolgu ve kırpmaya içe aktarıcıyı göz önünde bulundurarak karar verin

Dolgu (padding), kareler arasındaki veya sayfanın etrafındaki boş alanı tanımlar; doğru miktarı, içe aktarıcıya ve dokunun nasıl örnekleneceğine bağlıdır. Hedef iş akışı görünür boşluklar gerektiriyorsa veya sınırları kolayca incelemek istiyorsanız hücreleri ayrı tutun. Kareler birbirine değiyorsa, içe aktarıcının bunları yine de güvenilir bir şekilde dilimleyebildiğini doğrulayın. Aseprite; kenarlık, şekil ve iç dolguyu ayrı dışa aktarma ayarları olarak sunar, bu nedenle "dolgu"yu tek bir evrensel seçenek olarak değerlendirmek yerine araçtaki her ayarın anlamını kontrol edin. Aseprite: ExportSpriteSheet

Kırpma (trimming) saydam kenar boşluklarını kaldırır, bu da boş alanı azaltabilir ancak dışa aktarılan kare sınırlarını değiştirebilir. Kareleri kırparsanız, görünür kırpılmış alanı ortak sabitleme noktasına geri yerleştirmek için gereken ofsetleri, pivotları veya diğer meta verileri koruyun. Aksi takdirde, daha küçük bir silüete sahip bir poz, orijinal çizimi doğru şekilde hizalanmış olsa bile kaymış gibi görünebilir. Kare başına meta veri içermeyen düzenli bir ızgara iş akışı için, içe aktarıcı orijinal hizalama bilgilerini korumadığı sürece tek tek hücreleri kırpmaktan kaçının.

Bölüm 6

Sayfayı yalnızca bir görsel olarak değil, bir animasyon olarak doğrulayın

Dışa aktarmadan önce, planlanan durumları sırayla gözden geçirin. Her döngünün ilk ve son karelerinin amaçlandığı gibi birleştiğini, tek seferlik eylemlerin uygun bir son pozda durduğunu ve evcil hayvanın sabitleme noktasının görsel olarak sabit kaldığını kontrol edin. Ardından sayfayı hedef kare sırasını, hücre boyutlarını, ofseti ve dolguyu kullanarak içe aktarın. Her durumu amaçlanan zamanlamasında oynatın; bir görsel görüntüleyicide düzenli görünen bir sayfa, içe aktarıcıda yine de yanlış bir kırpmaya, atlanmış bir kareye veya değişmiş bir sıraya sahip olabilir.

Sayfayı bir sonraki adıma teslim etmeden önce bu kısa kontrol listesini kullanın:

  • Her durumun net bir adı ve kare aralığı vardır.

  • Izgara boyutları, kare boyutları ve okuma sırası içe aktarıcıyla eşleşir.

  • Evcil hayvan, pozlar boyunca aynı sabitleme noktasına hizalanmış olarak kalır.

  • Kırpma ve dolgu detayları kesmez veya komşu hücreleri birbirine karıştırmaz.

  • Dışa aktarılan meta veriler (kullanılıyorsa) doğru görsele eşlik eder ve geçerli düzeni açıklar.

  • Düzenlenebilir kaynak, daha sonraki revizyonlar için kullanılabilir durumdadır.

Bölüm 7

Pratik bir planlama sırası

Önce durum listesini ve oynatma davranışını yazın. Ardından içe aktarıcının düzenli bir ızgara mı beklediğine yoksa kare meta verilerini mi işleyebildiğine karar verin. Hücre boyutunu ve sabitleme noktasını en geniş poza göre ayarlayın, her durumu satırlarla veya adlandırılmış kare aralıklarıyla eşleyin ve ancak bundan sonra animasyonu çizip ince ayarlamalarını yapın. Tüm pozları bitirmeden önce erken bir aşamada küçük bir test sayfası dışa aktarın ve bunu gerçek çalışma zamanına aktarın. Bu test, düzen varsayımlarını henüz değiştirilmeleri düşük maliyetliyken ortaya çıkarır.

Temel planlama tercihi, çizim ile içe aktarıcı arasındaki sözleşmedir: düzenli bir ızgara tutarlı hücrelere ve bilinen bir sıraya ihtiyaç duyar; paketlenmiş veya kırpılmış bir sayfa ise güvenilir meta verilere ve korunmuş yerleşim bilgilerine ihtiyaç duyar. Bu sözleşmeyi açık hale getirin; böylece dışa aktarılan düzeni projeye uyacak şekilde değişirken aynı kaynak animasyon düzenli kalabilir.

Bölüm 8

Kaynaklar

İlgili okumalar

Bu konuyu keşfetmeye devam et