How can I make textured GUI work well in my game?

Help and Feedback Art Design Support
,
#1

The Problem

With my project, Legend of the Eldritch, back on-track I realized that textured GUI is difficult to do right. Issues I ran into are:

  1. Stretching;
    (Stretched GUI looks awful but I don’t want to use simplistic GUI in a game that’s supposed to be realistic. It won’t suit the aesthetics!)
  2. 9-slice is not ideal ;
    (9-slice only works well when the GUI does not have any form of details for it will stretch the details out nonetheless; I want to keep the details, though!)

Unless I’m mistaken these issues are bothersome and I’m wondering if anyone knew one or two solutions.

Example GUI

The GUI below is an old GUI I used as background for certain menus. I will re-design the GUI later on.

BackgroundFrame
BackgroundFrame850×1024 753 KB

The Question

With this example in mind, could anyone help me out with how I can properly re-design the GUI in general so that stretching will be minimal while it allows responsiveness (e.g re-scaling the same GUI with minimal stretching)?

2 Likes
#2

Your best bet is to scale it but use a UIAspectRatioConstraint so it doesn’t look stretched out, might look blurry on really large screens but it won’t look elongated or anything :smile:

2 Likes
#3

Thanks :slight_smile:
But what if I want to scale it only one way? :thinking:

#4

Instead of using slice, you can try using crop or fit to make it not look stretched out while still being able to edit it.

1 Like
#5

Do you mean you want it to stretch only on one axis?

1 Like
#6

You could try making your frame out of three segments (I’ll demonstrate it horizontally, but this works vertically too - you can even try and do both at once!)

Here’s how:

You’re gonna have two frames for each end of the UI and one middle bit of the frame you want to stretch out. We’ll call them start, middle and end, and they come together to make the entire frame:

image
image725×505 4.77 KB

You can use a UIAspectRatioConstraint to make sure the start and end frames don’t stretch in any weird ways. Then, the middle frame takes up all the space between the start and the end (you might need a small script to calculate the size of the middle frame for this, unless you’re using Offset scaling in the rest of the UI)

On the start and end frames, we can just put the start and end parts of the frame:

image
image1000×555 122 KB

Then, the middle frame needs to fill in that remaining space! :thinking:
A visually appealing way of doing this is by using a tiling image (you can set the ScaleType of the image to Tile to do this)
This will repeat a section of the frame image over and over to fill the gap:

image
image1000×560 219 KB

You could also try other ways of filling in that middle frame. Hopefully this helps you get an idea of how you could approach this!

7 Likes
#7

No basically both, but I want to be efficient and be able to re-use the same GUI for multiple things. :sweat_smile:

#8

Sweet!!
I’ll make sure to try that out :smile:

Thank you!