如何避免像素艺术运动中的“楼梯效应”?


21

我在精确的像素坐标处渲染精灵,以避免因抗锯齿而引起的模糊效果(精灵是像素艺术的,如果进行过滤,效果会很糟)。但是,由于对象的移动涉及可变的速度,重力和物理相互作用,因此轨迹以亚像素精度计算。

在足够大的屏幕空间速度(vΔt大于2或3像素)下,此效果很好。但是,当速度较小时,会出现明显的阶梯效应,尤其是沿对角线时。在非常慢的屏幕空间速度(v << 1像素/秒)下,这不再是问题,因此我只在寻找中等速度值的解决方案。

左图是通过简单舍入对象坐标获得的大速度绘制的轨迹。在中间,您可以看到当速度变小时会发生什么,以及我正在谈论的阶梯效应。在右边,我想获得的轨迹轨迹。

物体轨迹的像素坐标

我对算法思想感兴趣,以便对轨迹进行滤波,以最大程度地减少混叠,同时保留大小速度下的原始行为。我可以访问Δt,即时位置和速度以及任意数量的先前值,但是由于它是实时模拟,所以我不知道将来的值(尽管如有必要,可以在某些假设下推断出估算值) 。请注意,由于物理模拟的缘故,方向突然改变也会发生。

Answers:


18

这是我想起的一个快速概述,该概述应该可以很好地发挥作用。

  1. 首先,计算对象的移动方向,然后检查它是否更接近水平或垂直方向。
  2. 如果方向更接近垂直(水平),请沿着方向矢量将对象的位置调整到最近的像素行(列)的中心。
  3. 将位置四舍五入到最近像素的中心。

用伪代码:

if ( abs(velocity.x) > abs(velocity.y) ) {
    x = round(position.x);
    y = round(position.y + (x - position.x) * velocity.y / velocity.x);
} else {
    y = round(position.y);
    x = round(position.x + (y - position.y) * velocity.x / velocity.y);
}

编辑:是的,经过测试,效果很好。


+1,效果惊人!我注意到缓慢的圆周运动会产生怪异的向后跳跃,因为可以在与速度矢量相反的方向上进行调整(通常可以,但轨迹曲率不大)。这可以通过乘以velocity.y / velocity.x与速度成比例的校正系数来解决。
sam hocevar 2011年

@Sam:您的意思是小转弯半径(=高曲率),对吗?实际上,这可能会导致在低速下进行线性外推的问题。(基本上,只要每个加速度的速度平方远大于1个像素,它就起作用。)一种可能的解决方法是记住最后一个舍入的位置,如果它比新计算的位置更接近真实位置,则重新使用它。(也可以尝试使用高阶外推法,但是公式变得非常难看。)
Ilmari Karonen

确实,我的意思是小半径。我的错。并感谢您的其他提示;那里的性能并不重要,因此我有能力提高质量。
sam hocevar

3

对于一般的基于物理的世界,您实际上无能为力。如果所有对象都沿着直线或特定的圆运动,则可以执行某些操作。但是,您是在实际物理学下工​​作的。物体是物理放置的地方。您只是在绘制该位置的基于像素的近似值。

如果要坚持使用像素坐标,通常必须接受。除非您以令人难以置信的小分辨率(小于640x480,但取决于显示器的原始分辨率和大小)显示,否则它应该不会太引人注目。


即使在高分辨率下,渲染图也会放大(最近的邻居)以增强老式的外观。这是艺术指导。
sam hocevar 2011年

@SamHocevar:如果您想要“老式外观”,为什么不想要完整的 “老式外观”?为什么任何“老式”游戏都会采用阶梯式运动,而不是您想要实现的整体效果的一部分?
Nicol Bolas

我认为任何像样的老式游戏都不会实现具有阶梯效果的对角线运动,因为它看起来像胡扯。我希望达到的效果不是看起来像胡扯一样,这是oldschool效果的主要部分:-)
sam hocevar 2011年

@SamHocevar:大多数老式游戏都是动作游戏,因此动作缓慢得不足以引起注意。它们也倾向于不沿着曲线移动。我特别想到的游戏是Solar Jetman,它在缓慢移动时非常具有这种效果。诚然,相机始终以您为中心,因此您会在世界运动中注意到它,但实际上它就在那里。
Nicol Bolas

3

当待处理的运动垂直于最后一个运动(在屏幕空间中)时,请忽略它并使用最后一个屏幕坐标。如果那样导致的断断续续与楼梯一样糟糕,则可以尝试移动未决和最后一次移动的总和。

我认为问题出在v <sqrt(2)。v> sqrt(2)应该始终至少移动一个完整的对角线,以避免阶梯效应。可能对需要事先进行运动比较的修剪有用。


+1可以指出v。Ilmari的建议上限,但您会提供有用的信息。
sam hocevar 2011年
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.