用Unity开发扑克游戏小七的过程分享

650 阅读5分钟

缘由

年初和几个同学打牌,比较小众,可能只有我们这边才会玩的类型,叫定七,我们亲切的称呼它为小七。

因为大伙只有在假期才能聚在一起,于是乎有人提议,让我把小七开发成游戏,这样平时也可以一起玩玩,我欣然接受。

游戏类型思考

2D风格扑克联机游戏,素材不需要太多,四个花色和大小王图片即可。

游戏平台选择

首先要确定游戏的平台类型,是PC、手游、网页还是小程序。

PC的话不够灵活,要有电脑才能玩;手游要做Android和iOS端,和应用上架等问题,开发成本太高;网页和PC类似,都是要电脑才能玩。

那么分析下来,小程序会比较合适,玩起来也方便。

技术栈选择

引擎首选当然是Unity,加上C#语法和Java类似,开发成本低。

然后网络框架,联机游戏需要处理网络同步问题,经过一番研究学习,有以下几种方案:

  • Unity官方的Netcode GameObject网络框架
  • 其他收费的网络服务
  • 自己编写Socket通讯
  • 开源Mirror框架

Unity官方的Netcode GameObject网络框架

一开始看的是Unity官方提供的网络服务,其实还是不错的,他提供了一站式的网络服务:

  • Lobby:可以实现游戏大厅、创建房间、加入房间功能,服务免费使用,超出一定流量收费。这功能流量消耗不大,所以完全不用担心流量超出。
  • Netcode:实现玩家游戏对象的同步,即玩家们可以互相同步各自的信息,实现联机游玩效果,服务免费使用,超出一定流量收费。数据实时同步意味着时刻都有流量数据产生,所以在不注意的情况下,有可能会超出免费流量。
  • Relay:连接Lobby和Netcode的桥梁,玩家从游戏大厅进入房间到开始游戏就是依靠Relay来做跳转。

Unity原来有一个网络框架叫UNet,后来放弃了,又搞了这个Netcode GameObject,所以很多人觉得不靠谱,担心他哪天又放弃,这事Unity貌似不是第一次干了。

使用体验:

API简单,上手容易,跟着教程走很快就能完成功能。

提供了一站式服务所以不需要我自己去搭建服务器,省了不少事,就是目前开放的免费流量或许不太够,少人的联机游戏倒是没问题,人多起来后的流量消耗就得充值升级了,不过人多起来也赚钱了,这点小钱倒也无妨。

有坑,开发Web有兼容问题,这个对我的打击很大,毕竟我是要做小程序平台的,Web上网络框架会报错,去官方Git仓库下能找到同样问题的开发者提问,目前还没有很好的处理,意思说这还是一个朝阳项目,会越来越好的(但我可能等不及了)。

总结:

未来可期,但不是现在,我需要一个稳定好用的。

其他收费的网络服务

Photon等,我没有深入研究,这类平台做的事情大同小异,都是付费提供网络服务,看完Unity官方的之后我就对这类服务有大致了解了,所以放备用方案。

自己编写Socket通讯

自己撸其实是一个不错的锻炼机会,这一开始是作为我的Plan B,如果没有找到合适的我就自己写一个,应该会用Python或者Java来写,C#还是不够熟练。

不过自己写的话开发成本有点高,比较费时费力,最主要是bug会很多,边开发游戏还要边改网络bug,实在难受。

开源Mirror框架

上面说到,Unity官方有出过一款叫UNet的网络框架但是又停止更新了,于是社区开发了Mirror框架,沿用UNet的开发模式,并且做了很多的优化和改进,还开源,可以部署到自己的服务器上面,因为我有搭建自己的服务器,所以流量不是问题了。

支持服务端、客户端开发,以及服务客户端一体的模式,也就是本地局域网,功能齐全,框架稳定,最重要的是官方教程很详细,上手难度不大,很符合我这种小型项目的开发。

所以这成为了我的首选方案,最终也证明了这方案很不错。

开始开发

开发前先用Draw.io绘制好原型图,页面有:

  1. 玩家信息注册,给自己起个名字让大家看到
  2. 创建/加入房间,也就是游戏大厅
  3. 房间页面,4名玩家选好自己的位置,然后由房主开启游戏
  4. 游戏页面,这里是整体最复杂的地方,要写游戏逻辑、页面逻辑、数据同步等模块

一开始是很难下手的,好在Mirror框架提供了详细的稳定和丰富的示例代码,所以照葫芦画瓢,加上自己的定制,成功的把游戏框架给完成了,为了方便开发还做了简单的AI,出了一版PC单机版给同学们尝尝鲜,评价还不错,哈哈。

花了一个月左右的闲暇时间来开发这款游戏,完成后还是很有成就感的,当然bug不少,很多细节同学们都提了出来,慢慢在完善吧。

游戏界面分享

image-20230329164420049.png

image-20230329164808725.png

image-20230329164816684.png

image-20230329164837605.png