Putting text on top of a UIActor?

[DaVince]

Hi all, I'm new to ExcaliburJS but liking it tons already. The Typescript integration is a great feature! :)

I'm running into an issue trying to create a speech text box.

- First, I create and add a transparent, colored rectangle to the scene using UIActor.

- Then I create and add the text using a Label.

What ends up happening is that the text is always shown behind the UIActor, even though that rectangle is supposed to be a background.

I've tried using the setZIndex method to force one in front of the other, but it ends up giving me an error when I try to run it:

Uncaught TypeError: Cannot read property 'cleanupDrawTree' of null
    at UIActor../Actor.ts.ActorImpl.setZIndex (excalibur.js:2301)
    at new TextBox (gui.ts:29)
    at game.ts:18

Hope anyone can help!

[DaVince]

Finally managed to figure it out - after seeing the scene graph on https://excaliburjs.com/docs/api/edge/classes/_engine_.engine.html I realized you can add child actors to actors. Adding the text as a child of the UIActor gave me the functionality I was looking for.

Op vrijdag 12 juli 2019 16:09:32 UTC-5 schreef DaVince:

[Kamran Ayub]

Glad you figured it out! I know we will soon be removing the "child" actor feature in favor of a different way to group actors; then you can use the zIndex to manage what gets displayed below or above. I believe right now UIActors always are drawn on top hence why z-index doesn't work intuitively.