如何在完全不懂服务器开发的情况下做一个实时联网对战的微信小游戏 ...

发布：2018-05-08 14:22浏览：次来源：网络作者：cola

根据微信官方对外公开的消息，微信小游戏的脚步越来越接近了。它的开发者资格门槛和使用者门槛都很低，以后必将引爆一波"全民开发小游戏"浪潮。

官方的开发工具创建项目即可获取 `打飞机` 的源码，这是一个很小但五脏俱全的2D游戏，相信大多数嗅觉灵敏的程序员小哥哥们都已经体验并且亲手改造过啦。

但是如果你想借助微信的平台，做一个交互性、可玩性很强的 `联网游戏` ，就有一定的难度啦。，第一波流量红利你也能轻松抓住！这次教程我们就来讨论 **如何在完全不懂服务器开发的情况下做一个实时联网对战的微信小游戏** （联网飞机大战）。

为了能通读这篇文章，你最好：

已经掌握开发简单的微信小游戏，能看懂官方打飞机源码就行，甚至会用 Javascript 输出HelloWorld也行
略懂Java，其实不懂也行，在JS的基础上很容易引申，主要是要有面向对象的思想

下文重点都是讲如何快速上手开发联网的微信小游戏，但如果你懂得一些U3D开发，Bmob官方也同时提供了 Unity3D版本的Demo+SDK，两者可以跨平台互通一起玩，且接口规范高度一致，基本上覆盖市面上所有的主流终端

PS：微信小游戏、Unity3D的SDK都是开源的,欢迎各位纠错

如何在完全不懂服务器开发的情况下做一个实时联网对战的微信小游戏 ...(图2)

最简单的步骤

获取比目游戏云服务 (下称官网)的账号，文章下方有获得方式；
在官网下载微信小游戏Demo+SDK，导入到微信开发者工具(下称工具)，并修改AppKey；
在官网配置玩家同步属性，并发布下载的云端代码，然后在官网选择一个云服务器开启(PS:云服务器是免费的)；
试运行Demo，如果console没有报错的话，点击工具的预览，用微信扫描二维码；
现在，就可以在游戏内创建房间，体验电脑与手机联网对战啦；

接下来大概介绍一下微信小游戏项目开发的要点，云端代码的详解和U3D版本的教程将陆续推出。

运行效果

左边的是微信小游戏-开发者工具的游戏页面，与右边的 Unity3D-MacOS-Editor 跨平台玩

运行效果如下：

https://www.bilibili.com/video/av21409295/

不得不说程序员自己来做UI真的丑得可以，那个"房间"界面真的无力吐槽

目前的Demo跨平台玩耍还有点小问题，例如玩家、怪物的移动速度不统一。但同平台对战是高度一致的。这个问题与SDK没有关系，都是Demo本地项目的参数设置，主要是因为Unity项目都用的是绝对值，微信小游戏项目都是相对值，后续Unity也采用相对值的方式，完善Demo。

如何从零开发

论游戏开发的经验，相信各位读者中比我厉害的人多了去了。我这里就根据我个人的开发历程，围绕联网飞机大战这个项目，讲一下从零开发游戏的步骤吧。(嫌麻烦的可以不用看这一篇)

确定游戏主题、玩法；
理清多个客户端之间需要同步的属性、互相通知的事件；
分析客户端与服务器需要交互的事件；
制作/收集图片、动画、音效素材；
开发/照搬游戏世界的物理引擎，包括物体渲染、移动、碰撞检测(以及内存管理)等；
先开发服务端游戏逻辑（Java云端代码），有利于理清整个游戏的逻辑；
后开发客户端游戏逻辑、接入SDK；
测试、发布；

如何在完全不懂服务器开发的情况下做一个实时联网对战的微信小游戏 ...(图3)

玩法：这个项目准备做成可以容纳超多人同时在线的飞机大战，所有设定基本上和微信小游戏官方Demo一样，增加了几个设定：


- 有四种造型、级别不同的Bot(有些人习惯称为 '电脑'，也可以称为'飞机NPC')
- 第3、4级的Bot可以开火，子弹(下称Fire)飞行速度与玩家一致，4级Bot的开火频率更高
- Bot有生命值(不再是一碰就死)，分别是2、3、4、4，表示可以承受的Fire攻击次数
- Player(玩家)和Bot都分为两个阵营，阵营内无队友伤害
- Player的阵营由服务器随机划分，也可以改成玩家自己决定
- 刷怪逻辑放在云端，指定新产生的Bot的阵营、位置、类型
- Player受到伤害即淘汰，Fire碰到任何物体都消失
- Player之间、Bot之间、Player与Bot 如果发生碰撞，会同归于尽
- Player的开火暂时做成自动的，而不是按键开火
- Player的开火事件(开火坐标)是直接发送到其它客户端，不经过云端代码
- Player的淘汰交由云端处理，由云端校验后，再把该事件和胜负判定分发下去
- Bot的淘汰判定交由云端处理、分发
- 当某一方Player全部死亡时，另一方胜利；双方各剩一人时同归于尽则平局

客户端间属性同步、事件通知：玩家仅有两个属性需要自动同步、分发，一个是位置，另一个是分数；直接同步的事件仅有开火


- 位置：这是一个2D游戏，所以玩家位置可以用float[2]类型表达
       但是为了保持一致性，Demo用了int[2]，数值由0-65535，表达0%-100%
       (一致性，是指跨平台或分辨率、屏幕大小不同时，坐标需要达成一致最好用百分比)
- 分数：仅云端代码有权限修改，根据Player、Bot的击落事件加分
       可以在游戏结束时，结算成经验值，保存到Bmob数据库

- 开火：直接通知到其它客户端，仅记录Fire的起点坐标即可，也就是[0-65535,0-65535]
        表达成byte[]时，一个0-65535的int可以变成两个0-255的数字组成
        再加上需要标记这次通知的事件类型(开火)，这里定flag为50
        也就是开火时向其它玩家发送 [50, 0-255, 0-255, 0-255, 0-255]

客户端-云端交互事件：需要服务器做的事情有：保存房间信息；分配队伍；正式通知游戏开始；刷怪逻辑；判定Bot淘汰；判定Player淘汰；添加Player分数；判定胜负结果；战绩记录


- 房间、战绩信息：通过云端代码的Bmob数据库操作API完成
- 分配队伍：在客户端Scene.OnLoad后通知服务器，服务器进行队伍分配
          将玩家随机、均匀分成两队，然后下发，客户端处理完毕再通知服务器
- 正式开始：服务器确认所有客户端处理了队伍信息后，通知所有客户端开始游戏
- 刷怪逻辑：随机Bot的阵营、x轴位置、类型、名字，下发给客户端处理
- Bot淘汰：任意客户端上报'目睹'某Bot被击毁，云端即采信、下发、记分
          所谓'目睹'，就是客户端渲染时进行碰撞检测，发现这个Bot的hp为0
- Player淘汰：n个客户端'目睹'某Player被击毁，在短时间内n>=m，云端才采信、下发、记分
             当玩家仅有2、3人时，m为1，也就是上报即采信
             当玩家有4、5、6人时，m为2，不采信单个上报
             当玩家超过6人时，m为3，也就是起码3人上报才采信
             '短时间'目前是设为2000ms，也就是上报信息的有效期为2秒
- 判定胜负结果：两队最后一人同时淘汰时平局；某队先于敌队全员淘汰则败


素材：来自美工／Unity Assets商店


物理引擎：来自微信官方Demo(Sprite.js)／脑洞+造轮子／第三方途径下载


// 小改进后的矩形碰撞检测：
isCollideWith(sp) {
    if (this.visible && sp.visible) {
        let dis = sp.x - this.x;
        if (-sp.width < dis && dis < this.width) {
            dis = sp.y - this.y;
            if (-sp.height < dis && dis < this.height)
                return true;
        }
    }
    return false;
}

- Java云端代码：在上面第3点已经有说明，这里放几段代码：
- 测试、发布：灰常好玩，下阶段准备做成四个阵营的玩法
- 开发体验
  
  在基本素材、组件(物理引擎)等预备充分的情况下，花了不到两个小时就将一个单机游戏改造成了联网对战的游戏，而且逻辑也足够健壮，效果还是很酷的。再加上SDK是开源的，有什么问题很容易定位。
  
  总体来讲，Bmob Game SDK真正拉低了网络游戏开发的门槛，完全没有了以前庞大、繁杂的后端开发和服务器运维工作，让很多受限于资源、只能开发单机游戏的团队和项目有了新的出路~