2D 视差背景滚动

🎯本节学习目标

• 理解视差原理
• 实现多层背景
• 实现循环滚动

🚀课程导读

跑酷游戏里背景“跑”得比前景慢——视差让 2D 画面有“纵深感”。本课实现。

◆视差原理

层距越远动得越慢。

1. 【原理】相机移动时，不同层背景以不同系数跟随（远景 0.2x、中景 0.5x、前景 1x）。
2. 【分层】创建多个空对象层：Background（远）、Midground（中）、Foreground（近）。
3. 【每层】放对应的背景精灵（横向平铺长图）。
4. 【实现】Parallax 脚本（挂在每层）：
5. public float parallaxFactor = 0.2f; // 视差系数
6. private float startX;
7. void Start() { startX = transform.position.x; }
8. void LateUpdate() {
9. float offset = Camera.main.transform.position.x * parallaxFactor;
10. transform.position = new Vector3(startX + offset, transform.position.y, transform.position.z);
11. }
12. 【效果】系数小的层“跟得少”=视觉上远。
13. 【注意】远景层放后面（Sorting Order 低，第 202 课）。
14. 【系数】远处 0.1-0.3、近处 0.5-0.8。
15. 【完成】相机移动时，层层错落有致！

◆循环滚动背景

无限跑也不“到头”。

1. 【问题】相机一直向前，背景图会“走到头”。
2. 【循环】把背景图做成“可无缝拼接”的，相机移出半张图后回绕。
3. 【双图法】背景放两张相同长图并排，当第一张完全移出视野，把它移到第二张后面。
4. 【代码（简化）】
5. public float scrollSpeed = 1f; // 自滚动速度（跑酷）
6. void Update() {
7. transform.position += Vector3.left * scrollSpeed * Time.deltaTime;
8. if (transform.position.x < -width) transform.position += Vector3.right * width * 2f;
9. }
10. 【跟随相机循环】结合相机：根据相机 x 计算偏移取模：
11. float camX = Camera.main.transform.position.x * factor;
12. float mod = Mathf.Repeat(camX, width);
13. transform.position = new Vector3(startX + mod, ...);
14. 【无缝拼接】背景图左右边缘要“能接上”（设计素材时注意）。
15. 【三层】远/中/近各做循环，节奏感更强。
16. 【完成】无尽跑酷背景“丝滑”！
17. 【注意】循环宽度 width = 背景图的世界宽度（精灵宽度）。

⚠常见错误与排查

★动手练习

✓本节小结

视差背景完成。下一课做 2D 射击游戏。