专栏首页知晓程序开发 | 手把手带你入门小游戏,「打飞机」也有逆天操作!

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

作者:刘凌歌

自从 12 月 25 日小游戏功能开放以来,越来越多的游戏从业者都开始重新审视小程序平台。其中,也有不少游戏公司和开发者,都在考虑做一款小游戏。

那么,小游戏开发,应该利用哪些工具呢?如何新建一个小游戏项目,并在真机进行调试、测试呢?今天,知晓程序就给大家带来小游戏开发入门的那些事儿。

无引擎创建小游戏

想要单纯体验小游戏开发的流程,我们可以先单纯地创建一个小游戏开始。

与小程序一样,开发同样需要用到「微信开发者工具」。我们可以到官方文档,下载到最新版的微信开发者工具。

关注「知晓程序」,回复「工具」,获取微信开发者工具下载地址。

需要注意的是,目前小游戏不提供公开注册。但可以在新建项目时,选择「AppID」下方的体验「小游戏」,即可跳过小游戏 AppID 的填写。

而且,与小程序不同的是,即使不填写 AppID,开发者也可以真机调试、体验小游戏。

下面,我们一起来看看如何利用「微信开发者工具」,创建小游戏项目吧。

1. 使用微信开发者工具新建小游戏项目

下载好微信开发者工具后,用微信扫码登录创建小程序项目。

填写小程序项目信息:项目目录自行选择,建议在无中文路径下选择新建空文件夹。这里知晓君新建了一个 test 文件夹。

AppID 处点选体验「小游戏」,项目名称可以自行填写,建议为纯英文。点击「确定」即可。

进入微信开发者工具,可以看到工具栏、模拟器、编辑器和调试器四大版块。

模拟器中有模拟器配置选项,我们可以修改模拟器中的显示分辨率,倍数,网络等。在开发中,我们需要考虑各种手机分辨率的问题,避免内容显示不完整等状况发生。

我们最常用到的是工具栏中的「编译」和「预览」。当我们改动代码后重新「编译」,模拟器就会做出相应更新,具体应用在下文会提到。

可能大家已经发现,在新建的项目中微信帮我们内置了一款「飞机大战」小游戏 Demo。

在文档树中的就是这款小游戏需要用到的代码和素材文件。其中入口文件和配置文件:game.js 和 game.json。game.js 引入并初始化包含整个小游戏的游戏场景、参与者(玩家飞机和敌方飞机)、游戏逻辑的主函数的 main.js 。

现在你就可以选择工具栏中的「预览」,用刚才登录微信开发者工具的微信扫描二维码,查看并体验这款小游戏了。

2. 改动代码试试

「飞机大战」中,玩家每隔 20 帧射一次,每隔 60 帧生成新的敌机。每帧检查玩家和敌机是否死亡,玩家死亡游戏结束,敌机死亡分数 +1。只有玩家可以射击,且射击方式固定,通过躲避敌机生存。

了解了它的设定,我们现在就可以自己修改一些参数,来体验这些改动带来的改变。

首先打开文档树中的 js 文件夹,选择 main.js,定位到第 145 行代码处,这段代码的功能是控制子弹射击速度

我们将 databus.frame % 20 === 0 中的 20 更改为 5 ,然后保存更改(在 Windows 中快捷键为 ctrl+s,Mac 中快捷键为 command+s),或点击工具栏中的「编译」。

改动后的这段代码如下:

if ( databus.frame % 5 === 0 ) {
  this.player.shoot()
  this.music.playShoot()
}

再次点击工具栏中的「预览」,微信扫描二维码,在手机上体验明显感受到子弹发射更为密集。

同理,我们依旧在 main.js 中定位到第 42 行,将 databus.frame % 30 === 0 中的 30 修改为 5,敌机数量增加

改动后代码如下:

enemyGenerate() {
  if (databus.frame % 5 === 0 ) {
    let enemy = databus.pool.getItemByClass('enemy', Enemy)
    enemy.init(6)
    databus.enemys.push(enemy)
  }
}

如果我们想一次性发射三发子弹可以吗?答案是肯定的。

选择文档树中 js 文件夹中的 index.js 文件,定位到第 115 行。

我们将 this.x + this.width / 2 - bullet.width / 2 赋值给 middle 变量,添加循环,middle 左右各移动 30 位置再加弹孔。

改动后代码如下:

shoot() {
  for (let i = 0; i < 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)
  }
}

事实上,当我们改为三发子弹齐发时,只需把飞机停放住,这游戏就能一直进行下去……

如果你想直接修改「飞机大战」初始分数也十分简单,这里不做详解,大家可以自己研究体验一下。

使用引擎创建小游戏

刚才我们已经尝试在「微信开发者工具」中,完整地体验新建小游戏项目的方法。但我们都知道,游戏开发是离不开框架的。

接下来,我们就以白鹭(Egret)引擎为例,讲解如何利用引擎,进行小游戏开发。

既然是要使用白鹭引擎,那么 Egret Launcher 就是必不可少的了。我们可以到白鹭官方下载最新版本的 Egret Launcher。

除此之外,如果想要调试小游戏,或是提交小游戏审核,同样需要「微信开发者工具」。

使用最新的 Egret Launcher 创建 5.1.2 及以上版本的项目,项目名字叫作「test」。新建时缩放模式选择

fixedWidth

在新建好的项目上点击「发布设置」。

「发布设置」中已经默认填写了微信「小游戏开发辅助」的 AppID,无需更改,仅用于调试项目。

项目名称填写「test」。

点击确定按钮后,弹出提示面板,选择「使用微信开发者工具打开」(注:只有 Egret Launcher 1.0.37 以上版本会显示该选项)。

首次选择会需要下载一个支持包,安装即可。

安装完成后再点击「使用微信开发者工具打开」,Egret Launcher 便会自动打开微信开发者工具,进入后可以看到白鹭提供的初始化小游戏界面。

点击工具栏中的「预览」,打开微信扫描二维码,即可手机查看小游戏。

目前的这款预置的小游戏操作性还不高,我们会在未来的小游戏开发教程中,着重讲解使用白鹭引擎开发小游戏的方法。

本文分享自微信公众号 - 知晓程序(zxcx0101),作者:让你更知微信的

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-02-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小游戏将开放注册!请收下这份最全入驻指南

    在刚刚结束的 2018 微信公开课 Pro 上,刚刚发布的「小游戏」自然地成为瞩目焦点之一。

    知晓君
  • 微信小游戏将变「大游戏」,「高抽成」超苹果该被吐槽吗?

    知晓君
  • 重磅!首份《小游戏行业发展报告》发布

    随着移动互联网的广泛普及以及网络游戏的快速迭代,全民娱乐环境迅速形成。游戏开始以新的形式,突破次元,突破时空,突破地理,突破人口边界,小游戏的时代来了。

    知晓君
  • 微信小游戏从了解到游戏发布的全流程技术介绍!

    微信小游戏推出后,LayaAir引擎也同步支持了微信小游戏的开发,由于很多开发者对微信小游戏的开发流程不够了解,不太清楚如何下手。为此,我们在2018年的开工首...

    Layabox Charley
  • 2个月就上线的微信小游戏,是如何诞生的?| TAPD经验谈

     导读  无论是男女老少都在玩的“跳一跳”,还是刷爆微信群的其他小游戏,相信这些你一定不陌生。 那么,微信小游戏与一般手游的研发有什么不一样?小游戏研发管理过...

    TAPD敏捷研发
  • 微信公布上线小程序游戏 腾讯应用宝安卓平台首发

    12月29日,微信6.6.1新版本在腾讯应用宝平台重磅首发,该版本正式上线微信小游戏,玩家可直接点击游戏体验,无需下载安装,即点即玩。同时,小游戏还加入了社交元...

    企鹅号小编
  • 微信小游戏的技术要点讲解

    微信小程序最近新上线了小游戏类目,今天我们就一起来看看这个小游戏到底是什么东西。

    疯狂的小程序
  • 小游戏专场:腾讯云Game-Tech技术沙龙上海站顺利落下帷幕

    9月14日腾讯云GAME-TECH技术沙龙小游戏专场在上海顺利举办,此次技术沙龙由腾讯云的资深专家,以及Layabox游戏引擎的大牛为游戏从业者带来了众多技术干...

    腾讯游戏云
  • 重磅!首份《小游戏行业发展报告》发布

    随着移动互联网的广泛普及以及网络游戏的快速迭代,全民娱乐环境迅速形成。游戏开始以新的形式,突破次元,突破时空,突破地理,突破人口边界,小游戏的时代来了。

    知晓君
  • 小游戏将开放注册!请收下这份最全入驻指南

    在刚刚结束的 2018 微信公开课 Pro 上,刚刚发布的「小游戏」自然地成为瞩目焦点之一。

    知晓君

扫码关注云+社区

领取腾讯云代金券