本文texturepacker導(dǎo)出的圖集文件為.plist和.png格式，代碼部分為T(mén)S缭嫡。
關(guān)于動(dòng)態(tài)加載圖集資源的方法痛侍，我介紹兩種钥弯，第一種是遠(yuǎn)程加載.plist和.png兩個(gè)文件糊饱，第二種是將.plist文件預(yù)設(shè)在屬性檢查器垂寥，將.png遠(yuǎn)程加載或者動(dòng)態(tài)加載（動(dòng)態(tài)加載是資源放在打包后的resources文件夾里）。
先說(shuō)明第一種方式：
第一步：遠(yuǎn)程加載.plist和.png文件
private loadingAtlasPlist(): void {
let self:any = this;
let imageUrlStr: string = "https://...xxx.plist";
cc.loader.load(imageUrlStr, function (error: any, resource: any) {
if (error != null || resource == null) {
console.log("加載.plist文件失敗");
console.log(error);
console.log(resource);
}else {
self.atlasPlist = resource;
}
});
}
private loadingAtlasFrame(): void {
let self: any = this;
let imageUrlStr: string = "https://...xxx.png";
cc.loader.load(imageUrlStr, function (error: any, resource: any) {
if (error != null || resource == null) {
console.log("加載.png文件失敗");
console.log(error);
console.log(resource);
}else {
self.atlasFrame = resource;
}
});
}
第二步：解析.plist數(shù)據(jù)另锋，創(chuàng)建碎圖的精靈幀
// 碎圖的文件名+后綴
let imageStr: string = "xxx.png";
// 獲取.plist文件中關(guān)于此圖的圖片信息
let frameDataObj: any = this.atlasPlist.frames[imageStr];
// 圖片矩形信息
let rect: cc.Rect = Tools.GetFrameData(frameDataObj.frame);
// 圖片的原始大小
let size: cc.Size = Tools.GetSizeData(frameDataObj.sourceSize);
// 圖片合圖時(shí)的裁剪偏移
let offset: cc.Vec2 = Tools.GetOffsetData(frameDataObj.offset);
// 創(chuàng)建此圖的精靈幀
let newFrame: cc.SpriteFrame = new cc.SpriteFrame();
newFrame.setTexture(this.atlasFrame, rect, frameDataObj.rotated, offset, size);
附上上面所需的三個(gè)方法
public static GetFrameData = function (str: string) {
// 13是這個(gè)rect結(jié)構(gòu)至少要有的字符串長(zhǎng)度滞项，例如{{1000,389},{1022,768}}
if (str.length < 13) {
console.log("---解析plist的frame rect，數(shù)據(jù)錯(cuò)誤-----");
return null;
}
let newStr: string = str;
newStr = newStr.slice(2);
newStr = newStr.slice(0, newStr.length - 2);
let newList_0:string[] = newStr.split('},{');
let newList_1: string[] = newList_0[0].split(",");
let newList_2: string[] = newList_0[1].split(",");
if (newList_1.length < 2 || newList_2.length < 2) {
Tools.log("---解析plist的frame rect夭坪，字符串?dāng)?shù)據(jù)錯(cuò)誤-----");
return null;
}
return cc.rect(parseInt(newList_1[0]), parseInt(newList_1[1]), parseInt(newList_2[0]), parseInt(newList_2[1]));
};
public static GetSizeData = function (str: string) {
// 5是這個(gè)size結(jié)構(gòu)至少要有的字符串長(zhǎng)度文判，例如{64,60}
if (str.length < 5) {
console.log("---解析plist的size，數(shù)據(jù)錯(cuò)誤-----");
return null;
}
let newStr: string = str;
newStr = newStr.slice(1);
newStr = newStr.slice(0, newStr.length - 1);
let newList_0: string[] = newStr.split(',');
if (newList_0.length < 2) {
console.log("---解析plist的size室梅，字符串?dāng)?shù)據(jù)錯(cuò)誤-----");
return null;
}
return cc.size(parseInt(newList_0[0]), parseInt(newList_0[1]));
};
public static GetOffsetData = function (str: string) {
// 5是這個(gè)offset結(jié)構(gòu)至少要有的字符串長(zhǎng)度戏仓，例如{22,-24}
if (str.length < 5) {
console.log("---解析plist的offset潭流，數(shù)據(jù)錯(cuò)誤-----");
return null;
}
let newStr: string = str;
newStr = newStr.slice(1);
newStr = newStr.slice(0, newStr.length - 1);
let newList_0: string[] = newStr.split(',');
if (newList_0.length < 2) {
console.log("---解析plist的offset，字符串?dāng)?shù)據(jù)錯(cuò)誤-----");
return null;
}
return cc.v2(parseInt(newList_0[0]), parseInt(newList_0[1]));
};
現(xiàn)在說(shuō)明第二種方式：
先將.plist文件預(yù)設(shè)在屬性檢查器柜去，腳本組件中添加類(lèi)似如下：
@property(cc.SpriteAtlas)
atlasPlist: cc.SpriteAtlas =null;
再遠(yuǎn)程加載.png文件（動(dòng)態(tài)加載resources文件就不上代碼了）
private loadingAtlasFrame(): void {
let self: any = this;
let imageUrlStr: string = "https://...xxx.png";
cc.loader.load(imageUrlStr, function (error: any, resource: any) {
if (error != null || resource == null) {
console.log("加載.png文件失敗");
console.log(error);
console.log(resource);
}else {
self.atlasFrame = resource;
}
});
}
最后解析.plsit文件
// 碎圖的文件名+后綴
let imageStr: string = "xxx.png";
// 獲取.plist文件中關(guān)于此圖的圖片信息
let frameDataObj: any = this.atlasPlist.getSpriteFrame(imageStr);
// 創(chuàng)建此圖的精靈幀
let newFrame: cc.SpriteFrame = new cc.SpriteFrame();
newFrame.setTexture(this.atlasFrame, frameDataObj.getRect(), frameDataObj.isRotated(), frameDataObj.getOffset(), frameDataObj.getOriginalSize());
