Right-aligned NativeUI menu?

So i’m trying to make a nativeui menu align to the right side of the screen. In the UIMenu constructor you can set an offset which could wok but i’m not sure how to set it up so that it won’t depend on resolution of the user.

My thinking was to do something like setting the offset to: screen-width - menu-width. Howerver i can’t seem to find the correct values to use. Does anyone know how to solve this? Thanks!

I don’t know what shape and size your GUI has, but I’d just set it through some easy css code.
Just add:

right: 0;

Well it’s NativeUI so no css. What I’m currently doing is:

var offset = System.Drawing.PointF(Screen.ScaledWidth + 150, 100f);
mainMenu = new UIMenu(“TestTitle”, “~r~TestSubtitle”, offset);

This places it nicely on my screen but i don’t know how to calculate the needed offset dynamically…

You are confusing terms, what you’re trying to do is not NativeUI. I don’t have much experience with building menus with that method. I’m pretty sure I can figure it out whenever I arrive home though.

NativeUI and NUI are confusing terms. I believe he is try to do NativeUI.

NUI = via HTML/CSS/JS (basic webpage)
NativeUI = via C#.


You are on the right track, you need two variables:

  • Width of the screen
  • Width of the menu
float screenWidth = Game.ScreenResolution.Width;
Size menuSize; //Get the size of the menu here....

float xOffset = screenWidth - (menuSize.x / 2.0f);
float yOffset = menuSize.y / 2.0f;

var offset = System.Drawing.PointF(xOffset, yOffset);
mainMenu = new UIMenu(“TestTitle”, “~r~TestSubtitle”, offset);

I’ve never worked with NativeUI, so I don’t know if this is going to line up correctly (because of the way NativeUI calculates the screen space etc.), but this should be the general gist on how to make it right-top aligned.

If it doesn’t work, take one dimension/axis at a the time :slight_smile:

You can find some examples over at:
https://github.com/Guad/NativeUI/tree/898b78826171059a27a6963accb450c656beaad3

3 Likes

Then it’s me who got confused xD
I thought NUI stood for NativeUI, and the other method had another name.

First of all, Guad’s version of NativeUI is not supported for use with FiveM resources, just fyi :wink:

If you want to get the menu to be right aligned, you’ll have to modify NativeUI itself, as it is not designed to work correctly with different resolutions.

I’ve made my own modified version/fork of NativeUI, updated it to the latest original version, ported it to the CitizenFX framework and then continued to fix some bugs in it and pretty much hardcode it to allow for right aligned menus. It’s definitely not pretty internally but it works fine for what I need it to do for vMenu.

You can find this modified version here: GitHub - DevTestingPizza/NativeUI: UI library for Grand Theft Auto V, ported to CitizenFX

Do note that you will have to set every menu’s width offset to +50. You also need to create menus like this:

UIMenu menu = new UIMenu("name", "subtitle", true)
{
    ScaleWithSafezone = false
};

Then of course, set the width offset:

menu.SetMenuWidthOffset(50);

Like I said, there isn’t much customization you can do with it, but it works on every resolution tested and it always right aligns the menu.

4 Likes

So there is no hope with simply setting the offset in the constructor of UIMenu? That’s unfortunate.

You can do that, but only if you have the stock banner at the top (not even a colored one), no width offset and disable scale with safezone size. Then it’s possible with the “un”-modified version. However, you’ll still have the issue where it displays like absolute crap on different resolutions, so I wouldn’t recommend it because other players may not be able to see the menu correct/at all, which is not very user friendly :wink:

I found something that might work. In the UIMenu class there is a method named: GetScreenResolutionMaintainRatio. When i use the width from that as offset for my UIMenu it seems to give me an accurate number. It also seems that the hardcoded width without offset for a menu is 431. So if i use UIMenu.GetScreenResolutionMaintainRatio().width - 500 I get a menu nicely placed to the right.

I tried that, but it sadly never seemed to work for me on some resolutions.

What about LUA?