How to create a UI element near to a clicked game object?

I’m trying to implement a Context Menu UI element which will be opened on gameobjectup, when certain game object is clicked. I want to pass some data into it, spawn it relatively to x and y of my game object (call it ObjectClicked) and close on some conditions (mouse click away, “Close” button clicked etc.).

Here’s prototype design:
image

Which APIs of Phaser could you recommend to create something like that? Group? I guess it should contain a text and some kind of list of buttons.

Maybe you could also recommend a few good tutorials on this topic?

Hey VELFR,
You should probably use a Container for this. Just add all of your UI elements to the container, and set the container’s visibility to false. When someone clicks on the circular button, position the container relative to the x, y of the mouse and set the visiblity to true.

Hope that helps!

1 Like

Thanks. But whait if I have multiple clickable objects on a scene? Can I update and move one container or should I create one per ObjectClicked?

Good question and I think it greatly depends on what you’re trying to accomplish. If there can only be one popup open at a time and the popup is always a static layout, I would just create one and position it/populate data based on what button the user clicks.

If there are a few buttons and you can have multiple popups open at once, I would definitely create a popup per button.

If there are many buttons and you can have multiple open at once, I would create the popup onClick and destroy it once it closes. Creating a popup once someone clicks a button is more processor intensive, but you also have to weigh how much memory the program is going to use and you have to consider how long it will take to create all the popups at the start of the scene.

So really, any solution works, you just need to figure out which one is right for the program that you are creating.

I want them to be visible one at a time.

If only one popup is visible at a time, then you would save the most processing / memory by just changing the popup’s position and data when a separate button was clicked.

Here are some ui plugins, you might try dialog plugin for 1 level menu, like this demo shown.