EGRET是一款开源的2D游戏引擎，基于HTML5技术，可以创建出高性能的跨平台游戏和互动体验，包括网页、桌面、移动设备（iOS、Android）等。以下是一些入门EGRET的步骤和建议：

1. **了解基础**：首先，确保你对HTML、CSS和JavaScript有一定的理解，这些都是EGRET的基础。如果你对这些技术不熟悉，建议先学习这些基础知识。

2. **安装EGRET**：EGRET提供了一套完整的开发工具，包括IDE、构建工具等。你可以从EGRET的官方网站下载并安装EGRET的开发工具。

3. **学习文档**：EGRET的官方文档非常详细，包含了从入门到高级的全部内容，包括API参考、教程、案例等。建议花时间阅读和理解这些文档。

4. **实践项目**：理论知识理解后，通过实践项目来巩固和提升你的技能。EGRET官网的教程和案例是一个很好的开始，你还可以尝试自己创建一些小的游戏或者互动应用。

5. **社区交流**：加入EGRET的社区或者论坛，和其他开发者交流，分享你的问题和经验。这将帮助你更快地解决问题，提升你的开发技能。

6. **持续学习**：技术更新迅速，保持对新技术的关注和学习，定期更新你的知识库，这在游戏开发领域尤其重要。

记住，编程和游戏开发都是需要时间和练习的，不要期待一开始就做得完美。持续的学习和实践，你的技能会逐渐提高。

Egret开发笔记（一）

打开resource目录下的default.thm.json文件，我们能看到这个文件中多了HomeSceneUI相关的skins文件和exml文件的路径定义。这里可能已经有人马上想到了——原来Egret的皮肤就是通过这样一个default.thm.json文件来关联的，这件就是为什么在后续的Egret版本中，不再需要我们手动在TS文件中定义皮肤名称的原因了。

网页游戏开发入门 egret

首先将我们准备的资源图片拷贝到resource/assets/GameRes/目录下（当然可以是assets下的任意目录）。编辑器会自动刷新加载更新default.res.json文件，这个文件是记录项目中资源文件的一个集合文件，格式比较简单：groups是对资源文件的一个分类，比如下图中，我们把所有资源放在一个名字叫perload的资源分组中，当我们游戏启动的时候就去加载这个分组中的所有资源，保证游戏启动前就把所有资源先加载进来；resources是一个资源文件描述的详细数组，数组中的每个元素都是一个url、type、name三个键值对组成的元素西瓜视频免费游戏盒子，url表示这个文件的相对路径、type表示这个文件的类型、name就是这个资源文件在代码中使用的key值。

Egret为了让大家使用起来更方便，将一些操作集成在wing编辑器中。语言的描述有时候反而让人感觉抽象，下面我们一起制作一个界面，大家来感受下。

要实现游戏界面开发，一定离不开控件。比如展示一个文本信息我们一般使用Label，玩家控制角色释放技能操作我们使用按钮，排行榜我们要用一个带滚动的列表窗口等等。这些控件在Egret中均有实现，大家可以很方便地使用。

引导层：一般稍微复杂点的游戏还会做一个新手引导，这里为了保证我们新手引导的手指（或者其他指引控件）不被其他展示信息遮挡，我们可以增加一个引导层。比如《狼和羊》游戏中的新手引导的手指。

弹出层：我一般会把弹出窗在一个单独的层级来展示，这样保证弹出窗口一定不会被UI层的控件遮挡。比如《狼和羊》游戏中倒计时3s时的提示信息就是在弹出层展示。

这里，我们引入一个游戏场景的层级概念。比如游戏中我们控制的角色、NPC、障碍、BOSS等应该在一个场景的层级中活动，这里我们把这一层叫做逻辑层；我们玩家的姓名、头像、血条、得分以及其他操作按钮应该在同一个层级，我们把这一层叫做UI层（UI层应该在逻辑层之上）。一款游戏至少要包含这两个层级。

现在市场上的 H5游戏引擎很多，很难去直接定义哪个引擎的好坏，只能说每个引擎都有自己的特性，在某方面跟项目的契合程度比较高，笔者根据现在市场上比较热门的几大引擎做了几点比较，希望能给刚入门的你做技术选型的时候有一点帮助，找到适合项目的引擎，更快、更准、更高效率地完成项目需求。

从渲染支持程度来看，PlayCanvas 不仅支持 3D WebGL渲染，同时保持到 VR 的支持，拥有比较好的拓展性。在工具流的支持上，提供了在线编辑器和发布托管等服务。从官方教程上看，教程也是比较详细的。

▪ 英文社区无默认Ammo.js为默认物理引擎，基于JavaScript语言的3D库，耗性能，加载慢，效果一般PlayCanvasNONOYESYES3k（最新更新2017.12）▪ 英文文档

name2D渲染（Canvas）2D渲染(WebGL)3D渲染（WebGL）VRgithub star 数文档详细程度周边产品备注Three.jsNONOYES（倾向）NO37.6k（最新更新2017.12）▪ 英文文档

lufylegend.js 的最新更新是在16年，不过其社区还是十分活跃的，如果遇到什么开发问题，可以很方便地在社区上找到解决的方案。lufylegend.js 可以支持基础的游戏功能，但是其可拓展性不是很强。

Hilo 是阿里团队推出的一个开源项目，支持模块化开发，同时提供了多种模块范式的包装版本和跨终端解决方案，适合用来开发营销小游戏。其体积也是比较轻量的，只有70kb左右。Hilo 支持 DOM 渲染，Canvas 渲染和 WebGL 渲染，同时集成了 Hilo Audio， Hilo Preload。其后推出的 Hilo 3D 也是其亮点之一。

CreateJS 官方提供了 TweenJS 支持动画开发，同时通过 SoundJS 和 PreLoadJS 提供了音频和预下载的支持，对于 H5 游戏基础功能的支持是足够的。在兼容性方面，CreateJS 支持 PC 端和移动端几乎所有的浏览器。此外，CreateJS 还支持用 flash CC 开发导出由 CreateJS 渲染的 H5 游戏。

Phaser 在渲染方面直接封装了 Pixi；架构方面，Phaser 内嵌了3个物理引擎（Arcade Physics、Ninja、p2.js），提供粒子系统、动画、预下载和设备适配方案；兼容性方面，Phaser 的焦点是放在移动端浏览器上的；API 方面，Phaser 能实现丰富的游戏功能，适合复杂度高的游戏开发。

一般来说，WebGL 的渲染速度都会比 Canvas 快，这是由俩者的绘制路径决定的。Pixi 最大的特点在于，Pixi 具有完整的 WebGL 支持，却并不要求开发者掌握 WebGL 的相关知识，并在需要时无缝地回退到 Canvas 。相较于很多同类产品，它的渲染能力是比较强大的。然而，Pixi 也有不足的地方，Pixi 对于动画的支持是比较缺乏的，在实际开发中，常常需要引进额外的动画库，如 GSAP。

在渲染模式上，LayaAir 支持 Canvas 和 WebGL 两种方式；在工具流的支持程度上，主要是提供了 LayaAir IDE。LayaAir IDE 包括代码模式与设计模式，支持代码开发与美术设计分离，内置了 SWF 转换、图集打包、JS 压缩与加密、APP 打包、Flash 发布等实用功能。

白鹭引擎是企业级游戏引擎，有团队维护。Egret 在工作流的支持上做的是比较好的，从 Wing 的代码编写，到 ResDepot 和 TextureMerger 的资源整合，再到 Inspector 调试，最后到原生打包（支持 APP 打包），游戏开发过程中的每个环节基本都有工具支撑。官网上的示例，教程也是比较多。值得一提的是，今年5月白鹭引擎支持了 WebAssembly ，这对于性能的提升又是一大里程碑。

一般来说，对于 2D 小游戏来说，Canvas 渲染已经足够。然而 Canvas 渲染由于底层封装层次多，不足以支撑起大型游戏的性能要求，因此大型游戏最好选择 WebGL 渲染或者浏览器内嵌 Runtime 。

而 2D 渲染一般也有三种：Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 由于性能原因，一般只适合做一些动画效果较少安卓单机游戏三国类的，交互较少的小游戏，本文主要针对 Canvas 和 WebGL 展开介绍。

很多刚刚接触到游戏开发，准备大展拳脚的小鲜肉们，往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐，官网上相关资料也比较少，而选择一个适合的游戏引擎是一个项目最基础，也是很核心的一部分。试想一下，在游戏开发进行到中后期的时候，才发现项目引入的游戏引擎与需求相悖，这时候不管是重新做一些修修补补的工作或者更换游戏引擎，这都是相当耗费人力物力的一件事。为了避免这种情况的出现，在前期选择适合项目需求的游戏引擎显得尤为重要。接下来我们来聊一聊如何去选择适合项目的 JS 游戏引擎。

pomelo.init的第一个参数是一个json对象，里面传入host和port分别表示要连接的服务器ip和端口号，function表示连接完成后的回调函数，到这里客户端与服务器的连接已经完成，callback中就可以直接向我们的服务器发送消息了。

现在实现联网部分，根据我们的游戏场景，在游戏启动时，给定一个主界面，界面上有开始按钮，当点击按钮时，发送消息给GameServer端，要求创建房间。

clientProtos.json、dictionary.json、serverProtos.json里面都是空的，还没搞清楚、存疑

为了能够实现通信，首先我们得有一个工作正常的服务器端，这里我们选择网易开源的Pomelo，网上关于Pomelo安装的教程很多，我们不做过多说明，简单描述过程。安装NPM之后，执行命令安装即可：

如上的游戏场景中涉及到GameController、GameClient分别与GameServer通信，Egret官网上有关于网络模块的基础讲解，这里我们不再做赘述。我们今天想给大家介绍的是Egret+Pomelo通信实现。

PS：这里顺便提一下，我们一般说的服务器是很笼统的，把除过玩家直观感受到的游戏展示（或者控制器，比如上面这个游戏场景）之外的都叫做服务器。但是细说起来，游戏客户端的数据一般都要保存到数据库，而在一些中重度游戏中，数据库和游戏逻辑分别放置在不同的服务器上（也就是说服务器之间也涉及到同步信息等操作）。

最近在做一个多人远端控制、在同一场景下的贪吃蛇小游戏，类似前段时间很火的贪吃蛇大作战，如果没有玩过，场景大家可以类比一下小时候我们玩的小霸王那种，由一个手柄控制屏幕上的角色进行游戏，差别在于我们这里要的这个“手柄”是不需要连线的。这种场景大家很容易想到，可以通过一个服务器作为中转，将“手柄”端的操作信息转发给游戏客户端就可以了。答对了，这就引出了我们今天要说的这个话题，游戏中的网络通信