Jump to content

Fix dxDraw elements' size for any resolution


koragg

Recommended Posts

Heyo, so recently I got an awesome toptimes resource from a friend and today I fixed the positions of all elements drawn with dxDraw so that the toptimes window doesn't go outside of screen boundary on any resolution. So far, so good. But there is one problem, I don't know how to fix the elements' size to be same for all resolutions. I tried with something like " local x_,y_ = x/1680,y/1080 " and put " *y_ " after the size but it still looks ugly, also tried more combinations such as " x/1440,y/900 " and so on, to no success. Below is just the function which draws the F5 tops window, I always had trouble with fixing the size and here i am again, same problem...for the Nth time. Any help is appreciated.

sX,sY = guiGetScreenSize()

function drawToptimesIntreface()
	local x,y = guiGetScreenSize()
    if toptimes.animState == "closed" then
        local tick = getTickCount() - toptimes.tick
        local progress = tick/1000
		toptimes.anim = interpolateBetween(0,0,0,390,0,0,progress,"OutBack")
    else
        local tick = getTickCount() - toptimes.tick
        local progress = tick/1000
		toptimes.anim = interpolateBetween(390,0,0,0,0,0,progress,"InBack")
    end
    local clanColor 		= tocolor(255, 205, 0, 255)	-- Clan Color	
	local titleColor 		= tocolor(0, 255, 255, 255)	-- Toptimes Title
	local displayColor 		= tocolor(0, 0, 0, 150)			-- Toptimes Blackground
    if toptimes.state then
        local sY = sY-toptimes.anim*1.2
		dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)-y*0.5, x*0.1979166666666667, y*0.0231481481481481, clanColor)
		dxDrawText("Toptimes - "..toptimes.mapname, sX-x*0.6713541666666667, (sY/2)-y*0.8509259259259259,sX-x*0.0046875, (sY/2)-y*0.1240740740740741, tocolor(0,0,0,255), 1, "default-bold","center","center",true)
		dxDrawText("Toptimes - "..toptimes.mapname, sX-x*0.671875, (sY/2)-y*0.8518518518518519, sX-x*0.0052083333333333, (sY/2)-y*0.125, titleColor, 1, "default-bold", "center","center",true)
		dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)-y*0.4768518518518519, x*0.1979166666666667, y*0.1666666666666667, displayColor)
        for i=1,9 do
			-- Show when player have toptime in any map
			dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)+((i-1)*20)-y*0.4759259259259259, x*0.1979166666666667, y*0.017022792022792, tocolor(255,255,255,toptimes.color[i]))
		end
		for i=1,9 do
			-- Shadow
			dxDrawText(i..".          "..removeColorCoding(toptimes.label[i]), sX-x*0.4310416666666667, (sY/2)+((i-1)*20)-y*0.8277777777777778, sX-x*0.0244791666666667, (sY/2)+((i)*20)-y*0.1240740740740741, tocolor(0,0,0,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.time[i], sX-x*0.3132291666666667, (sY/2)+((i-1)*20)-y*0.8277777777777778, sX-x*0.0244791666666667, (sY/2)+((i)*20)-y*0.1240740740740741, tocolor(0,0,0,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.data[i], sX-x*0.2744791666666667, (sY/2)+((i-1)*20)-y*0.8277777777777778, sX-x*0.0244791666666667, (sY/2)+((i)*20)-y*0.1240740740740741, tocolor(0,0,0,255), 1, "default-bold","left","center",true,false,false,true)
			--
			dxDrawText(i..".          "..toptimes.label[i], sX-x*0.4315625, (sY/2)+((i-1)*20)-y*0.8287037037037037, sX-x*0.025, (sY/2)+((i)*20)-y*0.125, tocolor(255,255,255,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.time[i], sX-x*0.31375, (sY/2)+((i-1)*20)-y*0.8287037037037037, sX-x*0.025, (sY/2)+((i)*20)-y*0.125, tocolor(255,255,255,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.data[i], sX-x*0.275, (sY/2)+((i-1)*20)-y*0.8287037037037037, sX-x*0.025, (sY/2)+((i)*20)-y*0.125, tocolor(255,255,255,255), 1, "default-bold","left","center",true,false,false,true)
            if toptimes.country[i] ~= "" then
                if fileExists(":admin/client/images/flags/"..toptimes.country[i]..".png") then
                    dxDrawImage(sX-x*0.4227083333333333, (sY/2)+((i-1)*20)-y*0.4731481481481481, x*0.0083333333333333, y*0.0101851851851852, ":admin/client/images/flags/"..toptimes.country[i]..".png", tocolor(255,255,255,255))
                end
            else
			    if fileExists(":admin/client/images/flags/gtasa.png") then
                    dxDrawImage(sX-x*0.4227083333333333, (sY/2)+((i-1)*20)-y*0.4731481481481481, x*0.0083333333333333, y*0.0101851851851852, ":admin/client/images/flags/gtasa.png", tocolor(255,255,255,255))
                end
			end
        end
		if toptimes.personal[1] then
            dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)-y*0.3101851851851852, x*0.1979166666666667, y*0.017592592592596, displayColor)
            dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)-y*0.3089506172839506, x*0.1979166666666667, y*0.0166666666666667, tocolor(255,255,255,100))
			-- Shadow
			dxDrawText(""..toptimes.personal.pos..".    "..toptimes.personal.spacement..removeColorCoding(toptimes.personal.name), sX-x*0.4341666666666667, (sY/2)-y*0.6673611111111111, sX-x*0.0244791666666667, (sY/2)+y*0.0668981481481481, tocolor(0,0,0,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.time, sX-x*0.3132291666666667, (sY/2)-y*0.6645833333333333, sX-x*0.0244791666666667, (sY/2)+y*0.0641203703703704, tocolor(0,0,0,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.data, sX-x*0.2744791666666667, (sY/2)-y*0.6645833333333333, sX-x*0.0244791666666667, (sY/2)+y*0.0641203703703704, tocolor(0,0,0,255), 1, "default-bold","left","center",true,false,false,true)
			--
			dxDrawText(""..toptimes.personal.pos..".    "..toptimes.personal.spacement..toptimes.personal.name, sX-x*0.4346875, (sY/2)-y*0.668287037037037, sX-x*0.025, (sY/2)+y*0.0659722222222222, tocolor(255,255,255,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.time, sX-x*0.31375, (sY/2)-y*0.6655092592592593, sX-x*0.025, (sY/2)+y*0.0631944444444444, tocolor(255,255,255,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.data, sX-x*0.275, (sY/2)-y*0.6655092592592593, sX-x*0.025, (sY/2)+y*0.0631944444444444, tocolor(255,255,255,255), 1, "default-bold","left","center",true,false,false,true)
			if toptimes.personal.country ~= "" then
				if fileExists(":admin/client/images/flags/"..toptimes.personal.country..".png") then
					dxDrawImage(sX-x*0.4227083333333333, (sY/2)-y*0.30625, x*0.0083333333333333, y*0.0101851851851852, ":admin/client/images/flags/"..toptimes.personal.country..".png", tocolor(255,255,255,255))
				end
            else
			if fileExists(":admin/client/images/flags/gtasa.png") then
					dxDrawImage(sX-x*0.4227083333333333, (sY/2)-y*0.30625, x*0.0083333333333333, y*0.0101851851851852, ":admin/client/images/flags/gtasa.png", tocolor(255,255,255,255))
			end
			end
        end
    end
end
addEventHandler("onClientRender",getRootElement(),drawToptimesIntreface)

  This is how it should look like, on any screen : gJ84GYt.gif

Edited by koragg
Here is full resource if you need to test it : https://www.dropbox.com/s/38j8wdrsvqag7i9/new_toptimes.zip?dl=0
Link to comment

This is just a single line of your code, do this to the other ones.

local psWidth, psHeight = guiGetScreenSize()
local cX, cY = psWidth/1980, psHeight/1080
dxDrawText("Toptimes - "..toptimes.mapname, sX-x*0.671875, (sY/2)-y*0.8518518518518519, sX-x*0.0052083333333333, (sY/2)-y*0.125, titleColor, cX*1, cY*1, "default-bold", "center","center",true)

Btw, you don't have to be so specific about the positioning, you can round the values to 2 or 3 decimal places. :)

Edited by Gravestone
Typo
  • Like 1
Link to comment

@Gravestone after I did what you said, size of dxtexts seems to be fine but the size of the background rectangle is smaller than it should be on small resolutions + the personal best is totally dispositioned :S (should be under top9)c2wXc0F.png

And I can't put size argument in dxDrawRectangle as far as i know.

Edited by koragg
I'm scared so I write all numbers after the dot xD
Link to comment

Doesn't even show on screen now. Which is ok as I used the guigetscreensize to divide positions and everything, not x/1980 and y/1080.

 

OK, I managed to fix the background rectangle's size by dividing the last y value by cY.

dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)-y*0.5, x*0.1979166666666667, y*0.0231481481481481/cY, clanColor)

 

Edited by koragg
Link to comment

So I fixed the personal time's position by using the same lines as for the top1-top9 lines, just changed 'i' to '10' and it worked :)

if toptimes.personal[1] then
			dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)+((10-1)*20)-y*0.4759259259259259-1, x*0.1979166666666667, y*0.017022792022792/cY, displayColor)
			dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)+((10-1)*20)-y*0.4759259259259259-1, x*0.1979166666666667, y*0.017022792022792/cY, tocolor(255,255,255,100))
			-- Shadow
			dxDrawText(""..toptimes.personal.pos..".    "..toptimes.personal.spacement..removeColorCoding(toptimes.personal.name), sX-x*0.4341666666666667, (sY/2)+((10-1)*20)-y*0.8277777777777778, sX-x*0.0244791666666667, (sY/2)+((10)*20)-y*0.1240740740740741, tocolor(0,0,0,255), cY*1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.time, sX-x*0.3132291666666667, (sY/2)+((10-1)*20)-y*0.8277777777777778, sX-x*0.0244791666666667, (sY/2)+((10)*20)-y*0.1240740740740741, tocolor(0,0,0,255), cY*1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.data, sX-x*0.2744791666666667, (sY/2)+((10-1)*20)-y*0.8277777777777778, sX-x*0.0244791666666667, (sY/2)+((10)*20)-y*0.1240740740740741, tocolor(0,0,0,255), cY*1, "default-bold","left","center",true,false,false,true)
			--
			dxDrawText(""..toptimes.personal.pos..".    "..toptimes.personal.spacement..toptimes.personal.name, sX-x*0.4346875, (sY/2)+((10-1)*20)-y*0.8287037037037037, sX-x*0.025, (sY/2)+((10)*20)-y*0.125, tocolor(255,255,255,255), cY*1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.time, sX-x*0.31375, (sY/2)+((10-1)*20)-y*0.8287037037037037, sX-x*0.025, (sY/2)+((10)*20)-y*0.125, tocolor(255,255,255,255), cY*1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.data, sX-x*0.275, (sY/2)+((10-1)*20)-y*0.8287037037037037, sX-x*0.025, (sY/2)+((10)*20)-y*0.125, tocolor(255,255,255,255), cY*1, "default-bold","left","center",true,false,false,true)
			if toptimes.personal.country ~= "" then
				if fileExists(":admin/client/images/flags/"..toptimes.personal.country..".png") then
					dxDrawImage(sX-x*0.4227083333333333, (sY/2)+((10-1)*20)-y*0.4731481481481481, x*0.0083333333333333, y*0.0101851851851852/cY, ":admin/client/images/flags/"..toptimes.personal.country..".png", tocolor(255,255,255,255))
				end
            else
			if fileExists(":admin/client/images/flags/gtasa.png") then
					dxDrawImage(sX-x*0.4227083333333333, (sY/2)+((10-1)*20)-y*0.4731481481481481, x*0.0083333333333333, y*0.0101851851851852/cY, ":admin/client/images/flags/gtasa.png", tocolor(255,255,255,255))
			end
			end
        end

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...