CocosCreator动态加载texturepacker图集并解析

本文texturepacker导出的图集文件为.plist和.png格式，代码部分为TS。

关于动态加载图集资源的方法，我介绍两种，第一种是远程加载.plist和.png两个文件，第二种是将.plist文件预设在属性检查器，将.png远程加载或者动态加载（动态加载是资源放在打包后的resources文件夹里）。

先说明第一种方式：
第一步：远程加载.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数据，创建碎图的精灵帧

// 碎图的文件名+后缀
let imageStr: string = "xxx.png";
// 获取.plist文件中关于此图的图片信息
let frameDataObj: any = this.atlasPlist.frames[imageStr];
// 图片矩形信息
let rect: cc.Rect = Tools.GetFrameData(frameDataObj.frame);
// 图片的原始大小
let size: cc.Size = Tools.GetSizeData(frameDataObj.sourceSize);
// 图片合图时的裁剪偏移
let offset: cc.Vec2 = Tools.GetOffsetData(frameDataObj.offset);
// 创建此图的精灵帧
let newFrame: cc.SpriteFrame = new cc.SpriteFrame();
newFrame.setTexture(this.atlasFrame, rect, frameDataObj.rotated, offset, size);

附上上面所需的三个方法

public static GetFrameData = function (str: string) {
    // 13是这个rect结构至少要有的字符串长度，例如{{1000,389},{1022,768}}
    if (str.length < 13) {
        console.log("---解析plist的frame rect，数据错误-----");
        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，字符串数据错误-----");
        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是这个size结构至少要有的字符串长度，例如{64,60}
    if (str.length < 5) {
        console.log("---解析plist的size，数据错误-----");
        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，字符串数据错误-----");
        return null;
    }
    return cc.size(parseInt(newList_0[0]), parseInt(newList_0[1]));
};
public static GetOffsetData = function (str: string) {
    // 5是这个offset结构至少要有的字符串长度，例如{22,-24}
    if (str.length < 5) {
        console.log("---解析plist的offset，数据错误-----");
        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，字符串数据错误-----");
        return null;
    }
    return cc.v2(parseInt(newList_0[0]), parseInt(newList_0[1]));
};

现在说明第二种方式：
先将.plist文件预设在属性检查器，脚本组件中添加类似如下：

@property(cc.SpriteAtlas)
atlasPlist: cc.SpriteAtlas =null;

再远程加载.png文件（动态加载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文件中关于此图的图片信息
let frameDataObj: any = this.atlasPlist.getSpriteFrame(imageStr);
// 创建此图的精灵帧
let newFrame: cc.SpriteFrame = new cc.SpriteFrame();
newFrame.setTexture(this.atlasFrame, frameDataObj.getRect(), frameDataObj.isRotated(), frameDataObj.getOffset(), frameDataObj.getOriginalSize());