Scratch滚动背景制作：从原理到实践，实现无限场景效果

1. 先搞清楚“滚动背景”到底要解决什么问题在 Scratch 里做游戏或者动画想让角色往前走背景也跟着动起来营造出一种“无限延伸”的感觉这就是滚动背景。很多新手会卡在“怎么让背景动”这一步要么背景不动要么动一下就没了要么角色和背景的移动速度对不上。这个技巧的核心不是画一张超长的背景图而是用两张或多张相同的背景图通过循环移动和“无缝衔接”的视觉技巧模拟出无限滚动的效果。它解决的是在有限画布内创造无限场景的视觉问题。适合所有想在 Scratch 里做横版跑酷、赛车、飞行射击或者任何需要角色移动场景游戏的初学者。最关键的能力是理解“克隆体”和“坐标”的配合。你不用去学复杂的编程概念只要跟着下面的步骤把两张图的位置关系理清楚一分钟内绝对能让背景动起来。2. 准备工作你的舞台和角色应该是什么状态在动手写代码之前先把舞台和角色摆对位置后面写逻辑才不会乱。很多人第一步就错了导致代码越写越复杂。2.1 舞台设置与背景图准备首先打开 Scratch默认的舞台大小是 480x360。对于滚动背景我建议你先不要改这个尺寸就用默认的这样坐标计算最直观。接下来是背景图。你需要准备两张一模一样的背景图片。比如你想做一个在云中飞行的游戏就画一张有云的背景图。重点来了这张图的宽度最好就是舞台的宽度480像素。高度可以随意但通常和舞台高度一致360像素看起来最协调。为什么宽度要等于舞台宽度因为这样计算起来最简单。一张图刚好填满屏幕另一张图紧挨着它右边放滚动起来就是完美的无缝衔接。如果你用一张很宽的图反而要计算偏移量容易出错。准备好图后在 Scratch 的“背景”区上传这张图。你会看到背景列表里只有一张图。没关系我们不需要在背景列表里上传两张代码逻辑会处理。2.2 角色与背景的从属关系这是最容易混淆的一点滚动背景的逻辑是写在“角色”里的而不是写在“背景”标签页里。你需要新建一个角色。这个角色不是你的小猫或者飞机而是一个专门用来控制背景滚动的“隐形管理员”。我习惯把这个角色命名为“背景控制器”或者“Scroll Manager”。把这个角色的造型设置成你刚才准备好的那张背景图。也就是说这个“背景控制器”角色它的造型就是你想要的背景。然后把这个角色拖到舞台上。你会看到舞台上有两个东西一个是真正的舞台背景可能是空白的另一个是你的“背景控制器”角色它显示着背景图。把舞台本身的背景设为纯色比如白色或蓝色这样能清晰地区分哪里是角色控制的滚动背景哪里是静态的舞台背景。现在舞台中间是你的“背景控制器”角色带着背景图它背后是纯色的舞台背景。我们的目标是让这个“背景控制器”分裂成两个并让它们向左或向右移动实现滚动。3. 核心四步让背景真正“滚”起来理解了上面的关系现在开始写代码。所有代码都写在“背景控制器”这个角色上。3.1 第一步初始化——创建两个背景“分身”当游戏开始时我们需要两个背景图并排排列填满整个屏幕并做好滚动的准备。点击“背景控制器”角色切换到“代码”标签页。拖入当绿旗被点击积木。紧接着拖入隐藏积木。这个角色本身我们不需要看见我们看见的是它的克隆体。现在创建第一个背景分身拖入移到 x: (0) y: (0)积木。这是舞台正中心。拖入创建克隆体 [自己]积木。这个克隆体就出现在了舞台中央它显示着背景图。创建第二个背景分身拖入移到 x: (480) y: (0)积木。X坐标设为480意味着向右移动了整整一个舞台的宽度。再拖入一个创建克隆体 [自己]积木。此时你的代码块应该像这样当绿旗被点击 隐藏 移到 x: (0) y: (0) 创建克隆体 [自己 v] 移到 x: (480) y: (0) 创建克隆体 [自己 v]为什么是480因为舞台宽度是480。第一个克隆体在(0,0)即屏幕左边界与中心线重合。第二个克隆体在(480,0)它的左边界刚好紧挨着第一个克隆体的右边界。这样两个克隆体就无缝拼接成了一张宽度为960的长图覆盖了屏幕和屏幕右侧的区域。3.2 第二步让克隆体“动”起来——重复移动克隆体创建好后需要让它们持续移动。我们需要用到当作为克隆体启动时这个关键积木。从“事件”类里拖出当作为克隆体启动时。为了让克隆体一直移动需要重复执行积木。在重复执行里拖入将 x 坐标增加 (-5)。负数表示向左移动。现在的代码是当作为克隆体启动时 重复执行 将 x 坐标增加 (-5) end点击绿旗你会发现两个背景图开始向左移动了但是很快它们就移出屏幕留下了一片空白。这是因为移出去的图没有回来我们需要第三步。3.3 第三步实现“循环”——移出的图回到队尾这是实现“无限滚动”的魔法步骤。我们需要判断当一个背景图完全移出屏幕左侧时就把它瞬间放到所有背景图的最右边。在重复执行循环内部在将 x 坐标增加 (-5)下面添加一个判断拖入如果...那么积木。在条件框里拖入x 坐标 (-480)。这个条件的意思是当前这个克隆体的X坐标小于-480。如果条件成立执行将 x 坐标增加 (960)。完整的克隆体代码现在是这样当作为克隆体启动时 重复执行 将 x 坐标增加 (-5) 如果 (x 坐标) (-480) 那么 将 x 坐标增加 (960) end end这步的逻辑是精髓舞台宽度是480一个克隆体的宽度也是480。当它的X坐标小于-480时意味着它的右边界已经移出了屏幕左边界因为它的中心点X坐标是-480那么右边界就是 -480 240 -240已经看不到了。此时我们让它向右跳转960像素两个背景图的宽度。跳转960后会发生什么假设有克隆体A和B。A在左边B紧挨在A右边。当A移出屏幕时它瞬间跳到B的右边。此时B变成了左边的图A变成了右边的图。如此循环往复视觉上就形成了永不中断的滚动效果。3.4 第四步关联角色——让背景随角色移动目前背景是自己匀速滚动。但在很多游戏里背景滚动是因为角色在移动。比如按右键让角色向右走背景应该向左滚动营造角色前进的感觉。这需要一点简单的变量控制。在“变量”类中创建一个变量命名为“滚动速度”。修改“背景控制器”的代码。把当绿旗被点击下面的代码块里在隐藏后面加一句将 [滚动速度 v] 设为 (0)初始化速度为零。修改克隆体的代码。把将 x 坐标增加 (-5)改成将 x 坐标增加 (滚动速度)。现在去控制你游戏主角比如小猫的代码里。当按下右键时除了让小猫向右移动再加上一句将 [滚动速度 v] 设为 (-5)。当没有按键时将速度设为0。这样当你按右键时角色向右走背景向左滚因为速度是-5。松开键背景停止。这就把背景滚动和角色操作关联起来了。4. 调试与优化解决滚动时的“卡顿”和“断层”按照上面四步基本效果已经出来了。但实际做的时候你可能会遇到两个典型问题。4.1 问题一滚动不流畅有“跳一下”的感觉现象背景在循环切换的瞬间画面轻微地抖动或跳跃一下。原因最常见的原因是背景图本身没有做到“无缝拼接”。你手绘的背景图左右边缘的图案可能对不上。当图A跳到右边接替图B时连接处的图案突变视觉上就“跳”了。解决检查图片用画图软件打开你的背景图把最左列像素和最右列像素对比一下是否能够平滑连接。比如你画了一条地平线最左边的地平线高度是Y100最右边的也必须严格是Y100。使用“左右对称”的图案对于初学者最保险的方法是画一张左右完全对称的背景或者使用纹理均匀的图案如云层、星空、草地纹理。这样无论如何拼接都不会有违和感。在Scratch画图中编辑在Scratch造型编辑器中选中你的背景造型复制整个图形然后粘贴并拼接到原图的右侧仔细调整让接缝处的线条或颜色完全融合。这样生成的加长版图片再从中截取480宽度的部分就能保证无缝。4.2 问题二背景出现空白或重叠现象滚动时屏幕中间有时会出现一道空白舞台底色或者两张图重叠在一起。原因几乎百分之百是坐标计算出了问题。核心在于如果 x 坐标 (-480) 那么这个判断条件。排查确认舞台尺寸你是否修改了舞台大小如果舞台宽度不是480那么条件里的-480和跳转的960都需要调整。公式是判断条件值 -舞台宽度跳转增加值 舞台宽度 * 2。如果你的舞台宽是600条件就是x 坐标 -600跳转1200。确认初始位置检查当绿旗被点击时两个克隆体的初始X坐标是否正确。第一个是0第二个必须是舞台宽度值默认480。使用“显示”变量辅助调试在克隆体代码里临时加入显示积木并添加说 x坐标积木。运行后观察两个克隆体的坐标变化。你会看到它们从0和480开始减少一个降到-480后跳回480另一个降到0后跳回960…如此循环。通过这个方式可以直观地看到逻辑是否正确。4.3 优化一更平滑的多图层滚动视差效果单一背景滚动有点单调。高级一点的效果是“视差滚动”即前景如树木滚动快背景如远山滚动慢形成层次感和深度感。实现方法再创建两个角色比如“背景层远山”和“前景层树木”。分别上传移动速度不同的图片。每个角色都套用上面完全相同的滚动代码逻辑但设置不同的滚动速度变量值。例如主背景层速度是-2前景层速度是-5。通过调整速度前景移动更快看起来离玩家更近效果就出来了。注意层叠顺序在Scratch右下角的角色列表里通过拖动角色上下调整显示顺序。速度最慢的远背景应该在最底层速度最快的近前景在最上层。4.4 优化二从“左右滚动”到“上下滚动”原理一模一样只是把操作的坐标轴从X换成Y。初始化第一个克隆体移到x: 0 y: 0第二个克隆体移到x: 0 y: (360)。假设舞台高360移动在克隆体的重复执行里用将 y 坐标增加 (-5)向上滚动。循环判断条件改为y 坐标 (-360)跳转时将 y 坐标增加 (720)。这样就能做出向上飞的飞行射击游戏背景或者向下坠落的跳跃游戏背景。5. 整合进你的游戏不止于背景掌握了滚动背景你的游戏就拥有了“世界”。但把它放进一个完整的游戏项目还需要注意几点。5.1 游戏循环与状态控制你的游戏可能有“开始”、“进行中”、“结束”多个状态。背景滚动应该在“进行中”状态才发生。创建一个变量叫“游戏状态”。在“背景控制器”的当绿旗被点击代码里除了初始化速度和隐藏自己还要将 [游戏状态 v] 设为 [开始]。在克隆体的重复执行循环最外层套一个如果 (游戏状态) [进行中] 那么的判断。这样只有当游戏状态是“进行中”时背景才会滚动。在你的“开始按钮”或者角色碰到起跑线时将“游戏状态”设为“进行中”。5.2 与障碍物、金币等游戏元素的配合游戏里通常有需要躲避的障碍物和收集的金币。它们也应该随着背景一起移动或者出现在背景的特定位置。方法一绑定到背景克隆体不推荐试图把障碍物做成背景克隆体的子项逻辑会非常复杂因为克隆体在循环跳转。方法二独立移动速度同步推荐为障碍物和金币创建独立的角色。它们也拥有自己的重复执行循环里面执行将 x 坐标增加 (滚动速度)。这样它们的移动速度就和背景完全同步了。当背景因为角色停止而停止时它们也停止。生成障碍物时只需要让它们从屏幕右侧x坐标480以外出现然后以同步速度向左移动即可。移出屏幕左侧后直接删除此克隆体。5.3 性能与复杂度提醒对于 Scratch 这样基于浏览器的工具克隆体数量是影响性能的关键。最少克隆体原则滚动背景只用2个克隆体是最优解。千万不要为了长背景创建4个、6个克隆体完全没必要。图形复杂度背景图片不要过于精细颜色不要太复杂。简单的矢量图形或小尺寸位图性能更好。关闭其他脚本当背景移出屏幕、跳转到另一端时确保它身上没有运行其他无关的重复脚本比如不断变换造型这会浪费计算资源。最后记住这个流程的核心准备两张图 - 用角色克隆 - 移动并判断边界 - 瞬间跳转完成循环。无论你的背景是沙漠、太空还是海底无论你的角色是汽车、飞船还是小鱼这套逻辑都是通用的。先让最简单的版本跑起来看到背景流畅滚动的那一刻再慢慢添加前景、障碍物和游戏规则。