cover_image

开发 | 手把手带你入门小游戏,「打飞机」也有逆天操作!

cloud小程序微信开发创建小游戏白鹭引擎飞机大战
凌歌

<p><img class="aligncenter size-large" src="http://images.ifanr.cn/wp-content/uploads/2017/07/minapp-dev-final-feature.jpg" width="1200" height="750" /></p> <p>自从 12 月 25 日小游戏功能开放以来,越来越多的游戏从业者都开始重新审视小程序平台。其中,也有不少游戏公司和开发者,都在考虑做一款小游戏。</p> <p>那么,小游戏开发,应该利用哪些工具呢?如何新建一个小游戏项目,并在真机进行调试、测试呢?今天,知晓程序就给大家带来小游戏开发入门的那些事儿。</p> <h3><span style="color: #605eac;">无引擎创建小游戏</span></h3> <p>想要单纯体验小游戏开发的流程,我们可以先单纯地创建一个小游戏开始。</p> <p>与小程序一样,开发同样需要用到「微信开发者工具」。我们可以到官方文档,下载到最新版的微信开发者工具。</p> <p><span style="color: #808080;">关注「<span style="color: #605eac;">知晓程序</span>」,回复「<span style="color: #605eac;">工具</span>」,获取开发者工具下载地址。</span></p> <p>需要注意的是,<strong>目前小游戏不提供公开注册。</strong>但可以在新建项目时,选择「AppID」下方的体验「小游戏」,即可跳过小游戏 AppID 的填写。</p> <p>而且,与小程序不同的是,即使不填写 AppID,开发者也可以真机调试、体验小游戏。</p> <p>下面,我们一起来看看如何利用「微信开发者工具」,创建小游戏项目吧。</p> <h4><span style="color: #605eac;">1. 使用微信开发者工具新建小游戏项目</span></h4> <p>下载好微信开发者工具后,<strong>用微信扫码登录创建小程序项目。</strong></p> <p><img class="aligncenter size-full wp-image-978502" src="http://images.ifanr.cn/wp-content/uploads/2018/01/12-11.jpg" alt="" width="1000" height="832" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/12-11.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/12-11-360x300.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/01/12-11-768x639.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p><strong>填写小程序项目信息:</strong>项目目录自行选择,建议在无中文路径下选择新建空文件夹。这里知晓君新建了一个「test」文件夹。</p> <p>AppID 处点选体验「小游戏」,项目名称可以自行填写,建议为纯英文。点击「确定」即可。</p> <p><img class="aligncenter size-full wp-image-978497" src="http://images.ifanr.cn/wp-content/uploads/2018/01/7-19.jpg" alt="" width="1000" height="895" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/7-19.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/7-19-360x322.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/01/7-19-768x687.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>进入微信开发者工具,可以看到<strong>工具栏、模拟器、编辑器和调试器</strong>四大版块。</p> <p>模拟器中有模拟器配置选项,我们可以修改模拟器中的显示分辨率,倍数,网络等。在开发中,我们需要考虑各种手机分辨率的问题,避免内容显示不完整等状况发生。</p> <p><img class="aligncenter size-full wp-image-978500" src="http://images.ifanr.cn/wp-content/uploads/2018/01/10-9.jpg" alt="" width="1000" height="667" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/10-9.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/10-9-360x240.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/01/10-9-768x512.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p><strong>我们最常用到的是工具栏中的「编译」和「预览」。</strong>当我们改动代码后重新「编译」,模拟器就会做出相应更新,具体应用在下文会提到。</p> <p><img class="aligncenter size-full wp-image-978501" src="http://images.ifanr.cn/wp-content/uploads/2018/01/11-4.png" alt="" width="1000" height="145" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/11-4.png 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/11-4-360x52.png 360w, http://www.ifanr.com/wp-content/uploads/2018/01/11-4-768x111.png 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>可能大家已经发现,在新建的项目中微信帮我们内置了一款「飞机大战」小游戏 Demo。</p> <p>在文档树中的就是这款小游戏需要用到的代码和素材文件。其中入口文件和配置文件:game.js 和 game.json。game.js 引入并初始化包含整个小游戏的游戏场景、参与者(玩家飞机和敌方飞机)、游戏逻辑的主函数的 main.js。</p> <p>现在你就可以选择工具栏中的「预览」,用刚才登录微信开发者工具的微信扫描二维码,查看并体验这款小游戏了。</p> <p><img class="aligncenter size-full wp-image-978499" src="http://images.ifanr.cn/wp-content/uploads/2018/01/9-14.jpg" alt="" width="1000" height="877" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/9-14.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/9-14-360x316.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/01/9-14-768x674.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h4><span style="color: #605eac;">2. 改动代码试试</span></h4> <p>「飞机大战」中,玩家每隔 20 帧射一次,每隔 60 帧生成新的敌机。每帧检查玩家和敌机是否死亡,玩家死亡游戏结束,敌机死亡分数 +1。只有玩家可以射击,且射击方式固定,通过躲避敌机生存。</p> <p>了解了它的设定,我们现在就可以自己修改一些参数,来体验这些改动带来的改变。</p> <p>首先打开文档树中的 js 文件夹,选择 main.js,定位到第 145 行代码处,这段代码的功能是控制子弹射击速度。</p> <p><img class="aligncenter size-full wp-image-978503" src="http://images.ifanr.cn/wp-content/uploads/2018/01/13-8.jpg" alt="" width="1000" height="664" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/13-8.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/13-8-360x239.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/01/13-8-768x510.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>我们将 databus.frame % 20 === 0 中的 20 更改为 5 ,然后保存更改(在 Windows 中快捷键为 ctrl+s,Mac 中快捷键为 command+s),或点击工具栏中的「编译」。</p> <p>改动后的这段代码如下:</p> <pre><code>if ( databus.frame % 5 === 0 ) { this.player.shoot() this.music.playShoot() }</code></pre> <p>再次点击工具栏中的「预览」,微信扫描二维码,在手机上体验明显感受到子弹发射更为密集。</p> <p><img class="aligncenter size-full wp-image-978488" src="http://images.ifanr.cn/wp-content/uploads/2018/01/1-9.gif" alt="" width="180" height="320" /></p> <p>同理,我们依旧在 main.js 中定位到第 42 行,将 databus.frame % 30 === 0 中的 30 修改为 5,敌机数量增加。</p> <p>改动后代码如下:</p> <pre><code>enemyGenerate() { if (databus.frame % 5 === 0 ) { let enemy = databus.pool.getItemByClass('enemy', Enemy) enemy.init(6) databus.enemys.push(enemy) } }</code></pre> <p><img class="aligncenter size-full wp-image-978490" src="http://images.ifanr.cn/wp-content/uploads/2018/01/2-6.gif" alt="" width="180" height="320" /></p> <p>如果我们想一次性发射三发子弹可以吗?答案是肯定的。</p> <p>选择文档树中 js 文件夹中的 index.js 文件,定位到第 115 行。</p> <p><img class="aligncenter size-full wp-image-978505" src="http://images.ifanr.cn/wp-content/uploads/2018/01/14-1.png" alt="" width="1000" height="662" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/14-1.png 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/14-1-360x238.png 360w, http://www.ifanr.com/wp-content/uploads/2018/01/14-1-768x508.png 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>我们将 this.x + this.width / 2 &#8211; bullet.width / 2 赋值给 middle 变量,添加循环,middle 左右各移动 30 位置再加弹孔。</p> <p>改动后代码如下:</p> <pre><code>shoot() { for (let i = 0; i &lt; 3; i++) { const bullet = databus.pool.getItemByClass('bullet', Bullet); const middle = this.x + this.width / 2 - bullet.width / 2; const x = !i ? middle : (i % 2 === 0 ? middle + 30 : middle - 30); bullet.init( x, this.y - 10, 10 ) databus.bullets.push(bullet) } }</code></pre> <p><img class="aligncenter size-full wp-image-978492" src="http://images.ifanr.cn/wp-content/uploads/2018/01/3-5.gif" alt="" width="180" height="320" /></p> <p>事实上,当我们改为三发子弹齐发时,只需把飞机停放住,这游戏就能一直进行下去…</p> <p>如果你想直接修改「飞机大战」初始分数也十分简单,这里不做详解,大家可以自己研究体验一下。</p> <p><img class="aligncenter size-full wp-image-978506" src="http://images.ifanr.cn/wp-content/uploads/2018/01/15-5.jpg" alt="" width="1000" height="877" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/15-5.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/15-5-360x316.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/01/15-5-768x674.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h3><span style="color: #605eac;">使用引擎创建小游戏</span></h3> <p>刚才我们已经尝试在「微信开发者工具」中,完整地体验新建小游戏项目的方法。但我们都知道,游戏开发是离不开框架的。</p> <p>接下来,我们就以白鹭(Egret)引擎为例,讲解如何利用引擎,进行小游戏开发。</p> <p>既然是要使用白鹭引擎,那么 Egret Launcher 就是必不可少的了。我们可以到白鹭官方下载最新版本的 Egret Launcher。</p> <p><img class="aligncenter size-full wp-image-978507" src="http://images.ifanr.cn/wp-content/uploads/2018/01/16-4.jpg" alt="" width="1000" height="506" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/16-4.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/16-4-360x182.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/01/16-4-768x389.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>除此之外,如果想要调试小游戏,或是提交小游戏审核,同样需要「微信开发者工具」。</p> <p>使用最新的 Egret Launcher 创建 5.1.2 及以上版本的项目,项目名字叫作「test」。新建时缩放模式选择 <code>fixedWidth</code> 。</p> <p>在新建好的项目上点击「发布设置」。</p> <p><img class="aligncenter size-full wp-image-978489" src="http://images.ifanr.cn/wp-content/uploads/2018/01/1-47.jpg" alt="" width="1000" height="616" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/1-47.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/1-47-360x222.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/01/1-47-768x473.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>「发布设置」中已经默认填写了微信「小游戏开发辅助」的 AppID,无需更改,仅用于调试项目。</p> <p>项目名称填写「test」。</p> <p><img class="aligncenter size-full wp-image-978491" src="http://images.ifanr.cn/wp-content/uploads/2018/01/2-45.jpg" alt="" width="1000" height="658" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/2-45.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/2-45-360x237.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/01/2-45-768x505.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>点击确定按钮后,弹出提示面板,选择「使用微信开发者工具打开」(注:只有 Egret Launcher 1.0.37 以上版本会显示该选项)。</p> <p><img class="aligncenter size-full wp-image-978493" src="http://images.ifanr.cn/wp-content/uploads/2018/01/3-43.jpg" alt="" width="1000" height="359" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/3-43.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/3-43-360x129.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/01/3-43-768x276.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>首次选择会需要下载一个支持包,安装即可。</p> <p>安装完成后再点击「使用微信开发者工具打开」,Egret Launcher 便会自动打开微信开发者工具,进入后可以看到白鹭提供的初始化小游戏界面。</p> <p><img class="aligncenter size-full wp-image-978494" src="http://images.ifanr.cn/wp-content/uploads/2018/01/4-33.jpg" alt="" width="1000" height="667" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/4-33.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/4-33-360x240.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/01/4-33-768x512.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>点击工具栏中的「预览」,打开微信扫描二维码,即可手机查看小游戏。</p> <p><img class="aligncenter size-full wp-image-978495" src="http://images.ifanr.cn/wp-content/uploads/2018/01/5-24.jpg" alt="" width="1000" height="877" srcset="http://www.ifanr.com/wp-content/uploads/2018/01/5-24.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2018/01/5-24-360x316.jpg 360w, http://www.ifanr.com/wp-content/uploads/2018/01/5-24-768x674.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>目前的这款预置的小游戏操作性还不高,我们会在未来的小游戏开发教程中,着重讲解使用白鹭引擎开发小游戏的方法。</p> <p>关注「<span style="color: #605eac;">知晓程序</span>」公众号 ,在微信后台回复「<span style="color: #605eac;">报告</span>」,获取《小游戏行业发展报告(2018)》高清 PDF 版。</p> <p><strong><img class="aligncenter size-full wp-image-932929" src="http://ifanr-cdn.b0.upaiyun.com/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="http://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>