创建和调试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 作者:弃天笑

在 NodeJS 中体验 WebAssembly技术

你听说过 WebAssembly 吗?这是由 Google , Microsoft , Mozilla , Apple 等几家大公司合作发起的一个关于 面向Web的通用二进制和文本格式 的项目。 ...
  • cengjingcanghai123
  • cengjingcanghai123
  • 2017年03月18日 10:41
  • 1660

WebAssembly,Web的新时代

在浏览器之争中,Chrome凭借JavaScript的卓越性能取得了市场主导地位,然而由于JavaScript的无类型特性,导致其运行时消耗大量的性能做为代价,这也是JavaScript的瓶颈之一。W...
  • i7thTool
  • i7thTool
  • 2017年03月10日 12:50
  • 16962

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

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

使用ES6的Promise完美解决回调地狱

http://www.cnblogs.com/qq9694526/p/5714124.html 相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取。...
  • oMingZi12345678
  • oMingZi12345678
  • 2016年11月13日 03:03
  • 2112

Egret教程(一、入门)

1.下载并安装Egret引擎: http://www.egret.com/products/engine.html 2.命令行(Win+R键输入cmd): 有些喜欢用命令行的童鞋,可以通过命令...
  • laixiao_hero
  • laixiao_hero
  • 2016年06月11日 15:58
  • 6307

Egret教程(二、HelloWorld)

一、index.html 在 index.html 文件里可以完成很多配置。打开文件,在第15行可以看到(这里可以设置舞台的背景颜色): background: #888888; 完整的主页代码...
  • laixiao_hero
  • laixiao_hero
  • 2016年06月11日 18:29
  • 4619

Egret Native项目热更新

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

Egret解疑释惑之程序入口

关于本教程 本教程是连续的,记录作者在使用Egret的心得体会,并把它们罗列成文,帮助有需要的朋友。 该系列是Egret解疑释惑,收集、发布一些关于Egret的使用技巧,中间会有...
  • ocrpo
  • ocrpo
  • 2016年04月19日 16:31
  • 2062

Qt程序设计——文件/文件夹的创建

引言: QT中需要设计到文件管理时,包括文件的和文件夹的创建及获取,需要用到QDir类,必要时要跟QFile等类结合使用。 1.创建文件夹 假设在目录dir下创建新的文件夹,文件夹名为test ...
  • luo_klt
  • luo_klt
  • 2013年04月22日 22:31
  • 1057

java实现二叉树创建和遍历

今天晚上我学习了java语言的二叉树创建和遍历算法。 实现的机制和上一节课差不多。 代码如下: package 二叉树链表; public class Node { private in...
  • jjfly999
  • jjfly999
  • 2016年03月08日 21:34
  • 753
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:创建和调试Egret5.0的WebAssembly项目
举报原因:
原因补充:

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