前言

每个游戏犹如一部电影，它能带给我们快乐，让我们在游戏世界中释放最真的自我，玩游戏过程中学习到智慧。游戏也是游戏开发者发现生活中的智慧的展示载体，传播了开发者对生活智慧的乐趣。我们将从0到1，帮助游戏开发者讲述游戏是怎么制作出来的。

什么是H5游戏？

H5游戏具有即开即玩、碎片化、上手简单、易玩等特点，市面上的游戏平台包括了：微信公众号、微信小游戏、QQ玩一玩、Facebook InstantGames、新浪微博小游戏等，主流的游戏开发商包括爱微游、疯狂游乐场等，下面是H5游戏平台和H5游戏的截图：

h5的小游戏怎么开发（从0到1开发H5游戏）(1)

h5的小游戏怎么开发（从0到1开发H5游戏）(2)

H5游戏市场崛起

随着更多的游戏平台崛起，包括：微信小游戏、QQ玩一玩、facebook instant games、新浪微博等，给H5游戏市场带来了更多的生机活力，下图是H5游戏的市场趋势图：

游戏类型

其中的H5游戏的市场的类型分布占比如下图所示：

h5的小游戏怎么开发（从0到1开发H5游戏）(3)

精巧团队

基础团队

  • 游戏策划一汪：游戏功能需求、数据、关卡等设计

  • 视觉设计二狮：界面、动画特效、交互等

  • H5游戏二猿&游戏后端一猿：游戏开发、部署、管理等

更有甚小团队

  • 视觉兼策划一枚

  • H5游戏开发二生

细化岗位

  • 游戏主策、数据策划、关卡策划

  • 视觉设计、动画设计、特效设计、原画设计、地图设计

  • 主程、引擎开发、游戏工具开发、游戏动画开发、游戏后端开发、运维、游戏测试、性能测试、...

游戏三跨步

H5游戏的特点是开发周期短、轻量级、即开即玩，那绕不开下面几个方面：

  • 游戏系统

  • 游戏引擎

  • 开发工具

游戏系统

游戏系统定义了我们要开发的游戏功能，不同游戏针对不同的玩家，会设计不同的系统，丰富游戏的可玩性，提高游戏的乐趣。举例来说，放置类游戏一般的系统设计如下所示：

h5的小游戏怎么开发（从0到1开发H5游戏）(4)

游戏引擎

什么是游戏引擎？

游戏引擎是一套图形库，封装了一套底层的能力，并且提供了多套游戏动画库，提供了网络特性、物理系统、动画、粒子特效、龙骨动画等功能，市面上比较知名的H5游戏引擎包括了：白鹭引擎、cocos、layabox、threesjs（3D）、phaser、hilo等

为什么用游戏引擎？

游戏引擎能够帮助游戏开发者提高开发效率，缩短开发周期，提升了游戏的性能；运用游戏引擎，开发者能够按照规则开发出相对易于维护的代码，减少了界面开发的复杂性

游戏引擎学习

游戏引擎厂商提供了丰富的文档，我们需要学习游戏的基础库文档，通过例子不断的实践，循序渐进、从浅到深的方式的学习，以白鹭引擎为例：

  1. 下载开发工具，并且学习Egret Engine2D基础库文档

  2. 学习上层封装组件EUI库

  3. 学习动画相关的，包括了缓动、龙骨动画、MovieClip等

  4. 学习粒子效果库、物理世界库（p2）等

  5. 学习外部库，包括了音频howlerjs、网络（websocket、http）、项目工程化（redux、react等）

  6. 遇到问题，反复查询文档回顾学习，论坛查找问题解决方案，微信群提问等方式积累

开发工具

开发工具对于开发者来说，可以进行可视化的编辑页面，与此同时，提供了各种动画和粒子的可视化制作及导出，帮助开发者提高开发效率，其中开发工具还可以进行实时的编辑调试，及时的帮助开发者定位问题，拿白鹭工具举个栗子：

h5的小游戏怎么开发（从0到1开发H5游戏）(5)

  • 编辑器【Egret Wing】:可视化编辑界面，并且实现一些简单的缓动效果可视化

  • 雪碧图【Texture Merger】:提供雪碧图合并导出，并且可以将gif,swf等动画转成MovieClip可运行的文件

  • 龙骨动画编辑器【DragonBones】:提供了龙骨动画的可视化编辑，支持多种格式文件导出

  • 粒子编辑器【Egret Feather】:提供了粒子的可视化制作

  • 调试工具【Egret Inspector】:chrome插件，可以及时定位错误

当然，除了上面的工具，还有其他工具，如：地图制作工具、关卡制作工具、性能分析工具...

知识体系

由于H5游戏的特殊性，他对游戏开发者提出了更高的要求，以下是你想入门游戏必须掌握的知识体系：

  • 前端知识

  • 游戏知识

  • 平台知识

前端知识

由于H5游戏属于Web范畴，所以需要具备很多的前端的基础知识，包括了以下几个方面：

  • 基础语言：JavaScript、HTML、CSS、TypeScript、PHP等

  • 浏览器：浏览器缓存、本地存储、浏览器页面渲染流程、多屏适配、兼容性

  • 网络协议：HTTP、HTTPS、WebSocket

  • 缓存：redis、memcache

  • 音频视频：howlerjs

  • 基础技能：PS切图、动画制作、音频剪切压缩

游戏知识

由于H5游戏又有游戏的范畴，也是一个复杂的前端工程化项目，对基础游戏知识和前端工程化知识也有一定的要求：

  • 资源管理：按需加载，延迟加载

  • 图片压缩：tinypng、雪碧图、减少动画帧

  • 数据状态管理：redux、react...

  • 实时性管理：socketio

  • 解耦业务系统：新手引导、红点系统

平台知识

H5游戏的发布需要平台作为载体，需要掌握相关平台的能力体系，进行适应性开发，充分发挥平台的能力：

  • 授权、支付、分享、关注、客服、红包

  • 其他平台：账户、支付、数据统计、兑换码、添加图标到桌面、分服

相关规范

H5游戏开发 && 设计师：

  • 通用按钮一致性

  • 背景图片可复用

  • 特效动画尽量精简帧数

  • 粒子特效尽量减少资源

  • ...

H5游戏开发 && 游戏后端：

  • 接口规范：规定单个页面中的查询数据一个接口返回，奖品规范格式返回，错误格式规范

  • 前后端通信协议，小团队建议使用HTTP，实时性使用websocket

  • 公共组件提取：账户、支付、红包、平台、...

  • ...

性能优化

资源

  • 小图资源进行雪碧图合并

  • 动画进行重复帧数减少跟复用

  • 图片进行tinypng压缩

  • 资源按需、按页面异步加载

  • 图片进行浏览器缓存：cdn、静态资源站点

  • 首屏游戏资源大小控制在2M以内，提供加载页优化用户体验

内存

  • 使用chrome性能分析，对函数内存优化

  • 减少JavaScript大数据或复杂运算

  • 对动画、缓动的计算进行优化

  • 保证游戏的FPS在30帧以上

网络

  • 实时性要求高的使用websocket，减少使用不断轮询方式

  • 合并没必要的请求，减少请求数

  • 对请求响应时间做数据统计分析，定位接口问题

  • 对大流量接口进行数据优化

写在最后

游戏更像一场奇幻的魔术秀，好的游戏能够带给游戏玩家无限的惊喜感和快乐。而游戏开发者正如伟大的魔术师一样，发现生活中的智慧，精心安排游戏中的每一个环节，把最优秀的游戏作品制作出来，奉献给玩家。正因为热爱改变，所以我们才一起聚集在游戏行业中。

,