Spine Örnekleri

Spine geleneksel 2B animasyonun ötesinde'dir. Aşağıdaki demolar sanatçılarınızın bazı yolları öğrenmesini sağlamaktadır, animatörler ve yazılımcılar .Harika oyunlar oluşturmak için Spine tarafından sağlanan gelişmiş iş akışlarını ve benzersiz özelliklerini kullanabilir

Aşağıdaki tüm demolar etkileşimlidir, Kullandığımız spine-ts gerçek zamanlı WebGL. Burada Spine Çalışmalarını nasıl kullandığımızı bulacaksınız.Her bir örnek için kaynak kodlarımız.kayak kod

Spine karşısında klasik animasyon tekniği

Spine
All animations, all frame rates
0.18 MB
Sprite sheet
1 second of animation @ 30FPS
3.39 MB = 18x larger

Geleneksel hareketli animasyon, her animasyon karesi için bir resim gerektirir, bu ise büyük dosya boyutları ile sonuçlanır. Her ek animasyon, özellikle animasyonlar oynatılırken disk hızları ve büyük dosyaların okunması bu işi zoraştırır. Sanatçılarınız için bu hızlı bir şekilde çok büyük bir külfet haline gelir ayrıca bitmiş ürününüzün boyutu hızlıca büyür, boyut kısıtlamalarını aşmak için animasyonların kare sayısı azaltılınca ise proje zarar görür.

Spine animasyonları sadece kemik ve animasyon verilerini depolar, Her animasyon için yeniden kullanılabilen tek bir görüntü kümesiyle birleştirilmiştir. Bu, oyunlarınızı benzersiz animasyonlarla doldurarak hayata geçirmenizi sağlar. Ayrıca, Spine animasyonları enterpolasyonludur, bu nedenle kare hızından bağımsız olarak oynatma her zaman mükemmel şekilde pürüzsüz olur.

Spine ile diğer animasyon programlarının bellek ve disk alanı gereksinimlerini karşılaştırın.

Animasyon hızı
 

Çerçeve tabanlı animasyon ile Spine

Spine büyük ölçüde geleneksel kare bazlı animasyon ihtiyaçlarını değiştiriyor, gerektiğinde görüntüler başka görüntüler ile değiştirilebilir. Örneğin, bir gövde veya kanat, alternatif yüz ifadeleri veya bir namlu için perspektif değişikliği gibi resimleri başka bir açıdaki resimle kolayca değiştirebilirsiniz.

Spine yuvaları, ekleri ve çizim düzeni mekanizmaları, tam kare dinamik animasyonlarınızı, tam olarak dinamik Spine animasyonlarınızda kolayca entegre etmenizi sağlar. Daha da iyisi, Spine, uzaylıların patlayan kafasını ölçekleyerek bu demoda gösterilen kare kare görüntüleri manipüle edebilir.

Geçişler ve katmanlar

Smooth
Abrupt

2D oyunların sıklıkla hissedilen dezavantajı, sorunsuz animasyon geçişlerinin olmamasıdır. 3B oyunlarda, Animasyonlar arasındaki geçişler, çalışma zamanında anında hesaplanabilir. Animasyonlar, örneğin yarım yürüme ve yarım koşu gibi, birleştirilebilir. Spine olmayan 2D oyunlarda, birleştirme imkansızdır ve tipik olarak geçişler sarsıcıdır. Sanatçılar olası her geçiş için el ile çerçeve oluşturabilir, ancak animasyonlar oynatmanın ortasında kesintiye uğradığında faydası olmaz.

Spine, 3B dünyanın özelliklerini ve etkilerini 2B'da geri getiriyor.Spine çalışmaları sorunsuz ve dinamik olarak bir animasyondan diğerine geçiş yapar, karakterinize doğal ve akıcı bir görünüm verir. Katmanlama ile, animasyonların başka animasyonlar ile rahatlıkla birleşmesine izin verir, Örneğin karakteriniz çalışırken bir çekim animasyonu oynatmak veya yürümeyi harmanlamak ve daha fazla hasar almak için daha fazla hareket etmek.

Animasyon hızı
 

Örgü deformasyon

Sert 2D görüntülerden oluşan bir Spine karakteri zaten mükemmel sonuçlar verebilir, aşağıda bulunan Spine Adamı animasyonu gibi. Karakterinize daha fazla hayat vermek için, Omurga, 3B dünyasından daha fazla özelliği, kafes ve ağırlıklar şeklinde bir araya getiriyor. Kafeslerle, görüntüler artık katı değil ve istediğiniz gibi bükülebilir ve deforme olabilir.Ağırlıklar kemikleri ağlara bağlar, böylece görüntüler kemikler hareket ettikçe otomatik olarak deforme olur.

Mesh'ler oyununuzun performansını artırabilir ve görüntülerin saydam kısımlarını çizmeyerek doluluk oranı kullanımını azaltabilir.Bu özellikle mobil cihazlarda önemlidir.

Bu demo için inanılmaz sanat eseri Hwadock tarafından sağlandı. Hwadock (a.k.a. dugy). Takip etmek için Twitter ve blog.

Kemikleri göster
Üçgenleri göster

Deri

Spine derileri özelliği, iş yükünüzü makul tutarken, kişiselleştirme ve çeşitlilik sağlamak için mükemmeldir. Kaplamalarla, animasyon çalışmalarının sadece bir kez yapılması gerekirken, ardından tüm animasyonlarınızı yeniden kullanırken iskeletinize farklı görünümler atayabilirsiniz. Nihai esneklik için, Spine Çalışma Zamanları, tüm olası özelleştirme gereksinimlerini kapsayan çalışma zamanında farklı kaplamalardan parçaları birleştirmenize izin verir.

Skins, oyunculara yeni görünümleri, kıyafetleri, silahları ve diğer aksesuarları ile kendi avatarlarını donatmak suretiyle oyun dünyasına kendi dokunuşlarını katma imkanı veriyor. Kaplamalar ayrıca animasyonlarınızdan size daha fazla mesafe katmanızı sağlar: Çok az çaba sarf etmek için çeşitliliği büyük ölçüde arttırmak için düşmanlarınızı, öğelerinizi ve diğer oyun nesnelerini karıştırın ve eşleştirin.

Bu demo için kaynağa burdan ulaşılabilinir. 2B Animasyon Kahramanları Unity için karakter paketi.

Rasgele deri

Ters Kinematik

Spine'in ters kinematik desteği, aksi takdirde canlandırılması zor veya imkansız olan gerçekçi ve dinamik harekete olanak tanır. Aynı zamanda, karmaşık pozların az sayıda kemik tarafından kolayca kontrol edilebildiği daha ileri donanımlar sağlar.

Spine, fırınlama veya çizme kullanmadığı için, çalışma zamanında gerçekten parlar. Kemikleri çalışma zamanında dinamik olarak konumlandırarak, IK kısıtlamaları, karakterinizin düşmanlara nişan alma, ayakların arazide eğim ve arazide izlenmesi, ve çok daha fazlası gibi çevreye kolayca tepki vermesini sağlar. Bu demoda Spineboy, aynı anda bir animasyon oynatırken kullanıcı kontrollü bir durma panosunda dengelendi.

Deneyin! Spineboy'u dinamik olarak hareket ettirmek için etrafındaki kırmızı halkaları sürükleyin. Ateş etme ve atlama düğmeleri ile animasyonun diğer yeteneklerinide test edebilirsiniz.

Amaç
Kemikleri göster

Additive animation blending

When playing animations on separate tracks, normally the pose from lower tracks is overridden by higher tracks. With an additive track, its pose is added to the result of the lower tracks. This enables blending the poses from multiple independent animations with varying influences, such as different facial expressions like 50% happy, 20% mad, and 30% excited.

The owl in this demo has 4 animations, one for each direction. The independent poses of each of these animations are blended together depending on the mouse cursor's position relative to the center of the canvas.

Yol/yörünge kısıtlamaları

Yol kısıtlamaları, bu demo'da Esnek adam çizimi tarafından gösterilen güçlü donanımı sağlar. Kollar ve bacaklar için, ağlar, daha sonra, bacaklara yöneleceği basit yolları izlemek için kısıtlanan birçok küçük kemik ağırlıklandırılır. Yollar daha sonra bacakları kontrol etmek için hareket ettirilebilen kemiklere ağırlıklandırılır. Bu kurulumlar çok sayıda kemiğin sadece birkaç kemikle kontrol edilmesini sağlar. Bu sadece daha kolay animasyon yapmakla kalmaz, aynı zamanda dinamik olarak poz vermek için sadece birkaç kemiğin ayarlanması yeterli olacaktır.

Bu demoda bir ağ, bir yol ile sınırlanan kemiklere bağlanır. kafesteki her köşe ve onun kıvrımı daha düzgün olacaktır.

Yol kısıtlamaları, çalışma zamanında büyük etki için de kullanılabilir. Yolu dinamik olarak değiştirmek için kırmızı tutamaçları hareket ettirin ve asmanın onu kesintisiz olarak izlediğini izleyin!

Kemikleri göster & yol / yörünge

Yol kısıtlamaları, bu demoda Stretchyman tarafından gösterilen güçlü donanım sağlar. Kollar ve bacaklar için, ağlar, daha sonra, bacaklara yönelik basit yolları izlemek için kısıtlanan birçok küçük kemiğe ağırlıklandırılır. Yollar daha sonra bacakları kontrol etmek için hareket ettirilebilen kemiklere ağırlıklandırılır. Bu kurulumlar çok sayıda kemiğin sadece birkaç kemikle kontrol edilmesini sağlar. Bu sadece daha kolay animasyon yapmakla kalmaz, aynı zamanda dinamik olarak poz vermek için sadece birkaç kemiğin ayarlanması yeterli olacaktır.

Kırmızı sapları hareket ettir ve Esnek adam dansını yap!

Kemikleri göster & yol / yörünge

Kırpma

Spineboy'un bir portaldan çıktığı bu örnekte olduğu gibi, bir animasyonun bazı bölümleri kısmen gizlenmiş olmalıdır. Kırpma, bu durumlarda poligonal bir alana oluşturma işlemini kısıtlayarak kullanışlı hale gelir. Önceden tanımlanmış, animatabl bir alan içindeki iskeletin sadece kısımları gösterilmiştir. Bu, pencereler, aydınlatma efektleri ve daha fazlası gibi başka türlü mümkün olmayan pek çok efekti mümkün kılar. Kırpmanın sadece iskeletin bir alt kümesini etkilemesi de mümkündür. Örneğin, bir karakterin röntgenden geçtiği bir animasyon.

Üçgenleri göster

Sınırlamaları dönüştürme

Birçok birbirine bağlı parça ile karmaşık iskeletler canlandırıcı sıkıcı olabilir. Spine dönüşüm kısıtlamaları, daha güçlü armaların kilidini açarak bu acıyı ortadan kaldırır. Kemik dönüşümlerini başka bir kemiğin dönüşümü ile kısıtlayarak, yalnızca kemiklerden birini hareketlendirmeniz ve diğerlerinin otomatik olarak ayarlanması gerekir. Yüzeyde görünüşte basit olmakla birlikte, gelişmiş donanım, bir iskeletin ortaya çıktığı gibi nasıl davrandığını otomatikleştirmek için bunu büyük ölçüde kullanabilir.

Dönüşüm kısıtlamaları, bu demodaki tank gibi makineler için de harikadır. Her bir tekerleğin dönüşünü anahtarlamak yerine, tek bir tekerlek hareketlidir, diğerleri ise bir dönüşüm kısıtlaması ile takip edilir. Netleştirme ve karıştırma, bireyciliği kısıtlı parçalara geri ekleyebilir.

Tanktaki paletler, yollar olmadan harekete geçirilmesi imkansız olan bir yol kısıtlaması kullanılarak sirküle edilir. Yol tekerleklere göre ölçeklendirilir, böylece tekerlekler yukarı ve aşağı hareket ettikçe paletler otomatik olarak bükülür.

Kemikleri göster & yol / yörünge

Bu demo'da, İki küçük tekerleğin dönüşü büyük tekerleğin dönüşüyle ​​sınırlanır. Ayrıca, büyük tekerleğin çevirisi kısıtlıdır, bu yüzden iki küçük tekerlek arasında kalır.

Dönüş mesafesi
 
Döndürme karıştır