egret随笔-egret浅入浅出

•不知道有多人跟笔者一样，喜欢学各种技术，但是都不精，但也有一两项算是精的。

　　
　　自从踏上了egret游戏开发的道路，就不得不学习各种技术了，因为，要精通egret，首先必须要会TypeScript，其次是JavaScript，如果只是简单点的HTML5游戏，那么学这两样就可以了。

　　如果，你想再对web页面美化一下，你就要学html标记语言还有css样式，这样，一款简单的单机游戏就可以上线了。

　　如果，你还想加个分数统计、数据采集之类的功能，那你就必须会一门动态网站语言了，php、jsp、asp.net、nodejs-web、golang-web或者其他。

　　如果，你还想做网络版的egret游戏，那么，你还要学一门网络服务器语言，当然，这个选择是更多了，几乎每种语言都可以，只要协议支持，比如node.js-socket.io就是很好的websocket框架。

　　最后一个如果，如果，你想把html5游戏打包成apk或者ipa，那你有两种途径，一种是自己写个app，然后在app里面放一个WebView或者UIWebView，然后指向你的html5游戏发布地址。这种加壳技术最简单了，如果你还要调用一些特殊的本地api，那么，你可以选择一下完善点的框架，比如Cordova，里面集成了几乎所有的可调用的api接口供js调用。

　　但是这种加壳技术有局限性，因为要依赖于一个webview，也就是要看游戏流不流畅，就要看系统分配给webview的资源多不多了，显然，一个webview在android系统上的资源真是不够多，而且，android系统的webview真是不敢恭维，用的的chrome内核的老版本，ios的UIWebView却是时刻紧跟safari的步伐。如果要解决这个问题，可以自己下载最新的chrome源码，然后编译到app中，或者先对其进行优化和删减。

　　app打包的另一种途径，就是native打包了，这种打包机制和webview打包是不一样的，并不是一个webview就能搞定的，需要解决js解析和渲染、音频、网络、交互等所有的之前通过一个webview全部包装的功能，在egret里，这些都被叫做Context。

这里写个个人见解：egret并不只是一个html5框架，他实则是一个js框架，框架层面，他调用了上述所说的Context，只是在不同的设备环境上，实现了这些Context定义的接口标准，然后让js框架去调用。
设想，如果你手上有一只蓝屏的老款诺基亚，想在里面运行一个你用egret写的贪吃蛇（想当年笔者能玩好多分啊！），可以呀，只要你去实现了那几个Context，就可以了，最关键的是，你要把一款js解析引擎搞进去，当然，那时候的手机根本吃不消。
这样使得开发者可以充分得去利用egret来实现一下天马行空的创想！

　　实现这些Context，工作量是很大的，幸好egret研发团队已经帮你全部解决了：

• js解析引擎>egret采用的是google开源的V8引擎，自称是最快的js引擎，而egret早期采用的是mozilla的SpiderMonkey引擎，一样是很优秀的js引擎。
• 渲染Context>渲染上下文肯定是用OpenGL了，在android和ios上都能流畅渲染。
• 音频Context>直接调用系统的音频解决方案即可
• 网络Context>直接调用系统的网络接口即可
• 交互Context>需要调用android或者ios上的Touch事件
• 其他实现

•到底哪家强

　　到了这里，你肯定想问egret和业内上很火的Cocos2d-x到底哪个更好呢？那肯定不能说哪个更好，因为各有千秋。

　　在渲染方面，虽然都采用OpenGL，但是cocos2d-x却比egret快，为什么呢？因为egret为了抽象出底层的Context，所以把很多东西都交给了js，Context只做了渲染，而cocos2d-x则从头到脚都是c++写的，你说哪个渲染更花时间呢！

　　但是，对于as3开发者的笔者来说egret更加亲和，因为egret的各种机制基本上是仿照as3设计的，使得我很快就能从as3转到egret（我就用过一次Ts转As代码的工具，为了看看Ts和As的差异），而后都是直接编写ts代码，直接上手。

其实在接触egret之前我自己动手写过简单的html5框架，很简单的东西，实现了as3的Graphics，内部机制还引以为傲地取名为命令队列，后来看了别人的框架才知道别人早就这么写了。。。
后来接触过一个国人写的html5框架，基于canvas和dom两种渲染方式的
“在去年三月份，某人接到了某人的邮件，说有个很隐秘的大案子要不要参与”，当时egret群里看到了这句话。后来那人成了egret的大牛。

　　但是，egret的开发流真心挺亲民的，周边产品挺多，强大的GUI工具-EgretWing是笔者最喜欢的了，用as3+ane写的，自身采用的是Dom自己写的FlexLite框架。还有其他产品比如：引擎管理器、vs开发插件、资源管理器、材质编辑器、粒子系统编辑器、As3转TS工具、Chrome Inspection插件、龙骨Falsh pro插件（龙骨官方出品）

 　　里面笔者未提及的就是egret-runtime，这是对现有webview的一个插件式优化，egret-runtime其实是把webview中渲染低下的部分用OpenGL来渲染了，这样能提高帧率从而提升用户体验。但是这也有弊端，就是机子发热严重，耗电很快，所以这个要开发者自己去权衡。

　　设想如果现在主流的android浏览器app都内置了egret-runtime，那玩起egret游戏来说，是不是很爽啊，白鹭公司也是蛮拼的，已经谈了几家公司了，只要通过这些app打开egret游戏页面，都会使用runtime加速渲染。

•最后一个如果

　　博文开头说了那么多如果，当然，最后一个如果才是关键，egret在实现完Context后，封装成了Android项目模版和xcode项目模版，以便开发者做native打包app使用。这时候，你就需要会另外两门语言了：Java和Obejctive-c了，还有就是各自的开发框架：android和cocoa。

　　笔者在native打包之前稍微学过点android开发，算是有点基础，能做一些简单的应用，但是对于oc开发，那真是一无所知了，于是便从头学起，在win8.1上装了个vm，虚拟了个mac os，然后开始搞oc开发，打包ipa是ios开发的同事教笔者的（公司不给陪苹果机嘛，只能这样啦，嘘！）。于是第一款游戏诞生了，Zombie Infect，现已现身Google Play，App Store还在排队（两周了居然还在排队），html5版还未上线，需要等公司的平台出来。

　　

Zombie Infect的三端实现：android、html5、ios

　　如果接第三方库呢，先把库引入项目，然后通过java或者oc去调用，那什么去调用java和oc呢，因为他们不知道什么时候要调用呀，那就是egret提供的ExternalInterface了，和as3的有点像。他就是js和native开发语言的桥梁了，通过他，我们就可以实现各种本地api的调用而是的游戏更加健全了。笔者封装了一遍扩展接口，现已实现

• navigateToUrl：用浏览器打开网页，在android和ios上都适配了
• closeApp：关闭app，android有效
• showBanner：显示admob广告条
• hideBanner：隐藏admob广告条
• ShowInterstitial：显示admob插页广告
• jumpApp：为了做应用推荐了，在android端会打开google play或者其他应用商店，如果提供了下载链接可以直接下载app到本地，ios端直接打开app store
• share：facebook分享接口

　　以上接口都是各种百度各种google才得到的答案啊，还要写java和oc，确实有点辛苦。

•吐槽一下

　　然后再吐槽一下android版的项目模板，用的是eclipse项目，这没什么不对，但是，要接第三方库就不方便了呀，笔者接admob的时候，硬生生地放着Intellij Idea不用，而用eclipse完成开发，因为官方的教程里加入admob库是用eclipse为例的，idea的没教，然后只会android基础的笔者就不会了。官方没给Gradle编译的项目模板，还好现在笔者通过查阅古籍资料已经把eclipse项目转为Idea的项目了，编译也改为Gradle了，Gradle解决依赖确实很方便，已经投入使用，笔者将在下一篇博文里表述笔者的转化过程。

•开发经历和累积-小盆宇们坐正了

　　真正投入egret游戏开发已经有半年多了，也有了自己一套项目模板了，不是用官方的egret create来创建项目，而是通过ctrl+c和ctrl+v来创建新项目了，适当的时候egret upgrade一下模板项目，项目模板里沉淀了一下工具类和一些对egret的扩展：

项目模板

Alien库

　　egret游戏项目的构架可以随你的开发习惯来定，我个人是非常赞赏egret的gui框架的，Dom将as3版的FlexLite改成了egret版的，配合EgretWing做游戏UI，那真是非常舒服的一件事。

　　所以，也决定了我的项目会用到gui模块，所以会先把gui模块编译到项目中：把{"name": "gui"}加入到egretProperties.json的modules节点中，然后运行命令egret build -e编译一次引擎。

　　因为egret目前为止只提供了简单的功能，并没有Scene场景这一说（据说以后会有的），所以需要自己去添加实现，在我的项目模板中已经实现了SceneManager功能在AlienLib中，支持切换特效，也可以自己写切换特效，还支持场景资源组依赖，可以动态加载场景需要的资源组。对于本地存储，egret将html5的localStorage和native整合了，同一为egret.localStorage，这样就解决了本地存储的适配，笔者则在他的基础上再次做了一次小封装，在getItem和setItem的时候对key做了处理，因为html5的localStorage是和站点host挂钩的，如果同一个站里放了多个游戏，而都是用score这个key来存储的，那就乱套了。

　　个人建议，游戏主体不要涉及gui的逻辑，游戏主体最好继承自egret.DisplayObjectContainer，我的习惯是一个class GameStage extends egret.DisplayObjectContainer{}类，然后所有游戏表现逻辑都在这个GameStage类中，再加一个GameModel类来处理数据逻辑，一个GameData用来存放一些游戏数据，一个GameConfig用来存放一些普通配置（配置不要用json了，比较死，建议用js来写动态配置，更加灵活，native打包也不会被修改，因为resource目录先的文件全是暴露的，不安全）、一些关卡配置或一些语言包配置，一个skins文件夹用来存放EgretWing的皮肤文件，一个Views文件夹存放所有gui的视图类，包括组件、弹出面板和场景。

　　笔者的习惯是新建一个ScenePlay皮肤，在里面添加一个UIAsset，命名为gameStageContianer，写一个名为ScenePlay的类继承自SceneBase，class ScenePlay extends alien.SceneBase {}，然后重写他的createChildren():void方法，将gameStage实例放到UIAsset里this.gameStageContainer.source = this._gameStage = new GameStage(this.onGameResult.bind(this));，最后，通过事件或者callback来完成GameStage和ScenePlay之间的交互。

如果GameStage非要和GUI直接打交道，比如内外特效：在GameStage里的一个星星要飘到Gui的星星槽里，那只能通过坐标传递，把GameStage中星星的坐标给ScenePlay，让ScenePlay播放一遍飘动过程，记得把GameStage里的星星隐藏掉。

•Native Code - js通信

　　如果你是用webView给游戏打包的，那么通信就用webView的js接口，比较简单的。

　　如果你是用Support打包的，那么就要用到Egret提供的接口了。这个接口是历经重重磨难的，为什么呢？从第一版的一个ExternalInterface类，演变到了现在层层包装的版本，其实是一样的。据官方认识透露，做这么多调整是为了迎合一些第三方平台的胃口，这些第三方平台固执己见，坚持不改动自己的接口，所以只能egret来修改了。以上说的是android版的接口，ios版的一直没变，还是朴实无华的ExternalInterface类。

　　目前，android版通信接口为直接调用EgretGameEngine的实例提供的方法，有四个：

1. public void enableEgretRuntimeInterface()，用来启动通信接口，是必须的。
2. public void setRuntimeInterface(String var1, final Object var2)，用来添加接口，其中第一个参数为接口方法名，即js直接调用的方法名，第二个参数是一个Object实例，这个Object实例需要有一个callBack方法，下文会说明。
3. public void setRuntimeInterfaceSet(HashMap var1)，用途和2差不多，只是为了方便集中添加接口。
4. public void callEgretInterface(final String var1, final String var2)，调用js方法，第一个参数为接口方法名，第二参数为参数，参数仅支持文本。

　　对于第二个方法中的Obectj实例，也是经历了很多变革。起初，这个参数类型并不是Object，而是IExternalInterface接口，是需要实现这个接口的类才行，实现这个接口需要实现一个void call(String args)的方法，这个方法就是js在调用java时唯一调用的方法，参数类型依然是String。后来为了迎合第三方平台，这个接口被去掉了，成了纯Object类即可，但是必须要有一个callback方法（b是小写的），egret内部用了反射来调用这个方法，坑爹的是，这个方法现在又改了，成了callBack（B是大写的），据透露是egret内部某程序员搞的，至此，这个方法已经没人改动了，那就这样吧。

•最后，我来介绍一下IDE，我只能介绍我用过IDE了，选择很多

• sublime text：挺简洁的编辑器，很适合代码编写，但是我只是拿他来编写简单的代码，大项目涉及到各种变量跟踪、大纲查询、集成编译等
• notepad++：在大学里的时候用过，当时来说是个好东西了，比notepad好至少，还能装插件，可以直接把代码通过ftp插件提交到服务器
• Aptana：这个IDE估计很少人用过吧，他就是一个eclipse的插件，适合做web开发，前端和后端皆可，eclipse的编辑模式是我至今都爱不释手的。他还捆绑了很多实用插件，用起来确实很上手
• Visual Studio：我个人很不喜欢，但做网站的时候也用过，egret开发者可以安装egret-vs插件，就可以更快捷地开发egret游戏了
• WebStorm：如果说eclipse是高材生，那么webstorm就是很帅的高材生了，同位java开发的IDE，webstorm被jetbrain包装得如此帅气，各种爽翻了的插件
• Intellij Idea：和webstorm一样都是jetbrain家族的ide，那还是在做as3页游开发时候用的IDE了，我就是从eclipse家族转到idea家族的，从eclipse转到idea，改了一些习惯，快捷键习惯。

　　那么我推荐的WebStorm了，他自带了TypeScript的插件，还可以自定义File Watch，实时编译Ts为js。还有一个好处就是，他可以添加External Tools，就是添加外部工具，并且绑定了快捷键，就可以一键实现很多命令组了，比如笔者就“一键”实现了egret的编译：

　　打开File>Settings>Tools>External Tools，就可以添加工具了，如图

添加一个Tools>

•在开发中不断地提高自己，累积开发经验，才是学习技术的快乐所在。

　　

　　浅出完毕，下课，走着！

 

2016/07/03添加：

　　只怪笔者当初愚笨，觉得Egret Native的实现方式很精明，其实这中实现方式在笔者现在的项目里开始露出杂毛了，这个种底层抽象程度过高的方式，导致script code比重过高，而native code比重减少，导致运行效率跌落很多，项目做大了，同志们你们就知道了。所以笔者正在开始跳坑，试试跳进其他引擎的坑瞧瞧！

 

转载请注明原地址：http://www.cnblogs.com/rockyf/p/analysis-of-egret.html