轮廓精灵


9

我目前正在开发2D游戏,目前的任务是勾勒出选定的对象。

我基本上使用模糊着色器来完全运行它。我首先使用垂直高斯模糊着色器绘制精灵,然后使用水平高斯模糊着色器绘制精灵,然后正常绘制我的精灵。

这是我的模糊着色器: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是允许我测试舍入像素的偏移量SampleWeights是使用高斯函数计算的权重(http://en.wikipedia.org/wiki/Gaussian_blur

结果如下:

在此处输入图片说明

并没有那么糟糕,还算平滑,但是在游戏中还没有足够的可见性……但是我希望能够控制厚度(使其变大),并在将其渐变为alpha之前添加第一个不透明的轮廓(以使它更明显)。而且我觉得高斯模糊可能不如我想的那样好:)

另一个想法是从.png自动生成它(使用photoshop脚本使其自动生成)。我只需要用自定义颜色填充轮廓像素,例如将alpha值存储在Red组件中,然后将所有其他组件设置为0。那么我只需要应用一个着色器即可将透明像素替换为我想要的颜色

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;
    }
}

问题是,我为精灵使用了DXT5压缩,因此我无法确定要在着色器中获得的颜色是否与我编写的颜色完全相同。这就是为什么我什至没有尝试...有什么想法吗?

任何的建议都受欢迎 :)


您应该能够控制着色器的厚度和Alpha衰减。愿意发布以供参考吗?
塞斯·巴丁

我使用了该示例中的高斯模糊着色器:链接让我编辑我的文章以向您详细显示着色器
s0ubap 2013年

我不确定高斯模糊是否适合您。请尝试一些径向模糊处理。
user1306322

Answers:


6

您可能正在寻找的是一种在高斯模糊之前,之后,甚至之前和之后的边缘检测形式。也许某个版本的Sobel Edge Detection可以工作。我知道您的游戏是2D的,但是如果Wiki页面太粗糙了,这是一个有关如何使其在UDK中工作的教程,可能会更好地进行翻译。

如果需要提高速度,则边缘检测实际上仅需要找到alpha通道的边缘。


有趣!我尝试过这个。结果很好,除了当我放大/缩小时...像素出现和消失,导致不必要的伪影...
s0ubap

1
您看到什么样的文物?你能提供图片吗?
Alex Shepard

2

文本概述对我有用的是:

  • 选择轮廓颜色
  • 用轮廓颜色在(x-1,y-1)处绘制文本
  • 用轮廓颜色在(x + 1,y-1)处绘制文本
  • 用轮廓颜色在(x-1,y + 1)处绘制文本
  • 用轮廓颜色在(x + 1,y + 1)处绘制文本
  • 在(x,y)处绘制文本

您可以做同样的事情-您所要做的就是用轮廓颜色为不透明像素绘制精灵。(保持透明度值,以使圆形边缘仍然看起来是圆形的)。

这种方法的工作原理比绘制缩放版本更好,并且还具有其他一些很酷的属性(例如,能够控制轮廓alpha的粗体性,并在sprite图像中保留“空洞”),唯一的缺点是您不能不能很好地控制轮廓的宽度。


1

我对所有这些都是新手,但这是我的主意:

您可以使用纹理的Alpha通道制作另一个纹理。任何低于阈值的alpha值都将设置为完全透明。以上任何内容都是完全不透明的。使用此新纹理,可以将RGB的值设置为所需的任何颜色。将这个新的“纹理”缩放为略大于您的角色纹理。这将为您在角色周围提供漂亮的纯色。然后,将该颜色与高斯着色器一起使用,以在创建的纹理周围提供漂亮的轮廓光。我猜想这可以在不创建另一个纹理的情​​况下完成,并且全部是基于角色纹理的着色器。

这有道理吗?


当处理非凹面形状时,此方法存在主要缺陷。例如,当应用于甜甜圈时,只有外边缘会具有轮廓。更不用说其他轮廓厚度变形。
2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.