[SOLVED] Trouble programmatically creating visible image element (entity)

Hi everybody,

Here’s my issue.
I’m trying to programmatically create image element entities (I want to add sprites to my game from code. i’m doing a match 3).
After searching in PlayCanvas manual, I used this code :

var entity = new pc.Entity();
entity.addComponent("element", {
            type: 'pc.ELEMENTTYPE_IMAGE'

The entities are created, I can see them when I launch game and check a console.log(this). They are under this -> app -> root -> _children.
But they are invisible

So, in order to understand what was going wrong, I then went in the editor, from a blank project, and tried different ways to add an image element :

  1. Right-click on Root -> New entity -> Right-click on new entity -> Add component -> Element. The created element is by default a Text element. I switch it to Image. Nothing appears. Applying a texture or changing the colour doesn’t change anything.
  2. Tried the same, but by adding the component from the entity panel on the righ-hand side of the screen. Still invisible.
  3. Right-click on Root -> New entity -> Image Element. This works, it displays a white image ! :slight_smile: However, if I swith to Text element, and then back to Image, the white image is gone. Same effect as when adding a default text Element…
So I went back to my code, and tried :
var entity = new pc.ELEMENTTYPE_IMAGE(); 

Which gives the error : “pc.ELEMENTTYPE_IMAGE() is not a constructor”.

I also tried

var entity = new pc.Texture();

But it gives later in my code the error “entity.setLocalPosition is not a function” (I want to set different positions for these programmatically created sprites).

Can someone please help me ?
Is this a bug ?
Thanks a lot for your help ! :slight_smile:


This is going to sound dumb: Elements need to be attached as a child of a Screen. Is there a entity with the Screen component in your scene?

Thanks for the quick answer.

I tried in the editor the same stuff as I did before. Except that this time it’s as child of a 2D Screen.
The same things happen.

Also, I noticed that the Image Element is invisible in the editor, but visible in the launcher ! This is true for both the cases where the Image Element is a child of Root or a child of a 2D Screen.

But, this doesn’t solve my issue, because the programmatically created entities are still invisible in the launcher. Even when added as children of a 2D Screen (and I know they are present because I see them in the console in the launcher).

Using the example from GitHub: https://github.com/playcanvas/engine/blob/master/examples/ui/index.html

I managed to add an Element via code: https://playcanvas.com/editor/scene/589982

Looks like you needed a texture asset and it’s possible that something in the editor or engine pipeline may have added a default texture hence you get a white square.

1 Like

It worked ! Thanks a lot ! :smile:

Two things were responsible :

  • the lack of texture asset in the instructions of entity.addComponent.
  • the fact that I had written :

and not

type: 'image'

If one of these two conditions is not fulfilled, the sprites don’t appear in the launcher.

Here is the updated code :

Scene.attributes.add('sprite', {type: 'asset', assetType: 'texture'});
var entity = new pc.Entity();
entity.addComponent('element', {
    type: 'image',
    textureAsset: this.sprite

You don’t even have to add the children to a 2D Screen. It works when I add them to Root.

It may not work correct when added to the root (anchors, size etc may be affected).

That’s noted, thanks !
As a side note, the sprites appear much bigger when they are children of Root than children of a 2D Screen.

Now, I have a side question. I’m only talking about the editor here. All the test were done as child of a 2D Screen.
It’s about the texture (the white square). It appeared only when I did New entity -> Image element. Which seems normal, since it is default for the empty texture slot. I changed its colour and it works fine.

  • However, is it normal that in the editor, this white square doesn’t come back if you switch the element type from Image to Text, and then back to Image ?

  • Is it normal that the other two ways that I used to add an Image Element (cf. original post) also cause the texture to never appear ?

Dragging a texture in the texture slot doesn’t make the image come back.

I also saw the same issue. If you refresh the editor the image will appear.
It’s probably a bug. If you can, create a new post in Suggestion & Feedback so that the team could see it better and fix it.

1 Like

Thanks, topic created here. :slightly_smiling_face:

1 Like