Wobble GIF'in Neden Kesik, Yırtık veya Tuhaf Görünüyor (Ve Nasıl Düzeltilir)

Bir hareket maskesi boyadın, dışa aktarmaya bastın, ve sonuç kapalı görünüyor — düzgünce titremek yerine görünür şekilde çatlıyor, ya da kenarlarda yırtılıyor, ya da sadece canlı değil bozuk okunan bir şekilde hareket ediyor. Bu, Wobble Maker'ın hareketi gerçekte nasıl render ettiğine bağlı belirli, düzeltilebilir nedenlerle olur. Mekanizmayı anladığında, çözümler hızlıdır.

---

Önce, wobble gerçekte nasıl üretiliyor

Wobble Maker kumaş fiziği veya kemikler simüle etmez. Görselini 24×24 grid halinde bölümlere ayırır ve her karoyu, o karoyu ne kadar ağır boyadığına göre ölçeklenen yer değiştirme miktarıyla (buna "ağırlık" denir) bir sinüs dalgası boyunca yer değiştirir. İki bitişik karo bağımsız olarak animasyonlaşır — her biri grid pozisyonuna dayalı kendi faz kayması alır, bu yüzden komşu karolar kasıtlı olarak birbirinden hafifçe eşzamansız hareket eder (bu, tek bir katı bloğun kayması gibi görünmek yerine, wobble'a organik, esnek hissini veren şeydir).

Bu bağımsızlık aynı zamanda tam olarak neden yanlış gidebileceğinin de nedenidir. İki bitişik karo hem yüksek ağırlıkta hem yüksek genlikte boyanmışsa, tek bir karede aralarındaki dikişin görünür hale gelmesine yetecek kadar birbirinden uzaklaşabilirler — karo sınırında mesh'in gerçekten ayrıldığı ince bir boşluk veya çiftlenmiş bir kenar. Bu bir bug değil, gridin bir grid olmasının doğrudan bir sonucudur: karo kenarlarını dikiş yapan hiçbir interpolasyon yoktur, sadece bağımsız karo başına yer değiştirme.

Bunu göz önünde bulundurarak, kötü bir dışa aktarmanın en yaygın üç nedeni burada.

---

Neden 1: Çok Geniş veya Çok Yaygın Bir Alan Boyadın

Bütün saç kütlesi veya bütün bir karakterin gövdesi gibi büyük, sürekli bir bölgeyi doldurursan, o bölgedeki her karo yüksek ağırlık alır, ve bu karoların her biri neredeyse aynı genlikte bağımsız olarak yer değiştiriyor. Büyük bir alan boyunca, birikmiş görsel etki "bu bölge birlikte titriyor" değil, "düzinelerce karo nerede olmaları gerektiği konusunda anlaşamıyor" oluyor, ki bu hareket yerine yırtılma veya parçalanma olarak okunuyor.

Çözüm: geniş dolgular yerine daha dar, daha hedefli bölgeler boya. Genel alan yerine belirli hareket eden parça açısından düşün — bir saç teli, bir kulak ucu, bir kurdele kuyruğu. Hareketin gerçek çizgisi boyunca 2-3 karo genişliğinde bir fırça darbesi, aynı görsel alanı kaplayan geniş bir yığından çok daha iyi bir arada tutar. Genuinely büyük bir alanın hareket etmesini istiyorsan, tam ağırlık ve tam genlikte boyalı tutmak yerine (Neden 2'ye bak) gücü düşür.

---

Neden 2: Büyük Boyalı Alanda Güçlü Güç

Wobble Maker'ın üç güç ön ayarı var, ve sadece "biraz daha fazla" ile "biraz daha az" değiller — gerçek piksel yer değiştirme miktarlarına eşleniyorlar: yumuşak 5px, orta 10px, güçlü 18px, karo başına, kare başına, çalışma tuvalinde uygulanır (480px'de tavan yapar). Güçlü, yumuşağın neredeyse 4 katı yer değiştirmesidir.

Küçük bir boyalı alanda — tek bir aksesuar, bir kolye, bir saç ucu — 18px'lik bir karo sallanması güçlü ön ayarın tam amacı olan, canlı ve esnek görünür. Büyük bir boyalı alanda, aynı 18px sallanması aynı anda birçok komşu karo boyunca bağımsız olarak gerçekleşiyor, ve aralarındaki dikişler tam olarak, karolar birbirinden yeterince uzağa, yeterince hızlı hareket ettiği için, gözün bunu tek sürekli bir yüzey olarak okuyacak hiçbir yolu olmadığı için görünür hale geliyor.

Çözüm: Güçlü'yü küçük, odaklanmış öğeler için sakla — sallanan bir kolye, kulak uçları, bir çıngırak. Daha büyük bir boyalı bölgeyi kaplayan herhangi bir şey için (tam bir at kuyruğu, geniş bir saç şeridi, büyük bir kurdele), Orta veya Yumuşak kullan. Orta'nın 10px sallanması genelde orta boy bölgelerde "açıkça canlı ama yine de bir arada duran" için tatlı noktadır, ve Yumuşak'ın 5px'i tek başına neredeyse fark edilmez ama büyük bir alan boyunca güzel, ince bir sallanma olarak okunur.

---

Neden 3: Sert Bir Kenara Kadar Boyamak

Fırça darbelerin görseldeki sert bir sınıra kadar çalışıyorsa — bir yüzün kenarı, katı bir nesnenin anahatı, keskin bir renk geçişi — o sınırdaki karolar yer değiştirilirken, boyamının hemen dışındaki karolar tamamen sabit kalıyor. "Hareket eden" ile "hareket etmeyen" arasındaki o keskin kesinti gözün yakalaması çok kolaydır, ve sanatın kendinden nazikçe sallanmak yerine soyulduğu gibi görünme eğilimindedir.

Bu özellikle yüzlerin etrafında dikkat çekicidir: çene çizgisine veya yanağa değen saça hareket boyamak, wobble'ın her karede yüz anahatını görünür şekilde çekiştirdiği anlamına gelir, ki bu yumuşak güçte bile doğal görünmez.

Çözüm: hareket maskeni ve bozmak istemediğin herhangi bir sert kenar arasında küçük bir tampon boş alan bırak. Çene çizgisinden, katı bir aksesuarın anahatından veya başka herhangi bir keskin sınırdan birkaç piksel önce fırçanı durdur. Boyanmamış tampon, yumuşak bir geçiş bölgesi görevi görür — mekanik olarak özel bir şey yapmıyor, sadece keskin kenarın kendisinin hiçbir zaman bir yer değiştirme değeri almadığı anlamına geliyor, bu yüzden iç hareket görünür şekilde ona sürüklenmeden gerçekleşirken sabit kalıyor.

---

Daha Az Belirgin Bir Neden: Kaynak Görselin Kendisi

İyi hedeflenmiş boyama ve makul bir güçle bile, bir kaynak görsel sana karşı çalışabilir. Wobble Maker, boyama veya render etmeden önce kaynağını maksimum 480px çalışma boyutuna yeniden örnekler — orijinal sanatında zaten hareket bulanıklığı, ağır anti-aliasing veya çok ince çizgi işi (tek piksel saç telleri, hassas çapraz tarama) varsa, o detay 480px'de çok az piksele sıkıştırılır. O zaten yumuşak veya zaten ince detayları karo başına 10-18px yer değiştirmek, orada başlangıçta çok fazla piksel bilgisi olmadığı için, kaynağın hiç göründüğünden daha bulanık veya daha dağınık bir şeye bulaştırabilir.

Çözüm: kaynağında ince çizgi işi veya bulanıklık varsa, boyalı alan ne kadar büyük veya küçük olursa olsun Yumuşak güce düş, ve ince detayların (tek tel saçlar, hassas mücevher zincirleri) hareket halinde sabit durduklarından biraz daha yumuşak okunmasını bekle. Düz, temiz çizgi sanatı, net, kalın anahatlarla, fotoğraf-gerçekçi veya ağır bulanık kaynak görsellerden çok daha iyi yer değiştirme altında dayanır — yer değiştirmenin dağılmadan taşıyabileceği karo başına daha fazla katı piksel verisi vardır.

---

Hızlı Tanı Kontrol Listesi

• Görselin parçaları arasında boşluklar veya çiftlenmiş kenarlar mı görüyorsun? Çok geniş bir alan boyadın — darbelerini daraltın.
• Tüm bölgeler parçalanıyor gibi mi görünüyor? Güçlü'den Orta veya Yumuşak'a düşür.
• Bir yüz veya sert anahat yakınında bir şey yırtılıyor gibi mi görünüyor? Bir dahaki sefere kenardan önce tampon alan bırak.
• Düşük güçte bile her şey biraz bulanık mı görünüyor? Kaynağında ince çizgi işi veya bulanıklık var — Yumuşak'a bağlı kal ve ince detayların yumuşamasını bekle.

İyi haber: hiçbiri bir şeyi yeniden yüklemeni gerektirmiyor. Wobble Maker'ın önizlemesi canlı ve anında, bu yüzden maskeni ayarlayabilir, gücü bir kademe düşürebilir veya daha dar bir bölgeyi yeniden boyayabilir ve sonucu hemen görebilirsin — hiçbir dışa aktarma boşa gitmez, ve önizleme bir token'a mal olmadığı için, gerçekten dışa aktarmadan önce istediğin kadar ayarlayabilirsin.

Sıkça Sorulan Sorular

Wobble Maker dışa aktarımım neden görselin parçaları arasında boşluklar ya da yırtık dikişler gösteriyor?

Wobble Maker görselini 24×24'lük bir ızgaraya böler ve her karoyu kendi faz kaymasıyla bağımsız olarak bir sinüs dalgası boyunca yer değiştirir. Detaylı ya da yüksek kontrastlı bir görselde, karolar tek bir karede aralarındaki dikişin görünür olacağı kadar birbirinden uzaklaşabilir, çünkü karo kenarlarını birbirine dikecek bir interpolasyon yok. Güç ön ayarını bir seviye düşür — yumuşak 5px yer değiştirme, orta 10px, güçlü 18px — dikişi çok daha az fark edilir kılmak için.

Tüm görsel neden pürüzsüzce sallanmak yerine parçalanıyormuş gibi görünüyor?

Bu neredeyse her zaman yoğun ya da yüksek detaylı bir kaynak görsele uygulanan Güçlü ön ayardır (karo başına 18px yer değiştirme). Güçlü, az rekabet eden detayı olan basit, yüksek kontrastlı sanat için tasarlanmıştır. Dağınık bir arka plan, fotoğraf-gerçekçi bir görsel ya da karmaşık çizgi işi için Orta ya da Yumuşak'a geç — Orta'nın 10px salınımı genelde "belirgin şekilde canlı" ile "bir arada duruyor" arasındaki tatlı nokta.

Wobble özellikle bir yüzün ya da sert bir kenarın yakınında neden yırtılıyor gibi görünüyor?

Bir çene çizgisi, bir fotoğraf çerçevesi ya da bir panel sınırı gibi keskin bir görsel sınır, komşu karolar arasındaki küçük bir uyuşmazlığı bile göz için pürüzsüz bir gradyandaki aynı uyuşmazlıktan çok daha kolay fark edilir kılar. Tüm görsel tek biçimde sallandığından ve sadece bir bölgeyi muaf tutamayacağından, gücü bir seviye düşürmek sert bir kenardaki inatçı bir dikişi evcilleştirmenin ana yoludur.

Kaynak görselimde zaten ince çizgi işi ya da hareket bulanıklığı var — sallandıktan sonra neden bulaşmış görünüyor?

Wobble Maker, render etmeden önce kaynağını maksimum 480px'lik bir çalışma boyutuna yeniden örnekler. Orijinal zaten ince tek-piksel saç telleri ya da ağır anti-aliasing içeriyorsa, o detay çok az piksele sıkıştırılır, ve karo başına 10-18px yer değiştirmek onu daha da bulaştırabilir. İnce çizgi işi ya da mevcut bulanıklığı olan kaynak sanat için Yumuşak güç kullan, ve ince detayların hareket halinde biraz daha yumuşak okunmasını bekle.

Farklı bir gücü test etmek istediğimde her seferinde yeniden dışa aktarmam mı gerekiyor?

Hayır — Wobble Maker'ın önizlemesi, tarayıcında canlı ve anında, dışa aktarımda alacağın tam aynı sinüs-dalga yer değiştirme döngüsünü render eder, ve önizleme bir token'a mal olmaz. Bir dışa aktarıma taahhüt etmeden önce her güçte iki üç tam döngü izle, kör dışa aktarıp yanlış görünürse yeniden dışa aktarmak yerine.

---

Wobble Maker'ı ücretsiz dene → — ilk dışa aktarman ücretsiz, kart gerekmez.

---

Okumaya Devam Et

• Wobble Maker'ı Dene → — titremesi gerekeni boya, ilk dışa aktarma ücretsiz
• Wobble Maker — Herhangi Bir Anime Sanatı İçin Ücretsiz Titreşim ve Zıplama Animasyonu
• Wobble ile Animasyonlaştırılacak En İyi Öğeler
• Wobble Maker vs Mesh Rigging
• Purupuru Efekti Açıklandı