How do I anchor 3D UI elements?

Godot Version

4.2

Question

I’ve got 3D user interface using sprites3d and viewports, however while in 2d this might be obvious, in 3d the objects arent anchored to the window size:

Any ways to solve this?

Viewport container, viewports camera projection, and project settings scale strategy… Maybe?

You will need to describe your setup in more detail. Tree layout, viewport settings etc.

the images you provided aren’t clear at stating the problem.

A subviewport is projected in 2d canvas layer, so anything that can be done for 2d can also happen for the viewport.

1 Like

Thanks you for the suggestions! The way I handle the UI elements is each one of them is a viewport, solely for the purpose of altering said ui element’s position in 3d environment:

Sprite3D nodes use the child SubViewport node as its texture.

The control nodes for the SubViewport look around the lines of this:
image

I just had an idea to have another subviewport that would act as a “camera” for these viewports, and then use that resulting viewport in a subviewportcontainer in a canvas layer with full rect stretch but thats to be tried yet
edit: doesnt work

Within the container there should be options to expand the window size. If it’s not within the viewport container you may have to wrap it in a control node that can sense the window change. I can’t think of which ones will off the top of my head.

<Maybe another control type>
  ViewportContainer
     Subviewport
         <Ui etc.>

I think your new idea too wrap everything in an another viewport is one option. Another option would be too have the 3d sprites only be one viewport deep. But flat to the canvas layer on a grid container or something. But maybe that’s not the style you want.

I guess to take your idea with a main 3d sprite viewport… you would need to probably have custom code to resize the rectangle on window size changes. It can be done, but it won’t be simple.

Note that for the particular example you’re showing, I would actually recommend not anchoring your HUD elements to the corners. Instead, keep them constrained to a 16:9 area. This makes the HUD easier to visually parse for players on 21:9 ultrawide monitors (or worse, 32:9 superwide). Otherwise, a lot of eye movement is required to read HUD elements.

The question is still relevant as there are valid use cases for anchoring some HUD elements, but essential HUD elements really ought to be easily readable at any aspect ratio.

4 Likes