Prefab - dynamically creating sprite

Hi, looking to get feedback from the community on best practice to allocate a new sprite in the following scenario. We have a pre-fab that models a block and inside is to have an sprite that is to be loaded through code as per game rules.

I noticed in some samples that the scripts declare a dynamic array of sprite-frames and from there logic picks the sprite frame for the sprite. Does this type of declaration impact memory usage, for instance assume you have 100-200 entries available for the sprite

or

in a case like this is it better to declare a string variable to capture the name of the image and load dynamically in code. I tried this approach and get consistently image not found.

Feedback is appreciated

When you a using a SpriteFrame array in your script, they will be loaded when the script is loaded.
So, if the sprite frames in the array are all used, I think there isn’t too many excess memory used. But if you only use a little of them, there should be excess memory used.

Yep, because before use the sprite frames, you should load them at first. Please use cc.loader.loadRes() or cc.loader.loadResAll to load assets in the script. (The asset should be located in db://assets/resources folder). The document for more details are not ready now. It will be coming soon.

Thanks. I still do not manage to load dynamically the image, in the regular Cocos 2d-x and objective C one this is easy.

The asset is there

I am trying to assign at runtime an image for the following in the script

The code

the line that is commented out does not work

Appreciate your help

@alxlozano
The code should be like this:

    // notice that the name should be 'ghost', which DO NOT have 'resources' & extension name(.png).
    cc.loader.loadRes('ghost',cc.SpriteFrame, function (err, spriteFrame) {
         theSprite.spriteFrame = spriteFrame;
    });

@zhangbin thanks, the loading now works! the console confirms the loading, however the assignment does not work, the property is defined at the node level in the script

It looks like inside the “block, or lambda” there is no access to the properties from the node, how to access? The definition below

Appreciate your help

@alxlozano its because this is on a different scope… the this refers to the callback function it self and not to the component of yours…
try this pattern

cc.loader.loadRes('ghost',cc,SpriteFrame,(err,frame)=>{
     this.questionImage.spriteFrame = frame;
});

now that the

()=>{
}

is a new feature of es6, you might want to google it, hope it helps! :smiley:

1 Like

@eydamson awesome that works! thanks.

Hi Eydamson,
PLease help me.
I want to load dynamically images from script (not drag)
I have an Item Class:
var Item = cc.Class({
name: ‘Item’,
properties: {
id: 0,
itemName: ‘’,
itemPrice: 0,
iconSF: cc.SpriteFrame
}
});

And an Items array
items: {
default: [],
type: Item
},
itemPrefab: cc.Prefab

And I want to dynamically load some sprite frame from script

onLoad () {

    for (var i = 0; i < this.items.length; ++i) {
        this.items[i].id=i;
        this.items[i].itemName='name'+ i;
        cc.loader.loadRes('ui/1', cc.SpriteFrame, (err, frame) => {
        
      **//Error here.**        
        this.items[i].iconSF.spriteFrame = frame;

        });   
        
                  

        var item = cc.instantiate(this.itemPrefab);
        var data = this.items[i];
        this.node.addChild(item);
        item.getComponent('ItemTemplate').init({
            id: data.id,
            itemName: data.itemName,
            itemPrice: data.itemPrice,
            iconSF: data.iconSF
        });
    }

Please help me fix this error.
cc.loader.loadRes(‘ui/1’, cc.SpriteFrame, (err, frame) => {

      **//Error here.**        
        this.items[i].iconSF.spriteFrame = frame;

        });   

Thank you very much