本教程带领大家从零开始开发一款完整的3D跑酷游戏,主要面向读者是有一定Egret2D开发经验的小伙伴,手把手教你学习EgretPro开发,快速开启您的EgretPro开发之旅。
下面是整个游戏的制作过程。
游戏制作
工欲善其事必先利其器,在开始制作游戏之前,您需要检查您是否安装了以下开发环境:
- 检查你的EgretPro是否更新到了1.6以及以上版本;
- 检查下是否安装了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/animati