像素画横版游戏场景设计｜视差滚动全攻略

像素画横版游戏场景设计｜视差滚动全攻略

大家好，我是像素熊老师！

今天来分享一篇超酷的像素画动画教程～我们要学习的是视差滚动技术，让静态的场景变成有深度感的无尽景观！

什么是视差滚动？

视差滚动是一种2D艺术技术，通过让背景图像比前景图像移动得更慢，来营造深度感。

仅仅通过添加运动，场景就能让你沉浸在一个无尽的景观中，讲述宏大的故事。

视差滚动效果展示

选择合适的场景

首先要考虑的是你想动画化的场景。

视差滚动非常适合具有大气透视效果的分层场景，比如风景画面。

视差会增强深度感，但如果你的场景在静态时就不具备深度感，那动画可能也不会有很好的效果。

视差场景参考

建议从简单的云朵或星星开始，练习动画的执行，再尝试复杂的风景。

由于你需要非常长或高的图像来在画布上移动，最好制作能在画布边缘无缝循环的图像。

小贴士：平衡的图层（没有主导的视觉焦点）有助于隐藏循环的重复感。

像素级完美移动

像素级完美移动指的是只以像素单位为增量进行移动。像素艺术以1倍分辨率创建（一个像素单位等于屏幕上的一个像素），通常以相同比例动画。

由于移动严格绑定到整个像素增量，画布的像素尺寸变得至关重要。

为了移动平滑稳定，滚动速率应该每帧移动相同的像素数。要做到这一点，每帧移动的像素数必须能被画布沿运动方向的尺寸整除，所以选择一个能被多个整数整除的偶数值。

像素级完美移动示例

例子中的画布是96像素宽，可以被1,2,3,4,6,8,12,16,24,32,48整除。

这是一个很好的尺寸，因为它提供了很多完美滚动速率的选项。

速度建议：我一般从最远的背景层开始，每帧滚动1像素，每靠近观众一层就使用下一个更快的完美速率。

如果想要比1像素/帧更慢，可以用1像素/2帧，但这需要图像在同一屏幕上重复两次。

Photoshop制作流程

现在我来介绍在Photoshop中使用帧动画工具制作视差场景的流程。

使用Aseprite也是可以的。核心在于分层和错位移动+水平方向无缝循环。

第一步：建立画布和图层

首先选择画布尺寸（96x56像素），然后用多个图层创建场景。

建立画布和图层

多图层场景

第二步：扩展画布

确定最终图像尺寸后，我喜欢把画布宽度扩展一个大的偶数像素值，以便有足够的空间工作。图像-画布尺寸（⌥⌘C），锚点保持居中。

扩展画布以便工作

现在我可以确保图像连接顺畅，并查看它们重复时的效果。

检查图像重复效果

第三步：制作参考线

对构图满意后，我在新图层上制作一个测量屏幕宽度的参考线。标记能被最终图像宽度（96像素）整除的增量。参考线做得足够长，以容纳移动最快的图层。

制作参考线

使用参考线，我按屏幕宽度循环每个图层。重复屏幕宽度的数量将等于动画时每帧移动的像素数。

第四步：设置时间轴

打开时间轴

扩展完所有图层后，我打开时间轴来制作动画（窗口-时间轴），然后点击左下角转换为帧动画。

第五步：设置帧延迟

设置帧延迟

在创建更多帧之前设置帧延迟。帧延迟决定动画的播放速度。点击"其他..."可以设置自定义延迟以获得更快的播放速度。这个例子中我设置为0.08秒。

第六步：添加帧

添加新帧

我在时间轴中添加一个新帧，这会创建前一帧的副本。

第七步：设置终点位置

第1帧看起来和之前一样。在第2帧中，我把每个图层向左滑动，滑动距离等于它重复的屏幕宽度数，一直到静态背景的最右边缘。

设置动画终点

设置好动画的起点和终点后，我可以关闭参考线图层。

第八步：使用补间功能

使用补间命令

接下来，我选择两个帧并点击补间命令。

补间设置

补间命令在两个现有帧之间添加帧，并插入位置、不透明度和图层效果的任何变化。在这种情况下，它会自动计算我的图层在第1帧和第2帧之间的移动。

重要公式：总帧数 = 最终画布宽度。由于第2帧中的居中图像与第1帧相同，这个图层在补间后会被删除。因此，添加的帧数 = 最终画布宽度 - 1。这个例子中，我添加95帧。

第九步：删除多余帧

删除多余帧

这会在结尾产生1个额外的帧，需要删除以创建无缝循环。

第十步：调整画布大小

调整回最终画布大小

补间完运动后，我把画布尺寸调整回最终期望的宽度96像素。调整画布到更小尺寸会隐藏屏幕外的数据，所以我可以随时回到宽画布，所有内容都还在那里。

完成的基础动画

砰！每个图层的移动在每一帧都是一致的，循环是完美的。

添加动态元素

添加汽车动画

完成视差背景动画后，我可以回去添加细节，比如一个与相机一起移动的有趣主体。为了保持完整动画的完美循环，任何添加到视差中的恒定循环动画必须在一个能被总帧数整除的帧数内循环。

这个例子中，我添加了一辆在4帧循环中动画的汽车。为了添加汽车，我在单独的图层上创建动画的每个状态。然后我必须遍历所有1到96帧，循环可见图层来制作动画。

汽车动画图层

导出GIF

要将动画保存为GIF，我使用"存储为Web所用格式"（文件-导出-存储为Web所用格式 ⌥⌘⇧S）。这会带来一个有多个选项的面板。在右上角，我在第二个下拉菜单中将文件类型设置为GIF。

对于像素艺术，尺寸应该只按100%的倍数缩放，质量设置为"最近邻"。还要确保循环选项设置为"永远"，让GIF无限循环。

最终视差滚动效果

让我们永远在路上旅行吧。感受视差拉你进入的感觉。

核心要点

• 视差滚动非常适合具有大气透视效果的分层场景，如风景
• 屏幕宽度 = 循环总帧数- 选择能被多个整数整除的偶数值
• 让图像在画布边缘循环，这样你可以重复图像来扩展它
• 图像重复次数 = 每帧移动的像素数（滚动速率）
• 平衡的图层（没有主导的视觉焦点）有助于隐藏重复图像
• 任何添加到视差中的恒定循环动画必须在一个能被总帧数整除的帧数内循环
• 使用能补间起点和终点之间运动的软件来制作动画
• 如果操作正确，每个图层的滚动速率在每一帧都应该相同，动画应该无缝循环

把静态场景变成无尽空间的感觉就像魔法一样。我在像素画旅程的早期就开始使用这种技术，但随着时间的推移，我的熟练程度和执行能力都有了很大提高。所以我认为即使是初学者也可以尝试这个教程，通过实践来学习。

实际上，动画本身是小菜一碟。制作具有深度和平衡的优质艺术才是创建吸引人的循环的主要挑战。好好规划，不要急于完成艺术。然而，在花费太多时间在艺术上之前，最好先进行运动测试，特别是如果你对像素移动速度没有很好的感觉时。

参考资料

https://www.slynyrd.com/blog/2019/11/12/pixelblog-23-parallax-scrolling: https://www.slynyrd.com/blog/2019/11/12/pixelblog-23-parallax-scrolling