h5游戏开发教程(新开h5游戏)

前言每一个游戏都像一部电影，它能带给我们快乐，让我们在游戏世界里释放最真实的自己，在玩游戏的过程中学习智慧。也是游戏开发者发现生活智慧的展示载体，传播开发者对生活智慧的乐趣。从0到1，我们将帮助游戏开发者讲述游戏是如何制作的。
什么是H5游戏？H5游戏是开放的，碎片化的，简单易用，容易玩。市面上的游戏平台包括：微信微信官方账号、微信游戏、QQ Play、脸书即时游戏、新浪微博游戏等。主流游戏开发商有爱唯游、疯狂游乐场等。以下是H5游戏平台和H5游戏的截图：
H5游戏市场的崛起伴随着更多游戏平台的崛起，包括微信游戏、QQ游戏、facebook即时游戏、新浪微博等。给H5游戏市场带来了更多的活力。下图显示了H5游戏的市场趋势：
游戏类型动作游戏[ACT]，冒险游戏[AVG]，格斗游戏[FTG]，角色扮演游戏[RPG]
爱情游戏[LVG]，音乐游戏[马克杯]，即时战略游戏[RTS]，射击游戏[STG]，益智或解谜游戏[PUZ]
卡牌游戏[CAG]，赛车游戏[RAC]，体育游戏[SPG]，模拟商业游戏[SIM/SLG]，第一人称视点射击游戏[FPS]，桌上游戏[TAB]，
其中，H5游戏的市场类型分布如下图所示：
精致的团队基础团队
策划一个游戏：游戏功能需求、数据、关卡等的设计
设计视觉两只狮子：界面、动画特效、交互等。
H5游戏两猿一猿在游戏后端：游戏开发、部署、管理等
还有小得多的团队。
和视觉规划。
H5游戏开发二学生
细化帖子
游戏策略，数据规划，关卡规划
视觉设计、动画设计、特效设计、原画设计、地图设计
流程、引擎开发、游戏工具开发、游戏动画开发、游戏后端开发、运维、游戏测试、性能测试、
游戏三步H5游戏的特点是开发周期短，重量轻，即时玩，在以下几个方面无法避免：
游戏系统
游戏引擎
开发工具
系统游戏系统定义了我们要开发的游戏功能。不同的游戏会为不同的玩家设计不同的系统，丰富游戏的可玩性，提高游戏的趣味性。例如，布局游戏的一般系统设计如下：
游戏引擎什么是游戏引擎？
游戏引擎是一套图形库，封装了一套底层能力，提供几套游戏动画库，提供网络特性、物理系统、动画、粒子特效、龙骨动画等功能。市面上比较知名的H5游戏引擎有：白鹭引擎、cocos、layabox、three js(3D)、phaser、hilo等。
为什么要用游戏引擎？
游戏引擎可以帮助游戏开发者提高开发效率，缩短开发周期，提升游戏性能。使用游戏引擎，开发者可以按照规则开发相对易于维护的代码，降低了界面开发的复杂度。
游戏引擎学习
游戏引擎厂商提供了丰富的文档，我们需要学习游戏的基础库文档。通过实例的不断练习，循序渐进，由浅入深的学习。以白鹭引擎为例：
下载开发工具并学习Egret Engine2D基础库文档。
学习上层封装组件的EUI库。
学习动画，包括慢动作，龙骨动画，MovieClip等。
学习粒子效果库，物理世界库(p2)等。
学习外部库，包括音频howlerjs，网络(websocket，http)，项目工程(redux，react等。)
遇到问题，反复查询文档，复习学习，在论坛寻找解决问题的方法，在微信群提问。
开发工具对于开发者来说，开发工具可以制作可视化的编辑页面。同时提供各种动画和粒子的可视化制作和导出，帮助开发者提高开发效率。其中，开发工具还可以实时编辑调试，帮助开发者及时定位问题。拿白鹭工具举个栗子：
编辑器【白鹭之翼】:可视化编辑界面，实现一些简单的慢动作可视化。
精灵贴图【纹理合并】:提供精灵贴图合并和导出，可以将gif、swf等动画转换成MovieClip可执行文件。
龙骨动画编辑器【DragonBones】:提供龙骨动画的可视化编辑，支持各种格式的文件导出。
粒子编辑器【白鹭羽毛】:提供粒子的可视化制作。
调试工具【Egret Inspector】:chrome插件可以及时定位错误。
当然，除了以上工具，还有其他工具，比如地图制作工具、检查点制作工具、性能分析工具等。
知识体系由于H5游戏的特殊性，他对游戏开发者提出了更高的要求。下面是你想入门游戏必须掌握的知识体系：
前端知识
游戏知识
平台知识
前端知识
由于H5游戏属于网页类，所以需要具备很多前端基础知识，包括以下几个方面：
基础语言：JavaScript、HTML、CSS、TypeScript、PHP等。
浏览器：浏览器缓存、本地存储、浏览器页面渲染过程、多屏适配、兼容性
协议：HTTP，HTTPS，WebSocket
缓存：redis，memcache
音频：howlerjs
基本功：PS裁剪，动画，音频裁剪，压缩。
游戏知识
由于H5游戏有游戏的范畴，又是复杂的前端工程项目，对游戏基础知识和前端工程知识也有一定的要求：
资源管理：按需加载、延迟加载
图像压缩：tinypng，Sprite，减少动画帧
状态管理：还原和反应.
实时管理：socketio
脱钩业务系统：新手指导，红点系统
平台知识
H5游戏的发布需要平台作为载体，需要掌握相关平台的能力体系，进行适应性开发，充分发挥平台的能力：
微信：授权、支付、分享、关注、客服、红包
其他平台：账户、支付、数据统计、兑换码、桌面添加图标、分服务。
规格H5游戏开发设计师：
通用按钮一致性
后台可重用
特效动画尽量减少帧数。
粒子效果最小化资源。
.
H5游戏开发游戏后端：
接口规范：规定一个接口返回单个页面中的查询数据，返回有奖规范的格式，指定错误规范的格式。
前端通信协议，小团队建议实时使用HTTP和websocket。
公共组件提取：账号，支付，红包，平台，
.
性能优化资源
小贴图资源与精灵贴图合并。
减少和复用动画重复帧。
图像tinypng压缩
按需和逐页异步加载资源
缓存图片浏览器：cdn，静态资源网站
首屏游戏的资源大小控制在2M之内，提供加载页面优化用户体验。
内存储器
使用chrome性能分析来优化函数内存。
减少JavaScript大数据或复杂操作
优化动画和慢动作的计算
保证游戏的FPS在30帧以上。
网络
使用实时性要求高的websocket，减少连续轮询的使用。
合并不必要的请求，减少请求数量。
对请求的响应时间进行统计分析，定位接口问题。
优化大流量接口的数据。
把游戏写到最后，更像是一场奇幻的魔术表演，好的游戏能给游戏玩家带来无限的惊喜和快乐。游戏开发者就像伟大的魔术师一样，发掘生活的智慧，精心安排游戏中的每一个环节，为玩家做出最好的游戏作品。因为我们热爱改变，所以我们聚集在游戏行业。