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

Help & Support
1

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'
});
this.app.root.addChild(entity);

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:

Yruama

2

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?

3

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

4

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
5

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 :
type: 'pc.ELEMENTTYPE_IMAGE'

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
});
this.app.root.addChild(entity);

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

6

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

7

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.

8

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
9

Thanks, topic created here. :slightly_smiling_face:

1 Like