Unity’ye SVG aktarma: UI Toolkit ve sprite hazırlığı

Unity’ye SVG aktarma iki kararla başlar: hangi editör sürümünü kullandığınız ve grafiğin nerede görüneceği. Unity 6.3, UI Toolkit ve Texture2D için SVG içe aktarma özelliği içerir. SVG’yi doğrudan Sprite veya uGUI varlığı olarak içe aktarmak için Vector Graphics paketi kullanılır; daha eski editörlerde paketin eski sürüm serisi kullanılır. Unity bu ayrımı Vector Graphics sürüm kılavuzunda belgeler.

Zaten düzenlenebilir bir SVG’niz varsa dosyayı içe aktarıcı için hazırlayın. Tek kaynağınız PNG veya JPG ise yalnızca vektör şekillere ihtiyaç duyduğunuzda vektörleştirin. Doku veya piksel sanatı sprite’ı raster görüntü olarak kalabilir.

Bütün bir seti işlemeden önce seti temsil eden bir simgeyi test ederek kaynak grafik sorunlarını Unity içe aktarma ve görüntüleme sorunlarından ayırın.

Başka bir motordaki sahne geometrisi için Unreal Engine SVG içe aktarma kontrollerini kullanarak Motion Design kaynak şekillerini, açıklıklarını ve ayrı parçalarını inceleyin.

Grafiği düzenlemeden önce içe aktarma yolunu seçin

Yolu seçmek için hedef bileşeni esas alın. UI Toolkit düzeninde çalışan bir varlık, otomatik olarak Sprite Renderer alanına uygun olmaz.

Tablo, Unity’nin paket gereksinimlerini esas alır. Projenizin kullandığı editör ve paket sürümlerini sabitleyin. Unity 2018 veya 2.0 ön izleme içe aktarıcısı için talimatlar, güncel bir 6.3 projesinden farklı seçenekleri anlatabilir.

Önce hedefi seçin

Grafiğinizin yanında küçük bir içe aktarma testi bulundurun

Bir eğri, bir iç delik ve setin gerektirdiği dolgu veya kontur efektlerini içeren bir simge seçin. Orijinal SVG’yi, yalnızca düz dolgulu şekillerden oluşan basit bir sürümle birlikte saklayın. Basit sürüm doğru içe aktarılıyorsa tüm projeyi değiştirmeden önce karmaşık grafiği araştırın.

İçe aktarıcının yeniden üretebileceği bir SVG hazırlayın

Kaynağı bir vektör düzenleyicide açın ve gerçek nesneleri inceleyin. Orijinal ana dosyayı koruyun, ardından Unity’ye teslim için ayrı bir dışa aktarım oluşturun.

Grafiğin yollar içerdiğini doğrulayın

SVG, bir <image> öğesi aracılığıyla bitmap barındırabilir; yalnızca uzantısı grafiğin vektör geometrisi olduğunu kanıtlamaz. W3C gömülü içerik belirtimi bu ayrımı belgeler. Bir düzenleyicide grafiğin bir parçasını seçin ve nesnelerini veya işaretleme kodunu inceleyin. İçerik tek bir görsel dikdörtgeninden oluşuyorsa gömülü raster görüntü teşhisini kullanın.

Orijinal vektör dosyası varsa yeniden dışa aktarın. Bu ana dosyadan dışa aktarılmış bir PNG’yi vektörleştirmek, yeniden oluşturma işi ekler ve silüeti değiştirebilir. Bir simge ailesi için önce tuval, kenar boşlukları ve görsel ağırlık üzerinde anlaşın; arayüz kiti için SVG hazırlama kılavuzu set genelindeki bu kararları ele alır.

Desteklenmeyen özellikleri bilinçli olarak değiştirin

Unity’nin yerleşik içe aktarıcısı SVG 1.1’in bir bölümünü destekler. Belgelenmiş desteklenmeyen özellikler arasında düzenlenebilir metin, piksel maskeleri, filtreler, etkileşim ve animasyon bulunur. Bu nedenle tarayıcı ön izlemesi doğru görünürken Unity sonucu farklı olabilir. Unity’nin SVG sınırlamalarına bakın.

Teslim kopyasını grafiğin ihtiyaçlarına göre hazırlayın:

• Dekoratif yazıları vektör yollarına dönüştürün. Düzenleme veya yerelleştirme gerektiren arayüz etiketlerini arayüzde metin olarak tutun.
• Gerekli gölgeyi veya parlamayı hedefin desteklediği bir efektle yeniden oluşturun ya da grafiği raster görüntü olarak koruyun.
• Maskeleri kırpma yollarından ayrı inceleyin. Yumuşak bir piksel maskesi ile geometrik kırpma farklı yapılardır.
• SVG içine gömülü animasyona güvenmek yerine animasyonu Unity’de planlayın.

Bir filtre desteklenmiyor diye her renk geçişini düz renge çevirmeyin. Tasarımın gerçekten kullandığı efekti test edin. Karmaşık bir rozet başarısız olursa düz dolgulu bir sürüm dışa aktarın ve efektlerini tek tek geri ekleyin. Böylece görünümü değiştiren özelliği ayırabilirsiniz.

Gereksiz karmaşıklığı kaldırın

Simgenin parçası olmayan başıboş noktaları, gizli kopyaları ve arka plan dikdörtgenlerini silin. Belirgin biçimde pürüzlü bir eğriyi yalnızca kaynakla karşılaştırarak basitleştirin. Dosya kısalsa bile temizleme sırasında kapanan küçük bir delik, başarısız bir düzenlemedir.

Tüm oyun grafikleri için yararlı, evrensel bir hedef düğüm sayısı yoktur. Geometrik bir ok ile elle çizilmiş bir karakter farklı miktarda ayrıntı gerektirir. SVG düğüm temizleme kılavuzu, hangi noktaların şekil bilgisi taşıdığına karar vermenize yardımcı olur.

Unity 6.3 veya sonrasında UI Toolkit’e içe aktarın

Silüetini ve efektlerini önceden değerlendirdiğiniz bir teslim SVG’siyle başlayın.

1. SVG’yi projenin Assets klasörüne ekleyin ve seçin.
2. Inspector’da Generated Asset Type değerini UI Toolkit Vector Image olarak ayarlayın.
3. İçe aktarma ayarlarını uygulayın ve ortaya çıkan vektör görselini amaçlanan UI Toolkit öğesinde kullanın.
4. Gerçek düzeni, amaçlanan en küçük ve en büyük görüntüleme boyutlarında ön izleyin.

Unity, yerleşik varlık seçimini Work with vector graphics belgesinde açıklar. Kullanan bileşen Texture2D gerektiriyorsa onun yerine bu çıktıyı seçin ve oluşan dokuyu amaçlanan boyutunda inceleyin.

UI Toolkit için önerilen temel üçgenleme ayarlarıyla başlayın. Target Resolution ve Zoom Factor, içe aktarıcının amaçlanan görüntüleme koşulları için eğrilerin bölünmesini yapılandırmasını sağlar. Unity, tatmin edici sonuç veren en düşük hedef çözünürlüğün kullanılmasını önerir. Görsel içe aktarma ayarları bu kontrolleri açıklar.

İki değerlendirmeyi ayrı tutun: SVG’nin doğru şekli tanımlayıp tanımlamadığı ve içe aktarılan varlığın bu şekli iyi gösterip göstermediği. Üçgenlemeyi artırmak, kaynak dışa aktarımında kaybolmuş bir deliği geri getiremez.

Sprite Renderer veya uGUI için içe aktarın

Hedef, paketin Sprite veya uGUI desteğine ihtiyaç duyuyorsa Package Manager aracılığıyla uyumlu com.unity.vectorgraphics paketini kurun. Bileşeniniz için karşılık gelen üretilmiş varlığı seçin ve bileşenin onu kabul ettiğini doğrulayın. Paketin güncel belgeleri, bu içe aktarma türlerini yerleşik UI Toolkit yolundan ayırır.

Sprite Renderer için nesneyi prefab’lara kopyalamadan önce sahne boyutunu ve pivot noktasını doğrulayın. uGUI için projenizin kullandığı SVGImage iş akışını doğrulayın. Grafik gerekli boyutlarda zaten doğru görünüyorsa normal raster sprite iş akışı bir alternatif olmaya devam eder.

Eski 2.0 paketi, sahne birimi başına SVG birimlerini, sprite pivot noktalarını ve üçgenleme kontrollerini belgeler. Ayrıca paketin deneysel olduğunu belirtir ve üretimde kullanılmasını önermez. Bu yolu sürdüren ekipler, paketi eklemeden önce 2.0 paket kılavuzunu projelerinin kısıtlarıyla birlikte değerlendirmelidir.

Mevcut bir projeyi yükseltiyorsanız içe aktarma testini bir kopyada veya sürüm kontrolü altındaki bir dalda yapın. Gerçek prefab’larda ve sahnelerde üretilen varlık türlerini ve referansları karşılaştırın. Başarılı bir küçük resim ön izlemesini tek sürüm geçişi testi olarak kullanmayın; eski bir forum gönderisindeki toplu .meta düzenlemesini de ilgili sorunu yeniden üretmeden uygulamayın.

İlk görünür farkın nedenini bulun

Seti temsil eden her varlık için kısa bir test kaydı tutun: kaynak dosyası, editör ve paket sürümleri, hedef bileşen, beklenen görüntüleme boyutu ve ilk görünür uyumsuzluk.

Örneğin bir yıldız rozetinin içe aktarıldığını, ancak ortasındaki deliğin kaybolduğunu düşünün. Önce teslim SVG’sini açın ve deliğin orada bulunduğunu doğrulayın. Varsa Unity’de basitleştirilmiş bir rozet dışa aktarımını karşılaştırın. Delik bu sürümde korunuyorsa orijinal rozetin üst üste binen şekillerini, dolgu yapısını veya maskesini inceleyin. Kaynağı yeniden vektörleştirmek yalnızca yol geometrisinin kendisi yanlışsa yararlıdır.

Kabul edilen varlığı editörün yanı sıra hedef platform derlemesinde de test edin. En küçük boyutta anlaşılır kalıp kalmadığını, renklerin ve saydamlığın eşleşip eşleşmediğini ve yeni bir içe aktarmadan sonra sahne veya prefab referanslarının korunup korunmadığını kaydedin. Performans kararları kendi sahnenizin performans profilini ölçmeyi gerektirir; SVG uzantısı bir performans ölçümü değildir.

PerfectVector ile bu süreç nasıl işler?

Uygun tek kaynağınız raster görüntüyse ve düzenlenebilir şekillere ihtiyaç duyuyorsanız PerfectVector, Unity içe aktarımından önce kullanıma uygundur. Düz renkli bir PNG veya JPG’yi PerfectVector’ın görseli vektöre dönüştürme aracına yükleyin, vektörleştirilmiş silüeti ve delikleri orijinalle karşılaştırın; ardından Unity’ye aktarmadan önce indirdiğiniz SVG’yi bir vektör düzenleyicide inceleyin.

Teslim sürecinin tamamında seti temsil eden aynı simgeyi kullanın. Vektörleştirme sonucunu yalnızca amaçlanan bölgeleri düzenleyebildiğinizde, negatif boşluklar açık kaldığında ve temizleme şekli bozmadığında kabul edin. Ardından yukarıdaki Unity hedef testini uygulayın.

Amaçlanan görünümü koruyorsa fotoğrafı, dokuyu, yumuşak parlamayı veya bilinçli piksel sanatı sprite’ını raster görüntü olarak tutun. Basit bir geometrik simge için elle çizimi kontrol etmek, vektörleştirmeden daha kolay olabilir. PerfectVector, SVG kaynak geometrisini hazırlar; Unity’nin desteklediği özellikleri değiştirmez veya çalışma zamanındaki görüntülemeyi doğrulamaz. Biçimler arasındaki ayrım size yabancıysa bir SVG dosyasının neler içerdiğinden başlayın.

Sık sorulan sorular

Unity 6, Vector Graphics paketine ihtiyaç duyar mı? Yanıt, alt sürüme ve hedefe bağlıdır. Unity 6.3, UI Toolkit ve Texture2D için yerleşik SVG içe aktarma sunar. Sprite ve uGUI içe aktarımları 3.0 ön izleme paketini kullanır. Daha eski Unity sürümleri uyumlu 2.0 ön izleme paketi yolunu kullanır.

Bir PNG’nin uzantısını SVG yapmak vektör sprite oluşturur mu? Hayır. Dosyayı yeniden adlandırmak piksellerini vektörleştirmez. Orijinal vektör kaynağını kullanın, şekilleri çizin veya uygun raster görüntüyü vektörleştirin ve Unity’ye aktarmadan önce oluşan yolları inceleyin.

Vektörleştirme, Unity’nin yanlış içe aktardığı bir SVG’yi düzeltebilir mi? Yalnızca kaynak geometrinin yeniden oluşturulması gerekiyorsa. SVG doğru yollar içeriyor, ancak üretilen varlığın türünün yanlış olması veya desteklenmeyen bir efekt soruna neden oluyorsa önce o içe ya da dışa aktarma kararını düzeltin.

Kaynaklar

1. Unity — Vector Graphics 3.0 package guide — Editör sürümlerine göre ayrımı ve yerleşik içe aktarma ile Sprite/uGUI paket yollarını tanımlar.
2. Unity — Work with vector graphics — Yerleşik varlık seçeneklerini ve desteklenmeyen SVG özelliklerini belgeler.
3. Unity — Image import settings — UI Toolkit vektör görseli ayarlarını ve üçgenleme kontrollerini açıklar.
4. Unity — Vector Graphics 2.0 package manual — Eski içe aktarıcıyı, sahne birimi ve pivot kontrollerini ve deneysel durumunu ele alır.
5. W3C — SVG embedded content — SVG’nin raster görüntü içeriği barındırabileceğini ortaya koyar.

---

Unity varlığınız iki boyutlu bir PNG veya JPG görüntüsü olarak başlıyor ve düzenlenebilir yollara ihtiyaç duyuyorsa görselinizi PerfectVector ile dönüştürün. Silüeti, delikleri ve istenmeyen arka plan şekillerini inceleyin; ardından SVG’yi yayımlamayı planladığınız Unity bileşeninde ve görüntüleme boyutlarında test edin.