SVG sanatını doğrudan XNA'da oluşturma


36

Diyelim ki SVG gibi bir dizi vektörel biçimde 2D sanatım var. Tam bir SVG oluşturucuyu kendim uygulamak zorunda kalmadan bunu doğrudan yapmanın kolay bir yolu var mı?

Elbette farklı çözünürlükler / yakınlaştırma seviyeleri için çevrimdışı (örneğin, içerik satırında) rasterleştirebilirdim, ancak net grafikleri, vektör grafiklerinin sunduğu sürekli yakınlaştırma seviyelerinde tutmak istiyorum.

Yanıtlar:


24

Güzel bir soru. Bunu bir noktada deniyordum - kolay, önceden oluşturulmuş bir çözüm bulamadım. Ancak, onu kendim uygulamaya çalışırken bulduğum kaynakların bir kısmını size göstereyim:


Her şeyden önce GPU Gems 3'ten bir makale var: Vector Art'ı GPU'da Rendering (ve ilişkili Loop-Blinn kağıdı ).

En zor kısım, ikinci dereceden eğrilerin çizilmesi kolay olsa da, kübik eğrilerin (tipik SVG'nizde bulunanlar gibi) oldukça zor olmasıdır. Makale bununla ilgili ayrıntılı bilgi veriyor, ancak matematik şapkanızı getirmeniz gerekecek.

Kübik eğrileri oluşturmanın alternatifi, kübik eğrileri ikinci dereceli olanlara dönüştürmektir. Ayrıca önemsiz bir problem.

GPU'da vektör eğrileri oluşturabildiğiniz zaman, SVG'yi içerik hattınıza ayırmak ve oluşturabileceğiniz bir ağa dönüştürmek basit bir meseledir. Bu arada, SVG'nin ayrıştırılması kolaydır .

Potansiyel olarak daha kolay olan bir başka alternatif, eğrileri hep birlikte bırakmak ve SVG'nizin doğrusal bir yaklaşımını üçgenleştirmek.

Her iki çözüm de üçgenleme gerektiriyor - işte XNA için uygun olan makul bir üçgenleme .


Tamamen farklı bir alternatif olarak, neredeyse vektör benzeri keskin kenarlara sahip sprite oluşturmak için bir "mesafe alanı" kullanabilirsiniz.

SIGGRAPH 2007'den Valve'ın bunun nasıl yapılacağına dair bir makale: Vektör Dokular ve Özel Efektler için Geliştirilmiş Alfa Testi Geliştirilmiş (PDF)

Buradaki temel metodun uygulanması çok kolaydır. Keskin köşeleri (yalnızca kağıtta dokunulmuş bir şey) desteklemeye çalışırken zorluk gelir. Bu yöntem aynı zamanda basit şekiller çizmekten başka bir şey için oldukça ciddi sınırlamalara sahiptir. En iyi UI metni ve etiketlerine uygundur (Valve'ın kullandığı gibi).


Şimdi tüm bunları söyledim - şunu söylemeliyim ki, deneyimime göre, buradaki tüm çaba buna değmez!

Senin sürece oyun öncelikle etrafında dayalı olacak aşırı derece soğutmak gibi vektör yakınlaştırma efektleri Masagin demo, size SVG önceden oluşturma ve basit kullanarak bitmap teknikleri (kolay, daha iyi desteklenen, vs) ile alabilirsiniz.

(Akla gelen ilk tekniklerden biri, maksimum sprite boyutunuza kadar çözünürlük bağımsızlığı sağlamak için , sprite'larınızın yüksek çözünürlüklü versiyonlarını karıştırmaktır ( wiki ).)

Bu blog yazısı , XNA içerik hattınıza SVG oluşturma desteği eklemeye başlamak için muhtemelen iyi bir yerdir.


Mükemmel cevap, teşekkür ederim! Bu kendimi asmak için fazlasıyla yeterli bir ip. Sonunda, bitmap yoluna gitmek için muhtemelen tavsiyenizi alıyorum. Bu arada, yapacak bazı okumalarım var! : P
drxzcl

Bu cevap hala doğru mu?
lochok

@lochok Evet. Cevabımda aniden çalışmayı durduracak hiçbir şey yok. Gelecekte vektör yapmanın daha iyi bir yolu olabilir - ancak, yazarken, yeni bir şey duymadım.
Andrew Russell,

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.