Sign in to follow this  
koragg

Fix dxDraw elements' size for any resolution

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

Share this post


Link to post

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

Share this post


Link to post

@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

Share this post


Link to post

Is it fine on bigger resolutions? The personal best's position I meant.

Edited by Gravestone

Share this post


Link to post
2 minutes ago, Gravestone said:

Is it fine on bigger resolutions? The personal best's position I meant.

On FullHD it is, yea. Anything under and it goes bad (more or less).

Edited by koragg

Share this post


Link to post

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

Share this post


Link to post

The personal best though does not go to the correct position no matter what I do. Other things are fine now, just personal best rectangles, name, date, time and flag gotta be right under top9...idk why they aren't.

Share this post


Link to post

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

 

Share this post


Link to post

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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.