Giriş
2D oyun animasyonlarının ön izlemesi genellikle ağır bir düzenleyicinin açılmasını veya belirli çalışma zamanı SDK'larıyla yerel bir kodlama ortamının kurulmasını gerektirir. Çevrimiçi bir Spine Viewer, iskelet aktarımlarını yükleyebileceğiniz ve animasyonlarını kontrol edebileceğiniz anında web tabanlı bir sanal alan sunarak bu sorunu çözer.
Modern bir web oynatıcısının temel faydası verimliliktir. Animatörler, geliştiriciler ve oyun tasarımcıları, tarayıcılarından ayrılmadan veya çalışma zamanı oynatıcılarını yüklemeden atlas sınırlarını, dış görünüm yapılandırmalarını ve klip geçişlerini doğrulayabilir.
Bu kılavuzda Spine iskeletlerinin nasıl içe aktarılacağı, sürüm uyumluluğunun nasıl yönetileceği, oynatma seçeneklerinin nasıl yapılandırılacağı ve klipleri doğrudan tarayıcınızdan incelemek ve dışa aktarmak için cihaz üzerindeki araçların nasıl kullanılacağı açıklanmaktadır.
Web'de bir ilk olan Spine animasyon görüntüleyicinin desteklediği şeyler
Projeler farklı Spine düzenleyici sürümlerini kullandığından, üretim düzeyindeki bir Spine viewer'in çoklu sürüm dışa aktarma işlemlerini gerçekleştirmesi gerekir. 3,6'dan 4,3'e kadar çalışma zamanlarını destekleyen bir görüntüleyici, eski ve güncel oyun varlıkları arasında uyumluluk sağlar.
Ayrıca yerel oluşturmaya devam etmesi gerekiyor. Dosyaların istemci tarayıcısı içinde işlenmesi, büyük doku sayfalarının anında önizlemesini sağlar ve özel oyun varlıklarının gizliliğini korur.
- 3.6, 3.7, 3.8, 4.0, 4.1, 4.2 ve 4.3'ü kapsayan Spine çalışma zamanı sürüm seçicileri.
- Atlas koordinatları için otomatik eşleştirmeye sahip iskelet JSON ve binary (.skel) ayrıştırıcı.
- Sorunsuz kare hızları için tuval öğeleri kullanılarak yerel WebGL ile hızlandırılmış oluşturma.
Spine iskeleti ve atlas dosyalarının çevrimiçi önizlemesi nasıl yapılır
Öncelikle, genellikle bir iskelet .json veya binary .skel dosyası, bir .atlas metin dosyası ve bir veya daha fazla doku PNG sayfası içeren Spine dışa aktarma varlıklarınızı toplayın. Görüntüleyicide dışa aktarma sürümünüzle eşleşen doğru çalışma zamanı serisini seçin.
Dosyaları birlikte araç yüzeyine sürükleyip bırakın. İstemci tarafı yükleyici, atlas doku sayfalarını bölge yollarıyla eşler ve iskeleti aktif tuvalde işler. Buradan animasyonları seçebilir, görünümler arasında geçiş yapabilir ve ayrıntıları incelemek için yakınlaştırabilir veya kaydırabilirsiniz.
- Spine dışa aktarma sürümünüzü seçin (ör. 4.0 veya 4.2).
- İskelet JSON veya binary .skel dosyanızı, atlas metninizi ve doku PNG'lerinizi yükleme bölgesine sürükleyin.
- Açılır menüden aktif animasyonları seçin ve kaplamaları değiştirin.
- Kanvas arka planını, hız kaydırıcılarını ve pan/zoom koordinatlarını ayarlayın.
İskelet yapılarında hata ayıklama ve işleme ayarları
Motorun devredilmesinden önce kemik yerleşiminin, ağ deformasyonunun ve sınır şekillerinin doğrulanması çok önemlidir. Hata ayıklama bayraklarının değiştirilmesi, bu görünmez yardımcı çizgilerin karakter grafiğinin üstünde görünür olmasını sağlar.
Bu, tasarımcıların kırpma yollarının, ağ gövdelerinin veya yol kısıtlamalarının hareket sırasında beklendiği gibi davranıp davranmadığını kontrol etmesine yardımcı olarak oyunun yürütülmesini bozabilecek görsel hataları azaltır.
- Kemikler ve eklemler görselleştirmeyi kaplar.
- Ağ gövdeleri ve bölge sınırlarının incelenmesi.
- Yolları ve yol kısıtlamalarını kırparak katmanlarda hata ayıklama.
Animasyon zaman çizelgeleri oluşturma, parçaları karıştırma ve Spine kliplerini dışa aktarma
Özelleştirilmiş bir animasyon zaman çizelgesi oluşturmak, oyun tasarımcılarının birden fazla animasyonun birlikte nasıl geçiş yaptığını veya sıralandığını (örneğin, 'çalışan' bir döngüyü 'saldırı' dizisiyle harmanlamak) önizlemesi için çok önemlidir. ToolBuddy'in Spine Viewer'i, farklı parçalardaki birkaç animasyon klibini sıraya koyabileceğiniz, karışım çapraz geçişlerini gerçek zamanlı olarak ayarlayabileceğiniz ve üretim entegrasyonundan önce durum geçişlerini doğrulayabileceğiniz görsel bir zaman çizelgesi sıra yöneticisi sağlar.
Karmaşık karakterler için animatörler, Track 0'da koşmak, Track 1'de bir silahı hedeflemek ve Track 2'de göz kırpmak gibi eşzamanlı hareketleri katmanlamak için çok kanallı harmanlamayı kullanır. Crossfade miksaj süresinin (saniye olarak belirtilir) doğrudan web oynatıcısında ince ayarlanması, varlıklar oyun motorlarına aktarılmadan önce hiçbir görsel kırpma veya garip patlama olmamasını sağlar.
Önizlemeleri veya pazarlama materyallerini paylaşırken, bu özel zaman çizelgelerini hafif GIF'ler veya WebM videoları olarak dışa aktarmak son derece pratiktir. Yerel kayıt aracı, aktif zaman çizelgesi karelerini doğrudan WebGL tuvalinden yakalar ve bunları cihazınızda kare kare derler. Bu, tescilli sanat eserlerini %100 gizli tutar, yükleme gecikmesini ortadan kaldırır ve şeffaf arka plan ayarlarının yapılandırılmasına olanak tanır.
- Çok kanallı sıralama (temel gövde için Parça 0, katmanlama eylemleri için Parça 1, ifadeler için Parça 2).
- Yumuşak geçişleri doğrulamak için gerçek zamanlı crossfade miks karıştırma kontrolü.
- Kullanım Örneği: Büyük oyun yapılarını dışa aktarmadan QA denetimi ve müşteri inceleme sayfası paylaşımları.
- Şeffaf GIF'leri veya yüksek kaliteli WebM videolarını dışa aktarmak için cihaz üzerinde WebGL tuval çerçeve yakalama.
Spine Viewer'i varlık hattınıza bağlama
Animasyonların önizlenmesi genellikle varlık hazırlığının yalnızca bir adımıdır. Karakterler çok büyükse, bunları önce Texture Packer'da ayarlamanız gerekebilir. Dosyaların yeniden boyutlandırılması gerekiyorsa Image Yeniden Boyutlandırıcı yardımcı olabilir. Görüntüleyici, dışa aktarma ve oyun oluşturma arasında bir doğrulama köprüsü olarak en iyi şekilde çalışır.
Bu adımların birbirine bağlanması, ekiplerin temiz bir varlık akışını sürdürmesine yardımcı olarak her animasyonun Unity, Phaser veya Cocos'a aktarılmadan önce doğru şekilde davranmasını sağlar.