CreatorPrimer|飞机大战(二)

之前的飞机大战一我们实现了地图场景的滚动和简单的直上直下的子弹的发射,在之前的基础上,对线性发射器做了简单的修改,实现了如下效果:

飞机大战-子弹发射1.gif

飞机大战-子弹发射2.gif

下面我来就介绍一下,实现上面效果是如何实现的,先看视频:

1、子弹角度计算

子弹发射器

这里为子弹发射器增加了一个rotation属性用于控制子弹发射的角度,但是如何计算子弹的飞行终点坐标呢?

image.png

不好意思,请允许我重新翻开初中的数学关于三角函数章节,通过直角三角形中,角度与边的关系可以计算出飞行终点,我们根据上图,看下我们已知的参数:
1. 子弹角度β,是我们的组件属性
2. 飞行距离r,这里为了简单我使用了常用cc.winSize.height

因此通过三角公式可以得出:

x = r * sin(β)
y = r * cos(β)

需要注意的是JS中Math.sin\cos函数中的参数是弧度单位,每1角度为 Math.PI / 180 弧度,下面看终点的计算代码:

 _emmitNode() {
        //创建子弹
        let node = cc.instantiate(this.prefab);
        node.position = this.offset.add(this.node.position);
        node.parent = this.node.parent;
        node.rotation = this.rotation;

        //计算终点
        let endPoint = cc.v2();
        endPoint.x = cc.winSize.height * Math.sin(this.rotation * RADIAN);
        endPoint.y = cc.winSize.height * Math.cos(this.rotation * RADIAN);

        //计算飞行持续时间
        let distance = endPoint.sub(node.position).mag();
        let duration = distance / this.speed;

        //运行动作
        let moveBy = cc.moveBy(duration, endPoint);
        let removeSelf = cc.removeSelf();
        let sequence = cc.sequence(moveBy, removeSelf);
        node.runAction(sequence);
    }

2. 动态旋转

动态旋转很简单,在update每帧调用函数中,不断修改rotation属性值,看下面代码:

update(dt) {
     if (this.spin === 0) {
         return;
    }
    this.rotation += dt * this.spin;
}

spin在这里是一个旋绕速度参数,相同于电风扇上的摇头马达,通过子弹产生速度、飞行速度、旋转速度你可以创造了各种样式花丽的子弹效果,下面是我弄的几张截图:

给飞机挂了两个带spin参数的发射器,一个spin为360顺时针旋转,一个spin值为-360逆时针旋转,像对一凤凰的翅膀。

这个是挂了4个发射器,起始rotation分别为0、90、180、270,飞行速度快一些,spin值都是一样的,像刮起的凤凰旋风。

3. 小结

我们看似复杂的子弹效果,其实每一个都是用的直线动作,通过挂载多个子弹发射器,调节枪口角度、角度动态旋转可以生成出各式花样。工程源码可以在公众上回复“子弹发射器”或“LineEmmiter”获取,感谢你的阅读!

实战:微信小游戏与腾讯云

本节的主要内容
1. 微信小程序公众号
2. 小程序公众号设置
3. 腾讯云微信小游戏服务
4. 小结

一、微信小程序公众号

微信公众号平台提供四类公众号服务:

服务号、订阅号、小程序、企业号

我们这里介绍的微信小游戏属于微信小程序中的一个特殊分类,它是通过微信公众平台提供的小程序后台进行管理。

微信公众号

要开发微信小游戏,首先要注册小程序公众号。在注册过程中,第一次选择小程序服务类目时,请选择游戏,注册完成后将不能被修改。如果您选择了非游戏的类目,以后不能更改为游戏,只能重新注册,所以需要特别注意。

微信小程序-游戏类目

上图是注册完成后,基本设置中的服务类目信息。

二、小程序公众号设置

微信各类公众号统一使用登录入口:https://mp.weixin.qq.com

下面介绍成功注册小游戏公众号之后需要做的配置工作,首先登录公众号管理后台。

1、开发者ID与密钥

通过左则导航栏进入开发设置:

我们这里要获取公众号的AppID、AppSecret,AppID直接可以看到(步骤3),AppSecret需要点击旁边的重置(步骤4),使用微信扫码认证即可看到,在稍后的前后端代码中会使用到这两个字符串。

开发者ID下方的服务器域名设置暂时不用设置,因为我们这里使用腾讯云为我们提供的小游戏解决方案为后端开发环境,只有等进入生产阶段时才需要配置。

2. 腾讯云服务

设置中的开发者工具是小游戏公众号集成的腾讯云服务,它为小程序、小游戏提供的后端解决方案,可以帮助开发者更加方便、快捷、可靠的构建小程序(小游戏)。

image

打开开发者工具页面,可以看到腾讯云TGit权限管理两大功能模块。我们这里重点介绍腾讯云小游戏解决方案及使用。

2.1 腾讯云小游戏解决方案

腾讯云小游戏解决方案的核心功能是为开发者提供便捷的后端服务器环境,如果您当前还没有自己的公网服务器,或者对linux服务器配置比较陌生,强烈建议您在开发者工具中开通腾讯云服务,它包含以下主要功能:
1. Nodejs与PHP服务端程序运行环境
2. Mysql与phpMyAdmin数据库管理后台
3. 二级域名与SSL服务
4. 素材存储与加速

腾讯云小游戏解决方案,可以让小游戏开发者近乎零成本的情况下,开始小游戏的开发与创作。

2.2 公众号关联腾讯云

需要注意的是,一定要在小游戏公众号中开通、注册腾讯云帐号,这样做小游戏公众号与腾讯云帐号才会进行关联,具体流程根据提示即可轻松完成,这里就不在详述。

开通成功后,可通过小游戏公众号直接登录关联的腾讯云微信小游戏服务。(通过此处登录腾讯云,可以避免在腾讯云众多的服务中迷失)

三、 腾讯云微信小游戏服务

进入腾讯云微信小游戏服务页面,在基本信息选项卡中同样可以看到小游戏公众号的相关信息。点击左侧游戏服务端部署,进入微信小程序服务器部署页面,对你没有看错,是进入的微信小程序页面。

前面提到过微信小游戏是小程序的一个特殊子类,微信小游戏云服务也是微信小程序云服务的一个子类,所以这里进入的是微信小程序页面。

image
上图是微信小程序公众平台腾讯云小程序服务关系结构图。

3.1 初始化服务器开发环境

如果您是第一次进入微信小程序服务端部署,首先会看到一个开通开发环境的向导,一共7个步骤。建议仔细阅读这个向导,了解相关微信小程序前后端所用到的工具和流程。

image.png

这里重点关注三点:
1. 微信开发者工具:它是一个桌面应用程序,此工具可以对微信前端应用预览、调试、上传外,还集成了腾讯云服务端项目的上传、启动、停止、调试等功能,以及服务器状态、域名信息的查看。
2. 下载小游戏Demo:本教程介绍的是微信小游戏开发,这里以Nodejs服务端为例,我们下载Nodejs版小游戏Demo,它包含了完整的小游戏前后端代码,我们将在另外的章节对此Demo源码进行解读。
3. 初始化服务器:在进入服务端后台管理界面之前,需要使用微信开发者工具对服务端开发环境进行初始化。要注意的是,在上传服务端Demo代码之前,需修改源码中的AppId、AppSecret、数据库密码。

下图是微信开发者工具中集成的腾讯云操作菜单:

点击上传测试代码,初次上传选择模块上传,并勾选部署后自动安装依赖:

更具体的操作方法请参考开通开发环境向导,在此不做过多讲解。通过微信开发者工具集成的腾讯云功能菜单,我们可以非常方便地上传代码、启动、调试、停止服务器,这对没有linux系统服务端部署经验的同学来说极具杀伤力,也节省更多的时间。

当服务器部署成功,在微信开发者工具栏上点击:腾讯云->详情,可以查看当前腾讯云提供的https、wss、download等相关服务端URL地址。在客户端Demo代码中,修改config.js中的host变量为开发环境request域名,如下图:

在模拟器窗口中,可以体验到一款飞机游戏,它在启动时会向用户获取微信授权,点击允许,如果提示授权成功,恭喜您!您前后端代码配置成功,此时可进入腾讯云小程序后台管理界面。

如果不想使用腾讯云小游戏服务端的支持,除了需要有自己的公网服务器、备案域名外,同时您的服务器还需部署https和wss协议的支持,SSL证书可以通过腾讯云服务获取(腾讯云提供免费SSL证书服务)。

如果您是个人开发者,要解决上述问题在无疑是非常耗时的,现在通过腾讯云小游戏集成解决方案,可以在十几分钟就可搞定微信小游戏前后端开发环境。

3.3 小游戏服务器管理

回到腾讯云微信小游戏后台,选择游戏服务端部署,可以看到开发环境、生产环境两个模块,至此可以打开服务器管理界面了。

image.png

在开发环境模块中,点击立即前往,进入微信小程序开发环境页面

image.png

此页面非常简洁,但提供的功能却很重要:
1. 二级域名与证书:前后端通过此域名进行数据通信,同时提供SSL数据加密服务。SSL在此非常重要,因为腾讯要求微信小游戏web请求必须使用https协议。
2. MySQL数据库:腾讯云对微信小程序开发者是非常贴心的,不仅提供MySQL数据服务器,还附赠phpMyAdmin数据库管理工具,极大降低开门槛。
3. 开发环境:一个常规的游戏服务器,通常有三部分组成:1)游戏逻辑服务器;2)数据库服务器;3) Web服务器。 此处显示了腾讯云提供的这三类服务器的配置信息。通过修改环境按钮,可以更改游戏逻辑服务器为Nodejs或PHP。
4. 资源下载:此处可以下载Nodejs、PHP服务器相关Demo代码与SDK,利用这些资源我们可以快速学习和构建服务器代码。

对于开发者来说,最为重要的是游戏逻辑服务器Nodejs或PHP,选择自己擅长的服务端开发语言,查看相关技术文档和SDK。

四、小结

本章主要介绍了微信小程序公众平台,微信小游戏是小程序的一个特殊类目。腾讯为了方便小程序公众号的内容创作,在腾讯云中提供了小程序、小游戏的后端从加密码域名服务器的完整后端解决方案,同时在微信开发者工具中也集成了腾讯云服务器的管理控制。

image

微信小程序公众号、微信开发者工具、腾讯云三位一体的闭环服务,构成微信小程序最佳开发解决方案。


欢迎关注「奎特尔星球」公众号,欢迎大家投稿,来我们一起成长!

奎特尔星球微信公众号

奎特尔星球博客网站