动态添加精灵，为什么是同时显示

Creator 2.x
#1
  • Creator 版本号：1.6.1
  • 目标平台：web
  • chrome 浏览器
    期望：两个精灵挨个显示，中间间隔1秒钟
    实际：整个方法执行完成后，两个精灵同时显示。

canvas 添加了一个button 并绑定了一个click 事件，如下：
public click() {
let node1 = new cc.Node();
let sprite1 = node1.addComponent(cc.Sprite);
var url = cc.url.raw(‘resources/image/grass.png’);
sprite1.spriteFrame = new cc.SpriteFrame(url);
node1.setPosition(100, 150);
this.ground.addChild(node1);
Util.sleep(1000)
let node = new cc.Node();
let sprite = node.addComponent(cc.Sprite);
var url = cc.url.raw(‘resources/image/grass.png’);
sprite.spriteFrame = new cc.SpriteFrame(url);
node.setPosition(100, 250);
this.ground.addChild(node);
}

Util.sleep(1000) 会停1秒钟。

this.ground.addChild(node1); 图片并没有在场景中显示

@nantas 大神帮忙解惑一下，感谢。

#2

在Creator中使用新的资源，需要预先加载，看官方API文档示例：

// load a cc.SpriteFrame with image path (Recommend)
var self = this;
var url = "test assets/PurpleMonster";
//cc.loader.loadRes函数不会被阻塞
cc.loader.loadRes(url, cc.SpriteFrame, function (err, spriteFrame) {
    //当资源被加载到内存后，执行此函数
    var node = new cc.Node("New Sprite");
    var sprite = node.addComponent(cc.Sprite);
    sprite.spriteFrame = spriteFrame;
    node.parent = self.node
});

如果你不喜欢用异步方式，还有一种办法是将SpriteFrame定义到属性面板上，在编辑中预先设置好，在代码中直接赋值。

properties: {
    image: cc.SpriteFrame //在属性面板中配置好图片
},

click() {
    let node1 = new cc.Node();
    let sprite1 = node1.addComponent(cc.Sprite);
    sprite1.spriteFrame = this.image;
    node1.setPosition(100, 150);
    this.ground.addChild(node1);
  
    let node = new cc.Node();
    let sprite = node.addComponent(cc.Sprite);
    sprite.spriteFrame = this.image;
    node.setPosition(100, 250);
    this.ground.addChild(node);
}

你需要根据自己的实际情况选择使用上面的方法，希望对你有所帮助

#3

这个和资源加载应该没关系吧

#4

这个是分逻辑帧和渲染帧的，你在同一个通缉帧里面创建2个，在下一个渲染帧里面肯定是有2个了。

#5

楼上正解

#6

刚开始接入游戏，了解的不够全面，感谢答复。