大纲小精灵

我目前正在做2D游戏,目前我的任务是勾画选定的对象。

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

这是我的模糊着色器:采样器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是允许我testing四舍五入像素的偏移量。SampleWeights是用高斯函数( http://en.wikipedia.org/wiki/Gaussian_blur )

结果如下:

在这里输入图像描述

这并不是那么糟糕,很平滑,但在游戏中还不够明显…但是我希望能够控制厚度(使其变大),并在第一个不透明的轮廓之前添加一个alpha(使它更可见)。 而我觉得像高斯模糊可能不如我想我的任务:)

另一个想法是从.png自动生成(使用Photoshop脚本使其自动)。 我只需要用自定义颜色填充轮廓像素,例如将红色分量中的alpha值存储起来,然后将所有其他分量设置为0.然后,我只需要应用一个着色器,它将透明像素replace为我想要的颜色

 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压缩,所以我不能确定我在着色器中获得的颜色与我写的完全相同。 这就是为什么我甚至没有尝试…任何想法?

任何的建议都受欢迎 :)

你可能正在寻找的是在高斯模糊之前,之后甚至之前和之后的一种边缘检测 。 也许Sobel边缘检测版本可以工作。 我知道你的游戏是2D的,但如果维基页面太粗糙,那么这里有一个关于如何在UDK中工作的教程,可能会翻译得更好。

如果您需要提高速度,您的边缘检测只能真正findalpha通道的边缘。

对于我来说,文字大纲的作用是:

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

你可以做同样的事情 – 你需要做的就是绘制带有轮廓颜色的不透明像素的精灵。 (保持透明度值,以便圆边看起来圆整)。

这个工作,看起来比绘制缩放版本更好,还有其他一些很酷的属性(比如能够控制大胆的阿尔法,以及保留你的精灵图像中的任何“洞”) – 唯一的缺点是你可以“太好控制轮廓的宽度了。

我对这一切都很陌生,但这是我的想法:

你可以使用你的纹理的alpha通道做出另一个纹理。 任何低于阈值的alpha值将被设置为完全透明。 以上任何将是完全不透明的。 使用这个新的纹理,你可以设置RGB的值是任何你想要的颜色。 将这个新的“纹理”缩放比您的角色纹理稍大。 这会让你在角色周围有一个很好的纯色。 然后用你的高斯着色器的颜色给你创建的纹理周围的漂亮的轮廓。 我猜这可以做到不创建另一个纹理,并且是基于字符纹理的所有着色器。

这是否有意义呢?