如何为保持像素保真度的转换2D精灵创建“复古”像素着色器?


10

下图显示了在背景上方通过点采样渲染的两个精灵:

在此处输入图片说明

  • 左头骨没有应用旋转/缩放,因此每个像素都与背景完美匹配。
  • 右头骨旋转/缩放,这将导致不再与轴对齐的较大像素

我如何开发一个像素着色器,该着色器将在右侧以与场景其余部分相同大小的轴对齐像素来渲染转换后的精灵?

这可能与在“猴子岛”(Monkey Island)等旧游戏中如何实现精灵缩放有关,因为这是我试图实现的效果,但增加了旋转功能。


编辑

根据kaoD的建议,我试图通过后期处理解决该问题。最简单的方法是先渲染到一个单独的渲染目标(下采样以匹配所需的像素大小),然后在第二次渲染时将其放大。它确实满足了我上面的要求。

首先,我尝试这样做,Linear -> Point结果是这样的:

在此处输入图片说明

没有失真,但结果看起来很模糊,并且丢失了大多数高光颜色。在我看来,它打破了我需要的复古外观。

我第二次尝试Point -> Point,结果是这样的:

在此处输入图片说明

尽管存在失真,但我认为这可能足以满足我的需求,尽管它看起来比静止图像确实好看。

为了演示,这是该效果的视频,尽管YouTube过滤掉了其中的像素:

http://youtu.be/hqokk58KFmI

但是,如果有人想出一个更好的采样解决方案,该解决方案可以保持清晰的外观,同时减少移动时的失真量,那么我将继续待几天。


那应该是头骨...?
DeadMG

@DeadMG我猜是牛头骨吗?
David Gouveia

效果不错,看起来比我想像的要好(我在EXTREMELY低分辨率和调色板,40x30 EGA上进行了尝试。)这几乎是您制作自己的postfx着色器的外观。顺便说一句,我怀疑是否有更好的采样解决方案可以保持您想要的效果。NN几乎可以带来清晰的外观,任何其他采样都会使最终图像模糊(反正只是猜测。)
kaoD 2012年

@kaoD但是请记住,我要申请两次通行证。对图像进行高采样的第二遍仍将是最近的邻居,以保留复古感。但是,我认为为第一遍尝试不同的采样技术可能会有一些好处。我目前正在研究Scale2x!
David Gouveia'4

@kaoD不,我放弃。在每个sprite调用之间更改着色器参数都SpriteBatch要求我使用即时模式,因此这是不值得的。我会讲的:)
David Gouveia'4

Answers:


3

您应该在旋转精灵之后应用着色器。

如果尚未对整个场景进行着色,并且您的精灵实际上已被像素化,则您需要的是用于整个场景的某种FX后滤镜。平均像素区域可以正常工作。这并不是您想要的(移动/旋转时看起来有点抖动),但可以达到目的。

保持复古外观真实逼真的唯一方法是亲自绘制精灵旋转。它与缩放的实现方式无关:分辨率实际上很差,就此而言,您是否尝试了极低的分辨率?它可能也可以解决问题,并且看起来会更自然,因为好吧,这实际上是导致您要照看的效果的原因。而且便宜!非常便宜!实际上,它将比您已经拥有的便宜(减少片段着色器的执行)。

由于与子画面相比分辨率较高,因此样本图像中的效果被破坏了,因此可以查看场景中的真实像素。


是的,我还没有使用任何着色器。它只是具有非常低分辨率纹理的常规子图形,使用XNA的默认设置SpriteBatch(启用点采样)渲染。但是后FX可能真的可行。首先,我将尝试使用线性采样将渲染渲染到渲染目标,然后使用点采样将整个渲染目标渲染到后缓冲区。
David Gouveia

@DavidGouveia不要错过降低您的分辨率的机会。如果您真的想达到原始效果,那是最好的选择。如果您需要高分辨率(如果您的GFX的一部分是高分辨率的,或者您想匹配本机分辨率),则仍然可以渲染到低分辨率的屏幕外缓冲区,然后将其绘制在高分辨率帧缓冲区中作为完整的屏幕四边形,过滤功能已关闭。请记住,您当然需要匹配长宽比以避免矩形像素。
kaoD 2012年

检查我的编辑:)我认为它解决了大多数问题,尽管我仍然很好奇是否存在比该问题最接近的采样解决方案。我让这个问题持续一段时间。
David Gouveia
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.