在些需求需要在游戲中使用遠端下載的粒子搏色。

想到了兩種方案：

1. 遠端下載 plist 文件景图，創(chuàng)建 ParticleSystem 賦值給 file 屬性浩销。（證明了該方法在我們項目里是不可行的跃脊，因為遠端下載的 plist 文件胞得，沒有UUID，不受creator的控制稼跳，會報錯）
2. 遠端下載包含粒子各個屬性的值的 json 文件,在項目中創(chuàng)建 ParticleSystem 自定義粒子屬性(custom),程序賦值所有屬性夜焦。(證明了該方法在我們項目里是可行的,但自定義在代碼里看起來不太美觀，還是需要優(yōu)化的)

下面直接貼一下第二種方法的使用岂贩。

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;
        }

        // 存放文件的遠端服務(wù)器地址(可先建個本地服務(wù)器測試)
        let url = 'https://remoteUrl/' + item.path;

        let fileDir = dirpath + "/particle/";
        let filepath = dirpath + '' + item.path;

        // 本地已存在，則繼續(xù)下載下一個文件
        if (jsb.fileUtils.isFileExist(filepath)) {
            this.particleOrderArray.shift();
            this.downPartlcleData();
        } else {
            // HTTP get請求文件
            this.GET(url, (success, data) => {
                if (success) {
                    if (data) {
                    
                        // 創(chuàng)建存放文件夾
                        if (!jsb.fileUtils.isDirectoryExist(fileDir)) {
                            jsb.fileUtils.createDirectory(fileDir);
                        }
                        
                        // 將文件存放到 filepath 路徑下,存放成功下載下一個文件抹镊，存放失敗則繼續(xù)下載當(dāng)前文件
                        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 {// 請求失敗繼續(xù)下載當(dāng)前文件
                    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. 下載完成后锉屈，使用文件創(chuàng)建粒子動畫

// parNum 是需要下載的粒子的數(shù)量
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);
        // 粒子掛載的節(jié)點的屬性值 和 粒子的屬性值
        let nodeObj = bJsonObj[0]; let parObj = bJsonObj[1];

        // this.remoteEffect是粒子掛載的父節(jié)點
        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;

        // 在節(jié)點上創(chuàng)建粒子
        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) {
                    // 注意：設(shè)置貼圖的時候不能直接設(shè)定texture屬性，因為id原因會報錯垮耳，需要轉(zhuǎn)化成spriteFrame颈渊。根據(jù)api版本不同，我這是1.9.2可使用setDisplayFrame方法终佛，更高版本的應(yīng)該直接有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;
                }
            }
        });
    });
}

以上就是使用的全部內(nèi)容了说敏，通過以上的方法成功的使用了遠端的粒子動畫抄邀。