Add a button attached to the scene

I want to add a button that can be positioned in my game in the bottom right of the screen. My scene doesn’t have a 2D/3D screen where I can add the button on. I tried adding it to the root but couldn’t do so, I want to have it a fixed place wherever the player moves. Can you please help?

Add a 2D screen then? Then you can place a button that is anchored to the bottom right. I’m not quite understanding the problem?

You can add a 2D/3D screen by right clicking the Root and adding a New Eentity > User Interface > 2D Screen:

As for the button itself, you can follow this tutorial to add a button.

And to position it on the screen, you can use a combination of the Entity’s position and the Anchor properties:

You can pick a pre-defined anchor preset from the drop-down list and pick Bottom Right. This will adjust the Anchor numbers to predefined positions. Those 0 and 1 are normalized width and height. You can treat 1 as 100%, 0.25 as 25% etc.

The Pivot is the location of the point on the element, around which the element would rotate or scale.

Example:
If you put Pivot to 0.5 horizontally (or 50% horizontally) and 0.5 vertically, it will make the pivot point in the middle of the element. Now, if you pick Bottom Right preset, you will see that the element will be placed at the bottom right corner of the 2D Screen.
Edit: You don’t need to adjust the pivot point, if you pick the preset. The preset already has the correct values for pivot point.

If you don’t want it to hug the border, you can adjust the Position of the element. For example, by adding 50 pixels to X and Y will move the button away from the borders by that amount.

2 Likes

My scene is a 3D environment, can you help me if its feasible to add a screen over the whole scene maybe to augment the button on? or there is another way to do so?

Yes, a 2D screen is in screen space.

Edit: read more here https://developer.playcanvas.com/en/user-manual/user-interface/screens/