开发实时联网对战的微信小游戏

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

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

这次教程我们就来讨论 **如何在完全不懂服务器开发的情况下做一个实时联网对战的微信小游戏** (联网飞机大战)。

为了能通读这篇文章,你最好:

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

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

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

最简单的步骤

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

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

运行效果

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

运行效果如下:https://www.bilibili.com/video/av21409295/

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

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

如何从零开发

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

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

玩法:这个项目准备做成可以容纳超多人同时在线的飞机大战,所有设定基本上和微信小游戏官方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秒 - 判定胜负结果:两队最后一人同时淘汰时平局;某队先于敌队全员淘汰则败

物理引擎:来自微信官方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; }

测试、发布:灰常好玩,下阶段准备做成四个阵营的玩法

开发体验

在基本素材、组件(物理引擎)等预备充分的情况下,花了不到两个小时就将一个单机游戏改造成了联网对战的游戏,而且逻辑也足够健壮,效果还是很酷的。再加上SDK是开源的,有什么问题很容易定位。

总体来讲,Bmob Game SDK真正拉低了网络游戏开发的门槛,完全没有了以前庞大、繁杂的后端开发和服务器运维工作,让很多受限于资源、只能开发单机游戏的团队和项目有了新的出路~

获取Demo、SDK完整源码的方式:加原作者QQ(2967459363)

教程来源:Bmob后端云官网(www.bmob.cn)

原文发布于微信公众号 - 极乐技术社区(wxapp-union)

原文发表时间:2018-04-03

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AI科技评论

AI研习社「求翻译」功能上线啦~快来上传文章和视频吧!

当你埋头苦学的日日夜夜,一定有啃过艰深枯燥的学术论文,却苦于自己的英语不够好而不得不比旁人多花几倍时间。当你面对国外最新发布的研究成果,一定也想过第一时间获取资...

843
来自专栏编程之旅

iOS漫谈——对于项目架构的思考

又一次的版本更新上架,心情容不得片刻舒缓,新的迭代任务又明白的摆在桌面上。今年上半年自己琢磨完ReactiveCocoa之后,对手上了项目做了MVVM架构的尝试...

1273
来自专栏程序人生

Botwall - Bot Firewall??

Mountain View的El Camino Real和Castro交界的地方,有一栋大楼,地址是:800 W El Camino Real,里面入驻了不少创...

3707
来自专栏Java面试通关手册

Github上发布一天Star数破4K的项目了解一下

随着时间的推移,我们大家最熟悉的Windows操作系统不断发展。现在Windows已经发展到了Windows10版本。可能大家和我一样,真正使用Windows操...

1323
来自专栏Eugene's Blog

2018黑帽SEO优化排名技术方法大总结分类目录文章标签友情链接联系我们

7472
来自专栏FreeBuf

说说最近的一个电商网站“钓鱼”案例

在过去的两年里,利用被黑的电商网站对客户的信用卡信息进行钓鱼,这种手法已经非常盛行了。 历史案例 此前我们曾报告过多起案例,黑客在付款页面和支付模块加上了恶意代...

2596
来自专栏施炯的IoT开发专栏

移动物联网 之 智能家居

本系列文章结合时下正热的“物联网”概念,介绍实现“智能家居”的一套解决方案。 引言     随着科技的发展,手机已经不简单地是个通讯设备,而是人们生活的必需...

2578
来自专栏梁源的专栏

iOS10凌晨1点发布,小源带你一起升级体验过程

1023
来自专栏FreeBuf

补卡的糟糕经历引发的思考:一点黑客技术让我们不再泄露那么多数据

概述: 笔者因为孩子生病n次去医院输液,终于在最后一次打吊针的时候被人偷走了手机(医院果然是作案高发区),于是有了我补办手机卡的经历。一张电信手机卡在电信营业厅...

2449
来自专栏钱塘大数据

【干货】一篇文章读懂物联网具体架构,推荐收藏!

导读:本文将为你分析物联网的架构方法,全文分为两部分,第一部分从一个抽象的角度了解IoT的参考架构,将涵盖更具体与完整的架构中的各种定义,而第二篇文章将通过实际...

4676

扫码关注云+社区

领取腾讯云代金券