CocosCreator3.0加载远程图片资源

朴灿烈づ我的快乐病毒、 2022-11-10 01:27 596阅读 0赞

在微信小游戏平台，需要获取了微信头像，对于这个需求，需要这样来做：

获取微信用户信息=》得到微信小游戏头像的http地址=》在Cocos引擎使用loadRemote来加载。

这其中的问题在于：使用loadRemote加载时获得的对象和2.x的版本不一样（在这里不讨论2.x的版本处理了）。

在3.0中，loadRemote加载的资源的类型都是**ImageAsset**，**SpriteFrame和Texture都是ImageAsset的子资源。**如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 2][]

所以，我们需要用ImageAsset的接口，先获取ImageAsset的texture属性，再创建一个SpriteFrame，然后用ImageAsset的texture给SpriteFrame的texture赋值。

代码大概这样：

一：远程接口定义

/**
        * 加载远程资源
        * @param path 
        * @param cb 
    */
    static loadRemote<T extends Asset>(path: string, cb?: LoadCompleteCallback<T>) {
        assetManager.loadRemote(path, { ext: '.png' }, (err: Error | null, asset: Asset) => {
            if (err) {
                error(err.message || err);
                return;
            }
            if (cb) {
                cb(err, asset as T);
            }
    
         });
    }

二：调用远程接口

ResMgr.loadRemote(data.avatarUrl, (err, asset: ImageAsset) => {
        let spriteFrame = new SpriteFrame();
        spriteFrame.texture = asset._texture;
        this.avatarIcon.spriteFrame = spriteFrame;
    })

或者：

ResMgr.loadRemote(data.avatarUrl, (err, asset: ImageAsset) => {
        this.avatarIcon.spriteFrame = SpriteFrame.createWithImage(asset);
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70]: /images/20221023/e7a4c37766a147338e3d09c9d7abdf1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 1]: /images/20221023/777069b575164205b12c57e040305944.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 2]: /images/20221023/735eb7451ce54ee2a69af1d823d4ba10.png