How to spawn a sprite/animated sprite using code?

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?

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.

https://developer.playcanvas.com/en/api/pc.SpriteComponent.html#addClip

Though two questions:

  1. Why are you creating a new entity each time you move your pawn? This will have a serious performance issue eventually.

  2. 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.

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

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

2 Likes

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

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.

1 Like

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 :sob:.

1 Like

This is supposed to pc.SpriteAnimationClip, not assets. https://developer.playcanvas.com/en/api/pc.SpriteComponent.html#clips

1 Like

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

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

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

How to transform an asset to a pc.SpriteAnimationClip ?

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

Where this is the sprite component. See: https://developer.playcanvas.com/en/api/pc.SpriteAnimationClip.html#SpriteAnimationClip

1 Like

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!

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,

Sure! Here is the link.