猫咪跑步 ( 超长背景 )

教学原文参考：猫咪跑步 ( 超长背景 )

这篇文章会介绍，如何在 Scratch 3 里使用变数、定位、改变、重复直到、更换造型...等积木，使用舞台两倍以上长度的超长背景，实作猫咪跑步时，背景会在後方移动的效果 ( 也是连续背景的作法 )。

相关文章参考：变数、定位、改变、重复直到、更换造型。

角色设定

在角色编辑区，保留猫咪的角色，使用「上传」，加入一张超长背景 ( 1000x360 ) 的图片 ( 参考：Scratch 角色设定 )。

连续背景可先使用范例图片：下载连结

上传图片後，切换至「造型」页签，点击下方「转换成向量图」，将图片转换成向量图。

因为图片尺寸大於舞台尺寸，所以上传後会被「强制缩小」，转换成向量图之後，就可以使用「选取工具」，将图片尺寸「等比例放大」，放大到高度等於 360 为止，并将图片的中心点对齐画布中心点。

积木程序原理 ( 背景 )

点击「背景」图片角色，设定点击绿旗时，定位到 (240, 0)。

实际定位以上传的图片为主，范例图片使用 (240, 0)。

编辑按下键盘「向右」键的动作：

• 使用「重复...直到」积木，直到放开向右键时 ( 向右键被按下不成立 )，停止重复。
• 每次重复时，判断图片的 x 座标是否小於 -240，如果小於 -240，就将 x 座标改为 240 ( 移动到左边之後，瞬间移动到右边 )
• 每次重复时，将 x 座标减少 10 ( 往左移动，和键盘方向相反 )。

为什麽要使用「重复...直到」？如果单纯使用按下键盘，会有一段键盘等待的时间 ( 约 0.5 秒到 1 秒 )，造成动作不顺畅。

编辑按下键盘「向左」键的动作：

• 使用「重复...直到」积木，直到放开向左键时 ( 向左键被按下不成立 )，停止重复。
• 每次重复时，判断图片的 x 座标是否大於 240，如果大於 240，就将 x 座标改为 -240 ( 移动到右边之後，瞬间移动到左边 )
• 每次重复时，将 x 座标增加 10 ( 往右移动，和键盘方向相反 )。

积木程序原理 ( 猫咪 )

点击「猫咪」角色，设定点击绿旗时，定位到 (0, -65)，刚好站在背景图的地面上，并设定回转方式为「左-右」，避免旋转时上下颠倒。

编辑按下键盘「向右」和「向左」键的动作：

• 使用「重复...直到」积木，直到放开向右或向左键时 ( 向右键或向左键被按下不成立 )，停止重复。
• 每次重复时，将猫咪转向对应的方向 ( 向右 90，向左 -90 )
• 每次重复时，变换猫咪造型。

最终结果

完成後，点击绿旗，按下键盘的左和右，就能看到猫咪跑步时，超长的背景在後方移动。

范例解答

范例解答：猫咪跑步 ( 超长背景 )

延伸练习

如果已经熟悉了猫咪跑步 ( 超长背景 ) 的基本原理，还可以尝试更多好玩的作法：

• 修改猫咪角色，变成其他动物。

• 更换另外一张超长的背景图。

关於我

大家好，我是 OXXO，是个即将迈入中年的斜杠青年，如果对我有点兴趣(笑，可以与我联系，一起来做点有玩又有创意的东西吧！

• OXXO.STUDIO 部落格
• OXXO.STUDIO 粉丝团
• Steam 教育学习网
• Steam 教育学习网粉丝团