Want to make a simple menu for your mod to :
- Ask the player to choose between two things?
- Ask the player a nickname, age, height, weight, etc ?
- Display a map ?
- Display player-related information from your mod such as amount of money, time on server, etc ?
- Warn players the start of an event ?
- Make a job board systeme ?
- And more ?
My mod is only an overlay of what the base game does to simplify placement, initializations and get the most useful functions of UIs.
This means that all elements are vanilla elements. So for example, buttons has access to all functions of ISButton and ISUIElement.
The windows itself is a derivate of ISCollapsableWindow.
It means you can add whatever you want to my UI like for the vanilla game if you want something specific. Here is a guide to understanding the basics of how the game does UIs. You can also copy an ISSimpleElement.lua to make a custom one.
Found all vanilla files in media/lua/client/ISUI of the game folder.
Note, an UI is the whole (window + elements) and the window is just the window object, without the elements.
A window created with my mod is composed of lines. On each line, there are elements. Elements are anything that can be in a UI like text or a button.
Step by step:
- Create a new UI with the
NewUI()function. Here you have a window without elements. - Add elements to the line. You can add as many elements as you want per line, the mod will take care of sizing them.
- Jump to the next line. When you added your elements, you jump to the next line with the function
ui:nextLine(). - Repet 2.
- Once all line create, you just call
ui:saveLayout()to finish creating the ui.
All useable function of UI here.
All elements here.
List of usefull vanilla function here.
As in the following diagram:
I highly recommend doing the UIs in event OnCreateUI but you can do it anywhere.
- Menus are in 2d.
- Dimensions of 2d object are its position in x and y as well as its size in width and height.
- x and y are coordinates of the left top corner.
- Positions and sizes are in percentage of screen or in pixel.
Percent is to simplify and allow compatibility between different screen sizes. For example a width of 0.2 will take 20% of the screen..png)
You can also try to make your UI from scratch, I made a guide to understand the base.
localfunctiononCreateUI()
localUI=NewUI();
UI:addText("", "Hello world", "Small", "Center")
UI:saveLayout()
endEvents.OnCreateUI.Add(onCreateUI)
See code
localUIlocaltext1="<H1> The longest night <BR> <SIZE:small> In this mission, you gonna need to survivre all night. <BR> <LEFT> Reward: <LINE> - M14 <LINE> - 20 ammo <BR> Failure Conditions: <LINE> -Death"localfunctionchoose(button, args)
getPlayer():Say(args.choice);
UI:close();
endlocalfunctiononCreateUI()
UI=NewUI();
UI:addRichText("rtext", text1); UI:setLineHeightPercent(0.2); UI:nextLine();
UI:addText("t1", "Accept ?", _, "Center");
UI["t1"]:setBorder(true);
UI:addButton("b1", "Yes", choose);
UI:addButton("b2", "No", choose);
UI["b1"]:addArg("choice", "yes");
UI["b2"]:addArg("choice", "no");
UI:saveLayout();
endEvents.OnCreateUI.Add(onCreateUI)
See code
localUIlocaltext1="Players: <LINE> - MrBounty <LINE> - Dane <LINE> - xx <LINE> - xx <LINE> - xx <LINE> - xx <LINE> - xx <LINE> - xx <LINE> - xx <LINE> - xx <LINE> - xx"localtext2="Players: <LINE> - xx <LINE> - xx <LINE> - xx <LINE> - xx <LINE> - xx <LINE> - xx <LINE> - xx <LINE> - xx <LINE> - xx"localfunctionchoose(button, args)
getPlayer():Say("I'm in the " ..args.team.." team now !");
UI:close();
endlocalfunctiononCreateUI()
UI=NewUI();
UI:addText("", "Choose your team", "Large", "Center");
UI:nextLine();
UI:addRichText("", text1);
UI:addRichText("", text2);
UI:setLineHeightPercent(0.2);
UI:nextLine();
UI:addText("t1", "11/12", _, "Center");
UI:addText("t2", "9/12", _, "Center");
UI["t1"]:setColor(1, 0, 0, 1);
UI["t2"]:setColor(1, 1, 0, 0);
UI:nextLine();
UI:addButton("b1", "Blue", choose);
UI:addButton("b2", "Red", choose);
UI["b1"]:addArg("team", "blue");
UI["b2"]:addArg("team", "red");
UI:setBorderToAllElements(true);
UI:setWidthPercent(0.15);
UI:saveLayout();
endEvents.OnCreateUI.Add(onCreateUI)
See code
localUIlocaljobSelect="";
-- Text for the rich text elementlocaltext1="<H1> Your a policeman ! <LINE> <SIZE:small> You are here to protect people ! <LINE> <SIZE:small> <LEFT> You can: <LINE> - Do that <LINE> - And that <LINE> - And a lot more"localtext2="<H1> Your an engineer ! <LINE> <SIZE:small> You are here to create thing ! <LINE> <SIZE:small> <LEFT> You can: <LINE> - Do that <LINE> - And that <LINE> - And a lot more"localtext3="<H1> Your a doctor ! <LINE> <SIZE:small> You are here to help people ! <LINE> <SIZE:small> <LEFT> You can: <LINE> - Do that <LINE> - And that <LINE> - And a lot more"localtext4="<H1> Your nothing ! <LINE> <SIZE:small> You are here to die ! <LINE> <SIZE:small> <LEFT> You can: <LINE> - Do that <LINE> - And that <LINE> - And a lot more"localtexts= {text1, text2, text3, text4}
localjobs= {"Policeman", "Engineer", "Doctor", "Nothing"}
-- Functions for buttonslocalfunctionpress(button, args)
UI["rtext"]:setText(texts[args.index])
jobSelect=jobs[args.index]
getPlayer():Say("I selected " ..jobSelect);
endlocalfunctionok()
getPlayer():Say("I'm a " ..jobSelect.." now !");
UI:close();
end-- Create the UIlocalfunctiononCreateUI()
UI=NewUI(0.15);
-- Add window titleUI:addText("title1", "Choose you job !", "Title", "Center");
UI["title1"]:setBorder(true);
UI:nextLine();
-- Add job descriptionUI:addRichText("rtext", text1); UI:nextLine();
-- Add buttonsUI:addButton("button1", jobs[1], press);
UI:addButton("button2", jobs[2], press);
UI:addButton("button3", jobs[3], press);
UI:addButton("button4", jobs[4], press);
UI["button1"]:addArg("index", 1);
UI["button2"]:addArg("index", 2);
UI["button3"]:addArg("index", 3);
UI["button4"]:addArg("index", 4);
UI:addButton("", "Button", ok);
UI:nextLine();
-- Save windowUI:saveLayout();
endEvents.OnCreateUI.Add(onCreateUI)Example with 2 UI
See code
locallistUI, descUIlocaltext1="<H1> The longest night <BR> <SIZE:small> In this mission, you gonna need to survivre all night. <BR> <LEFT> Reward: <LINE> - M14 <LINE> - 20 ammo <BR> Failure Conditions: <LINE> -Death"localtext2="<H1> I need medical supply ! <BR> <SIZE:small> Please someone come to xx to help me ! I need a doctor or I'm gonna die. <BR> <LEFT> Reward: <LINE> - Everything I have"localtext3="<H1> Help me clean my neighborhood <BR> <SIZE:small> I need someone to help me fight a group of zombie near xx, there is around xx of them and I don't want to do it alone. <BR> <LEFT> Reward: <LINE> - 100$"localtext4="<H1> Looking for seed <BR> <SIZE:small> I'm looking for seed, every type of seed. I can pay or exchange. Contact me on my public frequencies xx.x."localitems= {};
items["EVENT - The longest night"] =text1;
items["URGENT - Medical delivery"] =text2;
items["Help me clean my neighborhood"] =text3;
items["Looking for seed"] =text4;
items["item5"] ="";
items["item6"] ="";
items["item7"] ="";
items["item8"] ="";
items["item9"] ="";
items["item10"] ="";
items["item11"] ="";
localfunctionchoose(button, args)
getPlayer():Say("I accepted this mission !");
listUI:close();
endlocalfunctionopenJobDesc(_, item)
descUI:open();
descUI:setPositionPixel(listUI:getX() +listUI:getWidth(), listUI:getY());
descUI["rtext"]:setText(item);
endlocalfunctiononCreateUI()
-- List UIlistUI=NewUI(); -- Create UIlistUI:setTitle("Job board");
listUI:setWidthPercent(0.15);
listUI:addScrollList("list", items); -- Create listlistUI["list"]:setOnMouseDownFunction(_, openJobDesc)
listUI:saveLayout(); -- Create window-- Description UIdescUI=NewUI();
descUI:setTitle("Job desc");
descUI:isSubUIOf(listUI);
descUI:setWidthPercent(0.1);
descUI:addEmpty(_, _, _, 10); -- Margin only for rich textdescUI:addRichText("rtext", ""); descUI:setLineHeightPercent(0.2); descUI:addEmpty(_, _, _, 10); -- Margin only for rich textdescUI:nextLine();
descUI:addButton("b1", "Accept ?", choose);
descUI:saveLayout();
descUI:close();
endEvents.OnCreateUI.Add(onCreateUI)