3.X如何实现动态更换精灵背景图片？

Creator 3.x
#1

3.X如何实现动态更换精灵背景图片？
找了好多版本的代码，都不能用啊

#2

有会弄的老师吗？

#3

3D的话替换材质上的图片，2D的还是sprite上的spriteframe

#4

resources.load(‘background1/spriteFrame’, SpriteFrame, (err,assets) => {
console.log(assets)
});

用这段读取到资源后，怎么修改当前的node的 SpriteFrame ？
折腾了半天，能打印出来了，不知道怎么赋值给当前node

#5

https://docs.cocos.com/creator/manual/zh/scripting/dynamic-load-resources.html?h=加载

self.node.getComponent(cc.Sprite).spriteFrame = spriteFrame;
#6

image

请问出现这样的错误提示，需要怎么解决？
3.2.0版本

#7

self?.node.getComponent(cc.Sprite).spriteFrame = spriteFrame;

#8
#9

image
修改图片后，精灵自带的widget组件的填充效果也没有了
如图，两张精灵图的设置是一样的。
换图前，后面的图也是铺满整个高度的，动态更换后，平铺效果就没有了。
该如何设置？

#10

感谢，非常感谢！
另外，换图后，填充效果消失的问题需要如何处理？ :hot_face:

#11

你这是新手吧,查看下sprite组件的sizeMode选下custom试试

#12

OK了，感谢。
对，是新手，昨天刚开始用这个

#13

大佬，再问个问题
用刚才的方式获取本地图片没有问题。
但是用 assetManager.loadRemote 获取网络图片就会报错，帮忙看看是不是中间缺了啥？
image

image
image915×262 15.7 KB

#14

按官方文档，这里会报错
image

#15 
   var remoteUrl = "https://www.baidu.com/img/flexible/logo/pc/result.png";
   assetManager.loadRemote(remoteUrl,{ext: '.png'}, function (err, imageAsset) {
            const spriteFrame = new SpriteFrame();
            const texture = new Texture2D();
            texture.image = imageAsset;
            spriteFrame.texture = texture;

   });
#17

就是直接copy，有报错呀

#18

…,你还是先去b站看下视频以及文档先吧,
3.0以上的我没有试过,你可以试试
let spriteFrame = new SpriteFrame(texture);
self.node.getComponent(Sprite).spriteFrame = spriteFrame;

#19 
 assetManager.loadRemote(url, function (err, image: ImageAsset) {
      if (err) {
        return log(err);
      }

      if (isValid(headSprite.node)) {
        // let oldFrame = headSprite.spriteFrame;
        // if (oldFrame) {
        //   assetManager.releaseAsset(oldFrame.texture);
        // }
        let frame = new SpriteFrame();
        frame.texture = image._texture;
        headSprite.spriteFrame = frame;
        cb && cb(image.width, image.height);
      }
    });