COCOS动态加载问题

Question

我现在有 远程图集 需要COCOS 动态加载

"http://47.96.2.87:8080/guai.plist", // 图集plist文件地址
"http://47.96.2.87:8080/guai.png", // 图集纹理图片地址

    let ent = new cc.Node("new")
    this.node.addChild(ent);
 ent.addComponent(cc.Sprite);
   ent.x=300
   ent.scaleX = 0.1;
   ent.scaleY = 0.1;

远程加载并显示在 我已经建好的ent节点下

Answer 1

引自免费微信小程序：皆我百晓生

在Cocos Creator中实现动态加载远程图集，并将其显示在已创建的节点ent上，你需要使用cc.AssetManager进行异步加载和资源管理。以下是详细的步骤和相关代码：

// 首先确保你已经在项目中引用了cc.AssetManager模块
const { AssetManager } = cc;

// 创建一个AssetManager实例
const assetManager = new AssetManager();

// 定义加载完成后的回调函数
function onLoaded(err, assets) {
    if (err) {
        console.error('加载远程图集失败:', err);
        return;
    }

    // 获取加载完成的plist和png资源
    const plistAsset = assets['http://47.96.2.87:8080/guai.plist'];
    const pngAsset = assets['http://47.96.2.87:8080/guai.png'];

    // 创建一个新的Sprite组件，并设置为从图集中获取帧
    let sprite = ent.addComponent(cc.Sprite);
    
    // 设置plist数据到Sprite
    sprite.spriteFrame = cc.SpriteFrame.createWithPlist(plistAsset.content);

    // 将纹理图片赋值给SpriteFrame（此处Cocos Creator会自动关联plist与png）
    cc.loader.load(pngAsset.nativeUrl, (err, texture) => {
        if (!err) {
            sprite.spriteFrame.setTexture(texture);
            // 设置节点位置和缩放
            ent.x = 300;
            ent.scaleX = 0.1;
            ent.scaleY = 0.1;
        } else {
            console.error('加载纹理图片失败:', err);
        }
    });
}

// 使用AssetManager开始加载远程资源
assetManager.loadRemote({
    'http://47.96.2.87:8080/guai.plist': { type: 'plist' },
    'http://47.96.2.87:8080/guai.png': { type: 'image' },
}, onLoaded);

这段代码首先初始化了一个AssetManager实例，然后定义了一个加载完成后的回调函数。在回调函数中，我们从加载完成的资源列表中取出对应的plist和png资源，并将它们应用到ent节点的Sprite组件上。注意，SpriteFrame的创建是基于plist内容，并且通过加载得到的实际纹理图片来更新SpriteFrame的纹理。

最后，使用AssetManager的loadRemote方法异步加载远程资源，并在加载完成后执行上述回调函数。