From Multi Theft Auto: Wiki
Jump to navigation Jump to search

DGS Logo By Allerek

This resource is designed to allow you to create directX GUI's as an alternative to the original MTA:SA GUI functions.

Full Name: Thisdp's DirectX Graphical User Interface System (DxGUI Lib)

Developer: thisdp, xLive

State: OpenSource & Work in progress

GitHub Source:

Server Discord:

Current Version: 3.510

Update Log: Changes and Updates Log

Auto Completion & Syntax Highlight


Use the following command in server console to crawl and generate the latest auto completion (Only support NotePad++/Sublime/VSCode).

  • g2d -crawl npp/sublime/vscode

Or you can use the following link to download completed files instead of crawling by yourself.

3rd Party Auto Completion:


DGS Network Monitor

How does it work?

  • DGS is based on element system, which just likes the cegui system. To make DGS easier to use and understand, I choose to follow the usage of cegui's.
  • DGS supports OOP syntax, if you don't like POP, then use OOP instead. But you should know that OOP is slower than POP.
  • DGS elements are rendered in the event "onClientRender". When "onClientRender" is called, every DGS elements will be looped and calculated.

What's different from cegui?

  • This resource is based on dx* functions, so its style will be more flexible than cegui, which means you can define the style by yourself.
  • The latest Style System enables developer to define their own style such as changing color, loading images and even loading shaders with dgs elements on the server instead of using a lot of dgsSetProperty/dgsSetProperties.

Update System

  • It have an update system that can inform you of keeping your DGS latest.
  • When a newer version has been released, it will detecte the version changing periodically and then notice you.
  • Execute command "updatedgs" to check the least version and update your DGS.
  • Also, you can check the version of DGS by inputting the command "dgsver"

You Should Know

  • This project was started from 2014.
  • Some of DGS elements use Render Target, which means if you don't have enough video memory, Render Target won't be created, and therefore those dgs elements won't be shown.

Example DGS Cmd

Examples scripts


  • You can enter the debug mode by executing the command "debugdgs".
  • "debugdgs 2 ": To see dgs elements' scale with a rainbow border
  • "debugdgs 3 ": To trace where the dgs elements' were created.

DGS Type

Hurt World GUI Example

Basic Types:

  • 3D Image (dgs-dx3dimage)
  • 3D Interface (dgs-dx3dinterface)
  • 3D Line (dgs-dx3dline)
  • 3D Text(dgs-dx3dtext)
  • Browser (dgs-browser)
  • Button (dgs-dxbutton)
  • Check Box (dgs-dxcheckbox)
  • Combo Box (dgs-dxcombobox + dgs-dxcombobox-Box)
  • Custom Renderer (dgs-dxcustomrenderer)
  • Detect Area (dgs-dxdetectarea)
  • Edit (dgs-dxedit)
  • Gridlist (dgs-dxgridlist)
  • Image (dgs-dximage)
  • Label (dgs-dxlabel)
  • Media Browser (dgs-dxmedia)
  • Memo (dgs-dxmemo)
  • Progress Bar (dgs-dxprogressbar)
  • Radio Button (dgs-dxradiobutton)
  • Scale Pane (dgs-dxscalepane)
  • Scroll Bar (dgs-dxscrollbar)
  • Scroll Pane (dgs-dxscrollpane)
  • Selector (dgs-dxselector)
  • Switch Button(dgs-dxswitchbutton)
  • Tab Panel (dgs-dxtabpanel + dgs-dxtab)
  • Window (dgs-dxwindow)


  • Blur Box (dgs-dxblurbox)
  • Canvas (dgs-dxcanvas)
  • Circle (dgs-dxcircle)
  • Color Picker (dgs-dxcolorpicker + dgs-dxcomponentselector)
  • Effect 3D (dgs-dxeffect3d)
  • Mask (dgs-dxmask)
  • Media Browser (dgs-dxmediabrowser)
  • Nine Slice (dgs-dxnineslice)
  • Object Preview Supports (dgs-dxobjectpreviewhandle)
  • Paste Handler (dgs-dxpastehandler)
  • QRCode (dgs-dxqrcode)
  • Remote Image (dgs-dxremoteimage)
  • Rounded Rectangle (dgs-dxroundrect)


  • It is recommended to change the resource name to 'dgs'.
  • This is a resource, if you want to use the functions exported by this resource, you should use an exported function prefix (exports.dgs:) call in your code, such as
label = exports.dgs:dgsCreateLabel(0, 0, 0.5, 0.1, "text", true)
  • Here is a feasible way to shorten the name of an exported function:
DGS = exports.dgs --shorten the export function prefix
label = DGS:dgsCreateLabel(0,0,0.5,0.1,"text",true) --create a label
  • From the latest version, it no longer needs exports.dgs:, instead we can do
loadstring(exports.dgs:dgsImportFunction())()-- load functions
label = dgsCreateLabel(0,0,0.5,0.1,"text",true) --create a label

Object Oriented Programming

loadstring(exports.dgs:dgsImportOOPClass(true))()-- load OOP class
window = dgsWindow(0,0,0.5,0.1,"test",true) --create a window with oop
label = window:dgsLabel(0,0,1,1,"label",true) --create a label inside the window
label.text = "DGS OOP Test" --set text

Special thanks to the following for their help (Respect the contributors):

  • Axel, Senpai, ZoNe
  • DiGiTal, #Dv^, maksam07
  • Scorpyo, Kingleonide, Bullet(.el3tar)
  • Allerek, Deihim007, OmarSwaitti(HankVoight)
  • FlyingFork, Lettify, Ahmed Ly
  • ᴛᴇᴍᴏɪꜱ

DGS Tips

DGS Element Properties

General Properties

Unique Properties

Client Functions

Custom Cursor Functions

Multi Language Supports


3D Interface

3D Line

3D Image

3D Text



Check Box

Combo Box

Custom Renderer


Detect Area

Drag'N Drop

Grid List






Progress Bar

Radio Button

Scale Pane

Scroll Bar

Scroll Pane



Switch Button

Tab Panel



Blur Box

Color Picker



Effect 3D


Media Browser


Nine Slice

Object Preview Supports

Paste Handler


Remote Image

Rounded Rectangle

Screen Source

Client Events


Check Box

Combo Box

Drag'N Drop


Grid List



Radio Button

Switch Button





Color Picker


Remote Image


Everyone is welcome to make suggestions, test the script, help make adjustments/finish the wiki, etc.