"Lobby" menus discussion / Pause menu research

CritteR · 2021-07-16T19:22:29.633Z

I uploaded the resource to GitHub - CritteRo/fivem-lobby-pausemenu: Lobby style pause menu research resource if you want to check for yourself.

Found a couple of nice things:

TriggerScreenblurFadeIn(1) and TriggerScreenblurFadeOut(1000) are used to create that “menu screen blur” effect, but I’m sure you need to pair to other screen effects in order to get the original MP_PAUSE background feel.
Managed to get R* and mission type icons on the left-side buttons.

image514×603 51.2 KB
Made a “proof of concept” command for button press. (/pressfr command. “Enter” by default)

CritteR · 2021-07-17T18:58:58.336Z

The menu is pretty much done:

image1920×1080 277 KB

Found 2 new string params in SET_COLUMN_TITLE scaleform. Turns, those are textureDirectory and textureName!!
It’s suited for 256x128 images, otherwise it gets stretched. Works with existing texture files, streamed .YTD, and even with some CreateRuntimeTextureFromImage() action.

This will be my final update here. Expect a framework release soon.

Github, btw: GitHub - CritteRo/fivem-lobby-pausemenu: Lobby style pause menu research resource

SleepingTears · 2021-07-18T14:16:47.076Z

Excellent work! I tested some things with a menu like this month ago but never got the Image to work!
Thanks for all the work for the community!

CritteR · 2021-07-18T15:19:45.018Z

Glad you like it! It was a very fun resource to work on.

I found even more settings for the frontend menu, that could not get into this specific menu, like locking tabs, or the big textbox that you can see on the “Info” tab on the pause menu.

Also, I have reason to believe that all frontend menus are split into 3 columns. Don’t know what to do with this information yet, but it’s definitely good to know.

negbook · 2021-07-19T14:28:07.539Z

Next mission:
research_char_creation.lua (3.0 KB)

Jaymo · 2021-07-25T10:47:52.160Z

Sorry, I only just got the @ now due to being overwhelmed with other forum notifications. I haven’t really seen any detailed explanations of the frontend menu system so I guess I’ll start from the beginning.

Within decompiled scaleform files, the term “pausemenu” is what natives / game script call “frontend” menu as essentially, they are the same UI but the actual in game pause menu is handled by the engine whereas “frontend” is manipulated by game scripts. This can cause much confusion as scaleform makes no mention of “frontend” except for some numerical control constants whereas natives have distinct pause menu functions as well as frontend ones.

When a frontend menu is being loaded (usually when ACTIVATE_FRONTEND_MENU is called) the game uses data loaded from the data/ui/pausemenu.xml file to figure out what functions it will call the pausemenu/frontend scaleforms with. The pause menu version being loaded determines what “screen” will be loaded initially, what “header” to use, the flags which the scaleform and UI backend within the game engine will use, the “pause menu contexts” to initially activate and the hud colour to be used on all menu items by default.

For the example frontend shown here, everything below the SETTINGS - PLAYERS - DETAILS bar is considered the frontend itself whereas that bar and all above is considered the “frontend header” which you control with the BEGIN_SCALEFORM_MOVIE_METHOD_ON_FRONTEND_HEADER native. Internally, the header is just another part of the root frontend menu object and some methods you call within the frontend will call methods on the header.

A menu “screen” will specify a GFx file to load, said GFx file will contain a class that extends com.rockstargames.gtav.pauseMenuPages.PauseMenuBasePage called the menu “page”. Like all other scaleforms, when this file is loaded, it will set the TIMELINE variable to an instance of said class however it also calls the method LOADED_PAGE on its 3rd level parent which will be a class that extends com.rockstargames.gtav.pauseMenu.pauseMenuItems.PauseMenuContentBase. Only one such class exists, that being com.rockstargames.gtav.pauseMenu.PAUSE_MENU_SP_CONTENT.

A menu “page” defines what menu “columns” to load, each column being a class that extends com.rockstargames.gtav.pauseMenu.pauseComponents.PauseMenuComponentBase. If a column wants to take advantage of the data slot interface, it needs to contain a “model” that extends com.rockstargames.ui.components.GUIModel which contains a “view” that extends com.rockstargames.gtav.pauseMenu.pauseMenuItems.PauseMenuViewBase. The view is then responsible for creating instances of and arranging the "item"s contained within it. The class for said item extends com.rockstargames.gtav.pauseMenu.pauseMenuItems.PauseMenuBaseItem.

Succinctly, a screen loads a page that contains 1 or more components that in this context are known as columns. Components that implement data slots have a model that contains an instance of a view that contains 1 or more items.

The class inheritance is very important here to understand where the data goes when you call, for example, the SET_DATA_SLOT method as the parameters get passed down through many layers of abstraction.

The parameters to SET_DATA_SLOT and UPDATE_SLOT are as follows however, some item implementations also use some of these “standard” parameters.

Argument Index	Name	Type	Description
0	Column Index	INT	The column containing the slot to set the data of.
1	`slotIndex`	INT	The index of slot to set the data of.
2	`menuID`	INT	Used to keep track of what item of the pause menu this slot belongs to. You should use IDs from `com.rockstargames.gtav.constants.PauseMenuLUT` where it makes sense to do so.
3	`uniqueID`	INT	Used to uniquely identify items within a view. You can really use anything you want however, integers greater than 1000 can have special functions and execute actions when clicked that you’d otherwise not want to happen so, to be safe, don’t use anything greater than 1000.
4	`type`	INT	The subtype of this item.
5	`initialIndex`	INT	The initial index to show in a list item.
6	`isSelectable`	BOOL	A boolean controlling if the item can be selected. Unselectable items are greyed out when displayed and skipped over in navigation.
7 onwards		Any	Additional data used by the implementation of the item.

The process of figuring out what item implementations are used by what page gets annoying if you don’t have all the decompiled scaleform script easily searchable so I recommend you extract all actionscript from all of the scaleforms and put it into one directory you can search through. You also need to reference pausemenu.xml but since we’ll be doing this in FiveM, you want to use the file located in your FiveM Application Data at citizen\common\data\ui\pausemenu.xml.

I haven’t exactly got it down to a science yet but when a screen loads, it loads every <Item> with it. If those items have their <MenuAction> set as MENU_OPTION_ACTION_LINK then, the screen corresponding to the <MenuUniqueId> will also be loaded. The menu screen <depth> tag helps in this as <depth> = 0 screens are almost always headers, <depth> = 1 screens are columns and <depth> = 2 screens are context menus, the ones that contain options to kick players and such.

As an example, we’ll take a look at FE_MENU_VERSION_CORONA. So, we go from <InitialScreen>MENU_UNIQUE_ID_HEADER_CORONA</InitialScreen> to a <Item> <cTextId>PM_SCR_SET</cTextId> <MenuAction>MENU_OPTION_ACTION_LINK</MenuAction> <MenuUniqueId>MENU_UNIQUE_ID_CORONA_SETTINGS</MenuUniqueId> </Item> to a <cGfxFilename>PAUSE_MENU_PAGES_CORONA</cGfxFilename> meaning the file containing the page for the initial state of the menu version FE_MENU_VERSION_CORONA is pause_menu_pages_corona.swf.

The first frame of that GFx file puts an instance of com.rockstargames.gtav.pauseMenuPages.PAUSE_MENU_PAGES_CORONA onto the TIMELINE so that’s our page!

The setupPage function of this page looks like this:

function setupPage()
{
	super.setupPage();
	this.column1 = this.addColumn("freemodeList",1,0);
	this.column2 = this.addColumn("freemodeDetails",2,580);
	this.column3 = this.addColumn("freemodeMap",3,580);
	this.column4 = this.addColumn("mpFriendsList",4,290);
	this.setupColumns(this.column1,this.column2,this.column3,this.column4);
	this.setupColScroll([this.column1,this.column2,this.column3,this.column4],[true,false,false,false]);
}

The column at index 0 is an instance of the class registered as "freemodeList" and is offset by 0 on the x-axis. Column index 1 is a "freemodeDetails" instance offset by 580, appearing in the 3rd column visually. Column index 2 is a "freemodeMap" instance also appearing in the 3rd column, underneath the first component. Column index 3 is a "mpFriendsList" instance appearing in the 2nd column visually.

These strings, internally called linkageIDs, point to whichever class is registered with Object.registerClass(linkageID, class). For this example, here are all referenced classes and their actual names:
"freemodeList" → com.rockstargames.gtav.pauseMenu.pauseComponents.PAUSE_MENU_FREE_MODE
"freemodeDetails" → com.rockstargames.gtav.pauseMenu.pauseComponents.PAUSE_MENU_FREEMODE_DETAILS
"freemodeMap" → com.rockstargames.gtav.pauseMenu.pauseComponents.PAUSE_MENU_FREEMODE_MAP
"mpFriendsList" → com.rockstargames.gtav.pauseMenu.pauseComponents.PAUSE_MP_MENU_FRIENDS_LIST
"freemodeListItem" → com.rockstargames.gtav.pauseMenu.pauseMenuItems.singleplayer.PauseMenuFreemodeItem

This is the INITIALISE function of component for column 0:

function INITIALISE(mc)
{
    // [snip]
	this.model = new com.rockstargames.gtav.pauseMenu.pauseMenuItems.singleplayer.PauseMenuFreemodeModel();
	this.model.createView(0,{id:0,x:0,y:0,rowSpacing:2,columnSpacing:0,container:this.CONTENT,linkage:["freemodeListItem"],visibleItems:16,selectstyle:com.rockstargames.ui.components.GUIView.SCROLL_SELECTSTYLE});
    // [snip]
}

For the 0th column, that has a this.model of com.rockstargames.gtav.pauseMenu.pauseMenuItems.singleplayer.PauseMenuFreemodeModel with a view that uses the class registered as "freemodeListItem" as it’s item class.

Looking into com.rockstargames.gtav.pauseMenu.pauseMenuItems.singleplayer.PauseMenuFreemodeItem, we can finally see how the parameters we pass to SET_DATA_SLOT actually get rendered and used!

Within said class, the function this.__get__data() gets an array of the parameters after argument 6 and other functions refer to previously documented names of the class. The interesting stuff is within the __set__data(_d) override. We can see that argument 7 is the itemLeftText, argument 8 controls the verifiedMC (verified [badge] Movie Clip) and so on.

Now that we know how to get our items to display however we want, how do we tell when the player has selected an item and most importantly which item they’ve selected? I discovered some natives through decompiled scripts to help with such which were already shared however, I’ve now also discovered where that data comes from.

When scaleform calls the game interface method LAYOUT_CHANGED or LAYOUT_CHANGED_FOR_SCRIPT_ONLY, the native 0x2E22FEFA0100275E is set to true for one frame and the native 0x7E17BE53E1AAABAF will return the 1st, 3rd and 2nd parameters to the game interface call in specifically that order. Similarly, when TRIGGER_PAUSE_MENU_EVENT is called, the native 0xF284AC67940C6812 will return true for one frame and according to decompiled scripts, the native 0x36C1451A88A09630 should be used to get the 1st and 3rd parameters to the game interface call however, 0x7E17BE53E1AAABAF works all the same.

0x7E17BE53E1AAABAF's parameters are effectively:

void 0x7E17BE53E1AAABAF(int* previousMenuState, int* selectedItemMenuId, int* selectedItemUniqueId);

// previousMenuState: The previous menuState of the pause menu - 1000. The previous menuState is usually set to the menuID of the last selected item.
// selectedItemMenuId: The menuID - 1000 of the currently selected item. Is -1 if the menu state wasn't changed since the last trigger.
// selectedItemUniqueId: The uniqueID of the currently selected item.

This is of great use to us as TRIGGER_PAUSE_MENU_EVENT will be called any time the user selects a frontend option and perhaps also when the user attempts to scroll a list item, I haven’t been able to verify such yet. Additionally, LAYOUT_CHANGE is called any time that the selected item changes allowing us to know what the user has selected and when they’ve actually selected it.

I’ll get these properly documented when I’ve got time

That’s all I’ve got for frontend research, let me know if something doesn’t make sense as I basically wrote all of this down over the course of a day. Perhaps an effort could be made to document all of the different components and item implementations for future use…

CritteR · 2021-07-25T11:44:05.127Z

Jaymo:

// selectedItemMenuId: The menuID - 1000 of the currently selected item. Is -1 if the menu state wasn't changed since the last trigger.

That menuID-1000 reference is really helpful, as I never quite managed to get why it showed such a wild number on my frontend menu, but on the normal pause menu it had 0, 5, etc IDs. This can be used in a “submenu” type of functionality without having to reload everything.

Jaymo:

this.column1 = this.addColumn("freemodeList",1,0);
	this.column2 = this.addColumn("freemodeDetails",2,580);
	this.column3 = this.addColumn("freemodeMap",3,580);
	this.column4 = this.addColumn("mpFriendsList",4,290);

Now it makes more sense why columnID for setting data is different from the columnID when changing header stats, or adding anything else. Makes me wonder if the players column was switched from the right column to center during development, or maybe some R* dev just didn’t care enough.

Jaymo:

When the game interface method TRIGGER_PAUSE_MENU_EVENT is called, the native 0xF284AC67940C6812 is set to true for one frame and the native 0x7E17BE53E1AAABAF will return the 1st, 3rd and 2nd parameters to the game interface call in specifically that order.

This is what I’m currently looking into. When building the menu, navigation through the buttons works, but I didn’t manage to get any “select” event, or input working, so I made my own.
I made a command attached to RegisterKeyMapping(), that uses 0x7E17BE53E1AAABAF to get the uniqueID, and then use that to trigger a specific event.
Works for normal items, but it gets tricky when you add list items in the mix because the uniqueID doesn’t change when the list item changes.

Jaymo:

verifiedMC (verified [badge] Movie Clip)

mc… movie clip… ohhh… OOOHHHHH so that’s what it means!

Overall this is a great post and insightful on the ‘behind-the-scenes’. Thank you!

Jaymo · 2021-07-25T11:47:12.361Z

Oh right! I entirely forgot to mention that TRIGGER_PAUSE_MENU_EVENT is invoked when a menu item is selected (what you’re looking for) and LAYOUT_CHANGED corresponds to when the selected item is changed and some other edge cases which are dependant on the loaded page.

Original post is now updated! (Also got the data getter natives the wrong way around so that’s also fixed but as I already pointed out, either data getter works )

SleepingTears · 2021-07-25T13:36:41.123Z

Thank you very much @Jaymo thats wonderful research!

nta · 2021-07-25T15:57:31.387Z

CritteR:

Makes me wonder if the players column was switched from the right column to center during development

https://imgix.kotaku.com.au/content/uploads/sites/3/2016/12/06/avis3cxzrf0719hymgji.png?ar=16%3A9&auto=format&fit=crop&q=65&w=1280

https://imgix.kotaku.com.au/content/uploads/sites/3/2016/12/06/xsjwv9h2p0d1aq0nre0b.png?auto=format&fit=fill&q=65&w=720

https://imgix.kotaku.com.au/content/uploads/sites/3/2016/12/06/ykcx8opki6ze8u1tymet.png?auto=format&fit=fill&q=65&w=720

https://imgix.kotaku.com.au/content/uploads/sites/3/2016/12/06/vttes87wnhlfjz3055gn.png?auto=format&fit=fill&q=65&w=720

etc., also explains the map column

RobiZona · 2021-07-26T15:15:20.936Z

Amazing job!! Just one question, is it a pause menu and then opens with esc? because I can’t open it on my server

CritteR · 2021-07-26T15:20:33.832Z

Actually no, it’s a frontend menu, different than the regular pause menu. I built a small framework around it here if you want to create your own menus.

Menus would have to be opened using a clientside event trigger. You can see everything on the github wiki page.

RobiZona · 2021-07-26T15:24:59.716Z

CritteR:

Actually no, it’s a frontend menu, different than the regular pause menu. I built a small framework around it here if you want to create your own menus.

Menus would have to be opened using a clientside event trigger. You can see everything on the github wiki page.

ah ok, thank you!!

negbook · 2021-08-15T15:50:21.044Z

negbook:

Next mission:
research_char_creation.lua (3.0 KB)

Mission Completed

[Release]esx_menu_pausemenu - game base menu[ESX] Releases

Long story short: [imgonline-com-ua-GIF-animation-lAbOfrBkMK] [Preview] 2021-08-15-22-33-22_UDZzOr4I_GjVC Github: Examples: How to use it: Just like the esx_menu_default but little more,or just take a look into the example.lua . cb result data.current.value if the elements having setter , will cb result data.current.setter,data.current.getter.value the code is ugly because it’s taken from my other scripts. You can PR it if you feeling ugly. hope enjoy. [QQ图片20210815231220] 0.0ms~0.…

fAnTATaps · 2022-01-29T22:58:00.359Z

Just stumbled on this in January 2022! This is amazing! Did you finish any of this? I’d love to chat through some ideas for my server. Really basic compared to what you’ve done tbh. XP Level, Tips to increase it, Job Level, tips to increase it, latest ‘city’ news, gang news, latest tweets, cars for sale, adverts. Police and EMS adverts for hiring.

CritteR · 2022-02-05T22:30:04.667Z

Heyo, the lobby framework is out there already, if you want to use it!

[FREE] Lobby style menu framework Releases

Hello y’all Ever wanted to have a cool, clean lobby menu for your server? Yes? Well, you’re in luck, cuz this resource will do just that! [image] Features: Menu buttons on the left side. Each button can be connected to an event with 1 custom param. (For now visual only) player list in the middle. You can add Name, crew, status and icon(rank icon lets you add the rank too). Players can also be set to online or offline, and row and status colors can be changed. Static info on the righ…

If you have any questions on this, you can ask it in that thread.

Mr.Foxsteil · 2023-01-02T19:16:39.934Z

how to add such a my character in menu

2019-04-01_16-09_540ee_1015218×651 144 KB

Mr.Foxsteil · 2023-09-13T22:33:54.953Z

how do I set this up? this a ACTIVATEFRONTENDMENU “FE_MENU_VERSION_MP_CHARACTER_CREATION”

image436×527 55.1 KB

Menace420 · 2023-11-09T11:43:36.647Z

I’m trying to find some info about the pause menu, I was trying to change something in the settings menu under keybinds with the GetHashKey(“ADD_TEXT_ENTRY”)… and I am looking for the cTextId for this option “FiveM” under Settings > Keybinds

image1330×715 145 KB

I was looking through the pausemenu.xml and I see a couple options from this menu like

<PM_PANE_GENERAL>
<PM_PANE_FOOT>

etc, but I can’t find the one that is that FiveM menu name, I am trying to change the FiveM to something else, any help?

DaveGaffer · 2023-11-09T17:06:02.541Z

Place in any client script:

-- Change server name in Keybinds settings
Citizen.CreateThread(function()
    AddTextEntry('PM_PANE_CFX', 'My Cool Server')
end)

I cannot take credit for this nugget. In fact, I have no idea with whom to credit on this. I found it one day deep scrolling the forums. Wasn’t even looking for it, either.