回到前端行业快半年了，工作之余喜欢逛逛 CodePen，这里不仅适合新手磨练前端技术，还有很多创意工作者在发表优秀作品。于是也注册了一个帐号，没事的时候写点东西玩玩。

翻收藏夹的时候发现压箱底的 yupoo 图床居然还活着，里面放了一些以前折腾过的东西。其中有一个动图是 08 年的时候用 Flash 做的黑客帝国字幕流特效：

第一感觉是：哇塞我居然做过这个！当时高中的时候用的是 Nokia 3110c ，内置塞班 S40 系统。这玩意儿居然支持 Flash 屏保。于是就写了上面这个程序，可惜性能太差，在手机上运行非常卡，最后导出成了屏幕录像凑合着用了。

现在又回来做前端了，想试着在网页上重新实现这个特效。但这么多年过去了，原来的源文件也不知道哪里去了，只好从零开始。

入职 Monkii 后，按自己的喜好选了 iMac 作为工作环境。不料一上来就给我安排了一个用 .Net 作后端的项目，让我负责前端。人在江湖身不由己，只好折腾起 Windows 。

本系列的第三篇，以 Unity3d 为例，看看其如何实现基于事件的 GUI 框架。

本文分析的是 uGUI，而非 Unity3d 的 Editor UI 。后者是一种称为立即模式（Immediate Mode）的 UI 交互方式，Unity3d 的编辑器插件以及非常早期的 Unity UI 使用这种方式开发。

与 Cocos2d 或者 Egret 不同的是，Unity3d 是一个基于组件-实体-系统（Entity-Component-System^[1][2]）框架的游戏引擎。虽然是商业引擎，但 Unity3d 将 UI 的大部分代码托管于 Bitbucket ，详见这里。里面除了最具价值的 RectTransform 和 Canvas 之外，都开源了。花了一些时间将其中比较核心的类图画出来，被它的复杂度震惊了：

Unity3d 的 UI 框架非常的复杂，由于是基于 ECS 框架，代码非常零散。此外 Unity3d 允许将 GUI 渲染在屏幕甚至是 3D 表面，并且对实体的碰撞检测（hitTest）甚至可以是基于物理的。这需求远超出我的想像，所以它的抽象性非常高。

本系列的第二篇，以 egret 为例，看看其如何实现基于事件的 GUI 框架。

Egret 是另一款基于 html5 的国产开源游戏引擎。其框架结构大量参考 Flash ，并且使用 TypeScript 这种强类型脚本语言，特别适合早期的 ActionScript 3.0 游戏开发者迁移到 Egret 的开发环境。

虽然我并没有用它做过比较大的项目，但是对它的实现也是保持了一点的好奇心。同第一篇一样，我将 egret 框架中与 GUI 有关的类绘制出来，方便理解：

通过与上一篇的 Cocos2d-html5 对比，我们可以看到以下概念在 Egret 里有何区别。

本系列的第一篇，以 cocos2d-html5 为例，分析其如何实现基于事件的 GUI 框架。

Cocos2d-x 是当下非常流行的跨平台游戏引擎，其衍生版 Cocos2d-html5 是使用 Javascript 编写并运行于浏览器的 Canvas 的版本，非常符合我的口味。源码可以在这里下载。

经过简单梳理，我将源码中与 GUI 相关的几个类以及主要函数提取并绘制成类图，方便理解：

从这张图里可以总结出一些有趣的概念：

从中学时期做 Flash 开发，到大学期间学 App 开发，到毕业后当了几年手机游戏开发者，再到现在转行做 Web 前端。在脑海里一直挥洒不去的疑问就是「如何从 0 开始实现一个 GUI 框架」。

期间间断性地尝试过找一些书看，但大部分都是教如何用现成的桌面 GUI 框架（例如 Java Swing，Qt，WPF 等）写一些软件或者 APP 。而非我想要的那种偏实践性的，从概念介绍 GUI 架构并一步一步实现的文献。

不过在经过使用那么多框架后做了各种各样的项目后，其实已经从这些框架中汲取了不少思想。所以想通过对几个游戏引擎的分析，来看看交互程序中的 GUI 是如何工作的。如果有时间，或许可以试着在网页的 Canvas 上实现一个简单的 GUI 框架。

为什么选游戏引擎？因为游戏引擎是非常典型的图形交互程序，而且游戏引擎的 GUI 部分相对于传统应用程序而言更加精炼，容易理解。经过考查，我选了三个游戏引擎，分别是 cocos2d-html5，egret-core 和 unity3d-ui 。