开发工具

Cocos Dashboard 1.0.20
Cocos Creator 3.4.0
Visual Studio Code 1.63
Microsoft Edge 97.0.1072.69

游戏配套素材资源下载：

游戏开发配套素材资源

项目准备

启动 Cocos Dashboard, 点 新建 按钮，项目类型选择 Empty(3D), 输入 项目名称，选择项目保存 位置，点 创建并打开 按钮，完成项目的创建。

下载 游戏开发配套素材资源 并解压缩到 当前文件夹, 将解压后的 res文件夹 拖动到当前项目的 资源管理器 的 assets 文件夹中。如下图所示：

创建场景

在 资源管理器 中点击选中 assets/ 文件夹， 右键 -> 创建 -> 文件夹, 将文件夹命名为 scene。

在 资源管理器 中点击选中 assets/scene/ 文件夹, 右键 -> 创建 -> 场景, 将场景命名为 airplane。

双击打开 airplane 场景

创建背景材质

在 资源管理器 中点击选中 assets/res/ 文件夹, 右键 -> 创建 -> 文件夹, 将文件夹命名为 background。
点击选中 background/ 文件夹, 右键 -> 创建 -> 材质, 材质文件命名为 bg。

编辑材质 bg 的属性，Effect 的值更改为 builtin-unlit， USE TEXTURE 打勾, 将背景图片 assets/res/texture/bg01.png 拖动到 MainTexture。

在 属性检查器 右上角选 保存 (打勾图标), 完成背景材质的创建。

创建背景节点

在 层级管理器 点击选中场景 airPlane， 右键 -> 创建 -> 空节点, 新节点命名为 movingSceneBg。

点击选中 movingSceneBg 节点, 右键 -> 创建 -> 3D对象 -> Plane平面, 命名为 bg01。

将上一步创建的材质 bg 拖动到 bg01 的属性 cc.MeshRenderer -> Materials 中, 修改缩放属性 Scale 的值为: X:6, Y:1, Z:9 。

调整主相机视角

在 主菜单 选择 Cocos Creator -> 偏好设置, 打开 偏好设置 对话框。
在 偏好设置 对话框的右侧列表选择 设置管理器，在右侧窗格输入设置名称 develop, 点 新增 按钮添加新设备

新设备的 宽高 设置为 720 X 1280, 点 修改 保存设备信息, 关闭对话框。

在 场景编辑器 中更改 渲染输出目标分辨率, 将 目标设备 更改为刚才添加的 develop(720x1280) 。

在 层级管理器 中选中相机 Main Camera, 在 场景编辑器 中点击相机向上的坐标轴，并向上拉动以在 场景编辑器 右下角的预览窗口中看到背景图片(下图中 数字6 的位置)。

继续修改相机属性(如上图所示)，让相机能完全显示整个背景图片：

位置 Position: X:0, Y:30, Z:0
旋转 Rotation: X:-90, Y:0, Z:0
缩放 Scale：X:1, Y:1, Z:1
投影方式 Projection: ORTHO (正交相机)
视距框大小 OrthoHeight: 45

背景无限滚动

在 层级管理器 点击选中 movingSceneBg 下的 bg01 背景节点, Ctrl+D 复制背景节点为 bg02 。
选中复制好的 bg02，通过 Z轴 将其拖动到定位值约 -90 处，bg01 与 bg02 无明显黑边即可, 保存场景。

在 资源管理器 中点击选中 assets/ 文件夹, 右键 -> 创建 -> 文件夹, 将文件夹命名为 script。
在 资源管理器 中点击选中 assets/script/ 文件夹, 右键 -> 创建 -> 脚本(TypeScript), 脚本命名为MovingSceneBg。

在 资源管理器 中双击脚本文件 assets/script/MovingSceneBg，在打开的 VS Code 中编辑脚本文件。如果无法关联脚本，可以在 主菜单 -> 偏好设置，手动设置 默认脚本编辑器 。

编辑脚本文件 MovingSceneBg 内容如以下代码：

import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('movingSceneBg')
export class movingSceneBg extends Component {

    @property(Node)
    bg01: Node = null;

    @property(Node)
    bg02: Node = null;

    // 移动速度
    private _bgSpeed = 10;
    // 移动的范围， 90 为背景的长度
    private _bgMovingRange = 90;

    start() {
        this._init();
    }

    update(deltaTime: number) {
        this._moveBackground(deltaTime);
    }

    private _init() {
        // 两个背景的初始化位置
        this.bg01.setPosition(0, 0, 0);
        this.bg02.setPosition(0, 0, -this._bgMovingRange);
    }

    private _moveBackground(deltaTime: number) {
        // 设置每一帧移动后到的本地坐标，此处只需要移动 Z 轴
        this.bg01.setPosition(0, 0, this.bg01.position.z + this._bgSpeed * deltaTime);
        this.bg02.setPosition(0, 0, this.bg02.position.z + this._bgSpeed * deltaTime);

        // 是否超出移动范围
        if (this.bg01.position.z > this._bgMovingRange) {
            this.bg01.setPosition(0, 0, this.bg02.position.z - this._bgMovingRange);
        } else if (this.bg02.position.z > this._bgMovingRange) {
            this.bg02.setPosition(0, 0, this.bg01.position.z - this._bgMovingRange);
        }
    }
}