From DarkRP
Jump to navigation Jump to search

What is a GUI?[edit]

A GUI is short for Graphical User Interface, it skips all those boring shell commands to bring you a nice clean GUI, Ideal for first time computer users. The same applys to Garrys Mod, however in this case; It completely depends on GUI to play.

Getting Started[edit]

Creating a GUI is pretty easy if you can find a technique that works for you. In order to use mine, you need to be running GarrysMod and preferably on a DarkRP server (doesn't have to be yours). You must first start by going to Garrysmod/LUA and creating a new file called mygui.lua

Next, you must enter the following console commands into garrys mod:
bind n lua_openscript_cl mygui.lua
bind m lua_run_cl OpenMyGUI()

The purpose of these commands are to allow us to reload the file at runtime and then to open our GUI after we make edits, this means we don't have to restart singleplayer or a server just to see changes. Plus it's made on the client, which means you only need to be on a server where scriptenforer is not on!

Starting to draft a GUI[edit]

Creating the basic frame[edit]

Open up your mygui.lua file in your favourite lua highlighting program, if you don't have one. I recommend Notepad++ with the Lua Lexer for Garrys Mod.

Start with the following code:

function OpenMyGUI()


Now we need to add a DFrame, or otherwise known as a form. This will hold all our derma controls, and will keep them from floating and looking a mess. To do this, add the following code between the function:

	local DermaPanel = vgui.Create( "DFrame" )
	DermaPanel:SetPos( (ScrW() / 2) - 200, (ScrH() / 2) - 250) --Center it (For example, (ScrW() / 2) - Half of Width Size)
	DermaPanel:SetSize( 400,500 ) -- Size it
	DermaPanel:SetTitle( "Arrest Severity" ) -- Title of the frame
	DermaPanel:SetVisible( true ) --It's visible
	DermaPanel:ShowCloseButton( true ) --You can close it, we will set to false later
	DermaPanel:MakePopup() -- Show the frame

As the code describes in the comments, we create a new DFrame, set it to the center, size it, title it and show it. We will add a continue button to replace the close button later.

GUI So Far

Adding a choice box[edit]

We will now create a new choice box to select which offences the person commited, it also has multiselect to select more than one offence

        local DermaListView = vgui.Create("DListView")
	DermaListView:SetPos(25, 50)
        DermaListView:SetSize(350, 400)
	DermaListView:AddColumn("Offence") -- Add column
	DermaListView:SetMultiSelect(true) --Allow multiselect
	//Add the offences to the list
	DermaListView:AddLine("Minor Offence", -30)
	DermaListView:AddLine("Resisting Arrest", 25)
	DermaListView:AddLine("Drugs", 60)
	DermaListView:AddLine("Printers", 120)
	DermaListView:AddLine("Murder", 120)
	DermaListView:AddLine("Attempted Murder", 60)
	DermaListView:AddLine("Turned Himself In/Gave Up", -5)

We have now created a gui that uses a multi-select list box. In the next section we will make a label show how long the victim will serve in jail, but also; why not add the darkrp skin?

GUI So Far

To add the skin, use the following code on a derma object


Adding a continue button[edit]

It is now time to create a continue button that will submit data to the server, the button will be covered in this section and the functionality in the next bit. In the next tutorial though, you will learn how to recieve the data we send off and use it.

	local DermaButton = vgui.Create("DButton")
	DermaButton:SetPos(157.5, 460)
	DermaButton:SetSize(75, 30)

As you can see, we create a new button, make it's parent the panel, size and position it, skin & caption it.

Finished GUI

Add the last bit's of functionality[edit]

We need to send a datastream to the server telling it exactly which punishments have been chosen, to do so, we will use the DoClick hooked function. But first, we need to add a console command to our gui function.

function OpenMyGUI()
function OpenArrestDialog(PlayerIndex)
DermaButton.DoClick = function()
datatsream.StreamToServer("ArrestDialog", DermaListView:GetSelected())

We send a datastream, and finally close the gui. By the time the gui closes, a notify will have appeared saying the person has been sent to jail and for the specified time.

Moving on[edit]

Thankyou for reading part 2 of MyRP 1, to continue with the tutorial, click here.