I'm building a new UI for my game and have some large artwork (stonework & skull) for the bottom frame as seen in the photo below.

Right now that's actually a stretch/fill background image that is part of the Player HUD that's for HP/MP. My GUI is set not to scale so the artwork fits properly.

Is this the best/right way to go about adding in UI elements like this as background images in HUDs? Or should they be added as a child of the ORK canvas object that gets added at runtime? I actually have some other HUDs that need to fit within this bottom bar as well.

If so, how exactly is that done?

image
  • Probably best to have it as a background image of a HUD, that gives you some control over when to display it (through showing or hiding the HUD). Other HUDs that should align with that background will just have to be placed accordingly.
    Please consider rating/reviewing my products on the Asset Store (hopefully positively), as that helps tremendously with getting found.
    If you're enjoying my products, updates and support, please consider supporting me on patreon.com!
  • Your game looks awesome btw :)
    image
    Olive Branches ~ in development ~ now with a WEBSITE!!!
  • @FancyFerretStudios - When I need to set up a UI layout where menus or HUDs need to be docked to screen edges, I'll typically create a separate GUI Layer for each set of elements that need to have the appearance of a single "object" on the screen.

    For the HUD across the bottom of the screen, I'd create its GUI layer as Scale to Fit and with a Lower Center anchor.

    When you're running in the Editor with the Game window not in a 16:9 aspect ratio, the background may not fill the width of the screen, but it will look fine in a build -- as long as the display uses a 16:9 ratio, of course.
    Right now that's actually a stretch/fill background image that is part of the Player HUD that's for HP/MP. My GUI is set not to scale so the artwork fits properly.
    This approach works as long as you can be certain that your players will only be using displays with a 16:9 aspect ratio. The older style 4:3 monitors are mostly gone now, but before 16:9 emerged as the standard, 16:10 screens were not uncommon. 21:9 ultra-wide displays are gaining popularity now as well.

    You can build in greater tolerance for other aspect ratios by borrowing Web design techniques. For example, I would extract the middle section of the background into a separate image, then fill in the middle between the two corner pieces such that the middle can be stretched or tiled when you configure the image as "sliced."

    You'd have to experiment with what looks better: stretching/tiling the straight "corner" pieces and keeping everything from the slopes inward a constant size, or keeping the sloped areas where they are and allowing the narrow section in the center to adjust its width. Doing with would require some adjustments in Photoshop to create areas that can tile nicely. Extracting the skull and wings to another separate image would give you more flexibility.

    You can make the image extra wide and center it so that the ends get cut off on a standard 16:9 display, but on a narrower screen, your HUD elements anchored to the corners may overlap the center area.

    As far as disaying the background in ORK, I might be inclined to create a HUD just for the background (say an Info HUD) and perhaps give that it's own layer as well, so that you can guarantee that it will always be behind HUD elements. Just make sure that the HUD Layer has a higher index number than the HUD Background Layer (and make sure they use the same scaling and anchor settings).


  • Keldryn said: When you're running in the Editor with the Game window not in a 16:9 aspect ratio, the background may not fill the width of the screen, but it will look fine in a build -- as long as the display uses a 16:9 ratio, of course.
    Ahhh, ok this explains the weird difference in size I kept getting with the background in the editor. It was just slightly off on the edges.

    I figured to get this all properly working to the greatest degree was going to require a series of layered HUDs.

    Thanks for the tips!

  • You're welcome!

    One thing I forgot -- if you're not scaling the UI canvas at all but just using constant pixel size, your UI will be half size on higher pixel density screens, regardless of aspect ratio -- such as 4K displays.
Sign In or Register to comment.