Anahat spriteları


9

Şu anda bir 2D oyun üzerinde çalışıyorum ve şu anki görevim seçilen nesneyi özetlemek.

Temelde tamamen çalışma zamanı yapmak için bir bulanıklık gölgelendirici kullanıyorum. İlk önce dikey bir gauss bulanıklığı gölgelendiricisi kullanarak hareketli grafiğimi çiziyorum, sonra yatay bir gauss bulanıklığı gölgelendiricisi ile çiziyorum ve sonra hareketli grafiğimi normal şekilde çiziyorum.

İşte bulanıklık gölgelendiricim: sampler TextureSampler: register (s0);

#define SAMPLE_COUNT 15

float2 SampleOffsets[SAMPLE_COUNT];
float SampleWeights[SAMPLE_COUNT];


float4 PixelShaderFunction(float2 texCoord : TEXCOORD0) : COLOR0
{
    float4 c = 0;

    // Combine a number of weighted image filter taps.
    for (int i = 0; i < SAMPLE_COUNT; i++)
    {
        c += tex2D(TextureSampler, texCoord + SampleOffsets[i]) * SampleWeights[i];
    }

    return c;
}

SampleOffets, yuvarlanan pikselleri test etmeme izin veren ofsetlerdir. SampleWeights, gauss işleviyle hesaplanan ağırlıklardır ( http://en.wikipedia.org/wiki/Gaussian_blur )

İşte sonuç:

resim açıklamasını buraya girin

O kadar kötü değil, oldukça pürüzsüz, ama oyunda yeterli değil ... Ama kalınlığı kontrol edebilmek (büyütmek için) ve alfada solmadan önce ilk opak anahat eklemek istiyorum (yapmak için) daha görünür). Ve gauss bulanıklığının belki de görevim için düşündüğüm kadar iyi olmadığını hissediyorum :)

Başka bir fikir, .png'den otomatik olarak oluşturmaktır (otomatik hale getirmek için bir photoshop komut dosyası kullanarak). Anahat piksellerini özel bir renkle doldurmam gerekiyor, örneğin Alfa bileşeninde alfa değerini saklıyor ve diğer tüm bileşenleri 0 olarak ayarlıyorum. Sonra sadece istediğim renge şeffaf pikselleri değiştiren bir gölgelendirici uygulamak zorundayım

float4 PixelShaderFunction2(float2 texCoord : TEXCOORD0) : COLOR0
{
    float4 color = tex2D(TextureSampler, texCoord);
    float4 newColor = 0;
    if (color.a == 0 && color.r != 0)
    {
        color.a = color.r;
        // Blue outline
        color.b = 1;
    }
}

Sorun şu ki, sprite için DXT5 sıkıştırma kullanıyorum, bu yüzden gölgelendiricimde alacağım rengin yazdığımla aynı olacağından emin olamıyorum. Bu yüzden denemedim bile ... Herhangi bir düşünce?

Herhangi bir tavsiye memnuniyetle karşılanacaktır :)


Gölgelendiricinizdeki kalınlığı ve alfa düşüşünü kontrol edebilmelisiniz. Referans için yayınlamak ister misiniz?
Seth Battin

Bu örnekten Gauss bulanıklığı gölgelendiricisini kullandım: bağlantı , gölgelendiriciyi ayrıntılarıyla göstermek için
yazımı

Gauss bulanıklığının sizin için doğru olduğundan emin değilim. Bunun yerine radyal bulanıklığı deneyin.
user1306322

Yanıtlar:


6

Muhtemelen aradığınız şey , Gauss bulanıklığınızdan önce, sonra, hatta önce ve sonra bir kenar algılama şeklidir . Belki de Sobel Edge Detection'ın bir sürümü işe yarayabilir. Oyununuzun 2D olduğunu biliyorum, ancak wiki sayfası çok kaba ise, daha iyi tercüme edebilecek UDK'da nasıl çalıştıracağına dair bir eğitici .

Kenar algılamanız sadece bir hız artışına ihtiyacınız varsa alfa kanalının kenarlarını bulmak zorundadır.


İlginç! Denedim. Yakınlaştırdığımda / uzaklaştırdığımda sonuç iyiydi ... Pikseller görünüyor ve kayboluyor, bu da istenmeyen yapaylıklara neden oluyor ...
s0ubap

1
Ne tür bir eser görüyorsun? Bir görüntü verebilir misiniz?
Alex Shepard

2

Benim için metin anahatlarıyla işe yarayan şey şuydu:

  • Anahat rengini seçin
  • Anahat rengiyle (x-1, y-1) metnini çizin
  • Anahat rengiyle (x + 1, y-1) metnini çizin
  • Anahat rengiyle (x-1, y + 1) metnini çizin
  • Anahat rengiyle (x + 1, y + 1) metnini çizin
  • Metni (x, y) 'de çizin

Aynı şeyi yapabilirsiniz - tek yapmanız gereken sprite'ı anahat renginizle renkli opak piksellerle çizmektir. (Yuvarlak kenarların hala yuvarlak görünmesi için saydamlık değerlerini koruyun).

Bu çalışır, ölçeklendirilmiş bir sürüm çizmekten daha iyi görünür ve başka bazı harika özelliklere sahiptir (anahat alfa'yı kalınlık için kontrol edebilmek ve hareketli grafiğinizdeki herhangi bir "deliği" tutmak gibi) - tek dezavantajı ' t Ana hatların genişliğini gerçekten çok iyi kontrol ediyor.


1

Tüm bunlar için biraz yeniyim, ama işte benim fikrim:

Başka bir doku oluşturmak için dokularınızın alfa kanalını kullanabilirsiniz. Bir eşik değerinin altındaki herhangi bir alfa değeri tamamen şeffaf olarak ayarlanır. Yukarıdakilerden herhangi biri tamamen opak olacaktır. Bu yeni dokuyu kullanarak RGB değerlerini istediğiniz herhangi bir renk olarak ayarlayabilirsiniz. Bu yeni "doku" yı karakter dokunuzdan biraz daha büyük olacak şekilde ölçeklendirin. Bu size karakterin etrafında hoş bir düz renk verir. Ardından, oluşturduğunuz doku etrafında güzel anahatlı ışıltı vermek için bu rengi Gauss gölgelendiricinizle kullanın. Bunun başka bir doku oluşturmadan yapılabileceğini ve karakter dokusuna dayanan gölgelendirici olabileceğini tahmin ediyorum.

Bu hiç mantıklı mı?


Bu yöntem, içbükey olmayan şekillerle uğraşırken büyük bir kusura sahiptir. Örneğin, bir çöreklere uygulandığında sadece dış kenar bir dış hat elde edecektir. Diğer dış hat kalınlığı bozulmalarından bahsetmiyorum bile.
Kromster
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.