随手记录一下使用cocos框架从resources文件夹下加载图片过程中出现的一个问题,虽然我也不懂为什么要这么改,希望有大神可以赐教一下。
初始代码如下:
import { _decorator, Component, Sprite, SpriteFrame, resources } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('ImageLoader')
export class ImageLoader extends Component {
start() {
this.loadImageAndApply();
}
loadImageAndApply() {
const imagePath = 'images/1'; // 不包括文件扩展名
resources.load(imagePath, SpriteFrame, (err, spriteFrame: SpriteFrame) => {
if (err) {
console.error(`Failed to load image at path '${imagePath}':`, err);
return;
}
const sprite = this.getComponent(Sprite);
if (!sprite) {
console.error('Sprite component not found on the node.');
return;
}
sprite.spriteFrame = spriteFrame;
});
}
}
简单说一下这段代码是希望能够从resources中读取图片然后挂载到节点的sprite组件上。但是经过实践发现会一直报错“找不到文件”
Failed to load image: Error: Bundle resources doesn't contain images/1
at _loop (url-transformer.ts:106:35)
at parse (url-transformer.ts:40:44)
at Pipeline.sync (pipeline.ts:218:28)
at preprocess (preprocess.ts:68:55)
at Pipeline._flow (pipeline.ts:261:9)
at Pipeline.async (pipeline.ts:256:14)
at AssetManager.loadAny (asset-manager.ts:539:18)
at Bundle.load (bundle.ts:247:31)
at ImageLoader.loadImageAndApply (ImageLoader.ts:14:19)
at ImageLoader.start (ImageLoader.ts:8:14)
(anonymous) @ ImageLoader.ts:16
经过伟大的gpt反复折腾之后,gpt给出了一个能够解决上述问题的方案,但我还是不是很清楚具体原理。修改后的代码如下:
import { _decorator, Component, Sprite, SpriteFrame, resources, ImageAsset, Texture2D } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('ImageLoader')
export class ImageLoader extends Component {
start() {
this.loadImageAndApply();
}
loadImageAndApply() {
const imagePath = 'images/1'; // 资源路径,不包括文件扩展名
resources.load(imagePath, ImageAsset, (err, imageAsset: ImageAsset) => {
if (err) {
console.error(`Failed to load image asset at path '${imagePath}':`, err);
return;
}
// 创建 Texture2D 对象
const texture = new Texture2D();
texture.image = imageAsset;
// 创建 SpriteFrame 并设置 Texture2D
const spriteFrame = new SpriteFrame();
spriteFrame.texture = texture;
// 获取当前节点的 Sprite 组件
const sprite = this.getComponent(Sprite);
if (!sprite) {
console.error('Sprite component not found on the node.');
return;
}
// 设置 SpriteFrame
sprite.spriteFrame = spriteFrame;
});
}
}
可以发现它是先将图片用imageasset读入再一步一步进行转换。
好了,就这么简单地记录一下。恳请各位大佬赐教
==============================================================
2024.02.03更新
在官方文档里找到了答案,之前没有认真看官方文档。
因为我加载的是png文件,所以得到的类型应该是ImageAsset。因此需要从imageasset到texture再到spriteframe的转换。