[Question] Adapting dxDrawText for all resolutions

[kieran]

Before anyone says look at wiki...  I have, for around 5 hours  Anyway...  I can not figure out how to set the x and y on dxDrawText to stay in place across all resolutions.

function createText ( )
local sx,sy = guiGetScreenSize()
local px,py = 1366,768
local x,y =  (sx/px), (sy/py) 
    dxDrawText(" Test", x*1140, y*715, x*1351, y*735, tocolor(166, 251, 244, 111), 1.00, "default-bold", "center", "center", false, false, false, false, false)
end

function HandleTheRendering ( )
    addEventHandler ( "onClientPreRender", root, createText )
end

addEventHandler ( "onClientResourceStart", resourceRoot, HandleTheRendering )

Basically I want to position text exactly above MTA:SA in bottom right and auto resize it on all resolutions.  What am I doing wrong?  Am I multiplying my second x and y wrong or just missing a few things?  Why is there even 2 x positions and 2 y positions? 

[Infinity#]

https://community.multitheftauto.com/index.php?p=resources&s=details&id=141

That's the GUIEditor resource made by R3mp. This allows you to create in-game GUIs with standard MTA GUI interface or DX. You can create this "dxDrawText" and put it "relative." Where it remains in the position you put on all resolutions.

[kieran]

2 minutes ago, Infinity# said:

https://community.multitheftauto.com/index.php?p=resources&s=details&id=141

That's the GUIEditor resource made by R3mp. This allows you to create in-game GUIs with standard MTA GUI interface or DX. You can create this "dxDrawText" and put it "relative." Where it remains in the position you put on all resolutions.

Thanks, is this like guieditor?  Can I see what the code is

[Infinity#]

Yes, that is the GUIEditor. It allows you to create GUIs with it and output the code for it.

It'll fix your problem.

[kieran]

@Infinity# I tried before, but think was absolute, if I get any problems can you help?  You seem like you know what you're talking about  

And sorry, I forgot that R3mp made GUIEditor even though I use it a lot  

Edited July 8, 2017 by kieran

[Infinity#]

Yeah, absolute is used when you're going to use https://wiki.multitheftauto.com/wiki/CenterWindow or something else.

Use "Relative." I highly recommend it, and its better. Also, "GUIEditor" can be used by anyone, I use it myself sometimes. But if you're good at math and know your calculations well as well as your resolution, GUIEditor won't be really necessary in the future for you.

Credits to R3mp, this was explained from the GUIEditor resource itself.

Difference between absolute and relative:

 

Enjoy.

[itHyperoX]

12 minutes ago, kieran said:

@Infinity# I tried before, but think was absolute, if I get any problems can you help?  You seem like you know what you're talking about  

And sorry, I forgot that R3mp made GUIEditor even though I use it a lot  

Right click on your draw or text, then click on "Relative" the default value is "Absolute".

 

[kieran]

Problem with the positioning...

Spoiler

The above shows the issue, it's resolution is 640 x 480 x 32

The below is what position I am looking for on all resolutions, the spoiler below is 800 x 600 x 32

Spoiler

The red box is drawn in so you know what you are looking at, it is NOT in the code.

Here is code

local screenW, screenH = guiGetScreenSize()

addEventHandler("onClientRender", root,
    function()
        dxDrawText("Test 1.0", (screenW * 0.8975) + 1, (screenH * 0.9533) + 1, (screenW * 0.9950) + 1, (screenH * 0.9767) + 1, tocolor(0, 0, 0, 255), 1.00, "default", "left", "top", false, false, false, false, false)
        dxDrawText("Test 1.0", screenW * 0.8975, screenH * 0.9533, screenW * 0.9950, screenH * 0.9767, tocolor(92, 253, 248, 170), 1.00, "default", "left", "top", false, false, false, false, false)
    end
)

Please help?

 

EDIT

In case I haven't been clear in result I am hoping for, I am looking for a way to automatically move text AND resize it to remain in line with "MTA:SA 1.5.4"

Do I need to do some more complicated stuff?  Can anyone direct me to a page about the maths used?  being honest I don't know the name of maths functions used in any language, the only one I excelled in was html and that's what started the love of writing text to do stuff  

Edited July 8, 2017 by kieran

[DNL291]

1 hour ago, kieran said:

In case I haven't been clear in result I am hoping for, I am looking for a way to automatically move text AND resize it to remain in line with "MTA:SA 1.5.4"

As far as I know, this text isn't adjusted for all resolutions, so you can make your text without adjusting it for all resolutions and it will always stay above "MTA:SA 1.5.4".

Edited July 9, 2017 by DNL291

[kieran]

2 hours ago, DNL291 said:

As far as I know, this text isn't adjusted for all resolutions, so you can make your text without adjusting it for all resolutions and it will always stay above "MTA:SA 1.5.4".

You must have been wrongly informed  the text stays the same size and also stays at the same exact location using pixels to calculate it  kinda weird, I know it is possible to keep its position as many servers have it down the bottom right...  I found out on GUIEditor you can make it snap right, now I just gotta understand exactly how it keeps right. 

 

local screenW, screenH = guiGetScreenSize()

addEventHandler("onClientRender", root,
    function()
        dxDrawText("Test", screenW - 64 - 10, (screenH - 10) / 2, (screenW - 64 - 10) + 64, ( (screenH - 10) / 2) + 10, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, false, false, false)
    end
)
--Amazingly this centers it to right....  WTF does this mean? "screenW - 64 - 10, (screenH - 10) / 2, (screenW - 64 - 10) + 64, ( (screenH - 10) / 2) + 10"

So far this is the ONLY WAY it worked, I know nothing about the maths used in lua, to me it looks like it's getting screen width, taking off 64, then 10, then taking away 10 from height then dividing it by 2, this is of course not what it's doing, does anyone understand it?

 

EDIT

I somehow magically found out how by messing around with above code, is probably wrong way and looks bad, but it is below...

local screenW, screenH = guiGetScreenSize()

addEventHandler("onClientRender", root,
    function()
        dxDrawText("Test 1.0.0", screenW - 70 - 10, (screenH - 10) / 1.04, (screenW - 64 - 10) + 64, ( (screenH - 10) / 1.04) + 10, tocolor(166, 251, 244, 111), 1.00, "default-bold", "center", "center", false, false, false, false, false)
    end
)

It more or less stays there, just needs Y adjusted same way x has been...

Edited July 9, 2017 by kieran

[DNL291]

You can do a test and open your MTA at the highest resolution and after at 640x480. You will realize that the size doesn't change.

I already did it and it's positioned correctly in all resolutions:

guiCreateLabel(sx-(100+4), sy-(15+14), 100, 15, "GVR RPG v"..server_version, false)

 

[kieran]

Oh thanks!  I really gotta start getting used to GUI's  they make a server, anyway, thank you for help.

[DNL291]

Glad it worked, no problem.

[koragg]

About your dxDrawText. You forgot to do this: 

"And always remember to multiply the scale of the text by the "sy" variable to make it smaller on small resolutions and bigger on big ones."

Take a look at the tutorial again cuz I'm from phone now and the code editor window is so bad that i don't even wanna try it right now. 

Edited July 9, 2017 by koragg
You don't need this now but for other dxDrawText stuff which need to change their size/scale it's a must.