最近体验了一下egret粒子系统, 看了官方文档后,照着文档写,发现各种报错,不知道是原来文档就是错误的,还是egret版本多次迭代后,文档没有及时更新,而且在egret开发者中心提供的QQ群加了也没有回应,或许是egret官方太忙了,但是不管怎样,这种错误的官方文档对新手很不友好。

下面我来说说我在体验egret粒子系统踩的一些坑

说到egret的粒子系统,egret官方提供了一个制作粒子素材的工具——Egret Feather

有兴趣的可以移步到相关的官方文档查看,因为我使用Egret Feather的时候没有遇到什么问题,所以这里就不做赘述了,大家看官方文档就好了

egret粒子系统官方文档的错误?

在egret的粒子系统文档中(传送门),在创建粒子示例的地方是这样的

egret粒子系统创建示例

按照示例的代码在egret 4.0.3版本中,编译就会报错

1
2

error TS2339: Property 'system' does not exist on type 'Main'.

‘system’这个属性不属于’Main’,新人们在这里会懵逼一会儿,但是代码是死的,人是活的,我直接用个变量来保存particle对象嘛。我把代码改一下

1
2
3
4
5
6

let texture = RES.getRes("funny");
let config = RES.getRes("funny_json");
let funny = new particle.GravityParticleSystem(texture, config);
funny.start();
this.addChild(funny);

我用个变量funny来保存particle对象,然后我再编译一下,没有报错,但是刷新浏览器的时候报错了

1
2

Uncaught TypeError: Cannot read property 'textureWidth' of null

无法读取纹理的宽度,其值为null。出现这种报错一般就是纹理加载不成功,所以要看看加载素材的地方

1
2
3

let texture = RES.getRes("funny");
let config = RES.getRes("funny_json");

上面的纹理加载很明显与egret的素材加载方式有点不一样,不知道官方文档为什么会这样写,所以我改了一下,把纹理的后缀加上

1
2
3

let texture = RES.getRes("funny_png");
let config = RES.getRes("funny_json");

编译没有报错,刷新浏览器,粒子效果完美呈现。demo传送门

egret粒子系统demo

egret粒子系统库的引入,另一个坑?

egret粒子系统库的引入也是一个小坑,我从egret第三方库的GitHub上下载了particle粒子库,然后放到项目里引入,结果编译时间很久,而且会各种报错,经过一系列的Google 百度后,结果是:

第三方库必须放到项目外面!

第三方库必须放到项目外面!

第三方库必须放到项目外面!

重要的事情说三遍