创建和调试Egret5.0的WebAssembly项目

原创 2017年07月04日 00:35:00

一、Egret5.0

Egret升级到5.0了,增加了他们说的黑科技:WebAssembly。但是直接使用官方创建5.0的WebAssembly项目例子,竟然无法跑起来。结合了一下4.1.0的版本以及5.0的介绍,查找了相关资料,总算解决了相关问题,可以正常跑起WebAssembly工程了。这里总结一下相关的错误以及开发过程。

二、创建WebAssembly项目

直接使用EgretWing工具进行创建一个默认的WebAssembly项目,默认强制就有RES资源库,必须要增加Egret核心库,其他的库大家根据需要增加了,我们这里测试就使用最小来测试。
这里写图片描述
可以看到相比4.1.0增加egret.asm.js和egret.webassembly.js相关的代码了。

直接进行程序,结果出现下面的错误:

Uncaught TypeError: Cannot read property 'init' of undefined

查看我们的index.html代码,发现和以前不同的地方。

4.1.0:


egret.runEgret({ renderMode: "webgl", audioType: 0 });

5.0就多了WebAssembly对象了。

egret.WebAssembly.init(function () {
                egret.runEgret({ renderMode: "webgl", audioType: 0 });
            }, undefined, window.WebAssembly ? 1 : 2);

如果没有进行WebAssembly的编译,那么这个对象肯定就为空了。既然知道原因,那么接下来就要开始我们的项目改造过程了。

三、编译持WebAssembly部分的代码

5.0的WebAssembly只能支持核心API,也就是渲染那一块其他模块还是使用TypeScript版本的。我们需要修改的就是支持WebAssembly部分以及受到它影响的部分了。
* egret模块需要改变:修改egretProperties.json配置文件

//原来是这样的,这个是TypeScript编译出来的。
"modules": [
    {
      "name": "egret"
    }
  ]

应该修改为WebAssembly版本:

"modules": [
    {
      "name": "egret-wasm"
    }
  ]

其他的保持不变,再看整体的egretProperties.json配置文件

{
  "native": {
    "path_ignore": []
  },
  "publish": {
    "web": 0,
    "native": 1,
    "path": "bin-release"
  },
  "egret_version": "5.0.1",
  "template": {},
  "modules": [
    {
      "name": "egret-wasm"
    },
    {
      "name": "res"
    },
    {
      "name": "promise",
      "path": "./promise"
    }
  ]
}

讲道理的话,修改成这样之后,应该是可以跑起来了,因为我们想要的WebAssembly已经编译出来了。
这里写图片描述
跑一下试试看看,结果出现下面的错误

您正在使用的引擎版本为 5.0.1
正在编译项目...
  Error ……/libs/modules/res/res.d.ts (1011,66): Namespace 'egret' has no exported member 'Sound'.
编译失败

缺乏声音模块…….

四、移植Egret TypeScript中的media模块

既然缺乏Sound模块,那么就移植media包了,经过一翻调整,移植了以下的几个类:
这里写图片描述
再次运行(第三次了。。。。。),终于成功了,官方的例子跑起来了。
这里写图片描述

版权声明:本文为博主原创文章,转载必须声明出处和作者。地址:http://blog.csdn.net/sujun10 作者:弃天笑

【Egret】里使用audio标签达到默认播放背景音乐

" autoplay='autoplay' loop="loop">你的浏览器不支持audio标签。 function setBgm(play){ var bgm = document.get...
  • arvin0
  • arvin0
  • 2016年05月09日 19:50
  • 10962

Egret4.1.0的高清文本显示效果设置

用过Egret4.0.3的人都知道,文本显示有点模糊的问题。在论坛上查了资料,回答是4.1.0会进行修复。所以官方一升级引擎,就赶紧对项目进行升级了。先看看官方的升级信息吧:Egret4.1.0 ...
  • sujun10
  • sujun10
  • 2017年05月24日 12:44
  • 1686

命令+mybatis-generator插件自动生成Mapper映射文件

学mybatis的时候,自己写各种 *Mapper.xml和 *Mapper.java,注意各种sql语句中的 id 是否匹配,xml中的namespace是否正确,很麻烦有木有?今天博客内容就是高大...
  • emilyRR
  • emilyRR
  • 2015年08月13日 09:59
  • 3253

freemarker常见语法大全

freemarker常见语法大全 FreeMarker的插值有如下两种类型:1,通用插值${expr};2,数字格式化插值:#{expr}或#{expr;format}  ${book.nam...

解决Jenkins无法编译Egret5.0项目的问题

Egret4.0升级Egret5.0导致Jenkins无法编译项目项目升级到Egret5.0,同时也把Egret的引擎工具更换为EgretLauncher,结果出现问题,原来跑得好好Jenkins,突...
  • sujun10
  • sujun10
  • 2017年07月20日 13:24
  • 1014

Egret5.0使用FairyGUI教程(各种坑点)

总结一下Egret5.0中使用FairyGUI的各种坑

sencha touch使用sencha cmd 5.0 创建项目、打包

参考资料: http://www.cnblogs.com/mlzs/p/3420900.html 1.Sencha cmd安装 环境搭建 a.安装java运行环境(jdk) 下载地址(我用得是1.8....
  • sjwzb
  • sjwzb
  • 2015年10月20日 14:21
  • 623

Egret Native项目热更新

http://docs.egret-labs.org/post/tools/native/hot-upgrade.html 概述 Egret的封装项目无论在Android还是iOS平台,均支持热更...
  • kenkao
  • kenkao
  • 2015年06月24日 15:02
  • 2418

白鹭引擎-Egret使用一:从创建第一个html5程序到运行,及在centos上运行,发布等

白鹭引擎: 1.首先从官网下载软件安装  http://www.egret.com/ 装完后: 2.找到引擎的安装文件夹,把它添加进windows环境变量 3.然后打开cmd,...
  • chuanyu
  • chuanyu
  • 2015年05月27日 15:46
  • 3115
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:创建和调试Egret5.0的WebAssembly项目
举报原因:
原因补充:

(最多只允许输入30个字)