[Tutorial] Automatically Outlined Rectangle & Text

Since I've been working a lot with DX drawings as of lately, simply because CEGUI looks like complete arse - I've always thought it's a very slow and gruesome task. Especially since if you use GUI Editor like I do, you'll then have to edit it to make it relative to fit all resolutions.

This takes especially long if you have rectangles and text drawings which are outlined(not to mention outlining transparent rectangles doesn't quite work with GUI Editor because it creates several boxes, instead of lines which this code uses), so to save some time - I've written 2 very basic functions to make it look less cluttery and easier to work with.

Just to provide an example, what I'm working on consisted of 53 lines of code for all the rectangles, lines and texts. I managed to reduce that down to 15 using those functions - saving a considerable amount of my time.

I thought I'd post this here since I don't know if those are considered Wiki material, they're very basic and doesn't really have any error messaging or anything of that sort.

UtilityFunctions.lua (You can name it whatever you want, but I always keep a separate file for utility functions such as these)

-- Draw Outlined Text 
function dxDrawOutlinedText(outlineColour, theText, posX, posY, sizeX, sizeY, fillColour, textSize, theFont, horizontalAlign, verticalAlign, clippingBool, wordBreaking, postGUI, colourCoded, pixelPos) 
    dxDrawText(theText, posX+1, posY+1, sizeX+1, sizeY+1, outlineColour, textSize, theFont, horizontalAlign, verticalAlign, clippingBool, wordBreaking, postGUI, colourCoded, pixelPos); 
    dxDrawText(theText, posX+1, posY-1, sizeX+1, sizeY-1, outlineColour, textSize, theFont, horizontalAlign, verticalAlign, clippingBool, wordBreaking, postGUI, colourCoded, pixelPos); 
    dxDrawText(theText, posX-1, posY+1, sizeX-1, sizeY+1, outlineColour, textSize, theFont, horizontalAlign, verticalAlign, clippingBool, wordBreaking, postGUI, colourCoded, pixelPos); 
    dxDrawText(theText, posX-1, posY-1, sizeX-1, sizeY-1, outlineColour, textSize, theFont, horizontalAlign, verticalAlign, clippingBool, wordBreaking, postGUI, colourCoded, pixelPos); 
    dxDrawText(theText, posX, posY, sizeX, sizeY, fillColour, textSize, theFont, horizontalAlign, verticalAlign, clippingBool, wordBreaking, postGUI, colourCoded, pixelPos); 
end 
  
-- Draw Outlined Rectangle 
function dxDrawOutlinedRectangle(outlineThickness, outlineColour, posX, posY, sizeX, sizeY, fillColour, postGUI, pixelPos) 
    dxDrawRectangle(posX, posY, sizeX, sizeY, fillColour, postGUI, pixelPos);                       -- Rectangle 
    dxDrawLine(posX, posY, posX+sizeX, posY, outlineColour, outlineThickness, postGUI);             -- Top Line 
    dxDrawLine(posX, posY+sizeY, posX+sizeX, posY+sizeY, outlineColour, outlineThickness, postGUI); -- Bottom Line 
    dxDrawLine(posX, posY, posX, posY+sizeY, outlineColour, outlineThickness, postGUI);             -- Left Line 
    dxDrawLine(posX+sizeX, posY, posX+sizeX, posY+sizeY, outlineColour, outlineThickness, postGUI); -- Right Line 
end 

Syntax Example:

local sX, sY = guiGetScreenSize(); 
  
function drawExampleCode_Handler() 
    dxDrawOutlinedRectangle(1, tocolor(255, 255, 255, 255), sX/2-50, sY/2-50, 150, 150, tocolor(187, 0, 0, 80), false, false); 
    dxDrawOutlinedText(tocolor(0, 0, 0, 255), "Username", sX/2-55, sY/2-280, sX/2+150, sY/2+150, tocolor(255, 255, 255, 255), 1.00, "bankgothic", "left", "center", false, false, false, false, false); 
end 
addEventHandler("onClientRender", root, drawExampleCode_Handler); 

The above example would normally be 10 lines of code(4 lines for outline, 1 for the fill) - but is now instead just 2 lines.

Edit:

I'll also go ahead and quote a reply I made a while ago, where I explained how I (somewhat automatically?) convert my DX stuff to relative. Remember to edit it to so it uses the same screen size variables as you do! (screenX + screenY)

I use a website where you can run Lua code to make the process very fast and straight forward, since doing it all manually is a very tedious process. Especially with DX functions.

Simply paste this code(into the website linked above) and enter the appropriate values. Then copy the output and you're golden.

local sX, sY, wX, hY = 480, 240, 969, 570; -- Paste the absolute values here 
local sourceWidth = 1920;    -- Change those to the source values. 
local sourceHeight = 1080;   -- Change those to the source values. 
local nSX, nSY, nWX, nHY = (sX/sourceWidth), (sY/sourceHeight), (wX/sourceWidth), (hY/sourceHeight); 
  
for i=0, 47 do 
   print(""); -- This is just to clear the print window, so you don't confused what to copy. 
end 
  
print(tostring(nSX).."*screenX, "..tostring(nSY).."*screenY, "..tostring(nWX).."*screenX, "..tostring(nHY).."*screenY"); 

Edit 2:

I also made one for creating a Rectangle with a title frame at top. Here's an example;

function dxDrawOutlinedRectangleWithTitle(outlineThickness, outlineColour, titleFrameHeight, titleText, posX, posY, sizeX, sizeY, fillColour, postGUI, pixelPos) 
    dxDrawRectangle(posX, posY, sizeX, sizeY, fillColour, postGUI, pixelPos);                       -- Rectangle 
    dxDrawLine(posX, posY, posX+sizeX, posY, outlineColour, outlineThickness, postGUI);             -- Top Line 
    dxDrawLine(posX, posY+titleFrameHeight, posX+sizeX, posY+titleFrameHeight, outlineColour, outlineThickness, postGUI); 
    dxDrawLine(posX, posY+sizeY, posX+sizeX, posY+sizeY, outlineColour, outlineThickness, postGUI); -- Bottom Line 
    dxDrawLine(posX, posY, posX, posY+sizeY, outlineColour, outlineThickness, postGUI);             -- Left Line 
    dxDrawLine(posX+sizeX, posY, posX+sizeX, posY+sizeY, outlineColour, outlineThickness, postGUI); -- Right Line 
    dxDrawText(titleText, posX, posY, sizeX+(sizeX/2), sizeY+(sizeY/2), tocolor(255, 255, 255, 255), 1.00, "bankgothic", "center", "top"); 
end 
  
local sX, sY = guiGetScreenSize(); 
  
function drawExampleCode_Handler() 
    dxDrawOutlinedRectangleWithTitle(1, tocolor(255, 255, 255, 255), 30, "Test Window", 250, 250, 500, 500, tocolor(0, 0, 0, 80), false, false); 
end 
addEventHandler("onClientRender", root, drawExampleCode_Handler); 

But it's not really optimal to work with, and I'd rather just use the text itself and create a line manually. But it's there if you want to improve upon it...

Nice job tho. : P

Great Job Man!