PZ-Simple UI library

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 ?

This mod is for you !

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.

Make my first window

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:

1. Create a new UI with the NewUI() function. Here you have a window without elements.
2. Add elements to the line. You can add as many elements as you want per line, the mod will take care of sizing them.
3. Jump to the next line. When you added your elements, you jump to the next line with the function ui:nextLine().
4. Repet 2.
5. 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.

Understand coordinates

• 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.

You can also try to make your UI from scratch, I made a guide to understand the base.

Examples

Hello world

local function onCreateUI()
    local UI = NewUI();
    UI:addText("", "Hello world", "Small", "Center")
    UI:saveLayout()
end

Events.OnCreateUI.Add(onCreateUI)

Quest

Choose your team

Choose a job

Job list

Example with 2 UI