1.简述
受限于同源策略。egret在加载跨域素材时,极大的受限。如,canvas下无法二次draw跨域图片,webgl下,无法显示跨域图片,想把资源放到cdn上,但是又没有同域cdn,等等一系列问题。
哦,对了,还有,release出来的文件,无法直接双击运行(需要http服务器才能运行)。
2.实现原理
原理是js文件不受同源策略限制。利用jsonp我们就可以把所有非js/css的资源,转成js文件(图片转base64),由egret加载并解析。
本方案提供转js脚本工具,用于将所有素材转换为js文件。
同时提供针对egret的解析库,通过Analyzer注入。完全不影响现有的工作流。
3.操作步骤
a.在egret项目中引入CrossdomainLib.ts和AssetAdapter.ts2个库文件(见后面示例附件)
b.修改index.html文件如下:
<script> //是否开启跨域支持,只建议在release版本中开启 var needCross = false; var resourcePath = 'http://www.nofastfat.com/h5/test/crossdomainSource/';//读CDN等跨域资源 // var resourcePath = '';//读本地资源 egret.runEgret({renderMode:"webgl"}); </script>
c.修改Main.ts文件如下,根据各个项目不同,可能略有差异,重点就是使用AssetAdapter管理素材,和使用 startCross(this.stage, true, window['resourcePath']); 开启跨域支持
public constructor() { super(); this.once( egret.Event.ADDED_TO_STAGE, this.__addedHandler, this ); } private __addedHandler( e: egret.Event ): void { if ( !egret.Capabilities.isMobile ) { this.stage.scaleMode = egret.StageScaleMode.SHOW_ALL; this.stage.orientation = egret.OrientationMode.AUTO; } this.stage.registerImplementation( "eui.IAssetAdapter", new AssetAdapter() ); var vc: RES.VersionController = new RES.VersionController(); vc.getVirtualUrl = function ( url: string ): string { return url + '?v=' + '0.0.1'; } RES.registerVersionController( vc ); //绕开egret同域策略的关键代码,只建议在release后,设置needCross = true,以便跨域生效 if(window && window['needCross']){ startCross(this.stage, true, window['resourcePath']); } this.startLoadSource(); }
d.发布你的项目
e.安装脚本工具(见附件,安装一次即可):修改installScript.cmd中INSTALL为你的egret安装目录,然后双击该文件,即可安装成功
f.在发布的release项目目录下打开cmd命令行工具,并输入 egret crossdomain(如提示找不到该命名,请返回上一步骤重新安装)。此时所有需要的跨域资源已经自动生成。
e.修改release目下index.html中的设置,needCross为true,并根据需要设置跨域素材的位置,如果是加载本地资源,则设置为空。
如果需要放置资源到CDN上,则复制完整的resource目录到cdn,如下图(下图为测试用http服务器的目录结构,对应:http://www.nofastfat.com/h5/test/crossdomainSource/),并设置resourcePath为对应的URL地址。
f.操作结束,你会发现,修改处理后的html文件不仅可以直接双击访问,还可以访问跨域CDN上的资源。
4.写在最后
a.由于使用base64转图片,性能会有一定损耗,因此不建议在中大型游戏上使用。
b.该工具并没有经历上线项目检验。 (2017-4.17 更新:经过多位朋友QQ反馈,本工具已经历不同的上线项目,基本稳定)
c.引擎版本最高支持到3.2.6。4.0由于Analyzer兼容行问题,暂不支持(2017-4.17 更新:经过实测,由于4.0.3版本对RES的保留,依旧可用,目前版本可支持到4.0.3)
d.使用本工具可以衍生出很多玩法,比如使用apicloud等工具可以在线打包出ipa和apk文件(而不用去到native上各种悲催)。使用C#打壳在windows桌面上跑(electron打包有100M+),等等玩法。(2017-4.17 更新:经过本人实际使用,建议使用HBuilder+htmlplus框架打包app,稳定高效,本地api丰富)
当项目中有fnt位图字体时,会有BUG,需要做如下处理
1.*.fnt文件中, {"file":"/fnt.png",中的斜杠(/)一定要去掉,一定要去掉,位图字体工具的坑
2.不要在default.res.json中手动加载fnt.png文件,因为*.fnt文件自己就会加载对应的fnt.png文件
相关推荐
在使用HTTP请求时,会遇到跨域加载问题,本例解决该类问题,
基于 Egret 3.0 搭建的 HTML5 游戏极速开发解决方案
Egret开发游戏屏幕适配解决方案,适配不同分辨率,两种适配模式。 适配库是基于Egret的屏幕适配策StageScaleMode.NO_BORDER开发,采用NO_BORDER是因为他没有黑边,而且游戏内容是等比例拉伸。可以把NO_BORDER理解为...
本库旨在为Egret封装常用的手势操作,因本人能力有限,有的实现并不完善,欢迎批评指正。Egret手势识别库egret_gesture目前已实现的手势: 1. Tap(点一下) 2. Double Tap (双击) 3. Pinch(二指往內或往外拨动,平时...
EgretWing-v3.2.6
Egret 引擎学习资料 ,Egret HTML5游戏开发指南.pdf.
Egret官网声音项目
egret-core egret 官方示例代码,可参考使用,代码是较新版本的
egret 下拉框的制作,亲测可用;纯代码,可以使用;egret 下拉框的制作
Egret RPG 跑图Demo 2.5D地图 A星寻路 NPC 瓦片地图 Egret RPG 跑图Demo 2.5D地图 A星寻路 NPC 瓦片地图 Egret RPG 跑图Demo 2.5D地图 A星寻路 NPC 瓦片地图
egret摄像机移动
egret贪吃蛇简单的小游戏制作,新手制作使用egret开发的小demo
使用命令行启动游戏 编译: egret build 运行预览: egret run 发布: egret publish
Egret Conversion是一个Egret项目转换工具,可以将Flash项目转换到Egret HTML5项目中,支持Flash项目到Egret项目的一键高效转换,功能强大可扩展,支持AS3各种复杂语法特性,涵盖绝大部分的Flash API,并且支持swf...
EgerPro是基于 Egret 3.0 搭建的 HTML5 重度游戏开发解决方案。一、引入PureMVC,界面逻辑分离1、Pure MVC是在基于模型、视图和控制器MVC模式建立的一个轻量级的应用框架2、将Pure MVC移植到Egret中适合团队合作开发...
egret 游戏引擎 p2 Physic物理库 免费下载地址
使用egret开发的2048源码
白鹭egret图集分割工具。支持拆分两种图集资源:Egret MovieClip、Sprite Sheet。支持文件夹批量操作。支持分割后生成的文件夹创建到图片对应的目录,自己写的,亲测可用
多个egret 小游戏 ,可供学习
egret白鹭游戏引擎的飞机大战源码,基于TYPESCRIPT开发,属于H5游戏,可以跨平台发布到安卓、IOS等,是个比较简单的DEMO,运行时注意保持引擎版本与游戏版本一致2.5.x的,egret兼容性比较差,编辑器我用的也是2.5的...