在些需求需要在游戏中使用远端下载的粒子。
想到了两种方案：
- 远端下载 plist 文件，创建 ParticleSystem 赋值给 file 属性。（证明了该方法在我们项目里是不可行的，因为远端下载的 plist 文件，没有UUID，不受creator的控制，会报错）
- 远端下载包含粒子各个属性的值的 json 文件,在项目中创建 ParticleSystem 自定义粒子属性(custom),程序赋值所有属性。(证明了该方法在我们项目里是可行的,但自定义在代码里看起来不太美观，还是需要优化的)
下面直接贴一下第二种方法的使用。
1. 下载粒子所需的 图片 和 json 属性文件
具体注释已标注在代码中
downPartlcleData() {
// this.particleOrderArray 存放需要请求的图片和文件的相对路径
// eg: this.particleOrderArray = [{path:'particle/particle_1.json'},{path:'particle/particle_1.png'}]
let item: { path: string } = this.particleOrderArray.slice(0, 1)[0];
if (!item) { return; }
let dirpath = "";
// 手机端情况下，文件的存放地址，通过jsb保存和读取
if (cc.sys.isMobile && (cc.sys.os === cc.sys.OS_IOS || cc.sys.os === cc.sys.OS_ANDROID)) {
dirpath = jsb.fileUtils.getWritablePath();
} else {// pc端情况下，本地绝对路径
dirpath = outputPath;
}
// 存放文件的远端服务器地址(可先建个本地服务器测试)
let url = 'https://remoteUrl/' + item.path;
let fileDir = dirpath + "/particle/";
let filepath = dirpath + '' + item.path;
// 本地已存在，则继续下载下一个文件
if (jsb.fileUtils.isFileExist(filepath)) {
this.particleOrderArray.shift();
this.downPartlcleData();
} else {
// HTTP get请求文件
this.GET(url, (success, data) => {
if (success) {
if (data) {
// 创建存放文件夹
if (!jsb.fileUtils.isDirectoryExist(fileDir)) {
jsb.fileUtils.createDirectory(fileDir);
}
// 将文件存放到 filepath 路径下,存放成功下载下一个文件，存放失败则继续下载当前文件
if (jsb.fileUtils.writeDataToFile(new Uint8Array(data), filepath)) {
this.particleOrderArray.shift();
this.downPartlcleData();
} else {
this.downPartlcleData();
}
} else {
cc.log('remote download file not exit');
}
} else {// 请求失败继续下载当前文件
this.downPartlcleData();
}
});
}
}
// 上面用到的HTTP get请求方法
Get (url, callback) {
var xhr = cc.loader.getXMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', url, true);
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status <= 207) {
callback(true, xhr.response);
} else if (xhr.status === 401) {
callback(false, authError);
} else {
callback(false, { Code: xhr.status, Message: xhr.statusText });
}
};
xhr.ontimeout = function(){
xhr.abort();
callback(false, netTimeOut);
};
xhr.onerror = function () {
xhr.abort();
callback(false, netWorkError);
};
xhr.send();
}
2. 下载完成后，使用文件创建粒子动画
// parNum 是需要下载的粒子的数量
for (let i = 1; i <= parNum; i++) {
let jsonURL = `particle/particle_${i}.json`;// json 文件的存放路径
let pngURL = `particle/particle_${i}.png`;// png 文件的存放路径
cc.loader.load([path], function (errors, results) {
if (errors) {
for (var i = 0; i < errors.length; i++) {
cc.log('Error url [' + errors[i] + ']: ' + results.getError(errors[i]));
}
return;
}
let bJsonObj = results.getContent(jsonURL);
// 粒子挂载的节点的属性值 和 粒子的属性值
let nodeObj = bJsonObj[0]; let parObj = bJsonObj[1];
// this.remoteEffect是粒子挂载的父节点
let effectNode = this.remoteEffect.getChildByName(`effect${i}`);
if (!effectNode) {
effectNode = new cc.Node();
effectNode.name = `effect${i}`;
this.remoteEffect.addChild(effectNode);
}
effectNode.position = cc.p((nodeObj as any)._position.x, (nodeObj as any)._position.y);
effectNode.rotationX = (nodeObj as any)._rotationX;
effectNode.rotationY = (nodeObj as any)._rotationY;
effectNode.scaleX = (nodeObj as any)._scaleX;
effectNode.scaleY = (nodeObj as any)._scaleY;
effectNode.anchorX = (nodeObj as any)._anchorPoint.x;
effectNode.anchorY = (nodeObj as any)._anchorPoint.y;
effectNode.height = (nodeObj as any)._contentSize.height;
effectNode.width = (nodeObj as any)._contentSize.width;
effectNode.color = cc.color((nodeObj as any)._color.r, (nodeObj as any)._color.g, (nodeObj as any)._color.b, (nodeObj as any)._color.a);
effectNode.opacity = (nodeObj as any)._opacity;
effectNode.skewX = (nodeObj as any)._skewX;
effectNode.skewY = (nodeObj as any)._skewY;
effectNode.group = (nodeObj as any).groupIndex;
// 在节点上创建粒子
let particleCom = effectNode.getComponents(cc.ParticleSystem);
let par = particleCom.length < 1 ? effectNode.addComponent(cc.ParticleSystem) : particleCom[0];
// path 是图片存放的路径
cc.loader.load(path, (err, tex) => {
if ( err ) {
cc.log(err);
} else {
let spriteFrame = new cc.SpriteFrame(tex);
if (spriteFrame) {
// 注意：设置贴图的时候不能直接设定texture属性，因为id原因会报错，需要转化成spriteFrame。根据api版本不同，我这是1.9.2可使用setDisplayFrame方法，更高版本的应该直接有spriteFrame属性，自行查找
par.setDisplayFrame(spriteFrame);
// 各个属性解析可查看api
par.playOnLoad = (parObj as any).playOnLoad;
par.autoRemoveOnFinish = (parObj as any)._autoRemoveOnFinish;
par.custom = (parObj as any)._custom;
par.duration = (parObj as any)._duration;
par.life = (parObj as any)._life;
par.lifeVar = (parObj as any)._lifeVar;
par.totalParticles = (parObj as any)._totalParticles;
par.startColor = cc.color((parObj as any)._startColor.r, (parObj as any)._startColor.g, (parObj as any)._startColor.b, (parObj as any)._startColor.a);
par.startColorVar = cc.color((parObj as any)._startColorVar.r, (parObj as any)._startColorVar.g, (parObj as any)._startColorVar.b, (parObj as any)._startColorVar.a);
par.endColor = cc.color((parObj as any)._endColor.r, (parObj as any)._endColor.g, (parObj as any)._endColor.b, (parObj as any)._endColor.a);
par.endColorVar = cc.color((parObj as any)._endColorVar.r, (parObj as any)._endColorVar.g, (parObj as any)._endColorVar.b, (parObj as any)._endColorVar.a);
par.angle = (parObj as any)._angle;
par.angleVar = (parObj as any)._angleVar;
par.startSize = (parObj as any)._startSize;
par.startSizeVar = (parObj as any)._startSizeVar;
par.endSize = (parObj as any)._endSize;
par.endSizeVar = (parObj as any)._endSizeVar;
par.startSpin = (parObj as any)._startSpin;
par.startSpinVar = (parObj as any)._startSpinVar;
par.endSpin = (parObj as any)._endSpin;
par.endSpinVar = (parObj as any)._endSpinVar;
par.sourcePos = cc.p((parObj as any)._sourcePos.x, (parObj as any)._sourcePos.y);
par.posVar = cc.p((parObj as any)._posVar.x, (parObj as any)._posVar.y);
par.positionType = ((parObj as any)._positionType as number);
par.emitterMode = (parObj as any)._emitterMode;
par.gravity.x = (parObj as any)._gravity.x;
par.gravity.y = (parObj as any)._gravity.y;
par.speed = (parObj as any)._speed;
par.speedVar = (parObj as any)._speedVar;
par.tangentialAccel = (parObj as any)._tangentialAccel;
par.tangentialAccelVar = (parObj as any)._tangentialAccelVar;
par.radialAccel = (parObj as any)._radialAccel;
par.radialAccelVar = (parObj as any)._radialAccelVar;
par.rotationIsDir = (parObj as any)._rotationIsDir;
par.srcBlendFactor = (parObj as any)._srcBlendFactor;
par.dstBlendFactor = (parObj as any)._dstBlendFactor;
// 需要将 emissionRate 放到最后赋值(具体原因暂时不明，放前面赋值会是个无效值，，，，，，，，，，)
par.emissionRate = (parObj as any)._emissionRate;
}
}
});
});
}
以上就是使用的全部内容了，通过以上的方法成功的使用了远端的粒子动画。