3D跑酷类小游戏开发实战

今天，带领大家从零开始开发一款完整的3D跑酷类小游戏，主要面向有一定Egret2D开发经验的小伙伴，手把手教你学习EgretPro开发，快速开启您的EgretPro开发之旅。

下面是整个游戏的制作过程。

游戏制作

工欲善其事必先利其器，在开始制作游戏之前，您需要检查您是否安装了以下开发环境：

1. 检查你的EgretPro是否更新到了1.6以及以上版本；
2. 检查下是否安装了5.3.7以及以上的Egret2d引擎。

创建项目

首先，打开EgretPro，项目–库项目–新建。

其次，创建完项目之后，EgretPro会自动打开刚才创建的库项目RunningGame，在resource/scenes目录下面创建一个场景RunningScene，双击在场景编辑中打开该场景。如下图所示：

创建跑道

跑道是通过3个实体Cude拼接而成的，并且随着主角向前奔跑，跑道需要滚动起来，我们再这里通过组件的方式动态的创建跑道。
使用Vscode打开自己刚才创建的项目，然后在src目录下面创建一个文件夹game用来存放我们的组件代码，然后在game目录中创建RoadController.ts文件。

import { component } from "@egret/ecs";
import { Behaviour, GameEntity, EngineFactory, Vector3 } from "@egret/engine";
import { MeshFilter, DefaultMeshes, MeshRenderer, Material } from "@egret/render";
import { ResourceManager } from "@egret/core";

@component()
class RoadController extends Behaviour{
  
    private roads:GameEntity[] = [];
    private roadSize:Vector3 = Vector3.create(5,1,10);
    async onStart(){
        const RoadMaterial:Material = (await ResourceManager.instance.loadUri("assets/materials/ground.mat.json")).data;

        //创建3个实体拼接成跑道
        for (let i = 0; i < 3; i++) {
            const road:GameEntity = EngineFactory.createGameEntity3D("road"+i);
            road.addComponent(MeshFilter).mesh = DefaultMeshes.CUBE;
            road.addComponent(MeshRenderer).material = RoadMaterial;
            road.transform.localScale = this.roadSize;
            road.transform.setPosition(0,0,i*this.roadSize.z);
            this.roads.push(road);
            
        }
    }

    onUpdate(){

    }
}

然后把RoadController组件添加在场景的Root实体上，

最后点击预览（内置）（或者预览浏览器）按钮，就可以看到下面的效果了。

摄像机的这个角度看上去有点别扭，你可以在运行界面，通过调试摄像机的TransForm参数来调整摄像机的位置与角度达到画面看上去比较舒服。

添加主角

将主角添加到场景中，并且向前奔跑，效果图如下：

第一步，将美术同学给的游戏素材BakedAnimation拷贝到项目目录resource/assets/animations中。

第二步，在EgretPro编辑器资源管理器中打开resource/assets/animations/BakedAnimation/Boy_stand