Creating Your First Menu

Creating a lua menu is pretty simple. Navigate to the plutoiw5/ui_mp (Multiplayer) or the plutoiw5/ui (Singleplayer) folder. To create a new menu, simply create a new .lua file. At this moment you cannot make entirely custom menus, you will have to replace a default menu for now. Name the .lua file after the menu you want to create, and save the file. Open the file in your favourite text editor and you're ready to begin. Paste the following code in your lua file:

function Init()

    -- Allocate menu
    menu = UI.Menu.new("<enter the name of your menu here>")
    menu:OnOpen(
        function(menu)

        end
    )
    menu:OnEsc(
        function(menu)
            Game.CloseMenu("<enter the name of your menu here>")
        end
    )
    menu:SetSoundLoop("music_mainmenu_mp")

    -- Add items below this line



end

Replace <enter the name of your menu here> with the name of the menu. The OnOpen callback is executed when the menu is opened first, so if you have code that you want to execute when the menu opens, put it there. OnEsc is called when the escape button is pressed, so if you want to execute code when closing the menu, put it in the OnEsc callback. In this example we're not creating a popup menu, therefore we need to specify the menu's sound alias by calling menu:SetSoundLoop("music_mainmenu_mp"), otherwise the menu music stops playing.

Now, lets set the background image for the menu. Copy the following code under the -- Add items below this line line. Code:

    -- Create background item
    background = UI.Item.new()
    background:SetRect(0, 0, 640, 480, 4, 4)
    background:SetType(UI.ItemType.Image)
    background:SetMaterial("background_image")
    menu:AddItem(background)

The following code creates a menu item of type Image, this tells the lua menu engine that we're dealing with an image. The image itself is set by the SetMaterial function. You can use that function to draw any Material you want. SetRect is used to tell the menu where to draw the image, and finally, menu:AddItem(background) adds the item to the menu. We should now have our first custom menu with a background image working!

Lets add some more items to our custom menu. The following code will spawn a MW3 style menu with a sidebar for your buttons.

    -- Sidebar background
    sidebar = UI.Item.new()
    sidebar:SetRect(-64, 0, 300, 480, 1, 0)
    sidebar:SetType(UI.ItemType.Rectangle)
    sidebar:SetBackColor(0, 0, 0, 0.3)
    menu:AddItem(sidebar)

    -- Create vertical seperator
    vsep = UI.Item.new()
    vsep:SetRect(236, 0, 10, 480, 1, 0)
    vsep:SetType(UI.ItemType.Image)
    vsep:SetMaterial("navbar_edge")
    menu:AddItem(vsep)

Now, we can start adding buttons to the menu, the following code will spawn a button on the menu with the text Hello world! and it will open the serverlist menu when you click on it:

Menu_AddButton(menu,                            -- the menu the button should be drawin in
    0,                                          -- the index of the button
    "Hello world!",                             -- the text of the button
    function(menu,button) 
        Game.OpenMenu("serverbrowser")          -- the code that gets executed when pressing the button
    end
)

If you've followed the example, your menu code should now look like this:

function Init()

    -- Allocate menu
    menu = UI.Menu.new("<enter the name of your menu here>")
    menu:OnOpen(
        function(menu)

        end
    )
    menu:OnEsc(
        function(menu)
            Game.CloseMenu("<enter the name of your menu here>")
        end
    )
    menu:SetSoundLoop("music_mainmenu_mp")

    -- Add items below this line

    -- Create background item
    background = UI.Item.new()
    background:SetRect(0, 0, 640, 480, 4, 4)
    background:SetType(UI.ItemType.Image)
    background:SetMaterial("background_image")
    menu:AddItem(background)

    -- Sidebar background
    sidebar = UI.Item.new()
    sidebar:SetRect(-64, 0, 300, 480, 1, 0)
    sidebar:SetType(UI.ItemType.Rectangle)
    sidebar:SetBackColor(0, 0, 0, 0.3)
    menu:AddItem(sidebar)

    -- Create vertical seperator
    vsep = UI.Item.new()
    vsep:SetRect(236, 0, 10, 480, 1, 0)
    vsep:SetType(UI.ItemType.Image)
    vsep:SetMaterial("navbar_edge")
    menu:AddItem(vsep)

    Menu_AddButton(menu,                            -- the menu the button should be drawin in
        0,                                          -- the index of the button
        "Hello world!",                             -- the text of the button
        function(menu,button) 
            Game.OpenMenu("serverbrowser")          -- the code that gets executed when pressing the button
        end
    )

end
Last updated on 28th Oct 2017