Instantiate two prefabs

Hello,

I want to add two Prefabs to the scene, so here is the code:

var i = 0;
        function newTile(parent, position, obj) {
      
            var tile = cc.instantiate(obj);

            tile.position = position;
            tile.name = "tile"+i;
            tile.parent = parent;
            
            var image = cc.url.raw("resources/Sprites/Map/Ground/base.png");
            
            tile.getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(image);
            i = i + 1;
         
        }

            newTile(this.node, new cc.Vec2(128,0), this.groundPrefab);
            newTile(this.node, new cc.Vec2(0,0), this.groundPrefab);

However there is only the first which is display on the screen, why ?

there is a “r” under i = i + 1
do you get any error after instantiated the first tile?

It was the beginning of a new line that I removed
And even without, it does not work

Are both of the nodes instantiated?
If so, it can be a problem with the spriteframe or the position.

1 Like

Yes, i just tried to remove the line which assign a Sprite frame, and it works.
I wonder why the first prefab works

I think you should load the image on the onLoad method only once instead of loading from the url every time you instantiate one prefab.

I just tried with this code:

 onLoad () {
        this.texture = cc.SpriteFrame;
cc.loader.loadRes("resources/Sprites/Map/Ground/base.png", cc.SpriteFrame, function(err, sprite) {
            this.texture = sprite;
         }.bind(self));
    },

    start () {
var i = 0;
        function newTile(parent, position, obj, texture) {
      
            var tile = cc.instantiate(obj);

            tile.position = position;
            tile.name = "tile"+i;
            tile.parent = parent;
             tile.getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(texture);
            i = i + 1;
            
        }

            newTile(this.node, new cc.Vec2(128,0), this.groundPrefab,this.texture);
            newTile(this.node, new cc.Vec2(0,0), this.groundPrefab,this.texture);
        
    }

The prefabs are not displayed, and there are no errors.
It’s strange

In that case, I guess the problem now is that cc.loader.loadRes is asynchronous, so it may happen that the texture is assigned to the tiles before it is loaded.

You can try to call the newTile function inside of the loadRes callback.

However, is it necessary in your case to load the png dynamically?

1 Like

I put the texture in the properties and it works.
I wanted to load them dynamically because each sprite must not have the same texture. So I wanted to make sure that each image was called one by one.
So I created a sprite sheet of all the textures (cc.SpriteFrame), so I wish now cut them, I did not find the method, how to do?

I guess you need to use the sprite sheet as an atlas type property.

Check the manual for further information, I am not very experienced with atlasses.
https://docs.cocos2d-x.org/creator/2.1/manual/en/asset-workflow/atlas.html?h=atlas

I just tried with a SpriteAtlas, it seems to be the solution, however nothing is displayed, while in the console the data seems correct.
The current code:

start () {
var i = 0;
        function newTile(parent, position, obj, texture) {
      
            var tile = cc.instantiate(obj);

            tile.position = position;
            tile.name = "tile"+i;
            tile.parent = parent;
            
            tile.getComponent(cc.Sprite).spriteFrame = texture;

            i = i + 1;
            console.log(texture);
            console.log(tile.getComponent(cc.Sprite).spriteFrame);
            
        }

         newTile(this.node, new cc.Vec2(128,0), this.groundPrefab,this.groundAtlas.getSpriteFrame("base2"));
         newTile(this.node, new cc.Vec2(0,0), this.groundPrefab,this.groundAtlas.getSpriteFrame("base"));
        
    }

Logs:

cc_SpriteFrame {_name: "base2", _objFlags: 0, _native: "", loaded: true, _callbackTable: {…}, …} 

cc_SpriteFrame {_name: "base2", _objFlags: 0, _native: "", loaded: true, _callbackTable: {…}, …}

cc_SpriteFrame {_name: "base", _objFlags: 0, _native: "", loaded: true, _callbackTable: {…}, …}

cc_SpriteFrame {_name: "base", _objFlags: 0, _native: "", loaded: true, _callbackTable: {…}, …}

Why is nothing displayed when the correct values ​​are assigned?

Hm, your code looks fine to me.

Then maybe the problem is in the parent node (aka this.node in your code) or in the prefab.
Did you check those two?

The problem isn’t the parent node (Because it worked with a old script), and that’s my prefab’s propreties:

By removing the line that assigns the texture and putting the image mannualy in the prefab, it works.
So the problematic line is this one:

tile.getComponent(cc.Sprite).spriteFrame = texture;

As mentioned in a previous message, the console indicates that the assignment has been made, so what happens?

I just found the problem:
When I assign a texture to the Atlas and I press apply, it disappear
The atlas:


The raw texture pack:

And when I apply the texture pack to the atlas and I press apply:

That’s why nothing is display on the map

A cocos creator’s bug ?