WEB前端的大部分工作都集中在利用现有的主流前端框架和周围的开源代码基础生态来组织整个项目的架构和实现业务逻辑代码，往往同一个逻辑可以用不同的抽象方式来实现，不同的抽象方式在思想和实现上有很大的差异，比如redux/mobx/rjs。

游戏开发主要是基于游戏引擎的标准开发流程，实现UI设计动画效果，完成游戏交互逻辑。对于游戏开发来说，需要用具体的思维能力去组织地图等资源来完成最终的产品。实施过程相对固定，模式化。

利用API+ IDE的完整技巧+webpack等框架本身提供的打包工具，WEB前端在工程领域已经成熟，可以实现“编码-调试-部署”的一整套成熟生产流程，而框架本身往往只提供核心的“数据-视图-调试”功能，可以根据项目需求引入不同的设计模式。

对于H5游戏开发领域来说，由于不同游戏引擎的核心代码差异很大，为了保护核心源代码和开发效率，游戏引擎厂商往往会定制一套开发流程来服务于游戏引擎:从IDE到代码架构再到部署。因此，遵循“惯例”对H5游戏发展非常重要。选择游戏引擎后，H5游戏的开发通常仅限于官方推荐的游戏引擎。

对于初学者来说，

Cocos Creator的集成开发环境已经成熟，整个功能都集成在Cocos Creator的客户端上。除了使用VSCode编写代码逻辑，场景编辑、动态组件设置、资源管理和部署都可以在一个客户端上完成。

相对来说，白鹭的开发环境有点混乱，有白鹭启动器/wing 3/白鹭UI编辑器/白鹭Pro等各种开发工具。有些功能互相覆盖，但又各不相同，产品线混乱，对初学者非常不友好。

CocosCreator在官方文档上是比较优越的，从基本的游戏Demo教程到API文档，它的质量都比白鹭高。CocosCreator对社区人气和市场份额的讨论也比Egret多，所以更容易找到解决方案，对新手也更友好。

视觉编辑器的一些差异

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

优点:在动画效果和场景制作上更加直观方便；

缺点:因为可视化编辑器功能多，很难学会操作。

目前白鹭的可视化编辑器非常初级，动画和业务逻辑都是由代码层编写的。

优点:对于web开发人员来说，开发方法比较熟悉；

缺点:制作场景和动画效果不直观，需要更多的思考。

摘要

从WEB前端到H5游戏开发，首先要加强转化形象和抽象的思维能力，具备从具体动画效果中抽象代码控制逻辑的能力会更有优势。选择游戏引擎后，需要充分了解引擎的开发过程，其中有一些是需要学习的:游戏引擎的自学或者使用推荐的IDE，使用可视化场景编辑器，代码架构方法，游戏引擎API，调试方法，部署方法。

个人认为CocosCreator产品线和文档清晰，难度曲线合适，适合从web前端开发游戏。以上就是今天的一些分享。谢谢观看。