PerfectVector
Yazan Irene Kim10 dk okuma

Godot SVG içe aktarma: Net simgeler için ayarlar

Godot’ta bulanık SVG içe aktarımlarını Texture2D veya DPITexture ile düzeltin. Raster boyutunu, aşırı örneklemeyi, desteklenen çizimleri ve simgeleri gereken ölçeklerde kontrol edin.

Bu sayfada

Godot, SVG dosyasını içe aktarırken genellikle piksellere dönüştürür. Bu nedenle kaynakta temiz vektör yolları olsa bile bu dokuyu büyütmek bulanık bir görüntüye yol açabilir. Görüntü alanı ölçeklendirmesine uyum sağlaması gereken SVG simgeleri için mevcut içe aktarıcı DPITexture seçeneğini de sunar. Bu seçenek, kaynağı farklı bir aşırı örnekleme katsayısı için yeniden rasterleştirebilir. Godot her iki yöntemi de görsel içe aktarma kılavuzunda açıklar.

Önce içe aktarılan kaynağı ve projenizin onu nasıl ölçeklendirdiğini kontrol edin. Zaten geçerli olan bir SVG’yi yeniden vektörleştirmek, düşük çözünürlüklü bir dokunun daha büyük bir ekrana yayılması sorununu çözmez.

Görüntüleme davranışına uygun SVG içe aktarma türünü seçin

Aşağıdaki iki seçenek Import panelindeki kaynak türlerini belirtir. DPITexture da Texture2D’den türediği için bunlar birbirinden bağımsız sınıf aileleri değildir. DPITexture başvurusu sınıfı deneysel olarak da işaretler; kullanmaya başlamadan önce projenizin Godot sürümüne uygun belgelere bakın.

Görselin gereksinimiBaşlangıç seçimiDoğrulanacak nokta
Görüntüleme boyutu belli bir sprite veya simgeVarsayılan Texture2D içe aktarımıÜretilen raster görüntü, amaçlanan en büyük kullanım için yeterli piksele sahip mi?
Görüntü alanının aşırı örneklemesine uyum sağlaması gereken bir SVG arayüz simgesiDPITexture içe aktarımıYeniden rasterleştirme, projenin görüntü alanı ve ölçeklendirme ayarlarıyla çalışıyor mu?
Node2D veya Control ölçeği değişen bir simgeDüğüm ölçeğine bağlı aşırı örneklemeyi ayrıca değerlendirerek DPITextureDüğümün aşırı örnekleme ayarı ve tekrarlanan ölçek değişikliklerinin maliyeti
Fotoğraf, boyanmış doku veya bilinçli olarak piksel sanatı biçiminde hazırlanmış spriteUygun bir raster kaynağı koruyunAmaçlanan görünüm, filtreleme ve görüntüleme ölçeklendirmesinden sonra korunuyor mu?
Sahne içinde düzenlenebilir yollar veya çarpışma geometrisiAyrı bir geometri iş akışıSahne, ihtiyacınız olan gerçek geometriyi içeriyor mu?

Doku içe aktarımı size bir doku kaynağı verir. Yol düzenleme, çarpışma şekilleri ve performansı ayrı gereksinimler olarak ele alın; dosya adının SVG ile bitmesi bunlardan herhangi birinin karşılandığını kanıtlamaz. Tarayıcıdaki bir sahne için PixiJS geometri ve doku yöntemlerini karşılaştırarak aynı SVG’nin çizim motoruna nasıl farklı yollarla ulaştığını görebilirsiniz.

SVG kaynağı ve ekranda çizilen pikselleri
Varsayılan SVG içe aktarımının sabit bir raster ürettiğini, DPITexture’ın ise görüntü alanı aşırı örneklemesi için yeniden rasterleştirebildiğini gösteren kavramsal şema.
Kavramsal görsel: Varsayılan SVG içe aktarımı sabit bir raster üretir. DPITexture, görüntü alanının aşırı örneklemesi değiştikçe yeniden rasterleştirebilir. Düğüm ölçeğine bağlı aşırı örnekleme ayrıca etkinleştirilmesi gereken bir ayardır; bu bir Godot ekran görüntüsü veya ölçülmüş çıktı değildir.

Önce varsayılan Texture2D içe aktarımını kontrol edin

Tüm simge klasörünü değiştirmeden önce temsili bir görsel kullanın. Kavisli bir kenarı, dar bir boşluğu ve arayüzde önemli olan küçük ayrıntıları bulunan bir şekil seçin.

  1. SVG’yi projeye ekleyin ve FileSystem panelinde seçin.
  2. Import panelini açın ve içe aktarma türünün Texture2D olduğunu doğrulayın.
  3. SVG > Scale ve Process > Size Limit ayarlarını inceleyin; bir seçeneği değiştirdikten sonra yeniden içe aktarın.
  4. Dokuyu kullanacağınız sprite veya arayüz bileşenine yerleştirin ve görüntülenen boyutunu kontrol edin.

SVG > Scale rasterleştirme boyutunu değiştirir; daha yüksek bir değer daha büyük bir görsel oluşturur. Bu ayar dokunun 2D boyutunu da etkiler; değiştirdikten sonra düğümün veya yerleşimin boyutlarını gözden geçirin. Process > Size Limit içe aktarılan boyutları sınırlandırabilir. Her iki kontrol de doku içe aktarıcı başvurusunda açıklanır.

Basit bir boyutlandırma örneği olarak, 32 piksel genişliğinde bir raster görüntü ekranda 128 piksele yayılıyorsa büyütülüyor demektir. Kaynağın vektör eğrileri, zaten içe aktarılmış bu raster görüntüye piksel eklemez. Bu kullanıma uygun bir doku üretin veya aşırı örneklemenin arayüze uygun olduğu durumlarda DPITexture’ı deneyin.

Her SVG’nin ölçeğini rastgele büyük bir çarpanla artırmaktan kaçının. Önce gerçek kullanımdaki en büyük boyutu belirleyin, ardından en küçük boyutu da inceleyin. Büyük bir envanter önizlemesinde iyi görünen bir kaynak, küçücük bir düğmede gösterildiğinde dar bir boşluğunu kaybedebilir.

DPITexture’ı doğru aşırı örnekleme ayarlarıyla kullanın

Uyarlanabilir yöntemi denemek için FileSystem panelinde SVG’yi seçin, içe aktarma türünü DPITexture olarak değiştirin ve yeniden içe aktarın. Aynı arayüz yerleşimini kullanın; böylece karşılaştırma tek bir soruya yanıt verir: Rasterleştirme yöntemini değiştirmek, amaçlanan ölçeklerdeki uyumsuzluğu gideriyor mu?

DPITexture, SVG kaynak verisini korur ve aşırı örneklemeye uygun bir raster üretebilir. base_scale özelliği kaynak dokunun ölçeğini kontrol eder; kaynağı düzenlenebilir sahne yollarına dönüştürmez. DPITexture sınıf belgelerine bakın.

Kontrol etmeniz gereken iki ölçeklendirme durumu vardır:

  • Görüntü alanı ölçeklendirmesi: Godot’un görsel aşırı örneklemesi, görüntü alanı ölçek katsayısı değiştiğinde vektör kaynağı yeniden çizebilir. Bir SVG için bunu etkinleştirmek üzere görseli DPITexture olarak içe aktarın.
  • Düğüm ölçeklendirmesi: Node2D veya Control düğümünün Scale değerine bağlı aşırı örnekleme varsayılan olarak devre dışıdır. İhtiyacınız olan davranış buysa ilgili düğümde Oversampling with Scale seçeneğini etkinleştirin.

Godot’un aşırı örnekleme kılavuzu bu ayrımı açıklar. Ayrıca sık ölçek değişikliklerinin, doku yeniden çizildiği için CPU işlemi gerektirebileceğini belirtir. Bu seçeneği yaygın olarak uygulamadan önce animasyonlu ölçeklendirmeyi yayımlanacak sahnede deneyin.

2D düzenleyici, yakınlaştırırken otomatik olarak yeniden örnekleme yapabilir; bu da onu yararlı bir önizleme aracı yapar. Projeyi çalıştırıp gerçek görüntü alanı davranışını da test edin. Viewport esnetme modunda sahne önce temel görüntü alanı boyutunda çizilir, sonra pencereye göre ölçeklendirilir; bu son ölçeklendirme arayüzün görünümünü hâlâ belirleyebilir. Esnetme modu belgeleri, Canvas Items moduyla arasındaki farkı açıklar.

Godot’un doğru çizebileceği görseller hazırlayın

İçe aktarıcıyı değiştirmek, çizim boyutuyla ilgili bir sorunu çözer. Eksik nesneler veya değişmiş bir siluet ise kaynak görselin kontrol edilmesini gerektirir.

Gerçek yolları arayın

SVG’yi bir vektör düzenleyicide açın ve görünür çizimi seçin. Simgenin tamamı tek bir yerleştirilmiş bitmap ise Godot ayarlarını değiştirmeden önce bunu araştırın. MDN öğe başvurusunun açıkladığı gibi, SVG’nin <image> öğesi raster içerik barındırabilir. Bu kapsayıcıyı yeniden rasterleştirmek, küçük bir gömülü PNG’de hiç bulunmayan temiz eğrileri yeniden oluşturamaz.

Yerleştirilmiş pikselleri düzenlenebilir şekillerden ayırmak için gömülü raster kontrol listesini kullanın. Vektör ana dosya varsa ondan dışa aktarın. Bir set hazırlıyorsanız arayüz kiti SVG kılavuzunu kullanarak tuvali ve kenar boşluklarını tutarlı tutun.

Dekoratif metni yollara dönüştürün

Godot’un SVG içe aktarıcısı, düzenlenebilir SVG metnini çizmez. Düzenlenebilir metin içeren ana dosyayı koruyarak teslim kopyasındaki dekoratif harfleri yollara dönüştürün. Inkscape’te ilgili komut Path > Object to Path şeklindedir. Godot bu işlemi Importing SVG images with text bölümünde açıklar.

Yerelleştirme veya sık düzenleme gerektiren bir düğme etiketi için etiketi arayüz metni olarak tutun ve simgeyi ayrıca içe aktarın. Tüm arayüzü yollara dönüştürmek sonraki değişiklikleri zorlaştırır.

Karmaşık efektleri ayrı test edin

Godot, SVG çizimi için ThorVG kullanır. ThorVG’nin SVG yorumlayıcısının tanımlı bir destek sınırı vardır; SVG genel bakışı, animasyon, etkileşim ve çoklu ortamı desteklenmeyen özellikler arasında sayar. ThorVG motorunun genel yetenekleri, belirli bir SVG özelliğinin Godot’un içe aktarıcısı üzerinden çalışacağını garanti etmez.

Bir rozetin ayrıntısı kayboluyorsa dışa aktarılan SVG’yi basit dolgulu şekillerden oluşturulmuş bir kopyayla karşılaştırın. Gerekli efektleri teker teker geri ekleyin. Karmaşık çizimi daha güvenilir biçimde koruyorsa ve proje ölçeklenebilir kaynak şekillere ihtiyaç duymuyorsa bir raster dışa aktarımı saklayın.

Dosyanın karmaşıklığını azaltmak uğruna dar bir açıklığı ortadan kaldırmayın. Kabul ölçütü, negatif alanları da dahil olmak üzere amaçlanan siluettir.

İlk görünür uyumsuzluğun nedenini bulun

Kaynak dosyayı, içe aktarma türünü, SVG ölçeğini, düğüm ölçeğini, görüntü alanı ayarlarını ve beklenen görüntüleme boyutunu kaydedin. Ardından belirtiyle ilgili ayarı değiştirin.

Belirtiİlk kontrolSonraki yararlı test
Düzenleyicide net SVG, oyunda bulanık simgeVarsayılan içe aktarma boyutları ve gerçek görüntüleme boyutuYeterli raster boyutları üretin veya DPITexture’ı deneyin
DPITexture, görüntü alanını yeniden boyutlandırmayı iyileştiriyor ama büyütülmüş düğümü iyileştirmiyorDüğüm ölçeğine bağlı aşırı örneklemeO düğümde Oversampling with Scale ayarını kontrol edin
Tüm arayüz bulanık görünüyorGörüntü alanı çizimi ve son pencere ölçeklendirmesiTek tek simgeleri düzenlemeden önce projenin esnetme davranışını karşılaştırın
Yazılar kayboluyorSVG’deki düzenlenebilir metinMetinleri yollara dönüştürülmüş bir teslim kopyası içe aktarın
Parıltı, animasyon veya karmaşık bir ayrıntı değişiyorSVG özellik uyumluluğuYalnızca basit şekiller içeren bir dışa aktarımı veya raster alternatifi karşılaştırın
Görselin yalnızca bir kısmı pikselli kalıyorGömülü raster içerikKaynak nesneleri inceleyip yerleştirilmiş görseli bulun
Filtrelemeyle kenarlar değişiyorCanvasItem doku filtrelemesiÇizime uygun filtreyi gerçek boyutunda karşılaştırın

Godot 4’te 2D doku filtrelemesi, proje varsayılanı da bulunacak şekilde CanvasItem özellikleri üzerinden ayarlanır. Eski bir eğitim sizi artık orada bulunmayan bir içe aktarma ayarına yönlendirebilir. Görsel içe aktarma el kitabı bu değişikliği belgeler. Filtreleme mevcut piksellerin görünümünü değiştirebilir; eksik kaynak ayrıntısını onarmaz.

Godot dışında da görülen bulanıklık için daha kapsamlı pikselli SVG sorun giderme kılavuzunu izleyin. Bu, bozuk kenarın dosya motora ulaşmadan önce var olup olmadığını belirlemenize yardımcı olur.

Simgeyi gerçek arayüzünde değerlendirin

Amaçlanan en küçük ve en büyük simge yerleşimlerini hem açık hem koyu arka planlarda test edin. Eğriyi, en dar boşluğu ve kenar çevresindeki saydamlığı kontrol edin. Çalışan pencereyi yeniden boyutlandırın, kullanıcıya sunulan arayüz ölçek kontrolünü deneyin ve arayüz kullanıyorsa düğüm ölçeği animasyonunu test edin.

Kontrolü hedef platform için alınmış bir derlemede tekrarlayın. Başka bir katkı sağlayan kişinin sonucu yeniden üretebilmesi için seçilen içe aktarma ayarlarını kaynak görselle birlikte saklayın. Bir simge setinde yalnızca en kolay silueti test etmeyin; en yoğun simgeyi ve önemli ayrıntısı en ince olan simgeyi de ekleyin.

Küçük bir SVG kaynak dosyası, daha düşük GPU bellek kullanımının kanıtı değildir. Burada anlatılan iki yöntem de görüntüleme için raster dokular üretir. Seçimi bellek veya kare süresi belirliyorsa içe aktarılan kaynakları ve gerçek sahneyi profilleyin.

PerfectVector ile bu iş akışı nasıl ilerler?

Tek kaynağınız iki boyutlu bir PNG veya JPG görseli ise ve düzenlenebilir SVG şekillerine ihtiyacınız varsa PerfectVector, Godot içe aktarımından önce kullanılabilir. Temsili bir simgeyi PerfectVector görselden vektöre dönüştürücüsüne yükleyin, vektörleştirilen konturu ve iç boşlukları özgün görselle karşılaştırın; ardından Godot içe aktarma türünü seçmeden önce indirdiğiniz SVG’yi inceleyin.

Vektörleştirme sonucunu yalnızca şekil doğruysa kabul edin. İstenmeyen arka plan şeklini kaldırın, amaçlanan bölgelerin düzenlenebilir kaldığını kontrol edin ve küçük açıklıkların temizlikten sonra korunduğunu doğrulayın. Ardından mevcut bir SVG için kullanılan aynı Godot boyut ve aşırı örnekleme kontrollerini yapın.

İstenen sonuç buysa fotoğrafları, yumuşak boyama efektlerini ve bilinçli piksel sanatını raster olarak tutun. Basit bir geometrik simgeyi doğrudan çizmek daha kolay olabilir. Vektörleştirme, kaynak şekilleri yeniden oluşturmak için yararlıdır; Godot’un içe aktarıcısını yapılandırmaz veya son oyunu doğrulamaz.

Sık sorulan sorular

Godot SVG dosyalarını içe aktarabilir mi? Evet. Varsayılan Texture2D içe aktarımı, SVG’yi içe aktarma sırasında rasterleştirir. Mevcut içe aktarıcı, aşırı örneklemeyle yeniden rasterleştirilmesi gereken SVG görselleri için DPITexture da sunar. Projenizin sürümüne uygun belgelere bakın; DPITexture deneysel olarak işaretlenmiştir.

SVG’m Godot’ta neden bulanık? İçe aktarılan sabit raster görüntünün, piksel boyutlarından daha büyük gösterilip gösterilmediğini kontrol edin. Görüntü alanı esnetmesini, filtrelemeyi, düğüm ölçeğine bağlı aşırı örneklemeyi ve gömülü raster içeriği de inceleyin. Kaynağı vektörleştirmeden veya değiştirmeden önce nedeni giderin.

DPITexture sahnede düzenlenebilir SVG yollarını korur mu? Yeniden rasterleştirme için SVG kaynağını korur, ancak bir doku kaynağıdır. İçe aktarılması, sahnede yol düzenleme iş akışı sağlamaz veya oyununuzun ihtiyaç duyduğu çarpışma geometrisini otomatik olarak oluşturmaz.

Kaynaklar

  1. Godot — Importing images — SVG içe aktarma türlerini, metin hazırlığını, çizim motoru sınırlamalarını ve doku filtresi ayarlarını tanımlar.
  2. Godot — DPITexture — Kalıtımı, korunan SVG kaynağını, ölçeklendirmeyi ve deneysel durumunu belgeler.
  3. Godot — Multiple resolutions — Görüntü alanı esnetmesini, görsel aşırı örneklemesini, düğüm ölçeği ayarlarını ve tekrarlanan rasterleştirme maliyetlerini açıklar.
  4. Godot — ResourceImporterTexture — Varsayılan doku içe aktarıcısının raster ölçeği ve boyut sınırı kontrollerini açıklar.
  5. ThorVG — About ThorVG — SVG yorumlayıcısının destek sınırını tanımlar.
  6. MDN — SVG image element — Bir SVG’nin raster çizim içerebilmesini açıklar.

Godot simgenizin kaynağı iki boyutlu bir PNG veya JPG görseliyse ve düzenlenebilir şekillere ihtiyaç duyuyorsa görselinizi PerfectVector ile dönüştürün. Silueti, küçük boşlukları ve istenmeyen arka plan yollarını kontrol edin; ardından SVG’yi projenizin kullandığı görüntüleme boyutları ve ölçeklendirme ayarlarıyla test edin.

Bloga daha fazlası

Düzenlemesi daha kolay,
daha temiz bir SVG ile başlayın