[HELP] Moving Buttons in login Panel

ExteeL · September 13, 2017

Hello everyone,

Well I have a finished log in panel for my gamemode, and i need to change the location of the buttons from the right to the center.

This is the current log in panel:

How I want it to look like:

I want the buttons to be like inside the rectangle in the middle of the screen, I just want to know how to get these coordinates to make it.

Code:

function renderLoginInterface()

	loginData.switchHover = false

	local tick = getTickCount() - loginData.animTick

	local progress = math.min(tick/1000,1)

	if loginData.animState then

		loginData.loginAlpha = interpolateBetween(loginData.loginAlpha,0,0,255,0,0,progress,"Linear")

	else

		loginData.loginAlpha = interpolateBetween(loginData.loginAlpha,0,0,0,0,0,progress,"Linear")

		loginData.backgroundAlpha = loginData.loginAlpha

	end

	dxDrawImage(0,0,sX,sY,"loginImage/background.jpg",0,0,0,tocolor(255,255,255,loginData.backgroundAlpha))

	dxDrawImage(0,sY*0.15,sX*0.3,sX*0.15,"loginImage/logo.png",0,0,0,tocolor(255,255,255,loginData.loginAlpha))

	local shadowScale = sX*0.002

	local tick = getTickCount() - loginData.loginTick

	local progress = math.min(tick/500,1)

	if loginData.loginState == "register" then

		loginData.loginX = interpolateBetween(loginData.loginX,0,0,sX,0,0,progress,"Linear")

		if progress >= 0.95 then

			local progress = math.min(math.abs(tick-450)/500,1)

			loginData.registerX = interpolateBetween(loginData.registerX,0,0,sX*0.6,0,0,progress,"Linear")

		end

	elseif loginData.loginState == "login" then

		loginData.registerX = interpolateBetween(loginData.registerX,0,0,sX,0,0,progress,"Linear")

		if progress >= 0.95 then

			local progress = math.min(math.abs(tick-450)/500,1)

			loginData.loginX = interpolateBetween(loginData.loginX,0,0,sX*0.6,0,0,progress,"Linear")

		end

	end

	local loginX = loginData.loginX

	local loginY = sY*0.25

	local registerX = loginData.registerX

	if loginData.loginX < sX*0.99 then

		dxDrawText("Login",loginX+shadowScale,loginY+shadowScale,loginX+sX*0.2,loginY+sY*0.15,tocolor(0,0,0,loginData.loginAlpha),loginData.fontScale*0.25,loginData.font,"right","center",true,false,false)

		dxDrawText("Login",loginX,loginY,loginX+sX*0.3,loginY+sY*0.15,tocolor(255,255,255,loginData.loginAlpha),loginData.fontScale*0.25,loginData.font,"right","center",true,false,false)

		dxLibCreateEdit(loginData.loginEdit,loginX,loginY+sY*0.15,sX*0.32,sY*0.04,"Your username","person",20,20,20,loginData.loginAlpha,false,false)

		dxLibCreateEdit(loginData.passwordEdit,loginX,loginY+sY*0.2,sX*0.32,sY*0.04,"Your password","password",20,20,20,loginData.loginAlpha,false,true)

		dxLibCreateButton(loginData.loginButton,loginX+sX*0.2,loginY+sY*0.275,sX*0.1,sY*0.04,"Login",loginData.fontScale*0.1,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)

		dxLibCreateButton(loginData.registerButton,loginX+sX*0.02,loginY+sY*0.32,sX*0.1,sY*0.035,"Register",loginData.fontScale*0.1,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)

		dxLibCreateButton(loginData.guestButton,loginX+sX*0.17,loginY+sY*0.32,sX*0.13,sY*0.035,"Join as guest...",loginData.fontScale*0.1,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)

		dxDrawText("OR",loginX+sX*0.12125,loginY+sY*0.32,loginX+sX*0.17,loginY+sY*0.355+sX*0.00125,tocolor(0,0,0,loginData.loginAlpha),loginData.fontScale*0.1,loginData.font,"center","center",true,false,false)

		dxDrawText("OR",loginX+sX*0.12,loginY+sY*0.32,loginX+sX*0.17,loginY+sY*0.355,tocolor(255,255,255,loginData.loginAlpha),loginData.fontScale*0.1,loginData.font,"center","center",true,false,false)

		local tick = getTickCount() - loginData.switchTick

		local progress = math.min(tick/500,1)

		if loginData.rememberState then

			loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3] = interpolateBetween(loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3],0,255,0,progress,"Linear")

			loginData.switchPosition = interpolateBetween(loginData.switchPosition,0,0,sX*0.041-sY*0.03,0,0,progress,"Linear")

		else

			loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3] = interpolateBetween(loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3],255,0,0,progress,"Linear")

			loginData.switchPosition = interpolateBetween(loginData.switchPosition,0,0,0,0,0,progress,"Linear")

		end

		local switchAlpha = loginData.loginAlpha

		if isCursorHover(loginX+sX*0.02,loginY+sY*0.275,sX*0.17,sY*0.04) then

			switchAlpha = switchAlpha * 0.75

			loginData.switchHover = true

		end

		dxDrawImage(loginX+sX*0.02,loginY+sY*0.275,sX*0.05,sY*0.04,"loginImage/switchBackground.png",0,0,0,tocolor(255,255,255,loginData.loginAlpha))

		dxDrawImage(loginX+sX*0.02,loginY+sY*0.275,sX*0.05,sY*0.04,"loginImage/switchCenter.png",0,0,0,tocolor(loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3],switchAlpha))

		dxDrawImage(loginX+sX*0.023+loginData.switchPosition,loginY+sY*0.28,sY*0.03,sY*0.03,"loginImage/switchSlide.png",0,0,0,tocolor(255,255,255,switchAlpha))

		dxDrawText("Remember password?",loginX+sX*0.0706,loginY+sY*0.275+sX*0.0012,loginX+sX*0.19,loginY+sY*0.315,tocolor(0,0,0,switchAlpha),loginData.fontScale*0.08,loginData.font,"left","center",true,false,false)

		dxDrawText("Remember password?",loginX+sX*0.07,loginY+sY*0.275,loginX+sX*0.19,loginY+sY*0.315,tocolor(255,255,255,switchAlpha),loginData.fontScale*0.08,loginData.font,"left","center",true,false,false)

	end

	if registerX < sX*0.99 then

		local loginX = registerX

		dxDrawText("Register",loginX+shadowScale,loginY+shadowScale,loginX+sX*0.3,loginY+sY*0.15,tocolor(0,0,0,loginData.loginAlpha),loginData.fontScale*0.25,loginData.font,"right","center",true,false,false)

		dxDrawText("Register",loginX,loginY,loginX+sX*0.3,loginY+sY*0.15,tocolor(255,255,255,loginData.loginAlpha),loginData.fontScale*0.25,loginData.font,"right","center",true,false,false)

		dxLibCreateEdit(loginData.loginEdit,loginX,loginY+sY*0.15,sX*0.32,sY*0.04,"Type username","person",20,20,20,loginData.loginAlpha,false,false)

		dxLibCreateEdit(loginData.passwordEdit,loginX,loginY+sY*0.2,sX*0.32,sY*0.04,"Type password","password",20,20,20,loginData.loginAlpha,false,true)

		dxLibCreateEdit(loginData.confirmEdit,loginX,loginY+sY*0.25,sX*0.32,sY*0.04,"Confirm your password","password",20,20,20,loginData.loginAlpha,false,true)

		dxLibCreateButton(loginData.loginButton,loginX+sX*0.02,loginY+sY*0.31,sX*0.2,sY*0.035,"Register new account",loginData.fontScale*0.04,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)

		dxLibCreateButton(loginData.registerButton,loginX+sX*0.23,loginY+sY*0.31,sX*0.07,sY*0.035,"Back",loginData.fontScale*0.04,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)

	end

end

P.S: I am not that .lua expert, I am still a beginner!

Edited September 13, 2017 by ExteeL

koragg · September 13, 2017

Try to fix it yourself the following way:

Everywhere where you see a line similar to

dxDrawText("Login",loginX+shadowScale,loginY+shadowScale,loginX+sX*0.2,loginY+sY*0.15,tocolor(0,0,0,loginData.loginAlpha),loginData.fontScale*0.25,loginData.font,"right","center",true,false,false)

try to add or withdraw some numbers until you have the text/image in the correct position. So for example in the above line try to make it like this:

dxDrawText("Login",loginX+shadowScale+200, loginY+shadowScale+300, loginX+sX*0.2+150, loginY+sY*0.15+250, tocolor(0, 0, 0, loginData.loginAlpha), loginData.fontScale*0.25, loginData.font, "right", "center", true, false, false)

As you see I added some numbers (+200, etc.) to each value and this way the text or image will move somewhere else on the screen. Try to play around with it like that until you find the sweat spot for the buttons and text. One thing to remember is:

First value after the "Login" string is the X coordinate of the text on the screen (left or right). The value after the X one is the Y value (up or down). The 3rd value is the X coordinate of the text's boundarybox and the 4th value is the Y coordinate of the boundarybox.

Now, what's a boundary box? Well let's just say that if the boundary box of the text is too small on the X side (left or right) then the text will move to a new line when it reaches the end of the boundary box. Example: if the boundary box is too small the text won't show as "Login" on a single line but instead on the first line it will be "Log" and the "in" part will be moved to another line.

Here's some really useful descriptions that will help you understand things better. And remember, play around and you'll get the hang of it

https://wiki.multitheftauto.com/wiki/DxDrawText

https://wiki.multitheftauto.com/wiki/DxDrawImage

Edited September 13, 2017 by koragg
We can't fix it for you as you know exactly how you want it to look, plus you'll gain some experiance if you do (or try to do) it on your own (even if it's partly helped by others).

ExteeL · September 13, 2017

Thanks for the info Koragg, you truly helped me and made me at least understand how to fix it, I was lost on where I should add the numbers and how should I, and thanks for the notes and telling me how to do it instead of giving me a ready code to just copy/paste, as u said i will gain more experience this way.

koragg · September 14, 2017

Anytime Once you have the things in the places you want them to be you'll need to make it look good on any screen resolution but that's a bit tricky so you could post your code and I'll do it for you. If there are animations in the login panel that's another thing though

ExteeL · September 14, 2017

16 hours ago, koragg said:

Anytime Once you have the things in the places you want them to be you'll need to make it look good on any screen resolution but that's a bit tricky so you could post your code and I'll do it for you. If there are animations in the login panel that's another thing though

I've finished placing them on the exact place i need (sorry for the late reply i just tested it on other resolutions xd)

Here's the code again

function renderLoginInterface()
	loginData.switchHover = false
	local tick = getTickCount() - loginData.animTick
	local progress = math.min(tick/1000,1)
	if loginData.animState then
		loginData.loginAlpha = interpolateBetween(loginData.loginAlpha,0,0,255,0,0,progress,"Linear")
	else
		loginData.loginAlpha = interpolateBetween(loginData.loginAlpha,0,0,0,0,0,progress,"Linear")
		loginData.backgroundAlpha = loginData.loginAlpha
	end
	dxDrawImage(0,0,sX,sY,"loginImage/background.jpg",0,0,0,tocolor(255,255,255,loginData.backgroundAlpha))
	dxDrawImage(0,sY*0.15,sX*0.3,sX*0.15,"loginImage/logo.png",0,0,0,tocolor(255,255,255,loginData.loginAlpha))
	local shadowScale = sX*0.002
	local tick = getTickCount() - loginData.loginTick
	local progress = math.min(tick/500,1)
	if loginData.loginState == "register" then
		loginData.loginX = interpolateBetween(loginData.loginX,0,0,sX,0,0,progress,"Linear")
		if progress >= 0.95 then
			local progress = math.min(math.abs(tick-450)/500,1)
			loginData.registerX = interpolateBetween(loginData.registerX,0,0,sX*0.6,0,0,progress,"Linear")
		end
	elseif loginData.loginState == "login" then
		loginData.registerX = interpolateBetween(loginData.registerX,0,0,sX,0,0,progress,"Linear")
		if progress >= 0.95 then
			local progress = math.min(math.abs(tick-450)/500,1)
			loginData.loginX = interpolateBetween(loginData.loginX,0,0,sX*0.6,0,0,progress,"Linear")
		end
	end
	local loginX = loginData.loginX
	local loginY = sY*0.25
	local registerX = loginData.registerX
	if loginData.loginX < sX*0.99 then
		dxDrawText("Login",loginX+shadowScale-470,loginY+shadowScale+100,loginX+sX*0.3-470,loginY+sY*0.15+100,tocolor(0,0,0,loginData.loginAlpha),loginData.fontScale*0.6,loginData.font,"right","center",true,false,false)
		dxDrawText("Login",loginX-470,loginY+100,loginX+sX*0.3-470,loginY+sY*0.15+100,tocolor(255,255,255,loginData.loginAlpha),loginData.fontScale*0.6,loginData.font,"right","center",true,false,false)
		dxLibCreateEdit(loginData.loginEdit,loginX-350,loginY+sY*0.15+100,sX*0.32,sY*0.04,"Your username","person",20,20,20,loginData.loginAlpha,false,false)
		dxLibCreateEdit(loginData.passwordEdit,loginX-350,loginY+sY*0.2+100,sX*0.32,sY*0.04,"Your password","password",20,20,20,loginData.loginAlpha,false,true)
		dxLibCreateButton(loginData.loginButton,loginX+sX*0.2-400,loginY+sY*0.275+100,sX*0.15,sY*0.06,"Login now!",loginData.fontScale*0.19,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)
		dxLibCreateButton(loginData.registerButton,loginX+sX*0.02-350,loginY+sY*0.32+130,sX*0.11,sY*0.055,"Register",loginData.fontScale*0.17,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)
		dxLibCreateButton(loginData.guestButton,loginX+sX*0.17-350,loginY+sY*0.32+130,sX*0.14,sY*0.055,"Join as guest...",loginData.fontScale*0.17,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)
		dxDrawText("OR",loginX+sX*0.12125-350,loginY+sY*0.32+160,loginX+sX*0.17,loginY+sY*0.355+sX*0.00125,tocolor(0,0,0,loginData.loginAlpha),loginData.fontScale*0.08,loginData.font,"center","center",true,false,false)
		dxDrawText("OR",loginX+sX*0.12-350,loginY+sY*0.32+160,loginX+sX*0.17,loginY+sY*0.355,tocolor(255,255,255,loginData.loginAlpha),loginData.fontScale*0.08,loginData.font,"center","center",true,false,false)
		local tick = getTickCount() - loginData.switchTick
		local progress = math.min(tick/500,1)
		if loginData.rememberState then
			loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3] = interpolateBetween(loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3],0,255,0,progress,"Linear")
			loginData.switchPosition = interpolateBetween(loginData.switchPosition,0,0,sX*0.041-sY*0.03,0,0,progress,"Linear")
		else
			loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3] = interpolateBetween(loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3],255,0,0,progress,"Linear")
			loginData.switchPosition = interpolateBetween(loginData.switchPosition,0,0,0,0,0,progress,"Linear")
		end
		local switchAlpha = loginData.loginAlpha
		if isCursorHover(loginX+sX*0.02-375,loginY+sY*0.275+100,sX*0.17,sY*0.04) then
			switchAlpha = switchAlpha * 0.75
			loginData.switchHover = true
		end
		dxDrawImage(loginX+sX*0.02-375,loginY+sY*0.275+100,sX*0.05,sY*0.04,"loginImage/switchBackground.png",0,0,0,tocolor(255,255,255,loginData.loginAlpha))
		dxDrawImage(loginX+sX*0.02-375,loginY+sY*0.275+100,sX*0.05,sY*0.04,"loginImage/switchCenter.png",0,0,0,tocolor(loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3],switchAlpha))
		dxDrawImage(loginX+sX*0.023-375+loginData.switchPosition,loginY+sY*0.28+100,sY*0.03,sY*0.03,"loginImage/switchSlide.png",0,0,0,tocolor(255,255,255,switchAlpha))
		dxDrawText("Remember password?",loginX+sX*0.0706-370,loginY+sY*0.275+100+sX*0.0012,loginX+sX*0.19-370,loginY+sY*0.315+100,tocolor(0,0,0,switchAlpha),loginData.fontScale*0.1,loginData.font,"left","center",true,false,false)
		dxDrawText("Remember password?",loginX+sX*0.07-370,loginY+sY*0.275+100,loginX+sX*0.19-370,loginY+sY*0.315+100,tocolor(255,255,255,switchAlpha),loginData.fontScale*0.1,loginData.font,"left","center",true,false,false)
	end
	if registerX < sX*0.99 then
		local loginX = registerX
		dxDrawText("Register",loginX+shadowScale-415,loginY+shadowScale+100,loginX+sX*0.3-415,loginY+sY*0.15+100,tocolor(0,0,0,loginData.loginAlpha),loginData.fontScale*0.6,loginData.font,"right","center",true,false,false)
		dxDrawText("Register",loginX-415,loginY+100,loginX+sX*0.3-415,loginY+sY*0.15+100,tocolor(255,255,255,loginData.loginAlpha),loginData.fontScale*0.6,loginData.font,"right","center",true,false,false)
		dxLibCreateEdit(loginData.loginEdit,loginX-350,loginY+sY*0.15+100,sX*0.32,sY*0.04,"Type username","person",20,20,20,loginData.loginAlpha,false,false)
		dxLibCreateEdit(loginData.passwordEdit,loginX-350,loginY+sY*0.2+100,sX*0.32,sY*0.04,"Type password","password",20,20,20,loginData.loginAlpha,false,true)
		dxLibCreateEdit(loginData.confirmEdit,loginX-350,loginY+sY*0.25+100,sX*0.32,sY*0.04,"Confirm your password","password",20,20,20,loginData.loginAlpha,false,true)
		dxLibCreateButton(loginData.loginButton,loginX+sX*0.02-350,loginY+sY*0.31+100,sX*0.2,sY*0.07,"Register new account!",loginData.fontScale*0.2,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)
		dxLibCreateButton(loginData.registerButton,loginX+sX*0.23-350,loginY+sY*0.31+100,sX*0.07,sY*0.07,"Back",loginData.fontScale*0.2,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)
	end
end

If you can tell me how to do it and u give me an example just like the above post I would really appreciate it! Thanks for helping again!

Dimos7 · September 14, 2017

read this

ExteeL · September 14, 2017

10 minutes ago, Dimos7 said:

read this

I can see nothing, i am using the dark theme for the forum, does it contain bug with attaching topics in posts?

Dimos7 · September 14, 2017

local screenW, screenH = guiGetScreenSize()
local sx, sy = screenW/1440, screenH/900

if you have another resolution there change the numbers and after there you want use it for match all resolution just do sx*your number x, sy*number of y etc or just use screenW/number x and, screenH/number of y its same

Edited September 14, 2017 by Dimos7

ExteeL · September 14, 2017

20 minutes ago, Dimos7 said:
local screenW, screenH = guiGetScreenSize()local sx, sy = screenW/1440, screenH/900
if you have another resolution there change the numbers and after there you want use it for match all resolution just do sx*your number x, sy*number of y etc or just use screenW/number x and, screenH/number of y its same

There is something I didn't understand in that tutorial topic, for example, my location of the picture is:

		dxDrawText("Login",loginX+shadowScale-470,loginY+shadowScale+100,loginX+sX*0.3-470,loginY+sY*0.15+100,tocolor(0,0,0,loginData.loginAlpha),loginData.fontScale*0.6,loginData.font,"right","center",true,false,false)

and since i am using this function:

local sX,sY = guiGetScreenSize()

I need to get the new numbers to multiply with.

My screen resolution is 1366x768x32

So, to get the new number for loginX+sX*0.3-470 I have to multiply the 0.3 first by 1366, then I get an answer which is 409.8, and after deducting 470 from it it's -60.2 (negative :~).

So basically, I understood a bit from the topic but not a lot, can someone explain it a bit extra than in the topic please?

koragg · September 14, 2017

I think my way is a bit easier, 2nd reply:

Edited September 14, 2017 by koragg

ExteeL · September 15, 2017

11 hours ago, koragg said:

I think my way is a bit easier, 2nd reply:

I read it too, but the thing that I didn't understand on how to make the numbers that I have multiplied and added to combine to become one number, cause in my code u can see sX*0.3-470, that's what I'm not understanding on how to do it.

koragg · September 15, 2017

Ah i see. I'll give you some code in a few hours. Just tell me on what resolution did you make it look perfect.

ExteeL · September 15, 2017

19 hours ago, ExteeL said:

My screen resolution is 1366x768x32

5 hours ago, koragg said:

Ah i see. I'll give you some code in a few hours. Just tell me on what resolution did you make it look perfect.

There you go.

koragg · September 15, 2017

41 minutes ago, ExteeL said:

There you go.

There're a few variables that seem undefined. Can you post the complete script? Things like 'loginData' and 'sX' I don't know from where they come and can't be sure what they do.

ExteeL · September 15, 2017

4 minutes ago, koragg said:

There're a few variables that seem undefined. Can you post the complete script? Things like 'loginData' and 'sX' I don't know from where they come and can't be sure what they do.


local sX,sY = guiGetScreenSize()


local loginData = {
	loginEdit = false,
	passwordEdit = false,
	confirmEdit = false,
	loginButton = false,
	registerButton = false,
	guestButton = false,
	loginState = "login",
	loginTick = 0,
	animState = false,
	animTick = 0,
	backgroundAlpha = 255,
	backgroundAnim = false,
	font = "default-bold",
	fontScale = false,
	colorData = {0,176,255},
	rememberState = false,
	switchTick = 0,
	switchColor = {255,0,0},
	switchPosition = 0,
	switchHover = false,
	loginX = sX*0.6,
	registerX = sX,
	messagesData = {
		
	},
	messageTick = 0,
}



function onLoginResourceStart()
	loginData.loginEdit = createElement("dxEdit")
	loginData.passwordEdit = createElement("dxEdit")
	loginData.confirmEdit = createElement("dxEdit")
	loginData.loginButton = createElement("dxButton")
	loginData.registerButton = createElement("dxButton")
	loginData.guestButton = createElement("dxButton")
	setElementData(localPlayer,"loginState",false,false)
	triggerServerEvent("onClientWantCheckHisState",localPlayer)
end
addEventHandler("onClientResourceStart",resourceRoot,onLoginResourceStart)


function renderLoginInterface()
	loginData.switchHover = false
	local tick = getTickCount() - loginData.animTick
	local progress = math.min(tick/1000,1)
	if loginData.animState then
		loginData.loginAlpha = interpolateBetween(loginData.loginAlpha,0,0,255,0,0,progress,"Linear")
	else
		loginData.loginAlpha = interpolateBetween(loginData.loginAlpha,0,0,0,0,0,progress,"Linear")
		loginData.backgroundAlpha = loginData.loginAlpha
	end
	dxDrawImage(0,0,sX,sY,"loginImage/background.jpg",0,0,0,tocolor(255,255,255,loginData.backgroundAlpha))
	dxDrawImage(0,sY*0.15,sX*0.3,sX*0.15,"loginImage/logo.png",0,0,0,tocolor(255,255,255,loginData.loginAlpha))
	local shadowScale = sX*0.002
	local tick = getTickCount() - loginData.loginTick
	local progress = math.min(tick/500,1)
	if loginData.loginState == "register" then
		loginData.loginX = interpolateBetween(loginData.loginX,0,0,sX,0,0,progress,"Linear")
		if progress >= 0.95 then
			local progress = math.min(math.abs(tick-450)/500,1)
			loginData.registerX = interpolateBetween(loginData.registerX,0,0,sX*0.6,0,0,progress,"Linear")
		end
	elseif loginData.loginState == "login" then
		loginData.registerX = interpolateBetween(loginData.registerX,0,0,sX,0,0,progress,"Linear")
		if progress >= 0.95 then
			local progress = math.min(math.abs(tick-450)/500,1)
			loginData.loginX = interpolateBetween(loginData.loginX,0,0,sX*0.6,0,0,progress,"Linear")
		end
	end
	local loginX = loginData.loginX
	local loginY = sY*0.25
	local registerX = loginData.registerX
	if loginData.loginX < sX*0.99 then
		dxDrawText("Login",loginX+shadowScale-470,loginY+shadowScale+100,loginX+sX*0.3-470,loginY+sY*0.15+100,tocolor(0,0,0,loginData.loginAlpha),loginData.fontScale*0.6,loginData.font,"right","center",true,false,false)
		dxDrawText("Login",loginX-470,loginY+100,loginX+sX*0.3-470,loginY+sY*0.15+100,tocolor(255,255,255,loginData.loginAlpha),loginData.fontScale*0.6,loginData.font,"right","center",true,false,false)
		dxLibCreateEdit(loginData.loginEdit,loginX-350,loginY+sY*0.15+100,sX*0.32,sY*0.04,"Your username","person",20,20,20,loginData.loginAlpha,false,false)
		dxLibCreateEdit(loginData.passwordEdit,loginX-350,loginY+sY*0.2+100,sX*0.32,sY*0.04,"Your password","password",20,20,20,loginData.loginAlpha,false,true)
		dxLibCreateButton(loginData.loginButton,loginX+sX*0.2-400,loginY+sY*0.275+100,sX*0.15,sY*0.06,"Login now!",loginData.fontScale*0.19,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)
		dxLibCreateButton(loginData.registerButton,loginX+sX*0.02-350,loginY+sY*0.32+130,sX*0.11,sY*0.055,"Register",loginData.fontScale*0.17,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)
		dxLibCreateButton(loginData.guestButton,loginX+sX*0.17-350,loginY+sY*0.32+130,sX*0.14,sY*0.055,"Join as guest...",loginData.fontScale*0.17,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)
		dxDrawText("OR",loginX+sX*0.12125-350,loginY+sY*0.32+160,loginX+sX*0.17,loginY+sY*0.355+sX*0.00125,tocolor(0,0,0,loginData.loginAlpha),loginData.fontScale*0.08,loginData.font,"center","center",true,false,false)
		dxDrawText("OR",loginX+sX*0.12-350,loginY+sY*0.32+160,loginX+sX*0.17,loginY+sY*0.355,tocolor(255,255,255,loginData.loginAlpha),loginData.fontScale*0.08,loginData.font,"center","center",true,false,false)
		local tick = getTickCount() - loginData.switchTick
		local progress = math.min(tick/500,1)
		if loginData.rememberState then
			loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3] = interpolateBetween(loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3],0,255,0,progress,"Linear")
			loginData.switchPosition = interpolateBetween(loginData.switchPosition,0,0,sX*0.041-sY*0.03,0,0,progress,"Linear")
		else
			loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3] = interpolateBetween(loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3],255,0,0,progress,"Linear")
			loginData.switchPosition = interpolateBetween(loginData.switchPosition,0,0,0,0,0,progress,"Linear")
		end
		local switchAlpha = loginData.loginAlpha
		if isCursorHover(loginX+sX*0.02-375,loginY+sY*0.275+100,sX*0.17,sY*0.04) then
			switchAlpha = switchAlpha * 0.75
			loginData.switchHover = true
		end
		dxDrawImage(loginX+sX*0.02-375,loginY+sY*0.275+100,sX*0.05,sY*0.04,"loginImage/switchBackground.png",0,0,0,tocolor(255,255,255,loginData.loginAlpha))
		dxDrawImage(loginX+sX*0.02-375,loginY+sY*0.275+100,sX*0.05,sY*0.04,"loginImage/switchCenter.png",0,0,0,tocolor(loginData.switchColor[1],loginData.switchColor[2],loginData.switchColor[3],switchAlpha))
		dxDrawImage(loginX+sX*0.023-375+loginData.switchPosition,loginY+sY*0.28+100,sY*0.03,sY*0.03,"loginImage/switchSlide.png",0,0,0,tocolor(255,255,255,switchAlpha))
		dxDrawText("Remember password?",loginX+sX*0.0706-370,loginY+sY*0.275+100+sX*0.0012,loginX+sX*0.19-370,loginY+sY*0.315+100,tocolor(0,0,0,switchAlpha),loginData.fontScale*0.1,loginData.font,"left","center",true,false,false)
		dxDrawText("Remember password?",loginX+sX*0.07-370,loginY+sY*0.275+100,loginX+sX*0.19-370,loginY+sY*0.315+100,tocolor(255,255,255,switchAlpha),loginData.fontScale*0.1,loginData.font,"left","center",true,false,false)
	end
	if registerX < sX*0.99 then
		local loginX = registerX
		dxDrawText("Register",loginX+shadowScale-415,loginY+shadowScale+100,loginX+sX*0.3-415,loginY+sY*0.15+100,tocolor(0,0,0,loginData.loginAlpha),loginData.fontScale*0.6,loginData.font,"right","center",true,false,false)
		dxDrawText("Register",loginX-415,loginY+100,loginX+sX*0.3-415,loginY+sY*0.15+100,tocolor(255,255,255,loginData.loginAlpha),loginData.fontScale*0.6,loginData.font,"right","center",true,false,false)
		dxLibCreateEdit(loginData.loginEdit,loginX-350,loginY+sY*0.15+100,sX*0.32,sY*0.04,"Type username","person",20,20,20,loginData.loginAlpha,false,false)
		dxLibCreateEdit(loginData.passwordEdit,loginX-350,loginY+sY*0.2+100,sX*0.32,sY*0.04,"Type password","password",20,20,20,loginData.loginAlpha,false,true)
		dxLibCreateEdit(loginData.confirmEdit,loginX-350,loginY+sY*0.25+100,sX*0.32,sY*0.04,"Confirm your password","password",20,20,20,loginData.loginAlpha,false,true)
		dxLibCreateButton(loginData.loginButton,loginX+sX*0.02-350,loginY+sY*0.31+100,sX*0.2,sY*0.07,"Register new account!",loginData.fontScale*0.2,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)
		dxLibCreateButton(loginData.registerButton,loginX+sX*0.23-350,loginY+sY*0.31+100,sX*0.07,sY*0.07,"Back",loginData.fontScale*0.2,loginData.colorData[1],loginData.colorData[2],loginData.colorData[3],220,220,220,loginData.loginAlpha,false,false)
	end
end

function onClientRegister()
	loginData.loginState = "login"
	dxLibEditSetText(loginData.confirmEdit,"")
	dxLibEditSetText(loginData.passwordEdit,"")
	dxLibEditSetText(loginData.loginEdit,"")
	loginData.loginTick = getTickCount()
end
addEvent("onClientSuccessfullyRegisterNewAccount",true)
addEventHandler("onClientSuccessfullyRegisterNewAccount",getRootElement(),onClientRegister)


function openLogin(colorCode)
	loginData.loginState = "login"
	local resource = getResourceFromName("race")
	if resource then
		loginData.font,loginData.fontScale,loginData.colorData = call(resource,"getRaceSettings")
		loginData.font = dxCreateFont(":race/common/race_font.ttf",sY/20,true) or "default-bold"
		if not loginData.fontScale then loginData.fontScale = sY/100 end
		if not loginData.colorData then loginData.colorData = {0,176,255} end
	end
	if colorCode then
		local r,g,b = getColorFromString(colorCode)
		if r and g  and b then
			loginData.colorData = {r,g,b}
		end
	end
	dxLib.font = loginData.font
	dxLibCreateEdit(loginData.loginEdit,0,0,sX*0.1,sY*0.04,"Your username","person",20,20,20,loginData.loginAlpha,false,false)
	dxLibCreateEdit(loginData.passwordEdit,0,0,sX*0.1,sY*0.04,"Your password","password",20,20,20,loginData.loginAlpha,false,true)
	loginData.animState = true
	loginData.animTick = getTickCount()
	loginData.loginAlpha = 0
	loginData.backgroundAlpha = 255
	showChat(false)
	showCursor(true)
	addEventHandler("onClientRender",getRootElement(),renderLoginInterface)
	addEventHandler("onClientRender",getRootElement(),renderLoginMessages)
	loadXMLData()
	setElementData(localPlayer,"loginState",true,false)
end
addEvent("onServerWantIniteteLoginPanel",true)
addEventHandler("onServerWantIniteteLoginPanel",getRootElement(),openLogin)


function closeLogin()
	loginData.animState = false
	loginData.animTick = getTickCount()
	showChat(true)
	showCursor(false)
	triggerEvent("onLoginPanelStopRenderInterface",getRootElement())
	setElementData(localPlayer,"loginState",false,false)
end
addEvent("onClientSuccessfullyLogIn",true)
addEventHandler("onClientSuccessfullyLogIn",getRootElement(),closeLogin)


function addLoginMessage(message,type)
	table.insert(loginData.messagesData,{message,type or "confirm",getTickCount(),dxGetTextWidth(message,loginData.fontScale*0.08,loginData.font)+sX*0.01,0,0,0})
	loginData.messageTick = getTickCount()
end
addEvent("onServerWantToShowMessage",true)
addEventHandler("onServerWantToShowMessage",getRootElement(),addLoginMessage)


function renderLoginMessages()
	local messagesData = loginData.messagesData
	if #messagesData ~= 0 then
		local startY = sY*0.5
		local i = 1
		repeat
			mData = messagesData[i]
			local drawThis = true
			if i~= 1 then
				startY = startY + sY*0.0425
			end
			if mData[5] == 0 and mData[6] == 0 then
				mData[5] = -mData[4]-sX*0.015
				mData[6] = startY
				mData[7] = startY
			end
			local tick = getTickCount() - mData[3]
			local posX,posY,alpha
			if tick < 1000 then
				local progress = math.min(tick/1000,1)
				mData[5] = interpolateBetween(mData[5],0,0,0,0,0,progress,"Linear")
			elseif tick >= 1000  and tick <= 7000 then
				mData[5] = 0
			elseif tick > 7000 then
				local progress = math.min((tick-7000)/1000,1)
				mData[5] = interpolateBetween(mData[5],0,0,-mData[4]-mData[4]-sX*0.015,0,0,progress,"Linear")
				if progress >= 1 then
					table.remove(messagesData,i)
					drawThis = false
					loginData.messageTick = getTickCount()
				end
			end
			local globalTick = getTickCount() - loginData.messageTick
			if drawThis then
				mData[7] = startY
				mData[6] = interpolateBetween(mData[6],0,0,mData[7],0,0,math.min(globalTick/1000,1),"Linear")
				posX = mData[5]
				posY = mData[6]
				alpha = 255
				dxDrawRectangle(posX,posY,mData[4],sY*0.04,tocolor(0,0,0,alpha*0.75))
				local r,g,b = 0,255,0
				if mData[2] == "warning" then
					r,g,b = 255,0,0
				end
				dxDrawRectangle(posX+mData[4],posY,sX*0.015,sY*0.04,tocolor(r,g,b,alpha*0.85))
				dxDrawRectangle(posX+mData[4]+sX*0.005,posY,sX*0.01,sY*0.04,tocolor(0,0,0,alpha))
				dxDrawText(mData[1],posX,posY,posX+mData[4],posY+sY*0.04,tocolor(255,255,255,alpha),loginData.fontScale*0.07,loginData.font,"center","center")
			end
			i = i + 1
		until i>#messagesData
		loginData.messagesData = messagesData
	end
end



function onClientMouseClick(button,state)
	if button == "left" and state == "down" then
		if loginData.switchHover then
			loginData.switchHover = false
			loginData.switchTick = getTickCount()
			loginData.rememberState = not loginData.rememberState
		end
	end
end
addEventHandler("onClientClick",getRootElement(),onClientMouseClick)


function onClientClickDxLoginButton(theElement)
	if theElement == loginData.registerButton then
		if loginData.loginState == "login" then
			loginData.loginState = "register"
			dxLibEditSetText(loginData.confirmEdit,"")
			dxLibEditSetText(loginData.passwordEdit,"")
			dxLibEditSetText(loginData.loginEdit,"")
		else
			loginData.loginState = "login"
			dxLibEditSetText(loginData.confirmEdit,"")
			dxLibEditSetText(loginData.passwordEdit,"")
			dxLibEditSetText(loginData.loginEdit,"")
		end
		loginData.loginTick = getTickCount()
	elseif loginData.loginButton == theElement then
		if loginData.loginState == "login" then
			local loginText = dxLibEditGetText(loginData.loginEdit)
			local passwordText = dxLibEditGetText(loginData.passwordEdit)
			if not loginText and not passwordText then return end
			if loginText == "" or passwordText == "" then
				addLoginMessage("Fill all inputs first","warning")
				return
			end
			if string.len(loginText) < 4 then
				addLoginMessage("Username need to have at least 4 chars.","warning")
				return
			end
			if string.len(passwordText) < 4 then
				addLoginMessage("Password need to have at least 4 chars.","warning")
				return
			end
			triggerServerEvent("onClientWantToLogIn",localPlayer,loginText,passwordText)
		else
			local loginText = dxLibEditGetText(loginData.loginEdit)
			local passwordText = dxLibEditGetText(loginData.passwordEdit)
			local confirmText = dxLibEditGetText(loginData.confirmEdit)
			if not loginText or not passwordText or not confirmText then return end
			if loginText == "" or passwordText == "" or confirmText == "" then
				addLoginMessage("Fill all inputs first","warning")
				return
			end
			if string.len(loginText) < 4 then
				addLoginMessage("Username need to have at least 4 chars.","warning")
				return
			end
			if string.len(passwordText) < 4 then
				addLoginMessage("Password need to have at least 4 chars.","warning")
				return
			end
			if passwordText ~= confirmText then
				addLoginMessage("Password does not match the confirm password.","warning")
				return
			end
			triggerServerEvent("onClientWantToRegister",localPlayer,loginText,passwordText)
		end
	elseif loginData.guestButton == theElement then
		addLoginMessage("You playing as guest now!","confirm")
		closeLogin()
	end
end
addEvent("onDxLibButtonClick",true)
addEventHandler("onDxLibButtonClick",getRootElement(),onClientClickDxLoginButton)

function createXMLFile()
	local xml = xmlCreateFile("loginData.xml","data")
	xmlNodeSetAttribute(xml,"login","")
	xmlNodeSetAttribute(xml,"password","")
	xmlNodeSetAttribute(xml,"remember","false")
	xmlSaveFile(xml)
	xmlUnloadFile()
end

function loadXMLData()
	local xmlFile = xmlLoadFile("loginData.xml","data")
	if not xmlFile then
		createXMLFile()
		xmlFile = xmlLoadFile("loginData.xml","data")
	end
	if xmlFile then
		if xmlNodeGetAttribute(xmlFile,"remember") == "true" then
			local login = xmlNodeGetAttribute(xmlFile,"login") or ""
			local password = xmlNodeGetAttribute(xmlFile,"password") or ""
			dxLibEditSetText(loginData.loginEdit,login)
			dxLibEditSetText(loginData.passwordEdit,password)
			loginData.rememberState = true
		end
		xmlUnloadFile(xmlFile)
	end
end


function saveXMlFile()
	local xmlFile = xmlLoadFile("loginData.xml","data")
	if not xmlFile then
		createXMLFile()
		xmlFile = xmlLoadFile("loginData.xml","data")
	end
	if xmlFile then
		if loginData.rememberState then
			local loginText = dxLibEditGetText(loginData.loginEdit) or ""
			local passwordText = dxLibEditGetText(loginData.passwordEdit) or ""
			xmlNodeSetAttribute(xmlFile,"login",loginText)
			xmlNodeSetAttribute(xmlFile,"password",passwordText)
			xmlNodeSetAttribute(xmlFile,"remember","true")
		else
			xmlNodeSetAttribute(xmlFile,"login","")
			xmlNodeSetAttribute(xmlFile,"password","")
			xmlNodeSetAttribute(xmlFile,"remember","false")
		end
		xmlSaveFile(xmlFile)
		xmlUnloadFile(xmlFile)
	end
end
addEventHandler("onClientSuccessfullyLogIn",getRootElement(),saveXMlFile)

There you go

koragg · September 15, 2017

For duck's sake, this will take me days to edit ._. But I can explain what you have to do So, here goes:

You have this at top:

local sX,sY = guiGetScreenSize()

Then you have something like this a looot of times:

dxDrawImage(loginX+sX*0.02-375,loginY+sY*0.275+100,sX*0.05,sY*0.04,"loginImage/switchBackground.png",0,0,0,tocolor(255,255,255,loginData.loginAlpha))

Every variable has a number value. So for example, the value of 'loginX' is 'sX*0.6'. But the value of 'sX' is 1366 since that's your X resolution. So it will look like this:

loginX = 1366*0.6

which is same as

loginX = 819.6

You just need to replace all words with their values so it will become so much easier to understand everything (it's so for me atleast). So now you need to make the 'loginX' be same on all resolutions. Make like this:

local sX, sY = guiGetScreenSize()
local x, y = sX/1366, sY/768

and now 'loginX' will look like this:

loginX = 819.6*x

You need to convert everything like this to fit it on any resolution. I never liked working with words/variables instead of the actual values so for me replacing each variable with it's (calculated) number value is much easier. Good luck and be prepared to waste a lot of time on this since your script has so many variables in the dxText lmao.

Pro Tip: If you're tired - stop, play MTA, watch a movie, do something else. When we're tired we make silly mistakes which are (in your case) really hard to spot afterwards as there is a lot of code. Better fix it for a few weeks but not have problems than to fix it for 3 days and be full of errors that are super hard to trace.

That line I used as example will look like this:

local sX, sY = guiGetScreenSize()
local x, y = sX/1366, sY/768

dxDrawImage(471.92*x, 503.2*y, 68.3*x, 30.72*y, "loginImage/switchBackground.png", 0, 0, 0, tocolor(255, 255, 255, loginData.loginAlpha))

Edited September 15, 2017 by koragg

ExteeL · September 15, 2017

11 minutes ago, koragg said:
For duck's sake, this will take me days to edit ._. But I can explain what you have to do So, here goes:

You have this at top:
local sX,sY = guiGetScreenSize()
Then you have something like this a looot of times:
dxDrawImage(loginX+sX*0.02-375,loginY+sY*0.275+100,sX*0.05,sY*0.04,"loginImage/switchBackground.png",0,0,0,tocolor(255,255,255,loginData.loginAlpha))
Every variable has a number value. So for example, the value of 'loginX' is 'sX*0.6'. But the value of 'sX' is 1366 since that's your X resolution. So it will look like this:
loginX = 1366*0.6
which is same as
loginX = 819.6
You just need to replace all words with their values so it will become so much easier to understand everything (it's so for me atleast). So now you need to make the 'loginX' be same on all resolutions. Make like this:
local sX, sY = guiGetScreenSize()local x, y = sX/1366, sY/768
and now 'loginX' will look like this:
loginX = 819.6*x
You need to convert everything like this to fit it on any resolution. I never liked working with words/variables instead of the actual values so for me replacing each variable with it's (calculated) number value is much easier. Good luck and be prepared to waste a lot of time on this since your script has so many variables in the dxText lmao.

Pro Tip: If you're tired - stop, play MTA, watch a movie, do something else. When we're tired we make silly mistakes which are (in your case) really hard to spot afterwards as there is a lot of code. Better fix it for a few weeks but not have problems than to fix it for 3 days and be full of errors that are super hard to trace.

That line I used as example will look like this:
local sX, sY = guiGetScreenSize()local x, y = sX/1366, sY/768dxDrawImage(471.92*x, 503.2*y, 68.3*x, 30.72*y, "loginImage/switchBackground.png", 0, 0, 0, tocolor(255, 255, 255, loginData.loginAlpha))

Ok, gonna tell u what i have understood.

1st of all, I have to add this line so that it detects the main resolution of the stuff and change it to other resolutions when there is.

local x, y = sX/1366, sY/768

After that. I need to calculate each number and detect it's value in my resolution and add/subtract the number i added/subtracted from it.

As an example this line:

dxDrawText("Login",loginX+shadowScale-470,loginY+shadowScale+100,loginX+sX*0.3-470,loginY+sY*0.15+100,tocolor(0,0,0,loginData.loginAlpha),loginData.fontScale*0.6,loginData.font,"right","center",true,false,false)

The first 2 digits remain the same, the -470 and +100. but the other ones like sX*0.3-470 for example, need to be recalculated, right?

So what I have to do is this:

1366x0.3-470, which has the result of -60.2 (false value will be I assume.)

and for the sY*0.15+100 will be like this:

768x0.15+100, which has the result of 215.2.

So, this updated line should look like:

dxDrawText("Login",loginX+shadowScale-470,loginY+shadowScale+100,loginX+sX*-60.2,loginY+sY*215.2,tocolor(0,0,0,loginData.loginAlpha),loginData.fontScale*0.6,loginData.font,"right","center",true,false,false)

I kinda feel there is something missing cause of the negative result, (excuse me for asking too much but i am that guy who would like to understand something 100% so when he have to do it again, he knows how without any help).

koragg · September 15, 2017

Negative results are fine because you still have calculations left. What you did is correct, you just need to continue until the only thing left between the commas are numbers and nothing else.

koragg · September 16, 2017

Also the final value can be negative as well sometimes so don't worry about it

[HELP] Moving Buttons in login Panel

Recommended Posts

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members