【技术圈】制作一款手游级别的小游戏是一种怎样的体验

爱丽镇楼（游戏角色之一，签到七天就送）

人在深圳，刚下公交。

距离启动辐射危城小游戏的开发已经过去6个月了。时至今日，辐射危城完整游戏包的体积已经来到了30M，总代码量超过10W行，已然达到了一个小型手游的规模。今天和大家分享一下，这样一款手游级别的小游戏是如何制作完成的。

一、简介

01概况

游戏名称：辐射危城

游戏平台：微信小游戏

开发时间：6个月

开发工具：Cocos Creator

编程语言：TypeScript

骨骼动画：DragonBones 5.6.0

地图编辑：闪影 0.9

02布景

相信有很多同学都不知道我们有做一些游戏开发相关的事情，知道我们在做游戏的同学则是会有这样一个疑问：

招联是一个消费金融公司，为什么会做游戏？

游戏开发源于南泥湾项目，目的是拓展新的流量渠道，为业务发展添砖加瓦。在辐射危城游戏开始开发之前，我们已经上线了10款小游戏，虽然有一些线上表现还不错，但是瓶颈也很明显：游戏性不足。

直到今年，一位专业的游戏策划加入了我们，游戏开发的方向开始聚焦精品游戏，于是辐射危城应运而生。

二、分工

专业化的分工能提高生产效率以及更精致的产出，游戏开发也不例外。这里介绍一下游戏开发项目中的分工协作。

01策划

策划主要负责的是游戏的玩法设计以及各类数值配置，在我们的项目中，策划还承担了游戏地图编辑的工作。

在项目前期，策划需要将自己的想法和美术、程序交流沟通，大家对于要做的事情要有一个清晰的认识，对于玩法和视觉表现都要有概念，这是协同开发一个游戏的基础。

在项目的中后期，数值配置开始成为策划工作中最重要一部分，策划需要将自己的想法通过数值配置的方式实现出来，策划的数值配置加上程序脚本代码才是完整游戏逻辑的提现。可以说数值配置表就是策划控制游戏逻辑的“编程语言”。

举个????：

上图是游戏武器配置表部分配置截图。程序提供了武器配置能力给到策划，这些能力就提现在配置表的可配置项上，包含武器的样式，武器攻击力武器上的技能等等。依托于这些基础能力，策划就可以放飞自我，组合配置出许多有趣的东西。

上图是策划编辑中的游戏地图截图。由于我们做的是一个2.5D游戏，所以许多障碍物和建筑都需要依赖手动编辑碰撞区域来营造类3D的透视效果。地图中的网格编辑也是很重要的部分，需要手动将障碍格子标识出来，才能在游戏中实现自动寻路相关的功能。

02美术

游戏美术与应用UI设计最大的区别应该在于游戏美术需要设计各种动作和动画效果，这些效果的实现方式可能是龙骨动画，可能是粒子效果，可能是帧动画。每种不同的动画实现都有其最佳的应用场景，龙骨动画适合用来实现角色动作；粒子效果用来实现火焰特效效果极佳；帧动画简单高效，适合一些简单的动态表现，例如地图上飘动的小草。

就拿美术制作一个怪物来说，首先策划要输出怪物的设定，原画师依照设定绘制怪物的原画，然后动作美术以怪物原画作为参考，设计怪物的动作和行为表现。

上图可爱的鲲鲲(唱跳Rap篮球)，虽然动作各不相同，但是实质都是由下面一张图集所组合出来的。依托于龙骨动画，将鲲鲲身体的各部分贴图绑定到骨骼上，就可以编辑出各种的动作效果。

03程序

上图是我们项目中的资源统计，程序素质上是在使用代码整合各类资源，这些资源可以图片，可以是数据表，可以是音频，可以是文字更可以是想法和逻辑。程序依照策划的想法将各类资源组合打包，配上合理的行为逻辑控制，加工成一块块的基础能力并表露在数值配置表之上，供策划配置和调试游戏。

进行游戏开发要有良好的OOP编程思想，了解数据结构和算法。无论游戏在视觉上如何的绚丽，底层逻辑都是数据模型的一些操作，视觉效果仅仅是数据的另一种表现形式。游戏程序是对于代码灵活性的要求比较高，功能代码的设计和编写都要尽量的包管灵活易修改。游戏素质上是一种艺术作品，艺术有时候是很感性的，而代码又是一种极度理性的东西，在感性和理性的冲撞之下，代码上连结适当的灵活性会给艺术更大的发挥空间，同时也给代码自身留下一些(tiao)余(huo)地(lu)。

程序开发上这里就不过多的介绍什么了，在下一步分会详细的介绍一些技术点的实现方案。

三、技术实现

在游戏开发的过程中，遇到了很多的技术难点，也使用了很多的新技术，这里简单介绍一些功能点的实现方案。

01角色动作

无论是2D游戏还是3D游戏，角色动作自己并不复杂，每一个动作基本都对应着一个骨骼动画资源，触发一个角色动作无非就是播放一段动画而已。但是在我们游戏中，角色动作这一块有些翻车，原因是我们选择了2.5D的游戏视角，这意味着我们需要用2D平面来模拟3D的效果。2.5D的视觉定位在伤害触发判断、角色动作切换、人物移动等等方面都给开发带来了一些小麻烦，这里就介绍一下我们角色动作的处理。

爱丽皮肤的正侧面

爱丽皮肤的正面

爱丽皮肤的背侧面

爱丽皮肤的后背

现实中的物体在不同的角度看起来大都是“不一样”的，我们眼睛中所看到的图像，实质是3维模型在2维平面上的投影。为了在2D的游戏上模拟一个3D的角色效果，就需要尽可能的多角度绘制出这个角色，这也是很多2.5D游戏会先建立3D模型，然后利用3D模型的渲染出多个角度2D贴图素材，通过这些不同角度的贴图素材来组合模拟3D的效果。

我们的游戏由于没有进行3D建模，所有角色的不同视角样式完全由美术进行绘制，每一个角色都需要4个面的原画和动作骨骼设计，相较于传统的2D横版游戏，这一部分就直接是4倍的工作量了。

程序处理这些角色多视角的时候，需要维护一个角色的转向角，在每一游戏帧中判断当前是否应该切换角色的视角和方向，并且控制角色身上挂载的武器旋转角度，最终模拟出类似3D的视觉效果。

02技能体系

技能是游戏玩法中最重要的一环，技能的强弱决定了游戏整体的体验。游戏中所有的技能都是由策划使用配置表进行配置的。我们游戏的技能体系由三层结构所组成：技能层、子弹层、效果层。

技能层任何游戏技能，均由触发器、动作、子弹三部分构成，触发器控制技能触发的条件，决定技能的触发时机；动作是技能在游戏角色视觉上的表现；子弹是技能的实际核心，技能所带来的所有影响都要经过子弹来触发。技能上只有以下逻辑：确定子弹发射点；确定子弹发射角度；按顺序播放技能动画。
子弹层子弹主要是子弹表现以及实际触发效果的集合，并且控制了效果所能触发的对象(对自己触发还是对敌人触发)。子弹有如下的作用：效果作用域的判断，也就是效果该在谁身上触发；效果对象的组装和触发；子弹的外观样式以及飞行行为等逻辑。
效果层每个效果只会对一个角色起作用，可以影响一个或者多个角色拥有的属性，例如血量、攻击力等等。根据效果的触发机制不同，效果会分为瞬时效果以及持续效果。举个栗子，常见的伤害效果就是影响角色血量的瞬时效果，增加攻击力的buff就是影响角色攻击力的持续效果。效果有如下的作用：效果触发后的视觉表现；改变触发对象的某些数值。

如上图所示，怪物释放技能的时候播放了该技能的施法动画，然后在合适的时间点生成了镰刀样式的子弹，最后将子弹发射出去，子弹一旦命中玩家，就会触发子弹上配置的伤害效果，最终导致玩家血量属性减少。

03websocket

游戏其实是有实现联机对战功能的规划的，要实现流程的联机对战，玩家间的数据传输要尽可能的快速高效，常规的http短连接是无法满足游戏实时对战的需求的，于是我们开始尝试了基于websocket的前后端数据传输方案。

目前游戏中websocket连接和数据传输仅仅用在了世界聊天室中，后端技术架构采用Spring + Netty + Redis + Protobuf来实现。利用Netty来维持websocket连接，利用redis实现多服务器间消息共享，利用protobuf来实现二进制数据的编码和解码。

在游戏的前端引入protobufjs用于二进制数据的编码和解码，定制化前后端数据proto协议的TS模板化工具，自动生成实体类代码，自动根据约定数据协议进行消息的序列化和反序列化。

一条消息由如下的部分构成：

魔数(4字节) + 版本号(1字节) + 编码算法(1字节) + 数据长度(4字节) + 数据协议(1字节) 数据body(N字节)

04资源加载

微信对于小游戏包体积是有着严格的限制的，微信只允许小游戏有4M主包+4M主包一共8M的包体积，而辐射危城游戏在不压缩资源的情况下，包体积超过了60M，即使在压缩了资源之后，包体积也超过了30M。

目前的游戏主包中，几乎不包含除代码之外的其他资源，主包中大约1.6M是压缩后的游戏代码，1.2M是游戏引擎的代码，1.2M是小游戏排行榜的工程，这三大部分内容已经将4M的主包空间基本填满。因此，我们游戏中的所有代码之外的资源加载只能采用远程加载的方式。游戏场景直接引用的资源，游戏引擎会将远程资源加载的过程处理得很好，但是一些游戏场景动态加载的资源则需要程序编写代码自行计算所需资源并且按需加载，这样的加载策略可以减少用户进入游戏首页的等待时间，并且可以满足微信小游戏的包体限制。