2021年6月12日

使用远端plist图集

作者 admin
首先要进行load,load后进行拆分图集数据,拆分后初始化,初始化后开始分组,最后是渲染
–> 定义 loaderp.js库
/**
* Extends cc with loaderp (promisified loader)
*/
if (cc && cc.loader) {
constloader = cc.loader;
constloaderp = cc.loaderp = {};
varpromisify = function (method) {
returnfunction (…args) {
returnnewPromise((rs, rj) => {
args.push((err, data) => {
if (err) {
rj(err);
} else {
rs(data);
}
});
loader[method].apply(loader, args)
})
};
};
/**
* Promisified cc.loader.loadRes
*/
loaderp.loadRes = promisify(‘loadRes’);
/**
* Promisified cc.loader.load
*/
loaderp.load = promisify(‘load’)
/**
* Load multiple resource
* const resources = [
* [‘atlas’, cc.SpriteAtlas],
* [‘json’]
* ];
* cc.loaderp.loadResAll(resources).then(([atlas, json]) => {
* this.atlas = atlas;
* this.json = json;
* })
*/
loaderp.loadResAll = function (paramArray) {
constpromises = paramArray.map(args=>cc.loaderp.loadRes.apply(cc.loaderp, args));
returnPromise.all(promises);
};
loaderp.loadAll = function (paramArray) {
constpromises = paramArray.map(args=>cc.loaderp.load.apply(cc.loaderp, args));
returnPromise.all(promises);
};
/**
* Load sprite atalas from remote url
* @param {String} url, url without extension
* @return {Promise}
*/
loaderp.loadAtalas = function (url1,url2) {
returnthis.loadAll([[url1], [url2]]).then(([plist, texture]) => {
if (!plist || !plist.frames) return;
// create sprite frames from plist and texture
constspriteFrames = {}
for (letnameinplist.frames) {
letframe = plist.frames[name];
letrect = plistArrayToCcType(frame.frame, cc.Rect);
letoffset = plistArrayToCcType(frame.offset, cc.Vec2);
letoriginalSize = plistArrayToCcType(frame.sourceSize, cc.size);
constspriteFrame = newcc.SpriteFrame();
spriteFrame.name = name;
spriteFrame.setTexture(texture, rect, frame.rotated, offset, originalSize);
spriteFrames[name] = spriteFrame;
}
returnspriteFrames;
})
};
/**
* Convert {x,y}, {{x,y}, {width, height}} to cc types (cc.Rect, cc.size, cc.Vec2, etc.)
* @param {String} plistArrayStr
* @param {Function} ctor
* @return {Object}
*/
constplistArrayToCcType = functionplistArrayToCcType (plistArrayStr, ctor) {
constary = plistArrayStr.replace(/[^0-9,]/g, ”).split(‘,’).map(x=>parseInt(x, 10));
returnnewctor(…ary);
}
}
game.js 游戏主场景页面
//读取图集plist文件与图片,放到一个数组里
loadAtlas(url) {
constplistUrl = _json.resources.plist[url]
constpngUrl = _json.resources.images[url]
cc.loaderp.loadAtalas(plistUrl, pngUrl).then(altas=> {
this.altas = altas
letframes = this._frames = []
for (letiinaltas) {
frames.push(altas[i]);
}
})
},
this.loadAtlas(‘picAltas’)  //  picAltas 为图集名字
//手动定义图集frame
_createAtlas () {
this.atlas = newcc.SpriteAtlas();
this._frames.forEach(f=>this.atlas._spriteFrames[f._name] = f);
},
//
 //添加sprite组件,添加animation组件,动画播放模式,与速率,动画名字,添加到组件上
creatAnimationClip(){
letsprite = this.getComponent(cc.Sprite)
if (!sprite) sprite = this.addComponent(cc.Sprite);
sprite.srcBlendFactor = this.srcBlendFactor;
constanim = this.animation = this.addComponent(cc.Animation);
constclip = this.clip = cc.AnimationClip.createWithSpriteFrames(this._getFrames(), this.sample);
// animation clip name must be set before add to animation
clip.name = ‘comp-spriteframe-anim’
anim.addClip(clip);
},
//获取自定义动画剪辑
gifCustomClip(node, prefix, sample = 10, repeat = -1, wrapMode = “Normal”) {
constg = node.getComponent(“Gif”)
constframes = []
varj = 1
for (letiinthis.altas) {
if (i == prefix + j + “.png”) {
frames.push(this.altas[i]);
j++
}
}
g.sample = sample
g._frames = frames
//初始化gif组件,创建动画剪辑,并且添加到animation组件上(在gif.js文件里)
g.creatAnimationClip()
g.WrapMode = cc.WrapMode[wrapMode]
g.repeatCount = repeat
//开始播放,
g.play(repeat)
},