I switched over the Common UI while learning UE5 (still very much a beginner) because of a tutorial I saw online on how I can use the CommonActivatableWidgetStack to do a GUI stack for menus similar to what I used to do in Unity. The result has generally been successful with a nested menu test. However, I note that anything I’m putting in my CommonActivatableWidgets for the menus wants to be aligned dead-center.
What could be going wrong? Or alternately, what else can I check other than my anchoring?
What I had done was created completely new CommonActivatableWidgets for a main menu and submenu I already had. I then copy-pasted the widgets and blueprints from the existing widgets’ designer and blueprint views. I was impressed that this pretty much all just worked. The widget stack does what it should.
When I preview the menus, the alignments I give seem to just be ignored. My vertical box for menu buttons is dead-center anyways, but the text label for the main menu and submenu are aligned across the top. I purged the offsets and positions to properly center the text box, but it doesn’t matter. Well, technically the offsets take affect in the preview, but relative relative to dead-center in the screen (both horizontally and vertically), not from the anchor point across the top of the screen.
I added new widgets while messing around and regardless of type and alignment, they all want to be centered. The vertical box was centered originally so it looks fine. The widgets I add are not a child of the vertical box. If I delete the vertical box and its children, the remaining text box still is centered both horizontally and vertically.
I’m assuming this is just bizarre, and beyond just posting the whole project to be scrutinized (I guess I can somewhere), I’m thinking I’ll have to just manually create the Common Activatable Widget and ape everything I was doing in the original User Widget without copying and pasting it all over. I’ll end up doing that some time over the extended US weekend here if nobody else has anything else to suggest.
I created the user activatable widget from scratch without copying in-editor. I just dropped all the control and layout widgets from the designer and redid the blueprint logic based on what the old one looked like. It didn’t fix it, and instead I got a different behavior.
It looks like with the new attempt, I can put text both above and below my vertical layout in the hierarchy. I don’t mean that I make the text a parent or a child, but that in the list directly under the canvas, I can have them above and below next to the vertical box.
If it’s above, then the preview puts the text below the vertical layout box’ stuff in-preview. If it’s below, the preview puts the text above the vertical layout box’ stuff in-preview. So where it is in the linear hierarchy under the canvas is the inverse of how it’s drawn. In both cases, the text ends up being centered both horizontally and vertically. This happens despite setting other alignments and scrubbing my positions and alignments so that they should not be dead-center.
I don’t really know what to do now. I don’t have this problem outside of Common UI and this seems like a pretty basic thing, so I wonder if Common UI is really a early-alpha thing or something and I shouldn’t be touching it.
I simplified further and finally found some agency.
Let’s say I have a canvas, and I put a text box under it. No matter the alignment I use, it will be dead-center in the preview.
Now, I add a border and make the the text box a child. I align the text box to be along the top of this border. If I align the border to be full-screen (whatever the lower-right-most option is in the designer), the text will still be dead-center. However, if I change the border’s alignment to be dead-center, while letting it carry the size it previously established, the text will finally run across the top in my preview.
I want to act like I don’t see this in videos I’ve been following while learning how to do stuff with Common UI (I’ve particularly been figuring out how to use the widget stack). However, I think everybody else happens to use a parent widget that’s aligned dead-center as their root. Is this just the only way to use it?
Sorry to resurrect this, but I hate seeing old posts without an answer when I’m pretty sure there’s one for this. Since using the widget stack involves spawning a new instance of the widget, it doesn’t exist on the canvas of the widget that has the stack component. Therefore, most people create activatable widgets with a Canvas Panel that covers the whole screen and align their components with the idea that the Canvas is centered when it is added to the viewport (which is done manually). This, I believe is the easiest approach, however, you could programmatically modify the placement via blueprints after pushing a new widget onto the stack (use the reference output to access the widget instance).