Need help with relative screenW, screenH.

[itHyperoX]

Hello. I'm still running into some problems with DX. When others playing lower resoulution, they not seeing the "outlines".

Can anybody can please help me, how can i calculate the correct screenW, screenH for all players seeing the correct DXpanels. Also can somebody can give me example dxDrawRectangle and text for something for this just for learning.  

Currently its looks like this: Learned from one of youtube video, but its still not giving me the right relative value.

dxDrawLine(834/aX*x - 1, 438/aY*y - 1, 834/aX*x - 1, 463/aY*y, tocolor(0, 0, 0, 255), 1, false)
dxDrawLine(1086/aX*x, 438/aY*y - 1, 834/aX*x - 1, 438/aY*y - 1, tocolor(0, 0, 0, 255), 1, false)
dxDrawLine(834/aX*x - 1, 463/aY*y, 1086/aX*x, 463/aY*y, tocolor(0, 0, 0, 255), 1, false)
dxDrawLine(1086/aX*x, 463/aY*y, 1086/aX*x, 438/aY*y - 1, tocolor(0, 0, 0, 255), 1, false)
dxDrawRectangle(834/aX*x, 438/aY*y, 252/aX*x, 25/aY*y, tocolor(0, 0, 0, 150), false)
dxDrawText("#FF6600"..exports["serverCore"]:ServerName().."#FFFFFF - Gambling", 833/aX*x, 437/aY*y, 1086/aX*x, 463/aY*y, tocolor(255, 255, 255, 255), 1.00,customFont, "center", "center", false, false, false, true, false)

 

Edited August 16, 2017 by TheMOG

[Lpsd]

 

As I understand it you've got two 'bars' there, which I'll assume represent health and armor.

I can give you an example of how I would work out all of my Dx positions;

local sX, sY = guiGetScreenSize()
local mainWidth,mainHeight = 300, 50 --Main size for everything
local mainX, mainY = (sX / 2) - (mainWidth / 2), (sY / 2) - (mainHeight / 2) --Main position for everything.

local healthW, healthH = (mainWidth / 2), (mainHeight / 2) --Work out the sizes for the health bar, based off the main sizes
local armorW, armorH = (mainWidth / 2), (mainHeight / 2) --Same for the armor bar

local healthX, healthY = mainX, mainY --Work out the position for the health bar, based off the main positions
local armorX, armorY = mainX + (mainWidth / 2), mainY --Same for the armor bar

dxDrawRectangle(mainX, mainY, mainWidth, mainHeight, tocolor(0,0,0))
dxDrawRectangle(healthX, healthY, healthWidth, healthHeight, tocolor(255,0,0))
dxDrawRectangle(armorX, armorY, armorWidth, armorHeight, tocolor(0,0,255))

To do an outline, you'd just have to do this:

local outlineThickness = 1

local outlineTopX, outlineTopY = mainX, mainY-outlineThickness
local outlineTopWidth, outlineTopHeight = mainWidth, outlineThickness

local outlineBottomX, outlineBottomY = mainX, mainY+mainHeight
local outlineBottomWidth, outlineBottomHeight = mainWidth, outlineThickness

local outlineLeftX, outlineLeftY = mainX-outlineThickness, mainY
local outlineLeftWidth, outlineLeftHeight = outlineThickness, mainHeight

local outlineRightX, outlineRightY = mainX+mainWidth, mainY
local outlineRightWidth, outlineRightHeight = outlineThickness, mainHeight

dxDrawRectangle(outlineTopX, outlineTopY, outlineTopWidth, outlineTopHeight, tocolor(255,255,255))
dxDrawRectangle(outlineBottomX, outlineBottomY, outlineBottomWidth, outlineBottomHeight, tocolor(255,255,255))
dxDrawRectangle(outlineLeftX, outlineLeftY, outlineLeftWidth, outlineLeftHeight, tocolor(255,255,255))
dxDrawRectangle(outlineRightX, outlineRightY, outlineRightWidth, outlineRightHeight, tocolor(255,255,255))

This might seem like a lot more work and code, but trust me - it's so much cleaner and more importantly easy to manage since everything is based directly from two main positions & sizes.

The main principle is to work out the positions for everything based off the main / parent ones. Makes it a hell of a lot easier if you decide the whole gui needs moving position.

I haven't tested this, just a quick example. Hope it helps 

[itHyperoX]

Thank you. Can you show me something how to use the dxDrawText for relative res?

Now its looks like this:

Current code:

local sX, sY = guiGetScreenSize()
local mainWidth,mainHeight = 200, 10 --Main size for everything
local mainX, mainY = (sX-250 / 2) - (mainWidth / 2), (sY-1800 / 2) - (mainHeight / 2) --Main position for everything.
local healthW, healthH = (mainWidth / 2), (mainHeight / 2) --Work out the sizes for the health bar, based off the main sizes
local armorW, armorH = (mainWidth / 2), (mainHeight / 2) --Same for the armor bar
local healthX, healthY = mainX, mainY --Work out the position for the health bar, based off the main positions
local armorX, armorY = mainX + (mainWidth / 2), mainY --Same for the armor bar
local isHud = false

local outlineThickness = 1
local outlineTopX, outlineTopY = mainX, mainY-outlineThickness
local outlineTopWidth, outlineTopHeight = mainWidth, outlineThickness
local outlineBottomX, outlineBottomY = mainX, mainY+mainHeight
local outlineBottomWidth, outlineBottomHeight = mainWidth, outlineThickness
local outlineLeftX, outlineLeftY = mainX-outlineThickness, mainY
local outlineLeftWidth, outlineLeftHeight = outlineThickness, mainHeight
local outlineRightX, outlineRightY = mainX+mainWidth, mainY
local outlineRightWidth, outlineRightHeight = outlineThickness, mainHeight

function drawHUD()
dxDrawRectangle(mainX, mainY, mainWidth, mainHeight, tocolor(0,0,0,150))
dxDrawRectangle(healthX, healthY, healthW, healthH+5, tocolor(254, 39, 39, 150))
dxDrawRectangle(armorX, armorY, armorW, armorH+5, tocolor(38, 104, 254, 150))

dxDrawRectangle(outlineTopX, outlineTopY, outlineTopWidth, outlineTopHeight, tocolor(0,0,0,255))
dxDrawRectangle(outlineBottomX, outlineBottomY, outlineBottomWidth, outlineBottomHeight, tocolor(0,0,0,255))
dxDrawRectangle(outlineLeftX, outlineLeftY, outlineLeftWidth, outlineLeftHeight, tocolor(0,0,0,255))
dxDrawRectangle(outlineRightX, outlineRightY, outlineRightWidth, outlineRightHeight, tocolor(0,0,0,255))
end

addEventHandler("onClientResourceStart",getResourceRootElement(getThisResource()),function() 
    addEventHandler("onClientRender", root, drawHUD)
    isHud = true
end)

 

Edited August 17, 2017 by TheMOG

[itHyperoX]

up