Skip to main content
Go to Editor

Viki

Learn how to optimize your Spine 2D animations, reduce file size, and improve performance

abonelikacemianimasyonartıbağlantılarboru hatlarıfiyatlandırmafpshafızaihracatistatistiklerizleyiciiş akışıkavramlarkaydedicikayıplıkayıpsızkayıtkontrollerkullanıcı arayüzümasaoptimizasyonperformansplaybackprimprizlerrehbersonuçlartürleriverivideoyoutubezaman çizelgesiçizelgelerölçümlerörnekler

Başlarken: Temel İş Akışı

acemiiş akışırehber

Bu kılavuz, JSON Optimize Edici'yi hızlı bir şekilde kullanmaya başlamanıza yardımcı olacaktır.

  1. Proje Yükle:Şunu kullanın:InputNodeyüklemek için.json, .atlas, Ve.pngdosyalar.
  2. Bir ön ayar seçin (Artı modu):Artı modunda, yerleşik ön ayarlardan birini (ör. "Temel Geri Dönüş") seçmek için sağ paneli kullanın. Bu, sizin için otomatik olarak bir optimizasyon grafiği oluşturur. Serbest modda minimum manuel grafik oluşturun:InputNodeQuantizerNodeOutputNode.
  3. Grafiği çalıştırın:"Graph Çalıştır" düğmesini tıklayın.
  4. Sonuçları karşılaştırın:Orijinal ve optimize edilmiş animasyonları görsel olarak karşılaştırmak için "Görüntüleyici" sekmesine geçin.
  5. Değişiklikleri inceleyin:"Sonuçlar" ve "İstatistikler" sekmelerinde hangi anahtarların değiştirildiği veya silindiği hakkında ayrıntılı bilgi bulacaksınız.

Soket Türleri ve Veri Akışı

prizlertürleriveribağlantılar

Bu makalede, düğüm grafiğindeki yuvaların kullandığı veri türleri ve nelerin nereye bağlanabileceği açıklanmaktadır.

Hızlı kural

Enişlemedüğümler bir üzerinde çalışırSpine Yükü. Atlas ile ilgili düğümler birAtlas ProjesiveyaSpritelar. KullanmakValidatorNodeBir soketin ne beklediğinden emin olmadığınızda.

Soket türleri

  • Spine Yükü— çoğu işlem düğümü tarafından kullanılan Spine projesinin çalışma zamanı dostu temsili.
  • Atlas Projesi— atlas meta verileri + atlas düğümleri tarafından kullanılan sayfa resimleri.
  • Spritelar— paketlenmemiş hareketli resim görüntüleri/bölgeleri (Atlas Paketten Çıkarıcı → Asset Goruntuleyici / Atlas Yeniden Paketleyici).
  • JSON— tanılama/doğrulama/diffing için orijinal veya yeniden oluşturulmuş Spine JSON.
  • Değişiklikler— bazı optimize ediciler tarafından üretilen ve görüntüleyici/raporlama düğümleri tarafından kullanılan farkların bir listesi/akışı.

Tuş → yaz → bağlan

Soket anahtarı (örnekler)Veri türüYapımcısıBağlan
payload, payload_in, payload_outSpine YüküInputNode, çoğu işlem düğümüDüğümlerin işlenmesi (RDP/Spline/Refit/Quantizer/Cleanup/etc.), ardındanOutputNode.payload
original_jsonJSONInputNodeDiagnosticNode, JSONDiffNode.json_before, OutputNode.original_json, bazı atlas düğümleri (ör. yeniden paketleyici alfa modu)
reconstructed_json_outJSONOutputNodeJSONDiffNode.json_after, doğrulayıcılar/hata ayıklama
changesDeğişiklik listesiBazı işleme düğümleri +OutputNodeAnimationViewerNode(isteğe bağlı), raporlar/hata ayıklama
atlas_projectAtlas ProjesiInputNode/ atlas görüntüleyiciAtlasUnpackerNode.atlas_project, OutputNode.atlas_project, atlas filtreleri
atlas_in, atlas_outAtlas Projesi (veya atlas ile ilgili akış)Atlas düğümleri/filtreleriAtlas düğümleri,AtlasViewerNode, AtlasMergerNode(çoklu girişi aracılığıyla)
sprites_out, sprites_in, sprites_data_inSpritelarAtlasUnpackerNode, filtrelerAssetViewerNode.sprites_in, AtlasRepackerNode.sprites_data_in
atlas_inputsBirden Çok Atlas ProjesiÇoklu kaynaklarAtlasMergerNode.atlas_inputs(birkaç atlas bağlayın)

Pratik boru hatları

  • Temel JSON optimizasyonu: InputNode→ (isteğe bağlı:DiagnosticNode/ filtreler) → optimize ediciler (RDPNode, SplineNode, QuantizerNode, …) → OutputNode.
  • Atlas yeniden paketleme: InputNode.atlas_projectAtlasUnpackerNode→ (isteğe bağlı:AssetViewerNode) → AtlasRepackerNodeOutputNode.atlas_project/atlas_assets.

Abonelik Planları ve Premium Özellikler

abonelikprimartıfiyatlandırma

re-polish farklı ihtiyaçlara uyacak iki abonelik katmanı sunar.

Ücretsiz Plan

  • • temelNodeGraph
  • • jsonGörüntüleyici
  • • zaman çizelgesiKarıştırıcı
  • • sınırlıOptimizasyonlar
  • • omurgaVersions

Artı Planı (5$/ay)

  • • tümÜcretsizÖzellikler
  • • yeniden paketlemeNode
  • • fizikFırında pişirmek
  • • temizlemePişmişAnahtarlar
  • • grafikÖn ayarlar
  • • öncelikDestek

Plus'ı Almak

tıklayınGüncellemeüst gezinme bölümündeki düğmesine basın, ardından:

  • SeçmePlus'ı Alın
  • Patreon adresine yönlendirileceksiniz; aboneliği tamamlayın
  • Hizmetin bağlantıyı doğrulayabilmesi ve Plus'ı etkinleştirebilmesi için aynı Patreon hesabında oturum açarak düğüm düzenleyicisine dönün
  • (İsteğe bağlı) Bir aktivasyon kodu girin (özel teklifler için)

Temel Kavramlar: Kayıplı ve Kayıpsız

kavramlarkayıplıkayıpsızacemi

Tüm optimizasyon yöntemleri iki türe ayrılır:

Tavsiye:Her zaman Kayıpsız optimizasyonlarla başlayın. Kayıplı yöntemleri yalnızca dosya boyutunun daha da küçültülmesi gerektiğinde kullanın ve sonucu her zaman görsel olarak kontrol edin.

Etkililik Nasıl Ölçülür?

rehberölçümleristatistikler

Optimizasyonunuzun ne kadar etkili olduğunu anlamak için aşağıdaki ölçümlere dikkat edin:

  • Dosya Boyutu:Son boyut.jsonDosya optimizasyonunun ana hedefidir.
  • Anahtar Kare Sayısı:"İstatistikler" sekmesinde her animasyonda kaç tane anahtar karenin kaldırıldığını gösteren tablo ve grafikler bulacaksınız.
  • Görsel Karşılaştırma:"Önce" ve "sonra" animasyonlarını karşılaştırmak için her zaman "Görüntüleyici" sekmesini kullanın. Kayıplı optimizasyonların kabul edilemez görsel yapılara neden olmadığından emin olun.
  • "Sonuçlar" Tablosunda Rapor:Burada verilerinizde yapılan her değişikliği ayrıntılı olarak inceleyebilirsiniz.

Görüntüleyici: Kontrol Paneli

izleyicikontrollerkullanıcı arayüzü

The Görüntüleyicisekme kaplamaları aKontrollertuvalin üstündeki panel. Üç gruba ayrılmıştır:

Animasyon Kontrolleri

  • Animasyon— hangi Spine animasyonunun oynatılacağını seçer.
  • Deri— hangi Kaplamanın uygulanacağını seçer.
  • Hız— oynatma hızı çarpanı (0,1× → 3,0×).

Kontrolleri Görüntüle

  • Görünümü Sıfırla— varsayılan kamera/düzen konumlandırmasını geri yükler.
  • Seçenekleri Görüntüle— karşılaştırma görünümünü konumlandırmak için kullanılan sayısal uzaklıklar:Aralık X / Aralık Y(orijinal/optimize edilmiş arasındaki mesafe) veOfset X / Ofset Y(küresel değişim).

Hata Ayıklama Kontrolleri

  • Hata Ayıklama Modu— hata ayıklama oluşturma katmanlarını etkinleştirir (çalışma zamanı desteğine bağlıdır).
  • Fiziği Etkinleştir— fizik simülasyonunu açar/kapatır (eğer iskelet fizik kullanıyorsa).
  • Etiketler— etiket yer paylaşımını değiştirir.

Görüntüleyici: Performans Paneli

performansfpshafızakullanıcı arayüzü

The Performanspanel, o anda oynatılan iskelet(ler) için gerçek zamanlı çalışma zamanı ölçümlerini gösterir.

Gerçek zamanlı

  • FPS— monitör tarafından ölçülen saniyedeki kare sayısı.
  • Kare Süresi— milisaniye cinsinden kare başına süre (ne kadar düşükse o kadar iyidir).
  • FPS grafiği— çubuklar halinde görüntülenen son 120 örnek.

İskelet ölçümleri

  • Görünür Yuvalar— son örnekte kaç yuvanın göründüğü.
  • Ortalama Görünür— görünür alanların hareketli ortalaması (tek bir kareden daha kararlı).
  • Köşeler— işleme için kullanılan geçerli köşe sayısı.
  • Sınırlar (px)— geçerli iskelet piksel cinsinden genişlik×yüksekliği sınırlar.
  • Ortalama Sınırlar- yuvarlanan ortalama sınırlar.
  • En Büyük Doku— iskelet için tespit edilen en büyük atlas sayfası (boyutlara göre).
  • Doku Belleği— yüklenen atlas sayfalar için tahmini toplam doku belleği. Mümkün olduğunda panel ayrıca sayfa başına bir döküm de gösterir (dosya adı, boyutlar ve tahmini boyut).

İyileştirmeler (Optimize edilmiş kullanılabilir olduğunda)

  • Slot İyileştirmesi- karşılaştırırOrtalama GörünürOrijinal ve Optimize Edilmiş arasında.
  • Bellek Değişikliği- karşılaştırırDoku BelleğiOrijinal ve Optimize Edilmiş arasında.

Görüntüleyici: Zaman Çizelgesi

izleyicizaman çizelgesianimasyonplaybackrehber

The Zaman çizelgesipaneli, Görüntüleyicinin alt kısmında bulunan yerleştirilebilir bir animasyon sıralayıcıdır. Animasyon kliplerini birden fazla parça üzerinde düzenlemenize, oynatmayı kontrol etmenize ve geçişlerin önizlemesini yapmanıza olanak tanır.

Parçalar ve Klipler

  • En fazla 4 animasyon parçası— her parça bir Spine ile eşleşirtrackIndexkatman. Daha yüksek parçalar, daha alçak olanların üzerinde karışır.
  • Animasyon ekle- tıklayın+Animasyon seçiciyi açmak için herhangi bir parçadaki düğmeye basın (arama filtreli).
  • Klipleri sürükleyin ve yeniden boyutlandırın— parça boyunca hareket ettirmek için klibin gövdesini sürükleyin; başlangıç ​​zamanını veya süresini değiştirmek için sol/sağ kenarları sürükleyin.
  • Klipleri sil— bir klip seçin ve tuşuna basınDeleteveyaBackspace.
  • Örtüşme tespiti— aynı parçadaki örtüşen klipler kırmızı renkle vurgulanır.

Taşıma Kontrolleri

  • Oynat / Duraklat / Durdur— standart oynatma kontrolleri.
  • Önceki / Sonraki— önceki veya sonraki klibin başlangıcına atlayın.
  • Animasyon hızı— kaydırıcı 0,1× ila 3,0× arasında.
  • Otomatik durdurma— oynatma zaman çizelgesinin sonunda otomatik olarak durur.

Geçiş Karıştırma

  • Küresel karışım süresi— ardışık klipler arasındaki varsayılan çapraz geçiş süresini ayarlar.
  • Geçiş başına geçersiz kılmalar— özel bir miks süresi ayarlamak için iki klip arasındaki geçiş balonuna tıklayın. Bireysel geçersiz kılmaları genel değere sıfırlayabilirsiniz.

Arama ve Fırçalama

  • Oynatma kafası— Aramak için zaman cetvelindeki tutamacı sürükleyin veya cetvele tıklayın.
  • İmleç zamanı önizlemesi— izleme alanının üzerine gelindiğinde imlecin altındaki süre görüntülenir.
  • Web Çalışanı— Sorunsuz bir performans için arama ve olay hesaplaması bir arka plan çalışanına devredilir.

Fiziğe Duyarlı Oynatma

  • Fizik arasında geçiş yapGüncelleme(aktif kısıtlamalar) veHiçbiri(engelli).
  • Arama sırasında, fizik kısıtlamalarını uygun şekilde çözmek için iskelet süresi ilerletilir.

Çoklu İskelet Desteği

  • Hedef çifti seçici— her parça tüm çiftleri (🌐 Tüm çiftler) veya belirli bir iskeleti hedefleyebilir.
  • İskelet başına konum ve ölçek— Bireysel iskeletler için X/Y ofseti ve ölçek girişleri.
  • Çizim sırası— işleme katmanı önceliğini kontrol etmek için sayısal giriş.

Hata Ayıklama Çizimi

Görünürlüğü değiştir: Kemikler, Kemik Adları, Bölgeler, Ağlar, Gövdeler, Sınırlar, Yollar, Kırpma, Noktalar.

Cilt Seçimi

Yüklenen iskelette tanımlanan tüm kaplamalar için çoklu seçim onay kutuları.

Ayarları Görüntüle

  • X / Y aralığı— iskelet çiftleri arasındaki boşluk.
  • Ofset X / Y— küresel görüş alanı değişimi.
  • PMA geçişi— önceden çarpılmış alfa modu (Spine 3.x) veya atlas alfa modu (Spine 4.x: auto / pma / bleed / none).
  • İskelet etiketleri— etiket kaplamasını değiştir.

Görüntüleyici: Kaydedici

izleyicikaydedicikayıtihracatvideorehber

The Kaydediciizleyiciden Spine animasyonlarını video, animasyonlu görüntüler veya görüntü dizileri olarak yakalar.

Kayıt Modları

  • ⚡ Hızlı Kayıt— kullanarak gerçek zamanlı yakalamaMediaRecorder + captureStream(). Yalnızca WebM çıktısı üretir. Hızlı ancak gerçek zamanlı kare hızıyla sınırlıdır.
  • 🎬 Genel Merkez İhracat— WebCodecs'i kullanarak çevrimdışı kare kare oluşturmaVideoEncoder + readPixels(). Tüm formatları destekler ve piksel açısından mükemmel çıktılar üretir.

Çıktı Formatları

  • Video: WebM, MP4, AVI, MOV
  • Animasyonlu resim: GIF, Animasyonlu PNG (APNG)
  • Görüntü dizisi: PNG Sırası, WebP Sırası

Codec'ler (HQ Dışa Aktarma)

VP8, VP9, ​​H.264 (AVC), AV1, ProRes — mevcut codec bileşenleri tarayıcı desteğine göre otomatik olarak algılanır.

Kalite

  • Ön ayarlar: Düşük (~1 Mbps), Orta (~3 Mbps), Yüksek (~5 Mbps), Kayıpsız (~20 Mbps).
  • Özel bit hızı— hassas kontrol için kbps cinsinden belirtin.

Zamanlama

  • FPS: 24, 30, 60 veya özel (1–120 fps).
  • Isınma— kayıt başlamadan önce fizik/kısıtlamaların çözülmesi için saniyeler.
  • Sonra duraklatma— son kareyi belirli bir süre boyunca tutun.
  • Son kareyi dahil et— geçiş yapın.

Görünüm ve Kırpma

  • Kırpmayı etkinleştirme/devre dışı bırakma— kırpma bölgesini değiştirin.
  • Dikdörtgeni kırp— Spine dünya koordinatlarında X, Y, Genişlik, Yükseklik.
  • Eşleştirmek için tutturun— yapılandırılabilir dolgu ile kırpmayı bir iskelet çiftine otomatik olarak sığdırın.
  • Etkileşimli kırpma katmanı— köşeleri/kenarları doğrudan görünüm alanında sürükleyin.

Çözünürlük

  • Ölçek modu— yüzde kaydırıcısı (%10–%400).
  • Sabit mod— açık piksel boyutları (4096 piksele kadar).
  • Hesaplanan çıkış çözünürlüğü canlı olarak görüntülenir.

İşleme Seçenekleri

  • Kemikleri işlemek— hata ayıklama kemik kaplamasını içerir.
  • Görüntüleri işleme— ek görselleri ekleyin.
  • Diğerlerini oluştur— sınırlayıcı kutular, yollar.
  • MSAA— Yok / 2× / 4× kenar yumuşatma.
  • Pürüzsüzleştirme— algoritma seçimiyle (Bikübik / Bilinear) 0-8 arası düzeyler.

Arka plan

  • Şeffaf— alfa içermeyen formatlar (ör. GIF, JPEG) için otomatik olarak devre dışı bırakılır.
  • Düz renk— özel renk seçici.
  • Dama Tahtası— görsel şeffaflık göstergesi.
  • Alfa kanalı desteği: VP9+WebM, AV1+MP4, PNG Sırası, APNG, WebP Sırası.

HUD Yerleşimi

  • Geçiş: parça bilgisi, zaman, çerçeve numarası, FPS, iskelet etiketleri.
  • Özel metin— filigran dizesi.
  • Konum— 4 köşe (sol üst, sağ üst, sol alt, sağ alt).
  • Yazı tipi boyutu— 8–64 piksel artı metin rengi seçici.

Tekrar ve Çoklu İskelet

  • Sayımı tekrarla— 1-100 döngü yinelemesi.
  • Hedef çifti— belirli bir iskeleti veya tamamını kaydedin.
  • İskeletler modu— Birleşik (tek dosya) / Ayrı dosyalar (iskelet başına bir dosya).

Dosya Adı Şablonu

Değişkenler içeren şablon dizesi:{project}, {animation}, {W}, {H}, {fps}. Çözümlenen dosya adının canlı önizlemesi görüntülenir.

Zaman Çizelgesi Entegrasyonu

Kayıt aralığı, zaman çizelgesinde kırmızı/turuncu kesikli bir klip olarak görünür. Aralığı yeniden boyutlandırmak için kenarları sürükleyin, yeniden konumlandırmak için gövdeyi sürükleyin veya tam kayıt ayarlarını açmak için ayarlar düğmesini (⚙️) kullanın.

Sonuçlar Sekmesi

sonuçlarmasaoptimizasyon

The Sonuçlarsekmesi ayrıntılı optimizasyon çıktısını gösterir.

  • Sonuçlar tablosu— JSON optimizasyon sonuçlarının değişiklik başına satır görünümü (ör. hangi animasyon/kemik/özellik/ana karenin değiştirildiği veya kaldırıldığı).
  • Sprite/Atlas karşılaştırması— doku optimizasyonu kullanıldığında bu bölüm hareketli grafik boyutlarını ve paketleme sonuçlarını karşılaştırır.

İpucu: Yanıtlamak için Sonuçlar görünümünü kullanın:tam olarak ne değişti?

İstatistik Sekmesi

istatistiklerçizelgelerölçümler

The İstatistiklersekmesi, optimizasyon sonuçlarını grafikler ve toplu ölçümler olarak özetler.

  • Optimizasyon Tablosu— optimizasyonun veri kümesi üzerindeki etkisini görselleştirir (JSON optimizasyonları değişiklik ürettiğinde).
  • Metrik Tablosu— orijinal/yeni boyutlar ve küçültme yüzdesi gibi önemli sayılar.
  • Doku Paketleme İstatistikleri— atlas yeniden paketleme kullanıldıysa sayfaları, toplam/kullanılan alanı, verimliliği ve sayfa başına dökümü gösterir.

Cevaplamak için bu sekmeyi kullanın:Genel olarak ne kadar geliştik?

Boru Hattı Örnekleri (Video)

videoörneklerboru hatlarıyoutube

Aşağıda resmi YouTube oynatma listesindeki eksiksiz, gerçek dünya ardışık düzenleri bulunmaktadır.

Tam oynatma listesini aç

Örnekler

Spine2D Deneyler 1: RDP Algoritmasıyla Eğri Optimizasyonu— temel Spine 2 boyutlu optimizasyon demosu: Ramer – Douglas – Peucker (RDP) algoritması, JSON'yi küçültmek için gereksiz eğri/anahtar verilerini kaldırır. RDP önemli anahtarları kaldırabilir, bu nedenle her zaman animasyonları inceleyin ve RDP düğümünden önceki filtre düğümleriyle hassas kemikleri/yuvaları hariç tutun.YouTube'da izle

Spine2D Deney 2: Niceleme Algoritmasıyla Eğri Optimizasyonu— niceleme en güvenli Spine 2D eğri iyileştiricidir: değerlerin yuvarlanması (genellikle 1 ondalık sayıya) anında boyut kazanımları sağlar. Örnek: [0,115,14,5,0,222,-27,78] → [0,1,14,5,0,2,-27,8]. Optimizasyonu kilitlemek için çıkış düğümünden önceki son adım olarak nicemleme düğümünü kullanın; video neredeyse algılanamayacak görsel değişimle öncesi/sonrası gösteriliyor.YouTube'da izle

Spine2D Deney 3: Spline ve Yeniden Fit Algoritmalarıyla Eğrileri Yeniden Oluşturma— Spline düz bölümler için kayıpsızdır (gereksiz orta tuşları kaldırır), Refit ise kayıplı ama güçlüdür: karmaşık bölümleri tek bir Bézier eğrisi olarak yeniden oluşturur. Bu algoritmalar, Schneider düğümü aracılığıyla fizik pişirme ve temizleme sonrasında idealdir. Not: 100'ün üzerindeki yenileme yinelemelerinde en iyi eğriyi bulmak birkaç dakika sürebilir. Videoda her iki yöntemin de nasıl çalıştığı ve kazanılan optimizasyon yüzdesi gösterilmektedir.YouTube'da izle

Spine2D 4. Deney: Ek Görünürlüğü ve Temizleme Düğümleriyle Gereksiz Verileri Kaldırma— Ek Görünürlüğü ve Temizleme düğümlerini kullanarak yapısal Spine 2D optimizasyonu. Ek Görünürlüğü, alfa değeri 0'a düştüğünde ekleri devre dışı bırakır ve yavaş yavaş açıldığında bunları geri yükleyerek çizim çağrılarını azaltır ve gereksiz tuşları kaldırır. Temizleme, mantıksal fazlalıkları ortadan kaldırır: kullanılmayan renk/alfa izleri, kısıtlamalar tarafından tamamen kontrol edilen IK döndürme tuşları ve yol kısıtlama tuşları. Video, bu mantık tabanlı optimizasyonların eğri basitleştirmeden ne kadar farklı olduğunu gösterir.YouTube'da izle

Spine2D Deney 5: Doğrusal Olmayan Ardışık Hatlar Oluşturma (Filtreler ve Birleştirme Node)— doğrusal olmayan Spine 2D optimizasyonu: veri akışını filtrelerle (Animasyon, Kemik, Yuva, Parametre veya Dış Görünüm) bölün, paralel dallarda farklı algoritmalar çalıştırın (örneğin, yüz animasyonunu kayıpsız tutarken vücut kemikleri için agresif sıkıştırma), ardından dalları Birleştirme düğümüyle tek bir iskelette birleştirin. Bu iş akışı basit bir Giriş → Optimize Et → Çıkış hattının ötesine geçer ve yalnızca optimize edilmesi gerekenleri hedeflemenize olanak tanır.YouTube'da izle

Spine2D Deney 6: Özel Düğümlerle Dokuyu Yeniden Paketleme ve Seçici Ölçeklendirme— gelişmiş doku optimizasyonu ardışık düzenleri: Atlas Paketten Çıkarıcı/Yeniden Paketleyici düğümleri, atlasları standart Spine iş akışlarından daha hızlı bir şekilde tek bir grafik içinde paketinden çıkarmanıza, yeniden boyutlandırmanıza/sıkıştırmanıza ve yeniden paketlemenize olanak tanır. Doğrusal olmayan ardışık düzeni kullanarak varlıkları bölebilir, karakter dokularını %100'de tutarken diğerlerini %25'e düşürebilir ve ardından her şeyi tek bir paylaşılan atlas'de birleştirebilirsiniz. Atlas/Asset Goruntuleyici düğümleri, varlıkların ve atlasların her aşamada görsel olarak incelenmesini ve filtrelenmesini sağlar. Bu, yeniden boyutlandırma hedeflerini tanımlamayı, seçici olarak işlemeyi ve sonuçları yeniden kullanılabilir bir şablon olarak yeniden birleştirmeyi kolaylaştırır.YouTube'da izle

Spine2D Deney 7: İskeletin Ölçekle Anında Yeniden Boyutlandırılması Node— uçtan uca Spine 2D optimizasyon ardışık düzeni ve iskelet ölçeklendirme. Ölçek düğümü, sıkıcı Spine iş akışını (dışa aktarma/içe aktarma, yeniden paketleme/paketten çıkarma, yolları düzeltme) tek bir grafik adımıyla değiştirir: hedef boyutunu ayarlayın, görünüm alanında anında önizleyin ve gerçek zamanlı olarak yineleyin. Video, eğri/anahtar optimizasyonunu, varlık işlemeyi ve iskelet yeniden boyutlandırmayı tek bir akıcı işlem hattında birbirine bağlar.YouTube'da izle

Spine2D Deney 8: Genel Beta Node Genel Bakış— genel beta sürümünde mevcut olan her düğümün ayrıntılı açıklaması ve köprü animatörü ile geliştiricinin ihtiyaçlarının nasıl yeniden cilalanacağı. Yedekli anahtar temizleme, Bézier'den doğrusala basitleştirme, boyuta göre yuvarlama, görünmez eklerin kaldırılması, kullanılmayan özelliklerin temizlenmesi, İngilizce olmayan karakter algılama ve atlas paketten çıkarma/filtre/ölçeklendirme/yeniden paketlemeyi kapsar. Çift Görüntüleyici, sonuçları yan yana görsel ve FPS karşılaştırmasıyla doğrular. Herkese Açık Beta şu adreste yayında:re-polish.com. YouTube'da izle

Spine2D Deney 9: Anahtar Karelere İlişkin Fizik Kısıtlamalarını Pişirme— Bu videoda fizik kısıtlamalarını standart anahtar karelere dönüştürmeye yönelik en son deneylerimi gösteriyorum. Yeni pişirme algoritması şunları sağlar: Mükemmel Döngüler (başlangıç ​​ve bitiş kareleri arasında sıfır titreşim veya atlama), Optimize Edilmiş Dosya Boyutu (otomatik eğri temizleme, JSON boyutunu orijinale yakın tutar) ve Geriye Doğru Uyumluluk (fırınlanmış tuşlar, Spine 4.1 ve hatta 4.0'da Spine 4.2 fizik animasyonlarını kullanmanıza olanak tanır).YouTube'da izle

Nodes

Input

Spine proje dosyalarini, yalnizca JSON girdilerini, demo varliklarini ve ZIP paketlerini grafa aktarir.

Amac: Bu, cogu is akisi icin ana giris noktasiidir. JSON, atlas ve dokulari okur ve bunlari asagi akis dugumlerinin isleyebilecegi dahili verilere normalize eder.

Desteklenen modlar:
1. Tam proje: JSON + atlas + dokular
2. Yalnizca JSON: atlas olmadan skeleton/animation verilerini isler
3. ZIP paketi: tam bir proje iceren paketlenmis bir zip
4. Demo varliklari: hizli test icin yerlesik ornek veriler

Ana ciktilar:
- **payload_out**: optimizasyon dugumleri icin normalize edilmis veriler
- **original_json_out**: karsilastirma veya yeniden olusturma icin kaynak JSON
- **atlas_project_out**: dokular saglandiginda ayrıştırılmış atlas projesi

Picture Input

Daha temiz onizlemeler ve sunum kareleri olusturabilmeniz icin bagimsiz PNG/JPEG gorsellerini gorunum alanina ekler.

Amac: Bu dugumu, goruntuleri dogrudan gorunum alanina sunum katmanlari veya gorsel yardimcilar olarak yerlestirmek icin kullanin. Bir sahneyi suslemek, destekleyici grafikler eklemek ve video ya da demo kaydetmeden once proje onizlemelerini daha cilali gostermek istediginizde faydalidir.

Is akisi: Bir gorsel yukleyin, ardindan gorunum alani araclarini kullanarak onu olceklendirin, tasiyin ve z-index degerini ayarlayin; boylece kompozisyonunuz icinde dogru sekilde oturur. Bu, ana Spine proje verilerine dokunmadan cekici vitrin kareleri olusturmayi kolaylastirir.

Bu dugum bagimsizdir ve grafik soketleri sunmaz.

Output

Nihai sonuclari toplar ve optimize edilmis verileri ayri dosyalar, gruplandirilmis dosya setleri veya arsivler olarak indirmenizi saglar.

Amac: Optimize edilmis JSON, atlas verileri, dokular ve sprite'lar icin disa aktarma merkezi olarak calisir. Tek bir JSON/atlas/doku setinden, birden fazla dosya setinden veya tam bir Spine projesini yeniden olusturmadan yalnizca goruntu cikisi istediginiz durumlarda sadece sprite'lardan sonuclari bir araya getirebilir.

Disa aktarma secenekleri:
- Dosyalari tek tek veya tek bir arsiv olarak indirin
- Paketlenmis sonuclari ya da paketlenmemis dosyalar iceren bir arsivi indirin
- JSON'u kompakt bicimde veya okunabilir pretty-print biciminde disa aktarın
- Tam Spine proje verilerini ya da yalnizca sprite/goruntu sonuclarini disa aktarın

Zincirleme is akisi: OutputNode grafin mutlak sonu olmak zorunda degildir. Ciktilarini baska bir pipeline asamasina aktarabilir ve ayni dosyalari ek optimizasyon gecislerinden gecirebilirsiniz. Pratikte, key ve curve optimizasyonu art arda en fazla 3 yineleme boyunca test edilmistir.

Ana ciktilar:
- **reconstructed_json_out**: yeniden olusturulmus Spine JSON'u
- **original_json_passthrough_out**: ozgun JSON'un dogrudan gecisi
- **payload_out**: daha fazla zincirleme icin payload
- **changes**: toplanan optimizasyon degisiklikleri
- **atlas_assets**: disa aktarmaya hazir atlas kaynaklari

RDP

Ramer-Douglas-Peucker (RDP) algoritmasını kullanarak animasyon eğrilerini basitleştirir.

Amaç: Diğer ikisi arasında düz bir çizgi üzerinde yer alan noktaları kaldırarak doğrusal veya doğrusala yakın animasyon bölümlerindeki anahtar karelerin sayısını azaltır.

Altın Kural: Varsayılan olarak devre dışıdır. Önemli bir şekle (alan/eğrilik) sahip eğrileri düzleşmekten doğrusal olmaya karşı korur. Yalnızca görsel incelemeden sonra daha agresif sıkıştırma için devre dışı bırakın.

Soket anahtarları: payload_in, payload_out, değişiklikler

Spline

Gereksiz ara noktaları azaltarak, animasyon ana karelerine düzgün spline eğrileri sığdırır.

Amaç: Görsel kaliteyi korurken düzgün eğri uydurma.

Soket anahtarları: payload_in, payload_out, değişiklikler

Refit

Boyutu küçültmek için daha az Bezier eğrisiyle yoğun anahtar kare dizilerine yaklaşır.

Amaç: Tolerans dahilinde kalarak daha az eğriye sığar.

Soket anahtarları: payload_in, payload_out, değişiklikler

Quantizer

Anahtar kareler ve eğrilerdeki sayısal değerlerin kesinliğini azaltır.

Amaç: Sayıları belirli sayıda ondalık basamağa yuvarlayarak dosya boyutunu azaltmanın basit ama etkili yolu.

Kullanımı: Hemen hemen her animasyon verisine uygulanabilir. Daha yüksek anahtar kare sayılarıyla daha etkili hale gelir.

Dikkat: Çok agresif niceleme (düşük hassasiyet), animasyonlarda titremeye veya görsel bozulmalara neden olabilir.

Soket anahtarları: payload_in, payload_out, değişiklikler

Cleanup

Gereksiz veya gereksiz animasyon verilerini kaldırmak için çeşitli temizleme görevlerini gerçekleştirir.

Amaç: Diğer optimize edicilerin gözden kaçırabileceği belirli türdeki gereksiz verileri kaldırmak için özel araç.

Kullanımı: Payload'unuzu 'payload_in'e bağlayın ve sonucu 'payload_out'tan alın. Değişiklik başına rapor istiyorsanız 'değişiklikler'i de kullanın.

Soket anahtarları:
- Girişler: yük_in
- Çıktılar: payload_out, değişiklikler

Şu anda desteklenen temizleme işlemleri:
1. **Kullanılmayan Renk/Alfa Parçalarını Kaldır**: Animasyon sırasında hiçbir zaman görünmeyen aralıklar için renk/alfa zaman çizelgelerini kaldırır.
2. **Gereksiz IK Döndürmelerini Kaldır**: %100 karışımla bir IK kısıtlaması tarafından tamamen kontrol edilen kemiklerden döndürme ana karelerini kaldırır.
3. **Yol Kısıtlama Tuşlarını Kaldır**: Bir yol kısıtlaması tarafından tamamen kontrol edilen kemiklerdeki döndürme/çevirme anahtar karelerini kaldırır (%100'de karışım değerleri).
4. **İngilizce Olmayan Karakterleri Temizleyin**: Aşağı yöndeki araçlarda sorunları önlemek için adlarda/tanımlayıcılarda İngilizce olmayan karakterleri değiştirir.

Scale

Animasyon anahtar karelerindeki tüm sayısal değerleri belirtilen bir faktöre göre ölçeklendirir.

Amaç: Animasyon verilerini eşit şekilde ölçeklendirir; iskeleti orantılı olarak yeniden boyutlandırmak veya animasyon yoğunluğunu ayarlamak için kullanışlıdır.

Kullanım: **payload_in**'i bağlayın ve sonucu **payload_out**'tan alın.

Soket anahtarları: payload_in, payload_out

Schneider

Schneider eğrisi uydurma algoritmasını kullanarak pürüzsüz Bezier eğrilerini animasyon ana karelerine sığdırır.

Amaç: Yoğun ana kare dizilerinden doğal görünümlü Bezier eğrileri üreten gelişmiş eğri uydurma.

Kullanılabilirlik: **Yalnızca Plus düğümü**.

Nasıl çalışır: Schneider algoritması, orijinal harekete yakından uyan optimum Bezier kontrol noktaları oluşturmak için ana kare konumlarını ve teğetlerini analiz eder.

Parametreler:
- **Hata Toleransı**: Orijinal anahtar karelerden izin verilen maksimum sapma. Daha düşük = daha doğru, daha yüksek = daha düzgün eğriler.
- **Köşe Açısı**: Eğrinin parçalara bölüneceği eşik açısı (derece).

Şunun için en iyisi:
- Birçok ana kareye sahip, elle çizilmiş veya içe aktarılmış animasyonlar
- Doğrusal enterpolasyonu pürüzsüz Bezier eğrilerine dönüştürme
- Eğri kalitesini korurken ana kare sayısını azaltma

Not: RDP gibi daha basit algoritmalara göre hesaplama açısından daha yoğundur ancak üstün eğri kalitesi üretir.

Soket anahtarları: payload_in, payload_out, değişiklikler

Physics Constraint Bake

Spine PhysicsConstraint hareketini kemik döndürme/çevirme ana karelerine dönüştürür ve fizik zaman çizelgelerini kaldırır.

Amaç: Çalışma zamanı fizik simülasyonunu açık anahtar karelere dönüştürür, böylece animasyonlar fizik kısıtlamaları olmadan belirleyici ve düzenlenebilir olur. Pişirmeden sonra fizik kısıtlamaları ve fizik zaman çizelgeleri yükten kaldırılır.

Kullanılabilirlik: **Yalnızca Plus düğümü**.

Girişler/Çıkışlar:
- **payload_in** → **payload_out** (pişmiş)
- **değişiklikler** (isteğe bağlı değişiklik listesi)

Kontroller:
- **Örnek FPS**: Pişirme için simülasyon örnekleme oranı.
- **Fırında Döndürme**: Fırında döndürme tuşlarını yazın.
- **Çeviriyi Pişir**: Fırınlanmış çeviri anahtarlarını yazın.
- **Pişirme Çevirisi (Çocuklar)**: Fizik hareketine dayanan çocuk kemiklerine çeviri fırında pişirme uygulayın.

Notlar:
- Simülasyon verilerini yeniden oluşturmak için orijinal Spine JSON gerekir.
- Fizik kısıtlamalarını kaldırmak ancak hareketi korumak istediğinizde kullanın.

Attachment Visibility

Alfa değeri sıfır olduğunda bir yuvanın ekini null değerine ayarlayarak oluşturmayı optimize eder.

Amaç: Oyun motorunun görünmez ekleri işlemek veya işlemek zorunda kalmasını önler.

Kullanım: **girilen veriyi** işler, optimize edilmiş **yük_çıkışı** çıktılarını alır ve isteğe bağlı olarak **değişiklikleri** raporlar.

Soket anahtarları: payload_in, payload_out, değişiklikler

Payload Merger

Birden fazla işlenmiş animasyon verisini tek bir birleşik veride birleştirir.

Amaç: Farklı animasyonların veya kemik gruplarının ayrı ayrı optimize edildiği ve yeniden birleştirilmesi gereken paralel işlem hatları için gereklidir.

Girişler:
- **temel**: Ana yük (iskelet yapısı)
- **geçersiz kılmalar**: İzleri temel izlerin yerini alan bir veya daha fazla veri yükü

Çıkış:
- **merged_out**: Birleştirilmiş yük

Soket anahtarları: temel, geçersiz kılmalar, merged_out

Animation Viewer

Optimizasyondan önce ve sonra animasyon eğrilerini incelemek ve karşılaştırmak için görsel araç.

Amaç: Seçilen parça için ana karelerin ve eğrilerin grafiksel gösterimini sağlar.

Kullanım: Orijinali ve optimize edilmişi kaplamak için **before_in** ve **after_in** bağlantılarını kullanın. Etkilenen parçaları vurgulamak için isteğe bağlı olarak **değişiklikleri** bağlayın.

Soket anahtarları: before_in, after_in, değişiklikler

Animation Filter

Animasyon adlarına (ör. 'çalıştır', 'boşta') göre animasyon parçalarını filtreler.

Amaç: Farklı animasyonlara farklı optimizasyon stratejileri uygulamak için kullanışlıdır.

Kullanım: **payload_in**'i **payload_out** olarak filtreler ve kullanıcı arayüzü seçimi için **animasyon_listesini** gösterir.

Soket anahtarları: payload_in, payload_out, Animation_list

Asset Filter

atlas varlıklarını ada göre filtreler, iki modda çalışır: paketten çıkarmadan önce (atlas metnini filtreler) veya paketten çıkardıktan sonra (sprite'ları filtreler).

Amaç: İş akışına hangi varlıkların dahil edileceğini (atlas'den hangi varlıkların paketten çıkarılacağını veya yeniden paketlemeye hangi paketten çıkarılmış spriteların dahil edileceğini) kontrol eder.

Girişler/Çıkışlar:
- Atlas modu: **atlas_in** → **atlas_out**
- Sprite modu: **sprites_in** → **sprites_out**

Soket anahtarları: atlas_in, atlas_out, sprites_in, sprites_out

Bone Filter

Kemik animasyon parçalarını kemik adına göre filtreler.

Amaç: Belirli kemiklerin optimizasyon sürecinden hedeflenmesine veya hariç tutulmasına olanak tanır.

Kullanım: **payload_in**'i **payload_out** olarak filtreler.

Soket anahtarları: payload_in, payload_out

Skin Filter

Animasyon ve varlık verilerini dış görünüş adlarına göre filtreler.

Amaç: Çok kaplamalı bir Spine projesindeki yalnızca belirli kaplamaları işleyin.

Kullanım: **payload_in**'i **payload_out** olarak filtreler.

Soket anahtarları: payload_in, payload_out

Slot Filter

Slot animasyon parçalarını slot adına göre filtreler.

Amaç: Özel zamanlama veya görünürlük gereksinimleri olabilecek belirli alanları hedeflemek veya hariç tutmak için kullanışlıdır.

Kullanım: **payload_in**'i **payload_out** olarak filtreler.

Soket anahtarları: payload_in, payload_out

Parameter Filter

Animasyon parçalarını özellik türlerine (ör. döndürme, ölçek, renk) göre filtreler.

Amaç: Sonraki optimizasyonların yalnızca belirli animasyon verisi türlerine uygulanmasına olanak tanır.

Kullanım: **payload_in**'i **payload_out** olarak filtreler.

Soket anahtarları: payload_in, payload_out

Atlas Unpacker

Spine dokusundan atlas tek tek spriteları çıkarır.

Amaç: Bir atlas dosyasını bileşen spritelarına bölerek bireysel analize veya yeniden paketlemeye olanak tanır.

Kullanım: **atlas_project**'i InputNode'den bu düğümdeki **atlas_project**'e (veya eski **atlas_project_in**'e) bağlayın. İsteğe bağlı olarak **skeleton_json_in**'i (InputNode'nin **original_json**'undan) bağlayarak ağ uyumlu kırpmayı etkinleştirin (sprite'ları dikdörtgen sınırlar yerine ağ gövde sınırlarına göre kırparak ağ eklentileri için doku belleğini önemli ölçüde azaltabilir).

Çıkışlar:
- **sprites_out**: Standartlaştırılmış sprite dizisi (görüntüleyici/yeniden paketleyici için)
- **sprites_data_out**: Çıkarılan hareketli resim görüntüleri/meta veriler (yapılandırılmış paket)
- **atlas_out**: Atlas proje geçişi

Soket anahtarları: atlas_project, atlas_project_in, iskelet_json_in, sprites_out, sprites_data_out, atlas_out

Atlas Repacker

Bireysel spriteları bir veya daha fazla yeni, optimize edilmiş doku atlasına yeniden paketler.

Amaç: Doku belleğini optimize eder ve verimli hareketli grafik sayfaları oluşturarak çizim çağrılarını potansiyel olarak azaltır.

Kullanım: Sprite'ları **sprites_data_in** (yapılandırılmış hareketli görüntü paketi) veya **sprites_out** (standartlaştırılmış hareketli görüntü dizisi) aracılığıyla kabul eder. Alfa işleme/çokgen paketleme için gerekiyorsa orijinal iskeleti **original_json** aracılığıyla sağlayın. Paketlenmiş bir atlas dosyasını **atlas_out** olarak çıkarır.

Soket anahtarları: sprites_data_in, sprites_out, orijinal_json, atlas_out

Atlas Viewer

Paketi açmadan önce atlas yapısını incelemek için hafif atlas görselleştirme ve analiz aracı.

Amaç: Ağır paket açma işlemini gerçekleştirmeden atlas sayfalarını ve bölgelerini önizlemenin hızlı bir yolunu sağlar. atlas yapısının doğrulanmasına ve kullanılmayan bölgelerin belirlenmesine yardımcı olur.

Kullanım: Tek bir atlas projesini **atlas_project**'e (veya eski **atlas_in** / **atlas**) bağlayın veya **atlas_projects** aracılığıyla bir grup atlas projesini inceleyin. Kullanım analizi için isteğe bağlı olarak JSON iskeletini **json**'a bağlayın.

Soket anahtarları: atlas_project, atlas_projects, atlas_in, atlas, json

Atlas Merger

Birden fazla atlas kaynağını tek bir birleşik atlas'de birleştirir.

Amaç: Birden fazla atlas projesini tek bir projede birleştirin.

Giriş:
- **atlas_inputs**: atlas projelerinden oluşan çok girişli dizi

Çıkışlar:
- **atlas_out**: atlas projesi birleştirildi
- **merged_out**: Eski birleştirilmiş çıktı
- **merged_atlas_out**: Eski birleştirilmiş çıktı

Soket anahtarları: atlas_inputs, atlas_out, merged_out, merged_atlas_out

Tipik boru hattı:
```
InputA → Unpacker → Repacker ─┐
                               ├→ Atlas Merger → Unpacker → Repacker → Output
InputB → Unpacker → Repacker ─┘
```
Repacker'dan önce veriler bireysel sprite'lardır; Repacker'dan sonra bir atlas projesi haline gelir. Atlas Birleşme, atlas projelerini birleştirir, ardından son Paketten Çıkarıcı → Yeniden Paketleyici geçişi, her şeyi tek bir birleşik atlas'ye sıkı bir şekilde yeniden paketler.

Asset Viewer

Paketlenmemiş bir atlas'den tek tek spriteları görüntüler.

Amaç: atlas manipülasyonu için görsel hata ayıklama aracı.

Kullanım: Sprite'ları **sprites_out** (standart) veya eski **sprites_in** / **sprites_data** yoluyla kabul eder.

Soket anahtarları: sprites_out, sprites_in, sprites_data