收藏
评论

《吞噬宇宙》微信小游戏这块砖怎么搬(开发日志)

 (传送门)


【游戏简介】


    《吞噬宇宙》(原名:吞噬星球在微信小游戏端已注册),游戏规则非常简单,进入游戏后玩家控制一个小星球,通过在屏幕的移动通过游戏内模拟天体引力的作用吸引比自己小的星球,小星球会变成自己的环绕卫星,自己通过吸收其质量慢慢变大,去吞噬更大的星球,期间玩家会随体积越来越大会遭遇到各种不同的星球,并且避免直接与其他星球发生碰撞或者被大天体给吸收。



【开发日志】

    《吞噬宇宙》是我第一次独立开发并且正式发布运行的手机端游戏,期间所使用的开发环境、工具、开发语言都是第一次使用很多是一边开发一边学习的,包括游戏内的前后台、代码、动画、图片、声音及整个软件注册审核都只有自己一个人完成所以开发时间比较久,加上学习时间大约有2个多月。以下是我整理的完整的实现一个基本的微信小游戏至少需要的内容。

我将分为以下顺序介绍:

一、引力物理引擎逻辑模型

二、Cocos +TypeScript开发简介

三、小游戏社交属性——微信小游戏开放域

四、小游戏数据持久化——微信云开发(NoSql非关系型的数据库


【引力物理引擎逻辑模型】

1. 球体主属性



2. 坐标计算距离及夹角


球体坐标P(0,0)计算在与坐标P(X,Y)上球体的距离和夹角:

距离:C =√X²+Y²

反三角函数计算出,两球的夹角β :

-------第一象限---------

α = arcsin(X/C);

β = α + 0;

-------第二象限---------

α = | arcsin(Y/C) |;

β = α + 90°;

-------第三象限---------

α = | arcsin(X/C) |;

β = α + 180°;

-------第四象限---------

α = arcsin(Y/C);

β = α + 270°;


3. 球体受力


通过引力公式:F=G*M*m/r²

根据(2)得到的,

夹角为β及距离r计算

两球位置关系在各象限下

X、Y轴上的分力:

β = 两球的夹角

-------第一象限---------

β:0-90

α = β - 0

X = A * sin(α)

Y = A * cos(α)

-------第二象限---------

β:90-180

α = β - 90

X = A * cos(α)

Y = -(A * sin(α))

-------第三象限---------

β:180-270

α = β - 180

X = -(A * sin(α))

Y = -(A * cos(α))

-------第四象限---------

β:270-360

α = β - 270

X=-(A * cos(α))

Y=A * sin(α)


4. 受力最终转化为坐标完成运动

加速度:ax = Fx/m、ay = Fy/m

X轴经过△t时间的速度:Vx = Vx0(当前速度) + (ax * △t)

Y轴经过△t时间的速度:Vy = Vy0 + (ay *△t)

X轴经过△t时间的位置:Px = Px0 + ( (Vx0 + Vx) / 2  * △t )

Y轴经过△t时间的位置:Py = Py0 + ( (Vy0 + Vy) / 2 * △t )


【Cocos +TypeScript开发简介】

Cocos是目前微信小游戏开发非常流行的开发工具、我的使用感觉是Coscos无论在前台可视化、代码分离都做得非常好,并且与微软VSCode编辑器和微信官方提供的“微信web开发者工具”可以说无缝衔接,举个非常常用的例子,我可以在VSCode中编写代码,直接用Cocos编译项目发布,马上就可以在“微信web开发者工具”中看到我小游戏在微信端运行的结果非常方便。

记录几个Cocos重要的知识点,不弄清楚以下几个内容根本无法开发一个游戏:

1. Node节点

Cocos中所有的元素都已一个cc.Node节点显示在层级管理器中,如果某个节点需要使用不同的属性和功能,那么则需要在这个cc.Node上添加组件(cc.Component)、比如物理碰撞组件Collider、图片显示Sprite、按钮Button等等。

2. 碰撞器(Collider)和钢体(Rigid Body)

碰撞是游戏中非常重要的概念,多物体的交互、子弹的射击、边界的设置,等等。在Cocos中要实现两个物体碰撞,首先它们必须在同一个分组,可以在项目-项目设置中添加分组,默认为default分组使用方式:

cc.director.getCollisionManager().enabled = true;//开启碰撞

cc.director.getCollisionManager().enabledDebugDraw = true;//碰撞边缘描边调试的时候可以打开

碰撞有三个回调函数分别是:

碰撞产生时调用 onCollisionEnter: function (other, self)

碰撞保持时调用 onCollisionStay: function (other, self)

碰撞结束时调用 onCollisionExit: function (other, self)

其中要注意一点,这两个参数的使用方式

let otherStar:PhysicsCircle =other.getComponent("组件类名")

用这种方式可以直接转成自己想要的组件。

3. 摄像机(Camera)

Camera在游戏中也非常有用,了解Camera可以实现游戏分屏显示、小地图、指定区域视野缩放等等,在Cocos中内容都是通过Camera显示出来的,场景中默认会有一个camera对应default分组,如果要添加小地图、双屏或者UI,可以添加一个camera对应新的分组即可。

4. 预设体(cc.Perfab)

我们在游戏运行过程中有很多东西,都是需要动态加载出来,如怪物的刷新、背包内的物品、射击的子弹等等。这里Cocos的做法是,我们首先在编辑器里任然通过Node和其他Component组装预设好我们需要加载的模型,然后将这个节点直接拖拽到资源管理器中,Cocos会自动帮我们生产一个后缀为“.prefab”的文件保存在我们项目中,如果我们需要加载,则按一下步骤操作,声明、初始化、然后赋给某一个已存在的Node。

声明:


初始化:


赋给某节点:

5. 动画(Animation)

Cocos给节点添加动画类似于flash编辑器,需要插入关键帧,并且帧必须带有类型,比如想要做透明度变化必须添加Opacity帧,旋转必须添加Rotation帧,当然每个节点可以插入多个不同类型的帧,Cocos动画有多种播放模式可以选择、一次性(Normal)、循环(Loop)、来回(PingPang)、倒放(Reverse)。并且有一点非常重要,可以在帧上添加事件,我游戏开发中使用的是在一个新的星球被加载到屏幕中的时候,不是突然出现的,而是播放一个刷新的动画,然后再动画播放完成的时候触发添加一个预设体(cc.Prefab)的事件。


【小游戏社交属性——微信小游戏开放域】

我们在做微信小游戏的时候,有个非常重要的事情就是我们需要做基于微信的社交属性,例如“最高记录”、“好友排名”、“微信群排名”等等。如果我们只显示整个游戏所有用户的排名,我们可以将数据存入自己的数据库中,但是我们如何知道某个用户他和他自己好友或者自己在群中的排名呢?这里就必须使用官方提供的“开放数据域”。

基本规则是微信提供一个与主域完全隔离的环境,只能接受主域发送的消息,无法返回消息,主域只能调用开放域程序生成一张图片来显示内容。这其中如果要实现排名,则必须将数据通过开放域存放到微信中,再通过微信接口调用该用户好友的数据,来实现排行榜等功能。

并且开发域本身也是一个完全独立可运行的程序,而且需要按照微信官方提供的文件结构在config中进行配置,这里Cocos与微信官方合作提供了一个较为方便开发者的配置方式https://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame-sub-domain.htmlCocos官方有详细的配置说明,我们在开发中需要进行配置。

配置完成后我们将有会有两个项目,主域和开放域项目,以下微信接口只能在开放域中调用:

微信官方说明:https://developers.weixin.qq.com/minigame/dev/guide/open-ability/open-data.html


【小游戏数据持久化——微信云开发(NoSql非关系型的数据库)

当我们开发的微信小游戏需要存储一些用户私有数据、如购买的皮肤、已经获得的装备、成就、充值的货币等等,首先这些数据完全可以在主域中使用自己的数据库存储因为无需与好友进行交互。但是我们不能再使用传统的关系型数据库像sqlserver和oracle,这里就没必要说原因了,首先微信小游戏就规定只运行使用JS开发,我们就很难访问这些数据库了,那么这里需要用到的数据库是“文档型数据库”,简单说就是通过Json实现数据的增删查改、和持久化,这种“文档型数据库”也非常有好处,我们在小游戏的快速开发中无需再去做大量的表、字段、主外键关系的设计。而是完全的在增删查改中都使用Json,有钱的话大项目可以自己买数据库,我因为是个人开发,所以不太可能另外购买数据库服务器,这里微信非常方便的提供了一个解决方案,微信“云开发”。


入口


(数据库控制台)

地址https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html。上面有详细的开通流程、和接口方法。

简单介绍一下增删查改的接口



“这就是我开发了两个半月的微信小游戏,我喜欢计算机、游戏、打篮球。。。哈哈毕竟一个人做还是有些枯燥的,希望以后有机会可以参与到更多更有趣的游戏开发中。”


(长按体验游戏)




最后一次编辑于  2019-05-31
收藏

2 个评论

  • Ocean
    Ocean
    2019-08-24

    感谢分享!

    2019-08-24
    赞同
    回复
  • 沙子口强哥
    沙子口强哥
    2019-06-27

    请问,你的程序里是即使用了云开发的数据库,又使用了开放域吗? 我使用云数据库没问题,但是一旦增加了开放域("openDataContext": "src/myOpenDataContext"),程序编译就会出错 有遇到过类似问题吗?


    2019-06-27
    赞同
    回复
登录 后发表内容