Hello, as a web dev I’m used to creating elements in CSS where they can grow and shrink depending on screen size. I couldn’t help but notice that UE4 uses pixels and I assume I’ll need to code in something for DPI check and resize fonts the hard way unless there is something easier?
More-so I noticed that when I test my game under different sizes, the HUD elements are fixed in position rather than move relatively with the window size.
I’d like to be able to learn how to properly setup a HUD that resizes like a div element would on a webpage. I’ve searched around but can’t find the documents that can help me with this. Hopefully someone here knows? ie: element width: 50% viewport width.
I’m also from a web dev background originally. The transition is easier than you think.
Look at the “canvas” item as being like a div. Under the “anchor” dropdown you’ll see the orientation options you need. the one that looks like a filled gray square represents 100% width and 100% height of the parent.
Then look at horizontal and vertical boxes as your nested divs, their contained elements can stretch to match their parent asset’s size (Fill) or sit at a fixed pixel size (Auto) based on either content or sizing instruments like the Size Box.
Another tip, make sure you learn how to manage widget switchers. If you’re looking for the kind of tabbed browsing you’re probably used to creating in either PHP modifications (wordpress etc.) or HTML5, widget switchers will be an easy way for you to get into a similar style of navigation in UMGs.
Essentially you nest all of the widgets and the order in which they appear is automatically their index # in an array. Then you create buttons that switch the visibility of each indexed item. Fast to learn and will take care of most navigation needs.
Basically the whole widget UI is completely flexible unless you start specifying widths and heights. (What you are noticing is probably because those parameters are specified).
unfortunately by default most components are pre-set to arbitrary values that need clearing before being untethered to the screen size and location.
Particularly the sizing/position options and the default anchor point matter a lot for this.
Pitfalls that are part of the system have to do with that actually. If you want a grid to always have a 1pixel spacing between cells you are SOOL. The automated system that manages the scaling takes over and 1pixel is not a unit it knows. Essentially. You can go with 1 unit, but this may result in 10 pixels at 4k and 1 at 800. Despite the fact the fields may be labeled as pixels
The implementation of the box model is poor - in fact let’s just say nonexistent. Instead of assuming it works the same just play with the spacing parameters to figure out / learn how the widget interface uses them. And again, remember that pixels aren’t pixels but work much closer to percentages.
Also, a tip before you go nuts later.
you don’t add 1000 different buttons.
you create a widget, set it up to be a button, and then call it in as a custom widget on the menu interface you created.
This is true for almost any type of input or even images really.
Why? because at some point you are going to want to control something about it that you will have to custom script. The only way to do so is to have a master widget of sort where you can make such customization.
as far as fonts go.
The system actually comes in with built in scaling that alters the font size if you set it up correctly. However this can be (and definitely has been) an issue.
Assume that it is better to have a fixed font size then a liquid one.
Or create a “label” widget, and add custom code to change the font size based on screen percentage.
Be mindful, you want to calculate the percentage based on both X and Y and not just X like for websites css media queries - since the game will have any possible size but never actually resize like a webpage, you can assume that the aspect ratio will remain the same and use that to power the math behind the size choiches.
Ah that is a lot of information everyone, thanks! There is a lot to understand and I’m getting the hang of things, just not the UI positioning stuff. What I expect isn’t what happens and so I’ll try it again tomorrow and re-read what you guys said since it makes sense at least for some of the things I wanted to do. If you make something for a mobile device you have to have something that is well, flexible right?
Right now I have a test app that is not really anything but a bunch of different tutorials in one. One of the things i’m trying to replicate is the user interface positioning of a final fantasy game. (See image below)
Now, obviously you could set it to a single resolution but to me it seems like they probably have a looping image behind the “K” (ish and for each resource count tab) which is spaced equally between the 5 items at the top. Presumably you could do this by setting some kind of spacer image “titled” with a size based on screen width and some math, then adjust the spacer “image” accordingly from the widget blueprint?
I’m only asking because I’m pretty sure that’s how it’s done but there may be a easier way to go about this like in CSS you have vertical width but as I understand from this thread, specifying width and heights may require a bit of code? Thanks again for your help!
And no, you should be able to create an adaptive horizontal box that has a set size based on screen percentage just like in CSS3.
However you have a hybrid instead of a liquid site, which thanks to flex grid and flex box you probably have no idea of what I’m talking about, but it’s how stuff was done up to aeound 6 years ago.
think of it like this
<div style=“width:120px”><img avatar></div>
<div style=“float:left”>
<img leading slant>
<div style=“background-image:#blue”>
<div><img item>#</div>
<div><img item>#</div>
</div>
</div>
Take that same theory and create an horizontal box inside and horizontal box, set both to fit content.
precede the inner box with the slanted image.
Have the background image of the inner one be the image that tiles horizontally.
fill in any content as needed, you can play with the horizontal box spacing settings to define the spacing, flow, etx. Kinda Similar to flex actually.
Obviously, you need to contain all of this within a container that also automatically fits the screen size, and I would actually Pin the first horizontal box to the right. Even if it may end up going over the characters avatar. I Think the UI elements are a bit more important then the picture, but that’s just me.
you could pin it to the left and just give it a fixed left margin so as to fit the picture.
That makes sense, thank you! I think I have been spoiled by the many video tutorials on youtube but it’s refreshing to find the answer in text. I’ll experiment and figure it out based on the answers in this thread. I’m pretty excited actually to dive in again
