3.x如何加载远程图集.plist和他相关的png文件？
喂喂，有人吗？或者有人有更好的替代方案吗？
const plistRegex = /[,{}\s]+/;
const tmpRect = cc.rect();
const tmpSize = cc.size();
private _createSpriteAtlas(plist: cc.Asset, png: cc.ImageAsset) {
const texture = new cc.Texture2D(), sa = new cc.SpriteAtlas();
texture.image = png;
const asset = plist._nativeAsset, frames = asset.frames, _frames = sa.spriteFrames;
for (const key in frames) {
const sf = new cc.SpriteFrame(), frame = frames[key];
sf.texture = texture;
let tmp: string[] = frame.frame.split(plistRegex, 5);
sf.rect = tmpRect.set(parseInt(tmp[1]), parseInt(tmp[2]), parseInt(tmp[3]), parseInt(tmp[4]));
tmp = frame.offset.split(plistRegex, 3);
sf.offset = tmpRect.set(parseInt(tmp[1]), parseInt(tmp[2]));
tmp = frame.sourceSize.split(plistRegex, 3);
sf.originalSize = tmpSize.set(parseInt(tmp[1]), parseInt(tmp[2]));
sf.rotated = frame.rotated;
_frames[key.slice(0, -4)] = sf; //key需要去掉后缀.png
}
return sa;
}
4赞
这个不是加载图集，这个是加载单张图片
我试试，兄弟，感谢
厉害啊，大兄弟
你试过了？我还没空尝试
的确可以，我试了，可以加载远程图集
1赞
强烈建议放到官网文档中去~不要让新人撞破头了
怎么利用这个函数？可否给个demo?这个plist参数我不清楚是怎么构造出这个参数的
import { Asset, ImageAsset, Rect, Size, SpriteAtlas, SpriteFrame, Texture2D, Vec2 } from “cc”;
import { logDebug, logTest } from “…/GameLog/GameLog”;
export class PlistParse {
static parse(atlasFrame: ImageAsset, plist: Asset) {
let altas = new SpriteAtlas();
const texture = new Texture2D()
texture.image = atlasFrame;
const asset = plist["_file"];
logTest(" plist._file", asset);
const _frames = altas.spriteFrames;
for (const key in asset.frames) {
_frames[key.slice(0, -4)] = PlistParse.getSpriteFrame(texture, asset, key);
}
return altas;
}
static getSpriteFrame(texture: Texture2D, atlasPlist: any, imageStr: string) {
// 获取.plist文件中关于此图的图片信息
let frameDataObj: any = atlasPlist.frames[imageStr];
// 图片矩形信息
let rect = PlistParse.GetFrameData(frameDataObj.frame);
// 图片的原始大小
let size = PlistParse.GetSizeData(frameDataObj.sourceSize);
// 图片合图时的裁剪偏移
let offset = PlistParse.GetOffsetData(frameDataObj.offset);
// 创建此图的精灵帧
const sf = new SpriteFrame();
sf.reset({ texture, rect, offset, originalSize: size, isRotate: frameDataObj.rotated })
return sf;
}
public static GetFrameData(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) {
logDebug("---解析plist的frame rect，字符串数据错误-----");
return null;
}
return new Rect(parseInt(newList_1[0]), parseInt(newList_1[1]), parseInt(newList_2[0]), parseInt(newList_2[1]));
};
public static GetSizeData(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 new Size(parseInt(newList_0[0]), parseInt(newList_0[1]));
};
public static GetOffsetData(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 new Vec2(parseInt(newList_0[0]), parseInt(newList_0[1]));
};
}
传入的plist是使用assetManager.loadRemote加载的.plist文件，atlasFrame是使用assetManager.loadRemote加载的png文件
1赞
我使用的是3.6版本
1赞
好的，非常感谢
感谢范例，我在2.4.3的时候，知道后面版本cocos有实现，只是后面没有任务有碰到所以一直没有去实作
我也强烈建议放入官方文档
感谢这位老哥，不过示例代码应该不是用TexturePackerGUI导出的plist文件的，我这边修正一下以适配TexturePackerGUI导出的键名，最后奉上demo:
链接：迅雷云盘
复制这段内容后打开手机迅雷App，查看更方便
如果是用 Download - Free Texture Packer (free-tex-packer.com)导出的plist文件，则自己查看下当前软件导出的图片信息的每一个键名来做相应的代码修改,如下：
<dict>
<key>frame</key>
<string>{{0,0},{510,420}}</string>
<key>offset</key>
<string>{0,0}</string>
<key>rotated</key>
<false/>
<key>sourceColorRect</key>
<string>{{0,0},{510,420}}</string>
<key>sourceSize</key>
<string>{510,420}</string>
</dict>
2.4的改改就能用