Sprite Animation En İyi Uygulamaları


18

Gerçek dünyadaki insanların animasyonlarını nasıl ele aldıklarını daha iyi ele almak istiyorum.

1 büyük resim yüklüyor ve ardından animasyon karesine göre farklı dikdörtgenler çiziyor musunuz?

X görüntü dosyalarını bir diziye yüklüyor ve öğeyi animasyon karesine göre dizide çiziyor musunuz?

Çeşitli sprite'lar için farklı uzunluklarda animasyonlara sahip olmakla nasıl başa çıkıyorsunuz?

Bir karakterin yürüyüşün 4-8 kare alacağını ve sahildeki dalgaların sadece 2-3 kare alacağını varsayalım. Bu durumu nasıl ele alırsınız? Aşağıya bakınız

Dim Waves(1) as Sprite
Dim Char(5) as Sprite

Sub Animate()
     Frame += 1
     Draw Char(Frame)
     Draw Waves(Frame)
     If Frame = 5 Then Frame = 0
End Sub

Açıkçası Waves sınırların dışında bir hata ile sonuçlanacaktı.

Yoksa hareketli grafiğinizin kendi animasyonu hakkında endişeniz var mı ve çerçeveyi hiç önemsemiyor musunuz? Her hareketli grafik kendi animasyon döngüsünü biliyor mu?

Yanıtlar:


23

Geçmişte yaptık yolu ayırarak olan animasyon verilerini gelen animasyon oynatma . Bir Animationdaha sonra temel Framesolarak animasyonun nasıl davranması gerektiğini açıklayan birkaç özellik olabilir (döngüler vb.).

Genellikle bir resim yüklerim ve onun parçalarını çizerim.

FrameAnimasyonun her biri aslında bir dikdörtgen ve bir süredir. Bu, bazı karelerin diğerlerinden daha uzun görüntülenmesine izin verir, bu da istediğiniz bir şey olabilir veya olmayabilir. Animasyonunuzdaki tüm karelerin aynı süre boyunca görüntülenmesini istiyorsanız, bunu Animationnesnenizde saklayın .

Bir animasyon oynamak istediği bir şey var kendi sahip AnimationPlayerbir işaret edilebilir Animation. Oynatıcı nesnesi animasyonu oynatmaya özen gösterir ve "geçerli kareyi" kullanılabilir hale getirir.

Bunun benim için avantajı Animation, birçok nesnenin aynı anda işaret edebileceği ve farklı parçaları oynayabileceği tek bir örneğimin olmasıydı . AnimationPlayerFarklı bir Animationnesneyi işaretleyerek ve oynatmayı sıfırlayarak animasyonları değiştirmek de kolaydı .

Düzenleme : İşte yukarıda açıklanan sistemin oldukça temel bir JavaScript uygulaması . Birkaç dakika içinde gösteri olarak bir araya getirdim . "Gerçek" kod daha fazla özelliğe sahiptir. Yine de çalışması için Canvas ve Data URI'yi destekleyen modern bir tarayıcıya ihtiyacınız olacak.


1
O ne dedi. Ayrıca, hareketli bir görüntüyü sınırlayıcı kutularına sıkıca paketleyebilmeniz, ancak bunları bir animasyonda istediğiniz yere yerleştirebilmeniz için bir animasyondaki her kare için bir x / y ofsetine sahip olmak genellikle uygundur. Ayrıca, tek bir görüntü kullanarak jiggling gibi bazı temel şeyleri yapmanıza izin verir.
cömert

Evet, tamamen katılıyorum. Aslında, kullandığım animasyon sistemi buna izin veriyor. Görüntü verilerini düzenlemeden herhangi bir karenin konumunu değiştirmeyi çok daha kolay hale getirir.
Zack The Human

Güzel çalışma örneği, WOW Thumbs up. Bunu tavsiye ederim.
DFectuoso

Animasyon türünün önemli bir sınırlaması, şeklin farklı bir açıdan görülememesidir - izleyiciden uzaklaşmak, izleyiciye doğru yürümek, vb. Yoksa yanılıyor muyum?
Majid Fouladpour

@MajidFouladpour Bu tekniği kullanarak bu tür bir sınırlama olduğunu düşünmüyorum. Her "görüntüleme açısı" için farklı AnimationData nesneleriniz vardır.
Zack The Human

1

Kaç kare olduğunu bilen bir animasyon olurdu. Bunların nerede ve nasıl saklandığı, performans sorunları (nispeten aynı dokuda olmasını istediğiniz gibi) dışında nispeten önemsizdir. Ben framecount hiç 1 eklemek olmaz, deltaTime * animSpeed ​​eklemek ve görüntülerken bir tamsayı bu değeri dönüştürmek. Bu şekilde animasyonları yavaşlatabilir veya hızlandırabilir ve kare hızından bağımsız olabilirsiniz.

Yani bir hareketli grafiğin kendini güncelleyen bir animasyonu olurdu.


0

Neden sadece nesnelerinizin her biri için birkaç kare kaydedilmiyor? Şahsen animasyondaki kare sayısını yapıcılarımdaki nesnelerime geçiriyorum, sonra animasyondaki kare miktarını alan standart bir Animate () işlevim var.


0

Bu uygulamaya bağlıdır. Motorumda Direct3D ve DirectDraw'da animasyon yapıyorum.

DirectDraw'da büyük bir resim oluşturuyorum. Her şey yine de sistem belleğinde saklanır, bu da sonunda tek boyutlu bir veri bloğuna iner.

Artıları:

  • Çerçeveler arasında hareket etmek kolaydır. Başlangıç ​​işaretçisini değiştirin, her y için perdeyi (toplam görüntü genişliği) ekleyin ve siz altın olursunuz.

Eksileri:

  • Bir kareyi ekrana kopyalamakla kalmaz, elle de yapmanız gerekir.

  • Dev hafıza bloğu. Çevresindeki telaşlı çerçeveler bir ceza alır.

Direct3D'de ayrı dokular kullanıyorum. Bunun nedeni, bir cihazın doku sınırlamaları hakkında hiçbir fikrim yok, bu yüzden tüm görüntünün boyutu olan dokuları bile destekleyip desteklemediğini bilmiyorum.

Artıları:

  • Bir çerçeveyi doğrudan ekrana kopyalayabilirsiniz, çünkü hepsi ayrı varlıklardır.

Eksileri:

  • Bellek hizalaması eksikliği.

0

In my oyunlar , benim Sprite taban sınıfı kendisini çizmek hakkında bilgi verdik ve tüm animasyonlu unsurları bilginin miras: Ana oyun döngüsü sadece tüm arasında dolaşır vb numarasını ve animasyon karelerinde süresini, ekrandaki konumu, Spriteların hepsinden, uygun gördükçe kendini çizmelerini ister. Oldukça iyi çalışıyor gibi görünüyor ve önyükleme yapmak için biraz daha modüler: Farklı bir animasyon döngüsü olan yeni bir hareketli grafik (veya daha karmaşık: birden fazla animasyon durumu) eklerseniz, geri dönüp Animate'inizi yeniden yazmak zorunda değilsiniz () ek karmaşıklığı karşılamak için rutin:

Dim Waves as Sprite
Dim Char as Sprite

Sub Animate()
     Char.update()
     Waves.update()
End Sub

Bir hareketli grafiğin update () yöntemi her çağrıldığında, son kez aynı kareyi yeniden çizip çizmeyeceğini, mevcut animasyonundaki bir sonraki kareye geçip geçmeyeceğini, yeni bir animasyona geçip değişmeyeceğini bilir.

Bu, kare hızını farklı saat / platform oluşturma hızlarına uyacak şekilde ayarlamayı çok daha kolay hale getirmenin ek bir avantajına sahiptir, çünkü tek değişiklik Animate () adını ne sıklıkta çağırdığınızdır.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.