[SOLVED] Create Sprite programmatically

[Vlad_Sydorenko]

Hi!
I’m trying to create sprite programmatically. For now no success.
Is it even possible to create sprite from texture and add it to scene programmatically WITHOUT Editor?

I’ve tried different approached. Nothing seems to works.
My code for now is:

const atlas = new pc.TextureAtlas();

            atlas.frames = {

                "0": {

                    rect: new pc.Vec4(0, 0, 128, 128),

                    pivot: new pc.Vec2(0.5, 0.5),

                    border: new pc.Vec4(0, 0, 0, 0)

                },

            };

            atlas.texture = texture;

            const sprite = new pc.Sprite(this.app.graphicsDevice, {

                atlas: atlas,

                frameKeys: '0',

                pixelsPerUnit: 1,

                renderMode: pc.SPRITE_RENDERMODE_SIMPLE

            });

            const spriteAsset = new pc.Asset('Sprite_MoneyStack_3', 'sprite', { url: '' });

            spriteAsset.resource = sprite;

            spriteAsset.loaded = true;

            this.app.assets.add(spriteAsset);

            spriteEnt.addComponent('sprite', {

                // type: pc.SPRITETYPE_SIMPLE,

                type: 'simple',

                spriteAsset: spriteAsset,

            });

            spriteEnt.sprite.sprite = sprite;

Sprite is just doesn’t render. No errors.
What should I do? I’ve tried to set sprite field to sprite component, different mixes of properties - no errors, no sprite rendering.

Can you help me?
Thanks in advance.

[MHA]

Can you share the project?

[Vlad_Sydorenko]

Unfortunately, I can’t share project because of NDA. And the project in Editor is using just for assets, everything creating from scratch from code. The problem that by pipeline everything should be recreated from code without Editor. Models, particles work fine. But sprites just don’t render, without errors.

Textures load fine, they work with models and particles.
TextureAtlas I’ve created by Playcanvas documentation.
Can’t recognize what data Sprite requires to render.

[yaustar]

There’s an example here where it creates a sprite asset for a UI button https://playcanvas.github.io/#user-interface/button-sprite.html

[Vlad_Sydorenko]

@yaustar Thanks.
It’s similar to what I do. But I need the Sprite to render on the 3D scene, not for UI.
It works in Editor, I can easily add Sprite on the scene. But I can’t accomplish it manually from code.

[yaustar]

@Vlad_Sydorenko

It’s similar to what I do. But I need the Sprite to render on the 3D scene, not for UI.

It’s the same process but adding the sprite asset to a sprite component on an entity.

[Vlad_Sydorenko]

@yaustar

It’s the same process but adding the sprite asset to a sprite component on an entity.

That’s what I do when Sprite asset created:

// Create asset
const spriteAsset = new pc.Asset('Sprite_MoneyStack_3', 'sprite', { url: '' });
spriteAsset.resource = sprite;
spriteAsset.loaded = true;

// Add asset to registry
this.app.assets.add(spriteAsset);

// Add sprite component to entity
spriteEnt.addComponent('sprite', {
  type: pc.SPRITETYPE_SIMPLE,
  spriteAsset: spriteAsset,
});
spriteEnt.sprite.sprite = sprite;

But it renders nothing. I can add particle system and everything is working just fine.
But sprite isn’t working on the same entity. That’s how I know that’s entity on the scene and everything is ok.
Maybe I should to provide more data to sprite component? Or should I do it in some specific order?

[yaustar]

Example: https://playcanvas.com/editor/scene/1174939

// initialize code called once per entity
CreateSprite.prototype.initialize = function() {
    var textureAsset = this.app.assets.find('512x512 v2.png', 'texture');
    var app = this.app;

    var texture = textureAsset.resource;
    texture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
    texture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
    texture.minFilter = pc.FILTER_NEAREST;
    texture.magFilter = pc.FILTER_NEAREST;

    var atlas = new pc.TextureAtlas();
    atlas.frames = {
        "0": {
            rect: new pc.Vec4(0, 0, 512, 512),
            pivot: new pc.Vec2(0.5, 0.5)
        }
    };
    atlas.texture = texture;

    var sprite = new pc.Sprite(app.graphicsDevice, {
        atlas: atlas,
        frameKeys: '0',
        pixelsPerUnit: 100,
        renderMode: pc.SPRITE_RENDERMODE_SIMPLE
    });

    var spriteAsset = new pc.Asset('sprite', 'sprite', { url: '' });
    spriteAsset.resource = sprite;
    spriteAsset.loaded = true;
    app.assets.add(spriteAsset);

    var entity = new pc.Entity();
    entity.addComponent('sprite', {
        type: pc.SPRITETYPE_SIMPLE,
        spriteAsset: spriteAsset,
    });

    this.entity.addChild(entity);
};

[Vlad_Sydorenko]

Oh, wow!
Thank you very much, I will try it!

[Vlad_Sydorenko]

@yaustar

Example: https://playcanvas.com/editor/scene/1174939

It works like a charm! Thank you a lot! You’re brilliant!
My code wasn’t working because I didn’t get that atlas waits textureAsset.resource, not textureAsset itself.

The problem is that project that I’m working on now doesn’t use Playcanvas as web service and wants everything to be done from code manually . It confuses me, as I understand Playcanvas is designed like web service, so it is strange to not use it power.

You all, Playcanvas team, is doing a magnificent work! Great engine with great possibilities.
Thank you all!

p.s.
Sorry for my English, I’m working on it.