cover_image

开发 | 傻瓜式操作带你创建「跳一跳」场景

cloud小程序微信开发场景创建小游戏跳一跳白鹭
凌歌

<p><img class="aligncenter size-large" src="https://images.ifanr.cn/wp-content/uploads/2017/07/minapp-dev-final-feature.jpg" width="1200" height="750" /><br /> 在<span style="color: #605eac;"><a style="color: #605eac;" href="http://mp.weixin.qq.com/s/7osgvbdqaH8ffw3OXYzDTw">上一篇教程</a></span>里,知晓君为大家简单讲解了如何创建小游戏。通过介绍,大家一定对于小游戏的开发有了一些认识。</p> <p>我们将一个游戏分为多个场景,每个场景展示不同的页面,比如「跳一跳」,我们可以简单分为三个场景:开始场景、游戏中场景、结束场景。</p> <p>今天,知晓程序就将手把手教你用白鹭引擎创建游戏场景,操作十分简单,可能也就比画图复杂一点。</p> <h3><span style="color: #605eac;">新建小游戏项目</span></h3> <p>我们所需要用到的工具依然是:微信开发者工具、Egret Launcher、Egret Wing3。</p> <p>上周微信开发者工具已更新到 v1.02.1802021,建议下载安装最新版。</p> <p>然后到白鹭官网下载最新版的 Egret Launcher,新版的 Egret Launcher 添加了对小游戏的支持。</p> <p><img class="aligncenter size-full wp-image-981186" src="https://images.ifanr.cn/wp-content/uploads/2018/02/1-8.jpg" alt="" width="1000" height="762" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/1-8.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/1-8-360x274.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/1-8-768x585.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>下载完毕,注册账号并登录后,我们在 Egret Launcher 的「工具」标签中下载「Egret Wing3」。</p> <p><img class="aligncenter size-full wp-image-981187" src="https://images.ifanr.cn/wp-content/uploads/2018/02/2-5.jpg" alt="" width="1000" height="604" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/2-5.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/2-5-360x217.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/2-5-768x464.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>在「引擎」标签中下载引擎,截止到发稿前的最新版是 5.1.5,只要版本在 5.1.2 以上均可,点击下载图标即可安装。</p> <p><img class="aligncenter size-full wp-image-981188" src="https://images.ifanr.cn/wp-content/uploads/2018/02/3-5.jpg" alt="" width="1000" height="604" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/3-5.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/3-5-360x217.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/3-5-768x464.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>在「项目」标签中创建新项目,项目路径尽量选择纯英文路径,项目名字叫作「test」,引擎版本选择已下载的 5.1.2 以上版本。<strong>新建时缩放模式选择 <code>fixedWidth</code> 。</strong></p> <p>在新建好的项目上点击「发布设置」。</p> <p><img class="aligncenter size-full wp-image-981189" src="https://images.ifanr.cn/wp-content/uploads/2018/02/4-2.jpg" alt="" width="1000" height="616" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/4-2.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/4-2-360x222.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/4-2-768x473.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>「发布设置」中已经默认填写了微信「小游戏开发辅助」的 AppID,无需更改,仅用于调试项目。</p> <p>项目名称填写「test」。点击确定按钮后,弹出提示面板,选择「使用微信开发者工具打开」(注:只有 Egret Launcher 1.0.37 以上版本会显示该选项)。</p> <p><img class="aligncenter size-full wp-image-981190" src="https://images.ifanr.cn/wp-content/uploads/2018/02/5-2.jpg" alt="" width="1000" height="658" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/5-2.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/5-2-360x237.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/5-2-768x505.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>此时,会生成与 test 项目同级的文件夹 test_wxgame,这里面装的就是针对微信开发者工具的源码。</p> <p><img class="aligncenter size-full wp-image-981192" src="https://images.ifanr.cn/wp-content/uploads/2018/02/7-4.jpg" alt="" width="1000" height="308" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/7-4.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/7-4-360x111.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/7-4-768x237.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p><img class="alignnone size-full" src="https://images.ifanr.cn/wp-content/uploads/2018/01/640-2.jpg" width="1000" height="400" /></p> <p>在新建好项目后 Egret Wing 也会打开。如果我们本次关闭了 Egret Wing,下次直接打开即可,无需再从 Egret Launcher 进入。</p> <p><img class="aligncenter size-full wp-image-981191" src="https://images.ifanr.cn/wp-content/uploads/2018/02/6-2.jpg" alt="" width="1000" height="666" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/6-2.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/6-2-360x240.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/6-2-768x511.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h3><span style="color: #605eac;">项目结构分析</span></h3> <p>那么 Egret Wing 到底是一个怎样的工具呢?它是 Egret 引擎附带的最重要的 IDE(集成开发环境),它的界面可分为以下几个版块:</p> <p><img class="aligncenter size-full wp-image-981193" src="https://images.ifanr.cn/wp-content/uploads/2018/02/8-1.jpg" alt="" width="1000" height="666" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/8-1.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/8-1-360x240.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/8-1-768x511.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>下面知晓君简单介绍一下项目结构。</p> <p>1. <strong>核心文件在 <code>src</code> 目录中</strong>,包含所有项目源代码。目录中最重要的文件如下:</p> <ul> <li><code>Main.ts</code>:项目入口类,也称为文档类,文档类是衔接项目运行容器环境与项目中所有类的重要文件。</li> <li><code>LoadingUI.ts</code>:加载过程中的辅助显示组件,用来显示加载进度。</li> </ul> <p>2. 而与 <code>src</code> 目录同在根目录下的<strong> <code>egretProperties.json</code> 是整个项目的配置文件</strong>,我们将开发的「跳一跳」配置中引擎适配自己已安装的白鹭引擎版本,并改至使用微信开发者工具启动调试,代码如下:</p> <pre><code>{ "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" } ] }</code></pre> <p>3. <strong><code>libs</code> 目录中包含项目各模块所对应的所有类库。</strong></p> <p>4. <strong>项目编译的结果文件都会被存储到 <code>bin-debug</code> 目录中</strong>,这也是调试运行过程将会调用到的文件。</p> <p>5. <strong><code>resource</code> 是用来存放项目运行所需要的所有资源</strong>,包含图片和配置文件。</p> <h3><span style="color: #605eac;">创建游戏开始场景</span></h3> <p>要仿写「跳一跳」,我们需要设计两个场景:<strong>游戏开始页面、游戏中页面(包含游戏结束场景)</strong>。</p> <p>首先,我们在 src 目录下<strong>创建一个 SceneManager.ts</strong> :</p> <ul> <li>鼠标右击 <code>src</code> 目录;</li> <li>选择「新建模板文件」;</li> <li>选择「新建 TypeScript 类」;</li> <li>类名填写为「SceneManager」,点击确定。</li> </ul> <p><img class="aligncenter size-full wp-image-981194" src="https://images.ifanr.cn/wp-content/uploads/2018/02/9-2.jpg" alt="" width="1000" height="692" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/9-2.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/9-2-360x249.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/9-2-768x531.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>一个 EUI 组件由两部分组成:<code>ts</code> 文件和 <code>exml</code> 文件。</p> <p>我们在 <code>src</code> 目录下新建一个文件夹 <code>scene</code>,用于存放两个游戏场景类 <code>ts</code> 文件;在 <code>resource</code> 目录下也创建一个 <code>scene</code> 文件夹,用于存放两个游戏场景类 <code>exml</code> 文件。</p> <p><img class="aligncenter size-full wp-image-981195" src="https://images.ifanr.cn/wp-content/uploads/2018/02/10.jpg" alt="" width="1000" height="777" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/10.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/10-360x280.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/10-768x597.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>在 <code>src</code> 目录下的 <code>scene</code> 文件夹中创建 <code>BeginScene</code> 场景的 EUI 组件:</p> <ul> <li>鼠标右击 <code>src</code> 目录;</li> <li>选择「新建模板文件」;</li> <li>选择「新建 EUI 组件」;</li> <li>类名填写为「BeginScene」;</li> <li>修改皮肤默认路径为:/resource/scene/{className}.exml。</li> </ul> <p><img class="aligncenter size-full wp-image-981196" src="https://images.ifanr.cn/wp-content/uploads/2018/02/11-2.jpg" alt="" width="1000" height="677" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/11-2.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/11-2-360x244.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/11-2-768x520.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>点击确定后,生成 <code>BeginScene</code> 场景的 EUI 组件:</p> <p><img class="aligncenter size-full wp-image-981197" src="https://images.ifanr.cn/wp-content/uploads/2018/02/12-2.jpg" alt="" width="1000" height="666" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/12-2.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/12-2-360x240.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/12-2-768x511.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>同理,在 <code>src</code> 目录下<strong>新建 <code>GameScene</code> 场景的 EUI 组件</strong>:</p> <p><img class="aligncenter size-full wp-image-981198" src="https://images.ifanr.cn/wp-content/uploads/2018/02/13-1.jpg" alt="" width="1000" height="677" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/13-1.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/13-1-360x244.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/13-1-768x520.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h3><span style="color: #605eac;">引入游戏场景</span></h3> <p><strong><code>src</code> 目录下的 <code>SceneManage.ts</code> 负责控制场景的切换</strong>,需要写入两个场景类的对象,完整代码如下:</p> <pre><code>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]); } } </code></pre> <p><strong>在入口文件 <code>Main.ts</code> 中引入场景管理类 <code>SceneManage</code></strong>,找到第 102 行 <code>createGameScene</code> 方法,并删除方法内所有代码:</p> <p><img class="aligncenter size-full wp-image-981199" src="https://images.ifanr.cn/wp-content/uploads/2018/02/14-1.jpg" alt="" width="1000" height="666" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/14-1.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/14-1-360x240.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/14-1-768x511.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>然后在这个方法中写入代码如下,记得修改后随手 ctrl+s 保存:</p> <pre><code>this.addChild(SceneMange.getInstance());</code></pre> <h3><img class="aligncenter size-full wp-image-981200" src="https://images.ifanr.cn/wp-content/uploads/2018/02/15.jpg" alt="" width="1000" height="474" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/15.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/15-360x171.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/15-768x364.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></h3> <h3><span style="color: #605eac;">添加游戏资源</span></h3> <p>这里我们用简单粗暴的方法<strong>用我们的「跳一跳」资源替换掉初始化的游戏资源</strong>,删除 <code>test</code> 文件夹中 <code>resource</code> 目录下的 <code>assets</code>,拖入知晓程序提供的 <code>assets</code>。资源链接放在文章末尾。</p> <p><img class="aligncenter size-full wp-image-981201" src="https://images.ifanr.cn/wp-content/uploads/2018/02/16.jpg" alt="" width="1000" height="534" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/16.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/16-360x192.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/16-768x410.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p><img class="alignnone size-full" src="https://images.ifanr.cn/wp-content/uploads/2018/01/640-2.jpg" width="1000" height="400" /></p> <p>点击 <code>resource</code> 下的 <code>default.res.json</code>,可以看到默认的资源分组 preload 中已经被替换为我们的「跳一跳」游戏资源。</p> <p><img class="aligncenter size-full wp-image-981202" src="https://images.ifanr.cn/wp-content/uploads/2018/02/17.jpg" alt="" width="1000" height="667" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/17.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/17-360x240.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/17-768x512.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h3><span style="color: #605eac;">编辑开始场景的 EUI</span></h3> <p>找到项目结构下 <code>resource</code> 目录下的 <code>scene</code> 文件夹下的 <code>BeginScene.exml</code>。</p> <p><img class="aligncenter size-full wp-image-981203" src="https://images.ifanr.cn/wp-content/uploads/2018/02/18.jpg" alt="" width="1000" height="653" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/18.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/18-360x235.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/18-768x502.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>点击「场景预览」区域,在「属性面板」中设置场景的宽和高分别为:640 和 1136,可配合使用「工具栏」中的放大镜来缩放场景。</p> <p>选择并拖动「组件」选项卡中的 image 控件到「场景预览」里。</p> <p><img class="aligncenter size-full wp-image-981204" src="https://images.ifanr.cn/wp-content/uploads/2018/02/19.jpg" alt="" width="1000" height="650" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/19.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/19-360x234.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/19-768x499.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>在「属性面板」中设置 image 控件上下左右约束值为 0,铺满整个场景。</p> <p><img class="aligncenter size-full wp-image-981205" src="https://images.ifanr.cn/wp-content/uploads/2018/02/20.jpg" alt="" width="1000" height="653" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/20.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/20-360x235.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/20-768x502.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>选择并拖动「资源」选项卡中的 <code>bg.jpg</code> 到控件属性「样式」&gt;「资源名」中,这样开始场景中的背景图就放置好了。如果拖动到位后没有效果,可点击「工具栏」中的「刷新」。</p> <p><img class="aligncenter size-large wp-image-981206" src="https://images.ifanr.cn/wp-content/uploads/2018/02/21-1024x668.jpg" alt="" width="1024" height="668" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/21-1024x668.jpg 1024w, http://www.ifanr.com/wp-content/uploads/2018/02/21-360x235.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/21-768x501.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></p> <p>与放置背景图操作一致,在「组件」选项卡中选择并拖动一个 button 控件到场景预览中,在「属性面板」中选择「快速约束」的「水平居中对齐」。</p> <p><img class="aligncenter size-full wp-image-981207" src="https://images.ifanr.cn/wp-content/uploads/2018/02/22.jpg" alt="" width="1000" height="652" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/22.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/22-360x235.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/22-768x501.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>选择并拖动「资源」选项卡中的 <code>start_btn_png</code> 到控件属性「样式」&gt;「皮肤快捷模板」&gt;「正常」中。</p> <p>删除「标签」内容,将「ID」设为 <code>beginBtn</code>。所有设好后按下 ctrl+s 保存。</p> <p><img class="aligncenter size-full wp-image-981208" src="https://images.ifanr.cn/wp-content/uploads/2018/02/23-1.jpg" alt="" width="1000" height="652" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/23-1.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/23-1-360x235.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/23-1-768x501.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>在 IDE 中选择「调试」项目,即可在微信开发者工具中打开这个项目并手机预览。</p> <p><img class="aligncenter size-full wp-image-981209" src="https://images.ifanr.cn/wp-content/uploads/2018/02/24.jpg" alt="" width="1000" height="667" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/24.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/24-360x240.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/24-768x512.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>我们的「跳一跳」开始场景就创建好了。</p> <p><img class="aligncenter size-full wp-image-981210" src="https://images.ifanr.cn/wp-content/uploads/2018/02/25.jpg" alt="" width="1000" height="877" srcset="http://www.ifanr.com/wp-content/uploads/2018/02/25.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/02/25-360x316.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/02/25-768x674.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p><img class="alignnone size-full" src="https://images.ifanr.cn/wp-content/uploads/2018/01/640-2.jpg" width="1000" height="400" /></p> <p>大家可以看到,整个场景创建中代码改动部分很少,大多时候只是鼠标在拖放,操作十分简单。不管你是开发者还是对此感兴趣,都不妨跟着一试。</p> <p><strong>关注「<span style="color: #605eac;">知晓程序</span>」微信公众号,回复「<span style="color: #605eac;">开发</span>」,让你的小程序性能再上一层楼。</strong></p> <p><strong><img class="aligncenter size-full wp-image-932929" src="https://images.ifanr.cn/wp-content/uploads/2017/11/20171101173458.jpg" alt="" width="1000" height="200" srcset="http://www.ifanr.com/wp-content/uploads/2017/11/20171101173458.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/11/20171101173458-360x72.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/11/20171101173458-768x154.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></strong></p> <p><img class="size-full wp-image-963729 aligncenter" src="https://images.ifanr.cn/wp-content/uploads/2018/01/qrcode.gif" alt="" width="750" height="375" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/qrcode.gif 750w, http://www.ifanr.com/wp-content/uploads/2018/01/qrcode-360x180.gif 360w" sizes="(max-width: 750px) 100vw, 750px" /></p>