街头斗士2中视差效果的行滚动

在上一篇文章中，我们研究了什么是地图以及如何在SF2中使用地图，并在最后提到了如何以不同的数量移动多层(或滚动)地图来实现视差滚动，从而创造出深度的错觉。

不过，这实际上只适用于直立的图元。我们没有办法将这种效果用于地板和天花板等水平表面-我们要么需要使用更多我们没有的层，要么需要大量的瓷砖来表示不同的透视角度，这是我们不愿使用的。

对于地板和天花板等水平表面，SF2使用另一种称为行滚动的技术(也称为。行滚动)。

我们在上一篇文章中看到，CPS1有三层可以独立滚动的平铺地图：滚动1到3。其中一层是特殊的，除了整个层本身之外，还允许水平滚动每一行像素。我们可以在这里的地板上看到这个效果：

这一层是卷轴2。在SF2中，我们可以认为这是“主”卷轴。其他两个卷轴和精灵总是相对于这个主卷轴的位置和那些卷轴的Z深度放置在某个位置。

我们可以把战斗机脚下的一条假想线想象成Z深度为零。战斗机前面的少量地面具有负Z深度，背景元素具有一些正Z深度。

当相机水平移动时，Z深度为负的元素的移动比Z=0的元素移动的多，而Z=0的元素的移动又比深度为正的元素移动的多。非常远的元素(在摄影和建模中我们称之为“无穷远”)根本不会移动。

这与我们与现实世界的体验相吻合，例如，乘坐火车，向窗外望去一座遥远的山。在一分钟的时间里，山似乎一动不动，更近的特征出现了，跨过了我们的视线，从视线中消失了，而铁路走廊边上的栅栏呼啸而过，唯一让我们真正感受到火车速度的物体。

让我们来看看E Honda的舞台，因为它是最有趣的。所有的SF2赛段都有一个视差滚动的地板，只有少数几个也有天花板，但E Honda的舞台中央也有一个很好的浴缸。让我们看看这个舞台是如何分层的：

我们有带有浴缸正面的Scroll1，包含地板、天花板和浴缸顶面的Scroll2，以及带有背景的Scroll3。

这三个层与精灵结合在一起创建了如下所示的完整图像。Ken和Ryu的精灵锚定在Scroll 2上，浴缸滴水和一个小浴缸锚定在Scroll 1上，Scroll 1包含了浴缸的前表面。

请注意，虽然滚动1绘制在其他层的顶部，但它包含的对象显示在地板和浴缸顶部之间。这是可行的，因为Scroll 1移动起来就像它位于那里一样。这里的关键是图层的优先级(在哪些图层上绘制)和图层的位移是两个不同的东西。

还要注意的是，卷轴不一定要分层1在顶部和3在底部，它只是碰巧是这样的E本田的舞台。龙的舞台用卷轴1来画天空，把它放在所有其他的下面。天空中的云彩独立于我们在舞台上的移动而飞过-视差不是用来做所有事情的。

Scroll 2中的连续行根据它们所属的两个曲面被分组在一起，并且该组中的每一行都被位移一定的量以创建剪切变换。我在楼层周围画了一个矩形，这样就可以很容易地看到它的效果：

在舞台中央，水平偏移为零，并且平铺被原封不动地绘制。当我们离开舞台中心时，矩形会变得越来越倾斜，整个图层也会滚动，给人一种平面水平面的感觉，就像我们在看3D场景一样。

为什么不能把浴缸的前面放在卷轴2里？因为它上面有16行楼层像素。如果浴缸在同一层，它就会和地砖一起被剪掉，这样看起来就不对了。你可以看到被剪掉的地板排在浴缸后面消失了：

同样的效果也用于天花板和浴缸顶部。最远的背景层Scroll3没有什么特别的事情发生，直到这一轮结束，人类举起了他的牌子。(我过去认为这是一种糖果广告，但原来汉字说的是“完整的圆”)。

这是CPS1如何使用行滚动以及分层平铺地图来创建视差效果的可视概述。在下一篇文章中，我们将深入了解实现这一切的代码。