开发 | 傻瓜式操作带你创建「跳一跳」场景
在上一篇教程里，知晓程序为大家简单讲解了如何创建小游戏。通过介绍，大家一定对于小游戏的开发有了一些认识。
我们将一个游戏分为多个场景，每个场景展示不同的页面，比如「跳一跳」，我们可以简单分为三个场景：开始场景、游戏中场景、结束场景。
今天，知晓程序就将手把手教你用白鹭引擎创建游戏场景，操作十分简单，可能也就比画图复杂一点。
新建小游戏项目
我们所需要用到的工具依然是：微信开发者工具、Egret Launcher、Egret Wing3。
上周微信开发者工具已更新到 v1.02.1802021，建议下载安装最新版。
然后到白鹭官网下载最新版的 Egret Launcher，新版的 Egret Launcher 添加了对小游戏的支持。
下载完毕，注册账号并登录后，我们在 Egret Launcher 的「工具」标签中下载「Egret Wing3」。
在「引擎」标签中下载引擎，截止到发稿前的最新版是 5.1.5，只要版本在 5.1.2 以上均可，点击下载图标即可安装。
在「项目」标签中创建新项目，项目路径尽量选择纯英文路径，项目名字叫作「test」，引擎版本选择已下载的 5.1.2 以上版本。新建时缩放模式选择
fixedWidth
。
在新建好的项目上点击「发布设置」。
「发布设置」中已经默认填写了微信「小游戏开发辅助」的 AppID，无需更改，仅用于调试项目。
项目名称填写「test」。点击确定按钮后，弹出提示面板，选择「使用微信开发者工具打开」（注：只有 Egret Launcher 1.0.37 以上版本会显示该选项）。
此时，会生成与 test 项目同级的文件夹 test_wxgame，这里面装的就是针对微信开发者工具的源码。
在新建好项目后 Egret Wing 也会打开。如果我们本次关闭了 Egret Wing，下次直接打开即可，无需再从 Egret Launcher 进入。
项目结构分析
那么 Egret Wing 到底是一个怎样的工具呢？它是 Egret 引擎附带的最重要的 IDE（集成开发环境），它的界面可分为以下几个版块：
下面知晓君简单介绍一下项目结构。
1. 核心文件在
src
目录中，包含所有项目源代码。目录中最重要的文件如下：
- Main.ts：项目入口类，也称为文档类，文档类是衔接项目运行容器环境与项目中所有类的重要文件。
- LoadingUI.ts：加载过程中的辅助显示组件，用来显示加载进度。
2. 而与 src 目录同在根目录下的
egretProperties.json
是整个项目的配置文件，我们将开发的「跳一跳」配置中引擎适配自己已安装的白鹭引擎版本，并改至使用微信开发者工具启动调试，代码如下：
{ "engineVersion": "5.1.5",
"compilerVersion": "5.1.5",
"target": {
"current": "wxgame"
},
"template": {},
"eui": {
"exmlRoot": [
"resource/eui_skins"
],
"themes": [
"resource/default.thm.json"
],
"exmlPublishPolicy": "commonjs"
},
"modules": [
{
"name": "egret"
},
{
"name": "eui"
},
{
"name": "assetsmanager"
},
{
"name": "tween"
},
{
"name": "promise"
}
]
}3. libs 目录中包含项目各模块所对应的所有类库。
4. 项目编译的结果文件都会被存储到
bin-debug
目录中，这也是调试运行过程将会调用到的文件。
5.
resource
是用来存放项目运行所需要的所有资源，包含图片和配置文件。
创建游戏开始场景
要仿写「跳一跳」，我们需要设计两个场景：游戏开始页面、游戏中页面（包含游戏结束场景）。
首先，我们在 src 目录下创建一个
SceneManager.ts
：
- 鼠标右击 src 目录。
- 选择「新建模板文件」。
- 选择「新建 TypeScript 类」。
- 类名填写为「SceneManager」，点击确定。
一个 EUI 组件由两部分组成：ts 文件和 exml 文件。
我们在 src 目录下新建一个文件夹 scene，用于存放两个游戏场景类 ts 文件；在 resource 目录下也创建一个 scene 文件夹，用于存放两个游戏场景类 exml 文件。
在 src 目录下的 scene 文件夹中创建 BeginScene 场景的 EUI 组件：
- 鼠标右击 src 目录。
- 选择「新建模板文件」。
- 选择「新建 EUI 组件」。
- 类名填写为「BeginScene」。
- 修改皮肤默认路径为： /resource/scene/{className}.exml。
点击确定后，生成 BeginScene 场景的 EUI 组件：
同理，在 src 目录下新建
GameScene
场景的 EUI 组件：
引入游戏场景
src 目录下的 SceneManage.ts 负责控制场景的切换，需要写入两个场景类的对象，完整代码如下：
class SceneMange extends egret.Sprite {
// 场景控制器的单例
private static instance: SceneMange;
// 开始场景
private beginScene: BeginScene;
// 游戏场景
private gameScene: GameScene;
public constructor() {
super();
this.init();
}
private init(){
// 实例化两个场景
this.beginScene = new BeginScene();
this.gameScene = new GameScene();
// 默认添加开始场景
this.addChild(this.beginScene);
}
// 实例化单例获取方法
public static getInstance(): SceneMange{
if(!SceneMange.instance){
SceneMange.instance = new SceneMange();
}
return SceneMange.instance;
}
// 切换场景
public changeScene(type){
this.removeChildren();
this.addChild(this[type]);
}
}在入口文件
Main.ts
中引入场景管理类
SceneManage
，找到第 102 行 createGameScene 方法，并删除方法内所有代码：
然后在这个方法中写入代码如下，记得修改后随手 ctrl+s 保存：
this.addChild(SceneMange.getInstance());
添加游戏资源
这里我们用简单粗暴的方法用我们的「跳一跳」资源替换掉初始化的游戏资源，删除 test 文件夹中 resource 目录下的 assets，拖入知晓程序提供的解压后的 assets。
点击 resource 下的 default.res.json，可以看到默认的资源分组 preload 中已经被替换为我们的「跳一跳」游戏资源。
编辑开始场景的 EUI
找到项目结构下 resource 目录下的 scene 文件夹下的 BeginScene.exml。
点击「场景预览」区域，在「属性面板」中设置场景的宽和高分别为：640 和 1136，可配合使用「工具栏」中的放大镜来缩放场景。
选择并拖动「组件」选项卡中的 image 控件到「场景预览」里。
在「属性面板」中设置 image 控件上下左右约束值为 0，铺满整个场景。
选择并拖动「资源」选项卡中的 bg.jpg 到控件属性「样式」>「资源名」中，这样开始场景中的背景图就放置好了。如果拖动到位后没有效果，可点击「工具栏」中的「刷新」。
与放置背景图操作一致，在「组件」选项卡中选择并拖动一个 button 控件到场景预览中，在「属性面板」中选择「快速约束」的「水平居中对齐」。
选择并拖动「资源」选项卡中的 start_btn_png 到控件属性「样式」>「皮肤快捷模板」>「正常」中。
删除「标签」内容，将「ID」设为 beginBtn。所有设好后按下 ctrl+s 保存。
在 IDE 中选择「调试」项目，即可在微信开发者工具中打开这个项目并手机预览。
我们的「跳一跳」开始场景就创建好了。
大家可以看到，整个场景创建中代码改动部分很少，大多时候只是鼠标在拖放，操作十分简单。不管你是开发者还是对此感兴趣，都不妨跟着一试。