How to spawn a sprite/animated sprite using code?

kprimo · September 10, 2020, 4:01am

I want to spawn a small-vfx sprite by coding, and I have tried to code something to realize the target, but the small-vfx sprite doesn’t appear during the game. I don’t know why and how to use sprite in coding correctly.

Here is the code I tried to realize the target (It is under the ‘pawn.js’, I want to spawn sprite when the player is moving):

    var small_vfx = new pc.Entity();
    var sprite01 = this.app.assets.find('small-vfx-01','sprite');
    var sprite02 = this.app.assets.find('small-vfx-02','sprite');
    var sprite03 = this.app.assets.find('small-vfx-03','sprite');
    // var sprite_material = this.entity.sprite._material.clone();
    
    small_vfx.setLocalPosition(pos);
    small_vfx.addComponent("script");
    small_vfx.script.create('smallVfx', {});
    small_vfx.addComponent("sprite", {
        type:"animated",
        clips: {sprite01,sprite02,sprite03},
        autoPlayClip: 'small-vfx-01',
        spriteAsset: sprite01.id,
    });
    
    small_vfx.sprite._colorUniform = new Float32Array(([1, 1, 1]));

And here is the link of my project. Can someone help me?

Leonidas · September 10, 2020, 9:04am

Hi @kprimo,

Not sure what’s wrong here, I think the way you set the clips may be the problem. Normally I would use the addClip() method on the component, since it requires a number of properties to be passed per clip.

Though two questions:

Why are you creating a new entity each time you move your pawn? This will have a serious performance issue eventually.
Instead of fully creating the sprite in code, why not have a disabled “template” entity and clone that instead? This way you can easily customize/tweak it in editor as well.

kprimo · September 10, 2020, 9:15am

yes, you’re right. I have tried this plan, it works.

but anyway I want to find out why we cannot create a new sprite by coding.

kprimo · September 10, 2020, 9:17am

this small-vfx will be destroyed when it’s animation over, so I think it will not cost too much performace.

Leonidas · September 10, 2020, 9:19am

You may be able to get away with it if you a very simple game with a small number of objects. But as a rule of thumb when you are doing live rendering, avoid as much as possible spawning objects on runtime.

Instead try to reuse objects, pooling is a great concept on how to do that.

kprimo · September 10, 2020, 9:29am

Learned, thank you, master. [Orz]

Another question, when I try to use function ‘addClip’ to add a new clip into the entity I created, it reports errors like this:

here is my code:

    var small_vfx = new pc.Entity();
    var sprite01 = this.app.assets.find('small-vfx-01','sprite');
    var sprite02 = this.app.assets.find('small-vfx-02','sprite');
    var sprite03 = this.app.assets.find('small-vfx-03','sprite');
    
    this.app.root.addChild(small_vfx);

    if(sprite01){
        small_vfx.sprite.addClip(sprite01);
    }
    if(sprite02){
        small_vfx.sprite.addClip(sprite02);
    }
    if(sprite03){
        small_vfx.sprite.addClip(sprite03);
    }

I can’t figure out where I made a mistake .

yaustar · September 10, 2020, 9:29am

This is supposed to pc.SpriteAnimationClip, not assets.

yaustar · September 10, 2020, 9:30am

You haven’t added the sprite component yet so sprite is undefined.

kprimo · September 10, 2020, 9:36am

Emma, yeah, yeah. I’m a fool. When I uncomment this code, no error occurs.

but also there are no entities spawned . I’ve got really confused.

kprimo · September 10, 2020, 9:40am

How to transform an asset to a pc.SpriteAnimationClip ?

yaustar · September 10, 2020, 10:04am

    var clip = new SpriteAnimationClip(this, {
        name: this.entity.name,
        fps: 0,
        loop: false,
        spriteAsset: null
    });

Where this is the sprite component. See:

kprimo · September 10, 2020, 1:03pm

you mean ‘new pc.SpriteAnimationClip()’? I’ve tried this way, no error report, but still nothing appeared.

I made a branch called ’Test to create clip by coding‘, I would appreciate it if you could help me find out what’s wrong. Thanks anyway!

Leonidas · September 10, 2020, 1:07pm

Hi @kprimo,

Branches/version control are only visible for users added to the project. Could you try creating a second, smaller, project that reproduces this issue again?

Many thanks,

kprimo · September 11, 2020, 3:51am

Sure! Here is the link.

oxters168 · May 23, 2021, 6:35pm

Hey there, I’m having the same issue. I was able to get no errors when creating the animated sprite, but it is still not appearing. The thing is, I think there may be a bug here. The reason being that I tried in the editor to create a normal sprite then turn it from simple to animated. After adding a new clip and giving it a sprite, nothing shows up. If you create an animated sprite instead in the editor, everything works fine. So I have a feeling it has something to do with that. Or I’m just messing up on my part, but any help would be appreciated. Oh and before I forget, here’s my code to create the animated sprite:

var animSpriteEntity = new pc.Entity(); // Create an Entity
    animSpriteEntity.addComponent("sprite", { type: 'SPRITETYPE_ANIMATED', autoPlayClip: 'clip1' });
    var addedClip = new pc.SpriteAnimationClip(animSpriteEntity.sprite, { name: 'clip1', fps: 4, loop: true, spriteAsset: this.testAnimSprite.resource });
    animSpriteEntity.sprite.addClip(addedClip);
    this.app.root.addChild(animSpriteEntity); // Add it to the Entity hierarchy
    animSpriteEntity.sprite.play("clip1");

yaustar · May 24, 2021, 5:00pm

@oxters168 Here is the way to do it without using the asset directly: https://playcanvas.com/editor/scene/1163586

    var animSpriteEntity = new pc.Entity(); // Create an Entity
    animSpriteEntity.addComponent("sprite", { 
        type: pc.SPRITETYPE_ANIMATED, autoPlayClip: 'clip1' 
    });
    
    var addedClip = animSpriteEntity.sprite.addClip({
        name: 'clip1',
        fps: 4,
        loop: true
    });
    
    addedClip.sprite = this.spriteAsset.resource;
    animSpriteEntity.sprite.play("clip1");
    
    this.entity.addChild(animSpriteEntity);

Also, see: How to create an Animation Sprite Clip with programmatically created Sprite?

Guohao6666 · June 29, 2023, 8:26am

I don’t know how you created this elf image

I also have a Sprite image. How can I create a sprite image like yours
1688027189424

Leonidas · June 29, 2023, 9:26am

@Guohao6666 study the Sprite Editor manual pages here:

Guohao6666 · June 29, 2023, 11:15am

Thank you very much