c# - 缓慢移动 Sprite 时获得 "giggly"效果

标签 c# unity3d sprite

当缓慢移动 Sprite 时,如何消除这种“咯咯笑”的效果?

我尝试在 Unity 编辑器中调整 QualitySettings 中的抗锯齿值和 ImportSettings 中的过滤模式,但这并没有改变任何东西。

enter image description here

理想情况下,我想将过滤模式保持为点(无过滤器)并将抗锯齿打开为 2x

enter image description here

Sprite 位于游戏对象的 Sprite 渲染器组件内。

我已经在这里上传了我的 Unity 项目:http://www.filedropper.com/sprite

我真的不知道如何解决这个问题...任何人都可以帮助我的个人项目吗?

最佳答案

我制作了一个快速动画来演示这里发生的事情:

Animation demonstrating source of ripple

网格代表显示器的输出像素。如果我们可以用无限的亚像素分辨率渲染它,我已经在它上面覆盖了我们想要采样的滑动 Sprite 。

每个网格单元中心的点代表它们的采样点。因为我们使用的是 Nearest-Nieghbour/Point 过滤,所以这是他们关注的唯一纹理点。当新颜色的边缘越过该采样点时,整个像素立即改变颜色。

源纹素网格与我们的输出像素不对齐时,问题就出现了。在上面的示例中, Sprite 是 16x16 纹素,但我已将其缩放为在显示器上占据 17x17 像素。这意味着,在每一帧的某个地方,一些纹素必须重复。当我们四处移动 Sprite 时,发生这种情况的地方会发生变化。

因为每个纹素被渲染得比一个像素略大,所以有时它会完全桥接两个相邻像素的采样点。两个采样点落在同一个放大的纹素内,因此两个像素都将该纹素视为最近的采样点,并且纹素在两个位置输出到屏幕。

在这种情况下,由于只有 1/16 的比例差异,每个纹素只在这种奇怪的情况下出现一两帧,然后它转移到它的邻居,产生双倍像素的涟漪,似乎在滑过图片。

(One could view this as a type of moiré pattern 纹素网格和采样网格不相似时相互作用的结果)

解决方法是确保缩放像素图,使每个纹素以像素的整数倍大小显示

或者 1:1

Animation showing ripple-free rendering at 1:1 scale

或 2:1、3:1...

Animation showing ripple-free rendering at 3:1 scale

使用更高的倍数可以让 sprite 以比其自身纹素尺寸更短的增量移动,而不会影响艺术的预期外观的局部拉伸(stretch)。

因此:请密切注意输出的分辨率和应用于资源的缩放比例,以确保它们之间保持整数倍关系。 CAD97 链接的博客文章提供了实现此目标的实用步骤。

编辑:为了在您上传的 Unity 项目中演示这一点,我修改了相机设置以匹配您的像素与单位设置,并安排了以下测试。顶部的 Mario 具有略微非整数的纹理像素与像素比 (1.01:1),而底部的 Mario 具有 1:1。您只能看到顶级马里奥展示的涟漪文物:

Two Marios, one exhibiting artifacts

关于c# - 缓慢移动 Sprite 时获得 "giggly"效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35785291/

相关文章:

c++ - 在 xcode 的调试器中查看 IL2CPP 的 string_t 的内容

css - IE11 使背景图像文本模糊

html - 如何使 CSS Sprites 垂直对齐移动设备

html - 使用罗盘的 Sprite 间距不起作用?

c# - 如何从数据库设置日历控件的日期?

c# - 如何验证是否已在模拟 DbContext 上调用了 RemoveRange?

c# - 检查对象是否处于事件状态.Unity

c# - 在扩展方法中更改数组大小不起作用?

c# - 正则表达式匹配带有+(加号)的单词

c# - 使用正在使用的快捷方式 (%PROGRAMFILES%) 启动应用程序