解析出来的纹理数据它是压缩过的,所以上述那些方法没错,但都不对,你先得找到它的压缩格式。我试过遍历Texture2D.PixelFormat,没一个合适,所以专业的知识还是交给专业的人吧;
这里贴下我的解决方式:
private f_loadDbComplete(bytes: ArrayBuffer): void {
JSZip.loadAsync(bytes).then((zip) => {
return zip.file(H_cailangren_tex.png
).async(‘blob’);
}).then((pngData) => {
// 方法1——也可以将上面的改成 async(‘base64’),然后url地址传入'data:image/png;base64,' + pngData
// assetManager.loadRemote(URL.createObjectURL(pngData), { ext: ‘.png’ }, (, data: ImageAsset) => {
// let spriteFrame = new SpriteFrame;
// let text = new Texture2D();
// text.image = data;
// spriteFrame.packable = false;
// spriteFrame.texture = text;
// // 设置界面代码
// let view = director.getScene();
// let can = view.getChildByName(“Canvas”);
// if (can) {
// let spNode: Node = can.getChildByName(“spNode”)
// let sp = spNode.getComponent(Sprite)
// sp.spriteFrame = spriteFrame;
// }
// });
// 方法2——原理同1,效率更快。等同于assetManager.parser.parseImage(pngData, null, (err…))
assetManager.parser.parse(‘H_cailangren_tex.png’, pngData, ‘.png’, null, (, data: __private._cocos_asset_assets_image_asset__ImageSource) => {
let spriteFrame = new SpriteFrame;
let text = new Texture2D();
text.image = new ImageAsset(data);
spriteFrame.packable = false;
spriteFrame.texture = text;
// 设置界面代码
let view = director.getScene();
let can = view.getChildByName(“Canvas”);
if (can) {
let spNode: Node = can.getChildByName(“spNode”)
let sp = spNode.getComponent(Sprite)
sp.spriteFrame = spriteFrame;
}
});
}).catch((e: any) => {
console.log(e);
});
}
就是系统普通的打压缩包,我就纳闷了,之做小游戏,用白鹭引擎也是这么解压图片出来使用的,直接把解压出来的arraybuffer数据拿出来就能创建位图了,cocoscreator竟然没有一个合适的方法,这不科学呀 这对MMO之类的,有很多spine角色,或者很多dragonbone对象的游戏不友好,每个2D动画,都需要下载三个文件,无疑对追求网络速度的游戏不好,难道就只能像网官方法那样,每个动画资源,都要下载三个文件?希望官方后续能解决这个问题
png,jpg本身就是像素数据的一种压缩格式,当然不能直接传。最简单的方法是,先把这个二进制转换成base64,或blob,然后生成 HTMLImageElement或ImageBitmap。
imageAsset.reset(HTMLImageElement|ImageBitmap);
刚刚写了一份,能跑起来:
// 基本上是摘抄的引擎 cocos\asset\asset-manager\downloader.ts 和 cocos\2d\assets\sprite-frame.ts 里面的代码
const xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
// xhr.responseType = 'blob'; // 正常加载图片就是直接请求 blob 格式,然后用 createImageBitmap 创建
xhr.open('GET', 'https://www.google.com/images/errors/robot.png');
xhr.send(null);
xhr.onload = () => {
if (xhr.status === 200 || xhr.status === 0) {
const buffer: ArrayBuffer = xhr.response;
console.log(buffer);
const blob = new Blob([buffer]);
createImageBitmap(blob).then((ImageBitmap) => {
const tex = new Texture2D();
tex.image = new ImageAsset(ImageBitmap);
const spf = new SpriteFrame();
spf.texture = tex;
// this.sp 是挂载在脚本上的 Sprite 对象
this.sp.spriteFrame = spf;
}).catch(e => error(e));
}
};
此时所有引擎都是同个道理,封装+工具。如果动画是远程资源,确实得写的长一点,但是你能封装成一个工具或组件嘛,后续调用就很方便了,毕竟引擎本身也是一个“工具”
嗯嗯,幸好楼上“轨迹”的方法可以用,解决了这个问题,cocoscreator的工具和插件不会写,嘿嘿,刚转cocoscreator,得移植以前自己写的一套加载器过来用,自定义的数据,自己管理加载流,自己控制下载,会方便些
你那个创建不出来纹理是,你给的地址是整个龙骨文件的压缩吧,如果也是一张png图片地址应该也没问题
好的,感谢
是整个龙骨文件 的压缩,其它的两个配置文件也可以从zip包里读取的
从返回的arraybuffer里面截取纹理部分buffer也能创建出来吧,你提供的解压缩方法返回的是所有资源的arraybuffer
是的,
你看整个压缩包是方法参数的bytes,用jszip去从bytes取出图片对应的二进制img_ArrayBuff,这个img_ArrayBuff是用来创建图片的,其它的两个配置文件一样可以用jszip从bytes读取出来,不知道我这么说你明白了没?
明白,但是我看这个img_arraybuffer里面好像不只是png的信息
img_arraybuffer只有图片的信息哈,亲测可用的
哦好吧,那应该是我这里的问题
嗯,如果还有问题,欢迎发上来,让大伙一起帮帮忙
你好,遇到个问题,你项目有上微信小游戏么?怎么实现这个转换?
这个在原生平台加载不出来啊