Loading sprite-sheet png dynamically from url for the Atlas

Cocos Creator
#1

Hello,
I have 6 images that is converted to sprite sheet and it’s name is dynamic-images.plist and dynamic-images.png I’m loading it and getting the sprite frames in the following way.

/resources.loadDir("dynamicAtlas/", SpriteAtlas, (err, atlas) => {
    this.spriteFrames = atlas[0].getSpriteFrames();
});

Now if I have to use different images then I have to replace the existing dynamic-images.png with the different image and create a build.
dynamic-images.plist will not be changed, only images will be replaced with other images in the same position and with same dimension as previous images.

What I want is to load the dynamic-images.png from the server URL and get all the spriteFrames so that I don’t need to take a build everytime I need to use the different images.
Is it possible to replace the new image that is loaded from URL instead of existing images?
I’m using Cocos Creator 3.4.1
Thank you

#2

You can try to modify the SpriteAtlas images through the customization engine.

#3

Can you please provide a little more details on how to achieve that?
It would be helpfull if there is any demo.
Thank you

#4 
    assetManager.loadRemote<ImageAsset>("http://download.cocos.org/CocosTest/zhefengzhang/NoDelete/emoji.png", (err, img)=>{
        console.log(img)
        var texture = new Texture2D();
        texture.image = img;
    })

You can load an image from a remote resource server like this.

1 Like
#5

I am using this for loading images, but can this be applied to SpriteAtlas and replacing the existing image?
One more question, is it possible to load the image during loading the game?
For example, if I want Background image to be fetched from remote, I used the similar code in onLoad() and add the spriteFrame to the Background node but it takes some time to load the image. So what I want is load this image during loading of the game, in application.js and add it to the Back ground node? Is it possible?
Thank you

#6

Why don’t you just add a splash screen where you can prepare your game resources. Once resources are ready, you can go to your original scene with the downloaded background and etc.

1 Like
#7

I have already added splash screen and I got it working loading the images.

#8

@StudioAMK any idea on this?

#9

I think, what he said is

  • create a new custom component based on Cocos’ SpritAtlas

  • instead of loading the merged image and images’ info from internal resources, we modify our codes to download them from internet and load them.

1 Like
#10

Thanks for the reply, will give it a try