h5游戏网站源码_从WEB前端角度看H5游戏开发[通俗易懂]

WEB开发与游戏开发的区别

WEB前端的大部分工作集中在利用现有的主流前端框架（vue / react / angular）及其周边开源代码库生态组织整个项目的架构并实现业务逻辑代码，往往同一种逻辑可以选择用不同的抽象方式来实现，不同抽象方式的思想和实现差异巨大，如状态管理的不同实现方式：redux / mobx / rxjs.

H5游戏的开发工作主要集中在基于游戏引擎的标准开发流程实现UI设计的动画效果以及完成游戏交互逻辑。对于游戏开发来说，需要利用具象思维能力来组织贴图等资源完成最终产品，实现的过程相对来说比较固定和模式化（利用选定的游戏引擎的粒子、骨骼、帧动画等API）。

WEB前端在工程化领域日趋成熟，利用框架本身提供的API + IDE的完备提示 + webpack等打包工具可以实现“coding – debug – 部署”的一整套成熟的生产流程，同时框架本身往往只提供核心的“数据 – 视图 – 数据”功能，可以根据项目需求引入不同的设计模式。

在H5游戏开发领域，由于不同游戏引擎之间的核心代码差异巨大，为了保护核心源码以及开发效率等，游戏引擎厂商往往会高度定制一套服务于该游戏引擎的开发流程：从IDE到代码架构到部署。因此，相对来说，H5游戏开发中，遵守“约定”是很重要的一个环节，H5游戏开发在选定了游戏引擎之后，整个开发流程往往都只能受限于在游戏引擎的官方推荐中做选择。

Cocos Creator 和 Egret 的区别

对入门者来说

Cocos Creator 的集成开发环境比较成熟，整套功能都集成在了开箱即用的 Cocos Creator 客户端内，除了代码逻辑需要用VSCode编写，场景编辑、动态组件设置、资源管理、部署等都可以在单一客户端内完成操作。

相对来说 Egret 的开发环境有些混乱，有 Egret Launcher / Wing3 / Egret UI Editor / Egret Pro 等各种开发工具，有些功能彼此涵盖但又各不相同，产品线混乱，对新手来说并不友好。

在官方文档上，Cocos Creator 更胜一筹，从基础的游戏Demo教程到API文档都比Egret的质量更高。在社区热度和市场占比方面，Cocos Creator 也比 Egret 的讨论多一些，所以更容易找到解决方案，对新手更加友好。

在可视化编辑器上的一些差别

Cocos Creator 官方更推荐在客户端用GUI操作完成大部分场景、图形、动画工作，在代码层仅编写业务代码以及一些比较复杂抽象的动画逻辑。

优点：在制作动画效果和场景时更直观、方便；

缺点：由于可视化编辑器功能繁多，学习操作有一定难度。

Egret的可视化编辑器目前比较简陋，动画和业务逻辑都依赖在代码层编写。

优点：开发方式对web开发者更为熟悉；

缺点：制作场景和动画效果时并不直观，需要更多思维负担。

总结

想要从WEB前端转而上手H5游戏开发，首先要加强形象和抽象相互转换的思维能力，拥有从具体的动画效果抽象出代码控制逻辑的能力会很有优势。在选定游戏引擎后，还需要对该引擎的开发流程做充分了解，需要学习的部分：游戏引擎自研或推荐的IDE的使用、可视化场景编辑器的使用、代码架构方式、游戏引擎API、Debug方式、部署方式。

从个人角度来说，Cocos Creator 有更清晰的产品线和文档、合适的难度曲线，更适合从 WEB前端转向游戏开发。