Jump to content

[HELP] Animate DX

FlyingSpoon

By FlyingSpoon
in Scripting

Recommended Posts

FlyingSpoon Homie

FlyingSpoon

Posted
Posted 
-- ======================================================================================================= --
-- ======================================================================================================= -- 
showCursor(true)

local screenW, screenH = guiGetScreenSize()

local positions = {
{0, (screenH - 268) / 2}, -- Main Menu
{-200, 240}, -- Dev Label
{50, 284}, -- Username Label
{135, 356}, -- Password Label
{78, 306}, -- Username Editbox
{160, 378}, -- Password Editbox
{86, 312}, -- Username Text
{170, 384}, -- Password Text
{8, 423}, -- Remember Details Label
{215, 423}, -- Remember Details Checkbox
{240, 448}, -- Automated Login Label
{35, 448}, -- Automated Login Checkbox
{220, 436}, -- Login Text
{10, 435}, -- Login Button
{225, 478} -- Register an account label
}

local y = 0

function start()
  for i = 1, #positions do
    local pos = positions[i]
    animate(pos[1], pos[2], "Linear", 800, function(positions)
	  y = positions[i]
  end)
  end
end
addEventHandler("onClientResourceStart", getRootElement(), start)

addEventHandler("onClientRender", root,
    function()
        dxDrawRectangle((screenW - 386) / 2, y[1], 386, 268, tocolor(13, 23, 26, 178), false)
       
	    dxDrawText("Welcome to the server!", 447, y[2], 833, 253, tocolor(255, 255, 255, 255), 0.90, "default-bold", "center", "center", false, false, false, false, false)
        dxDrawText("Username :", 468, y[3], 531, 302, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, false, false, false)
        dxDrawText("Password :", 468, y[4], 527, 372, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, false, false, false)
		
		dxDrawRectangle(468, y[5], 345, 28, tocolor(93, 93, 93, 174), false) -- Username Editbox
        dxDrawRectangle(467, y[6], 345, 28, tocolor(93, 93, 93, 174), false) -- Password Editbox
         
        if isMouseInPosition(440, 295, 390, 37) then
	    animate(0, 345, "Linear", 300, function(moveX) 
        local moveX = moveX
		dxDrawRectangle(468, 334, moveX, 1, tocolor(208, 166, 38, 174), false) -- Username Editbox Active
        end)
	    end       
		
        if isMouseInPosition(467, 378, 345, 28) then
	    animate(0, 345, "Linear", 300, function(moveX) 
        local moveX = moveX
        dxDrawRectangle(467, 406, moveX, 1, tocolor(208, 166, 38, 174), false) -- Password Editbox Active
        end)
	    end         
		
        dxDrawText("Username", 474, y[7], 807, 325, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "top", false, false, false, false, false)
        dxDrawText("*************", 474, y[8], 807, 397, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "top", false, false, false, false, false)
        
		if isMouseInPosition(467, 448, 15, 15) then
	    animate(0, 15, "OutQuad", 300, function(moveX) 
        local moveX = moveX
        dxDrawRectangle(467, 448, moveX, moveX, tocolor(208, 166, 38, 174), false) -- Checkbox 2 is active?
        end)
	    end         
        dxDrawRectangle(467, y[9], 15, 15, tocolor(94, 94, 94, 225), false)
        dxDrawText("Automated Login", 492, y[10], 600, 463, tocolor(255, 255, 255, 255), 1.00, "arial", "left", "center", false, false, false, false, false)
	           
		if isMouseInPosition(467, 423, 15, 15) then
	    animate(0, 15, "OutQuad", 300, function(moveX) 
        local moveX = moveX
       	dxDrawRectangle(467, 423, moveX, moveX, tocolor(208, 166, 38, 174), false) -- Checkbox 2 is active?
        end)
	    end  
		dxDrawRectangle(467, y[11], 15, 15, tocolor(94, 94, 94, 225), false)
		dxDrawText("Remember Details", 492, y[12], 600, 438, tocolor(255, 255, 255, 255), 1.00, "arial", "left", "center", false, false, false, false, false)

	    dxDrawRectangle(715, y[13], 97, 28, tocolor(94, 94, 94, 225), false)
        dxDrawText("LOGIN", 714, y[14], 812, 464, tocolor(255, 255, 255, 255), 1.20, "arial", "center", "center", false, false, false, false, false)
       
  	    dxDrawText("Don't have an account? Register at - www.vigour-gaming.com", 446, y[15], 833, 494, tocolor(255, 255, 255, 255), 0.80, "arial", "center", "top", false, false, false, false, false)
    end
)


function isMouseInPosition ( x, y, width, height )
	if ( not isCursorShowing( ) ) then
		return false
	end
    local sx, sy = guiGetScreenSize ( )
    local cx, cy = getCursorPosition ( )
    local cx, cy = ( cx * sx ), ( cy * sy )
    if ( cx >= x and cx <= x + width ) and ( cy >= y and cy <= y + height ) then
        return true
    else
        return false
    end
end

I'm trying to make the animate function work through a table or something, so instead of using it separately every single time, maybe I can run it through a table, and it will make my code cleaner too. How can I do that? Can someone help, I'd really appreciate it thank you.

Link to comment
kikos500 Sucka

kikos500

Posted
Posted 

showCursor(true)

local screenW, screenH = guiGetScreenSize()

local positions = {
{0, (screenH - 268) / 2, animation = "Linear", duration = 800}, -- Main Menu 1
{-200, 240, animation = "Linear", duration = 800}, -- Dev Label 2
{50, 284, animation = "Linear", duration = 800}, -- Username Label 3
{135, 356, animation = "Linear", duration = 800}, -- Password Label 4
{78, 306, animation = "Linear", duration = 800}, -- Username Editbox 5
{160, 378, animation = "Linear", duration = 800}, -- Password Editbox 6
{86, 312, animation = "Linear", duration = 800}, -- Username Text 7
{170, 384, animation = "Linear", duration = 800}, -- Password Text 8
{8, 423, animation = "Linear", duration = 800}, -- Remember Details Label 9
{215, 423, animation = "Linear", duration = 800}, -- Remember Details Checkbox 10
{240, 448, animation = "Linear", duration = 800}, -- Automated Login Label 11
{35, 448, animation = "Linear", duration = 800}, -- Automated Login Checkbox 12
{220, 436, animation = "Linear", duration = 800}, -- Login Text 13
{10, 435, animation = "Linear", duration = 800}, -- Login Button 14
{225, 478, animation = "Linear", duration = 800} -- Register an account label 15
}

local start = getTickCount()
function draw()
	for i,pos in pairs(positions) do
		positions[i].moving = animate(pos[1], pos[2], pos.animation, pos.duration, function () end)
	end
	dxDrawRectangle((screenW - 386) / 2, positions[1].moving, 386, 268, tocolor(13, 23, 26, 178), false)
	dxDrawText("Welcome to the server!", 447, positions[2].moving, 833, 253, tocolor(255, 255, 255, 255), 0.90, "default-bold", "center", "center", false, false, false, false, false)
	dxDrawText("Username :", 468, positions[3].moving, 531, 302, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, false, false, false)
	dxDrawText("Password :", 468, positions[4].moving, 527, 372, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, false, false, false)
	dxDrawRectangle(468, positions[5].moving, 345, 28, tocolor(93, 93, 93, 174), false) -- Username Editbox
	dxDrawRectangle(467, positions[6].moving, 345, 28, tocolor(93, 93, 93, 174), false) -- Password Editbox
	dxDrawText("Username", 474, positions[7].moving, 807, 325, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "top", false, false, false, false, false)
	dxDrawText("*************", 474, positions[8].moving, 807, 397, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "top", false, false, false, false, false)
	dxDrawText("Automated Login", 492, positions[9].moving, 600, 438, tocolor(255, 255, 255, 255), 1.00, "arial", "left", "center", false, false, false, false, false)
	dxDrawRectangle(467, positions[10].moving, 15, 15, tocolor(94, 94, 94, 225), false)
	dxDrawText("Remember Details", 492, positions[11].moving, 600, 438, tocolor(255, 255, 255, 255), 1.00, "arial", "left", "center", false, false, false, false, false)
	dxDrawRectangle(467, positions[12].moving, 15, 15, tocolor(94, 94, 94, 225), false)	
	dxDrawRectangle(715, positions[13].moving, 97, 28, tocolor(94, 94, 94, 225), false)
	dxDrawText("LOGIN", 714, positions[14].moving, 812, 464, tocolor(255, 255, 255, 255), 1.20, "arial", "center", "center", false, false, false, false, false)   
	dxDrawText("Don't have an account? Register at - www.vigour-gaming.com", 446, positions[15].moving, 833, 494, tocolor(255, 255, 255, 255), 0.80, "arial", "center", "top", false, false, false, false, false)
	if isMouseInPosition(440, 295, 390, 37) then
	    local movingX = animate(0, 345, "Linear", 300, function() end)
		dxDrawRectangle(468, 334, movingX, 1, tocolor(208, 166, 38, 174), false) -- Username Editbox Active
	end
	if isMouseInPosition(467, 378, 345, 28) then
	    local movingX = animate(0, 345, "Linear", 300, function() end)
        dxDrawRectangle(467, 406, movingX, 1, tocolor(208, 166, 38, 174), false) -- Password Editbox Active
	end
	if isMouseInPosition(467, 423, 15, 15) then
	    local movingX = animate(0, 15, "OutQuad", 300, function() end)
        dxDrawRectangle(467, 423, movingX, movingX, tocolor(208, 166, 38, 174), false) -- Checkbox 1 is active?
	end
	if isMouseInPosition(467, 448, 15, 15) then
	    local movingX = animate(0, 15, "OutQuad", 300, function() end)
       	dxDrawRectangle(467, 448, movingX, movingX, tocolor(208, 166, 38, 174), false) -- Checkbox 2 is active?
	end 
	if isMouseInPosition(714, 436, 97, 28) then
	    local movingX = animate(0, 97, "OutQuad", 300, function() end)
	    local movingY = animate(0, 28, "OutQuad", 300, function() end)
       	dxDrawRectangle(714, 436, movingX, movingY, tocolor(208, 166, 38, 174), false) -- login button is active?
	end 
end
addEventHandler( "onClientRender", getRootElement(), draw)

function animate(from, to, easing, duration, endfunction)
	local now = getTickCount()
	local change = interpolateBetween(from, 0, 0, to, 0, 0, (now - start) / duration, easing)
	if endfunction and now >= start+duration then
		endfunction()
	end
	return change
end


function isMouseInPosition ( x, y, width, height )
	if ( not isCursorShowing( ) ) then
		return false
	end
    local sx, sy = guiGetScreenSize ( )
    local cx, cy = getCursorPosition ( )
    local cx, cy = ( cx * sx ), ( cy * sy )
    if ( cx >= x and cx <= x + width ) and ( cy >= y and cy <= y + height ) then
        return true
    else
        return false
    end
end

full tested and working

Link to comment
FlyingSpoon Homie

FlyingSpoon

Posted
  • Author
Posted

Is that a new animate function you added in?

The one I used was this - https://wiki.multitheftauto.com/wiki/Animate 

local anims, builtins = {}, {"Linear", "InQuad", "OutQuad", "InOutQuad", "OutInQuad", "InElastic", "OutElastic", "InOutElastic", "OutInElastic", "InBack", "OutBack", "InOutBack", "OutInBack", "InBounce", "OutBounce", "InOutBounce", "OutInBounce", "SineCurve", "CosineCurve"}

function table.find(t, v)
	for k, a in ipairs(t) do
		if a == v then
			return k
		end
	end
	return false
end

function animate(f, t, easing, duration, onChange, onEnd)
	assert(type(f) == "number", "Bad argument @ 'animate' [expected number at argument 1, got "..type(f).."]")
	assert(type(t) == "number", "Bad argument @ 'animate' [expected number at argument 2, got "..type(t).."]")
	assert(type(easing) == "string" or (type(easing) == "number" and (easing >= 1 or easing <= #builtins)), "Bad argument @ 'animate' [Invalid easing at argument 3]")
	assert(type(duration) == "number", "Bad argument @ 'animate' [expected function at argument 4, got "..type(duration).."]")
	assert(type(onChange) == "function", "Bad argument @ 'animate' [expected function at argument 5, got "..type(onChange).."]")
	table.insert(anims, {from = f, to = t, easing = table.find(builtins, easing) and easing or builtins[easing], duration = duration, start = getTickCount( ), onChange = onChange, onEnd = onEnd})
	return #anims
end

function destroyAnimation(a)
	if anims[a] then
		table.remove(anims, a)
	end
end

addEventHandler("onClientRender", root, function( )
	local now = getTickCount( )
	for k,v in ipairs(anims) do
		v.onChange(interpolateBetween(v.from, 0, 0, v.to, 0, 0, (now - v.start) / v.duration, v.easing))
		if now >= v.start+v.duration then
			if type(v.onEnd) == "function" then
				v.onEnd( )
			end
			table.remove(anims, k)
		end
	end
end)

-- ======================================================================================================= --
-- ======================================================================================================= -- 

showCursor(true)

local screenW, screenH = guiGetScreenSize()

local positions = {
{0, (screenH - 268) / 2, animation = "Linear", duration = 800}, -- Main Menu 1
{-200, 240, animation = "Linear", duration = 800}, -- Dev Label 2
{50, 284, animation = "Linear", duration = 800}, -- Username Label 3
{135, 356, animation = "Linear", duration = 800}, -- Password Label 4
{78, 306, animation = "Linear", duration = 800}, -- Username Editbox 5
{160, 378, animation = "Linear", duration = 800}, -- Password Editbox 6
{86, 312, animation = "Linear", duration = 800}, -- Username Text 7
{170, 384, animation = "Linear", duration = 800}, -- Password Text 8
{8, 423, animation = "Linear", duration = 800}, -- Remember Details Label 9
{215, 423, animation = "Linear", duration = 800}, -- Remember Details Checkbox 10
{240, 448, animation = "Linear", duration = 800}, -- Automated Login Label 11
{35, 448, animation = "Linear", duration = 800}, -- Automated Login Checkbox 12
{220, 436, animation = "Linear", duration = 800}, -- Login Text 13
{10, 435, animation = "Linear", duration = 800}, -- Login Button 14
{225, 478, animation = "Linear", duration = 800} -- Register an account label 15
}

function draw()
	for i,pos in pairs(positions) do
		positions[i].moving = animate(pos[1], pos[2], pos.animation, pos.duration, function () end)
		outputChatBox(positions[2].moving)
	end
	dxDrawRectangle((screenW - 386) / 2, positions[1].moving, 386, 268, tocolor(13, 23, 26, 178), false)
	dxDrawText("Welcome to the server!", 447, positions[2].moving, 833, 253, tocolor(255, 255, 255, 255), 0.90, "default-bold", "center", "center", false, false, false, false, false)
	dxDrawText("Username :", 468, positions[3].moving, 531, 302, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, false, false, false)
	dxDrawText("Password :", 468, positions[4].moving, 527, 372, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, false, false, false)
	dxDrawRectangle(468, positions[5].moving, 345, 28, tocolor(93, 93, 93, 174), false) -- Username Editbox
	dxDrawRectangle(467, positions[6].moving, 345, 28, tocolor(93, 93, 93, 174), false) -- Password Editbox
	dxDrawText("Username", 474, positions[7].moving, 807, 325, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "top", false, false, false, false, false)
	dxDrawText("*************", 474, positions[8].moving, 807, 397, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "top", false, false, false, false, false)
	dxDrawText("Automated Login", 492, positions[9].moving, 600, 438, tocolor(255, 255, 255, 255), 1.00, "arial", "left", "center", false, false, false, false, false)
	dxDrawRectangle(467, positions[10].moving, 15, 15, tocolor(94, 94, 94, 225), false)
	dxDrawText("Remember Details", 492, positions[11].moving, 600, 438, tocolor(255, 255, 255, 255), 1.00, "arial", "left", "center", false, false, false, false, false)
	dxDrawRectangle(467, positions[12].moving, 15, 15, tocolor(94, 94, 94, 225), false)	
	dxDrawRectangle(715, positions[13].moving, 97, 28, tocolor(94, 94, 94, 225), false)
	dxDrawText("LOGIN", 714, positions[14].moving, 812, 464, tocolor(255, 255, 255, 255), 1.20, "arial", "center", "center", false, false, false, false, false)   
	dxDrawText("Don't have an account? Register at - www.vigour-gaming.com", 446, positions[15].moving, 833, 494, tocolor(255, 255, 255, 255), 0.80, "arial", "center", "top", false, false, false, false, false)
	if isMouseInPosition(440, 295, 390, 37) then
	    local movingX = animate(0, 345, "Linear", 300, function() end)
		dxDrawRectangle(468, 334, movingX, 1, tocolor(208, 166, 38, 174), false) -- Username Editbox Active
	end
	if isMouseInPosition(467, 378, 345, 28) then
	    local movingX = animate(0, 345, "Linear", 300, function() end)
        dxDrawRectangle(467, 406, movingX, 1, tocolor(208, 166, 38, 174), false) -- Password Editbox Active
	end
	if isMouseInPosition(467, 423, 15, 15) then
	    local movingX = animate(0, 15, "OutQuad", 300, function() end)
        dxDrawRectangle(467, 423, movingX, movingX, tocolor(208, 166, 38, 174), false) -- Checkbox 1 is active?
	end
	if isMouseInPosition(467, 448, 15, 15) then
	    local movingX = animate(0, 15, "OutQuad", 300, function() end)
       	dxDrawRectangle(467, 448, movingX, movingX, tocolor(208, 166, 38, 174), false) -- Checkbox 2 is active?
	end 
	if isMouseInPosition(714, 436, 97, 28) then
	    local movingX = animate(0, 97, "OutQuad", 300, function() end)
	    local movingY = animate(0, 28, "OutQuad", 300, function() end)
       	dxDrawRectangle(714, 436, movingX, movingY, tocolor(208, 166, 38, 174), false) -- login button is active?
	end 
end
addEventHandler( "onClientRender", getRootElement(), draw)


function isMouseInPosition ( x, y, width, height )
	if ( not isCursorShowing( ) ) then
		return false
	end
    local sx, sy = guiGetScreenSize ( )
    local cx, cy = getCursorPosition ( )
    local cx, cy = ( cx * sx ), ( cy * sy )
    if ( cx >= x and cx <= x + width ) and ( cy >= y and cy <= y + height ) then
        return true
    else
        return false
    end
end

I mean it does animate it, but it's not appearing as it should, it's jumbled up and appearing incorrectly, not like it should. Is there something wrong with the code?

Link to comment
kikos500 Sucka

kikos500

Posted
Posted (edited) 
showCursor(true)
local screenW, screenH = guiGetScreenSize()
outputChatBox(((screenH - 268) / 2))
local positions = {
{50, (screenH - 268) / 2, animation = "Linear", duration = 800}, -- Main Menu 1
{-200, 240, animation = "Linear", duration = 800}, -- Dev Label 2
}
local start = getTickCount()
function draw()
	for i,pos in pairs(positions) do
		positions[i].moving = animate(pos[1], pos[2], pos.animation, pos.duration, function () end)
	end
	dxDrawRectangle((screenW - 386) / 2, positions[1].moving, 386, 268, tocolor(13, 23, 26, 178), false)
	dxDrawText("Welcome to the server!", 447, (positions[2].moving), 833, 253, tocolor(0,0,0, 255), 0.90, "default-bold", "center", "center", false, false, false, false, false)
	dxDrawText("Username :", 468, (positions[1].moving+18), 531, 302, tocolor(0,0,0, 255), 1.00, "default", "left", "top", false, false, false, false, false)
end
addEventHandler( "onClientRender", getRootElement(), draw)
function animate(from, to, easing, duration, endfunction)
	local now = getTickCount()
	local change = interpolateBetween(from, 0, 0, to, 0, 0, (now - start) / duration, easing)
	if endfunction and now >= start+duration then
		endfunction()
	end
	return change
end
function isMouseInPosition ( x, y, width, height )
	if ( not isCursorShowing( ) ) then
		return false
	end
    local sx, sy = guiGetScreenSize ( )
    local cx, cy = getCursorPosition ( )
    local cx, cy = ( cx * sx ), ( cy * sy )
    if ( cx >= x and cx <= x + width ) and ( cy >= y and cy <= y + height ) then
        return true
    else
        return false
    end
end

this is just an example but u could do this to prevent things from out-of sync

the point in this code is instead of animating every item (button, label, edit) you animate the window then adding to the Y of the animated Window the position of y i gave an example in code

Edited by kikos500
Link to comment
FlyingSpoon Homie

FlyingSpoon

Posted
  • Author
Posted

Why can't I make it work my way? 

showCursor(true)
local screenW, screenH = guiGetScreenSize()
local start = getTickCount()

local positions = {
{0, (screenH - 268) / 2, animation = "Linear", duration = 800}, -- Main Menu 1
{-200, 240, animation = "Linear", duration = 800}, -- Dev Label 2
{50, 284, animation = "Linear", duration = 800}, -- Username Label 3
{135, 356, animation = "Linear", duration = 800}, -- Password Label 4
{78, 306, animation = "Linear", duration = 800}, -- Username Editbox 5
{160, 378, animation = "Linear", duration = 800}, -- Password Editbox 6
{86, 312, animation = "Linear", duration = 800}, -- Username Text 7
{170, 384, animation = "Linear", duration = 800}, -- Password Text 8
{8, 423, animation = "Linear", duration = 800}, -- Remember Details Label 9
{215, 423, animation = "Linear", duration = 800}, -- Remember Details Checkbox 10
{240, 470, animation = "Linear", duration = 800}, -- Automated Login Label 11
{35, 448, animation = "Linear", duration = 800}, -- Automated Login Checkbox 12
{220, 436, animation = "Linear", duration = 800}, -- Login Text 13
{10, 435, animation = "Linear", duration = 800}, -- Login Button 14
{225, 478, animation = "Linear", duration = 800} -- Register an account label 15
}

function draw()
	for i,pos in pairs(positions) do
		positions[i].moving = animate(pos[1], pos[2], pos.animation, pos.duration, function () end)
	end
	
	dxDrawRectangle((screenW - 386) / 2, positions[1].moving, 386, 268, tocolor(13, 23, 26, 178), false)
	dxDrawText("Welcome to the server!", 447, positions[2].moving, 833, 253, tocolor(255, 255, 255, 255), 0.90, "default-bold", "center", "center", false, false, false, false, false)
	dxDrawText("Username :", 468, positions[3].moving, 531, 302, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, false, false, false)
	dxDrawText("Password :", 468, positions[4].moving, 527, 372, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, false, false, false)
	dxDrawRectangle(468, positions[5].moving, 345, 28, tocolor(93, 93, 93, 174), false) -- Username Editbox
	dxDrawRectangle(467, positions[6].moving, 345, 28, tocolor(93, 93, 93, 174), false) -- Password Editbox
	dxDrawText("Username", 474, positions[7].moving, 807, 325, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "top", false, false, false, false, false)
	dxDrawText("*************", 474, positions[8].moving, 807, 397, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "top", false, false, false, false, false)
	dxDrawText("Automated Login", 492, positions[11].moving, 600, 438, tocolor(255, 255, 255, 255), 1.00, "arial", "left", "center", false, false, false, false, false)
	dxDrawRectangle(467, positions[12].moving, 15, 15, tocolor(94, 94, 94, 225), false)
	dxDrawText("Remember Details", 492, positions[9].moving, 600, 438, tocolor(255, 255, 255, 255), 1.00, "arial", "left", "center", false, false, false, false, false)
	dxDrawRectangle(467, positions[10].moving, 15, 15, tocolor(94, 94, 94, 225), false)	
	dxDrawRectangle(715, positions[13].moving, 97, 28, tocolor(94, 94, 94, 225), false)
	dxDrawText("LOGIN", 714, positions[14].moving, 812, 464, tocolor(255, 255, 255, 255), 1.20, "arial", "center", "center", false, false, false, false, false)   
	dxDrawText("Don't have an account? Register at - www.vigour-gaming.com", 446, positions[15].moving, 833, 494, tocolor(255, 255, 255, 255), 0.80, "arial", "center", "top", false, false, false, false, false)
	if isMouseInPosition(440, 295, 390, 37) then
	    local movingX = animate(0, 345, "Linear", 300, function() end)
		dxDrawRectangle(468, 334, movingX, 1, tocolor(208, 166, 38, 174), false) -- Username Editbox Active
	end
	if isMouseInPosition(467, 378, 345, 28) then
	    local movingX = animate(0, 345, "Linear", 300, function() end)
        dxDrawRectangle(467, 406, movingX, 1, tocolor(208, 166, 38, 174), false) -- Password Editbox Active
	end
	if isMouseInPosition(467, 423, 15, 15) then
	    local movingX = animate(0, 15, "OutQuad", 300, function() end)
        dxDrawRectangle(467, 423, movingX, movingX, tocolor(208, 166, 38, 174), false) -- Checkbox 1 is active?
	end
	if isMouseInPosition(467, 448, 15, 15) then
	    local movingX = animate(0, 15, "OutQuad", 300, function() end)
       	dxDrawRectangle(467, 448, movingX, movingX, tocolor(208, 166, 38, 174), false) -- Checkbox 2 is active?
	end 
	if isMouseInPosition(714, 436, 97, 28) then
	    local movingX = animate(0, 97, "OutQuad", 300, function() end)
	    local movingY = animate(0, 28, "OutQuad", 300, function() end)
       	dxDrawRectangle(714, 436, movingX, movingY, tocolor(208, 166, 38, 174), false) -- login button is active?
	end 
end
addEventHandler( "onClientRender", getRootElement(), draw)

function animate(from, to, easing, duration, endfunction)
	local now = getTickCount()
	local change = interpolateBetween(from, 0, 0, to, 0, 0, (now - start) / duration, easing)
	if endfunction and now >= start+duration then
		endfunction()
	end
	return change
end

function isMouseInPosition ( x, y, width, height )
	if ( not isCursorShowing( ) ) then
		return false
	end
    local sx, sy = guiGetScreenSize ( )
    local cx, cy = getCursorPosition ( )
    local cx, cy = ( cx * sx ), ( cy * sy )
    if ( cx >= x and cx <= x + width ) and ( cy >= y and cy <= y + height ) then
        return true
    else
        return false
    end
end

Okay I've got it to work kind of, but now the problem is isMouseInPosition, when I move my mouse into the coordinates, it doesn't animate the rectangle, just regularly shows it, what could be the problem here?

Link to comment
kikos500 Sucka

kikos500

Posted
Posted (edited) 
showCursor(true)
local screenW, screenH = guiGetScreenSize()
local start = getTickCount()
local positions = {
{0, (screenH - 268) / 2, animation = "Linear", duration = 800, tick = getTickCount()}, -- Main Menu 1
{-200, 240, animation = "Linear", duration = 800, tick = getTickCount()}, -- Dev Label 2
{50, 284, animation = "Linear", duration = 800, tick = getTickCount()}, -- Username Label 3
{135, 356, animation = "Linear", duration = 800, tick = getTickCount()}, -- Password Label 4
{78, 306, animation = "Linear", duration = 800, tick = getTickCount()}, -- Username Editbox 5
{160, 378, animation = "Linear", duration = 800, tick = getTickCount()}, -- Password Editbox 6
{86, 312, animation = "Linear", duration = 800, tick = getTickCount()}, -- Username Text 7
{170, 384, animation = "Linear", duration = 800, tick = getTickCount()}, -- Password Text 8
{8, 423, animation = "Linear", duration = 800, tick = getTickCount()}, -- Remember Details Label 9
{215, 423, animation = "Linear", duration = 800, tick = getTickCount()}, -- Remember Details Checkbox 10
{240, 470, animation = "Linear", duration = 800, tick = getTickCount()}, -- Automated Login Label 11
{35, 448, animation = "Linear", duration = 800, tick = getTickCount()}, -- Automated Login Checkbox 12
{220, 436, animation = "Linear", duration = 800, tick = getTickCount()}, -- Login Text 13
{10, 435, animation = "Linear", duration = 800, tick = getTickCount()}, -- Login Button 14
{225, 478, animation = "Linear", duration = 800, tick = getTickCount()}, -- Register an account label 15
}

local dummyTicks = {}

function draw()
	for i,pos in pairs(positions) do
		positions[i].moving = animate(pos[1], pos[2], pos.animation, pos.duration, function () end, pos.tick)
	end
	
	dxDrawRectangle((screenW - 386) / 2, positions[1].moving, 386, 268, tocolor(13, 23, 26, 178), false)
	dxDrawText("Welcome to the server!", 447, positions[2].moving, 833, 253, tocolor(255, 255, 255, 255), 0.90, "default-bold", "center", "center", false, false, false, false, false)
	dxDrawText("Username :", 468, positions[3].moving, 531, 302, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, false, false, false)
	dxDrawText("Password :", 468, positions[4].moving, 527, 372, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, false, false, false)
	dxDrawRectangle(468, positions[5].moving, 345, 28, tocolor(93, 93, 93, 174), false) -- Username Editbox
	dxDrawRectangle(467, positions[6].moving, 345, 28, tocolor(93, 93, 93, 174), false) -- Password Editbox
	dxDrawText("Username", 474, positions[7].moving, 807, 325, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "top", false, false, false, false, false)
	dxDrawText("*************", 474, positions[8].moving, 807, 397, tocolor(255, 255, 255, 255), 1.00, "default-bold", "left", "top", false, false, false, false, false)
	dxDrawText("Automated Login", 492, positions[11].moving, 600, 438, tocolor(255, 255, 255, 255), 1.00, "arial", "left", "center", false, false, false, false, false)
	dxDrawRectangle(467, positions[12].moving, 15, 15, tocolor(94, 94, 94, 225), false)
	dxDrawText("Remember Details", 492, positions[9].moving, 600, 438, tocolor(255, 255, 255, 255), 1.00, "arial", "left", "center", false, false, false, false, false)
	dxDrawRectangle(467, positions[10].moving, 15, 15, tocolor(94, 94, 94, 225), false)	
	dxDrawRectangle(715, positions[13].moving, 97, 28, tocolor(94, 94, 94, 225), false)
	dxDrawText("LOGIN", 714, positions[14].moving, 812, 464, tocolor(255, 255, 255, 255), 1.20, "arial", "center", "center", false, false, false, false, false)   
	dxDrawText("Don't have an account? Register at - www.vigour-gaming.com", 446, positions[15].moving, 833, 494, tocolor(255, 255, 255, 255), 0.80, "arial", "center", "top", false, false, false, false, false)
	if isMouseInPosition(440, positions[5].moving, 390, 37) then
		if not dummyTicks[1] then
			dummyTicks[1] = getTickCount()
			resetOtherTicks(1)
		end
	    local movingX = animate(0, 345, "Linear", 300, function() end, dummyTicks[1])
		dxDrawRectangle(468, 334, movingX, 1, tocolor(208, 166, 38, 174), false) -- Username Editbox Active
	elseif isMouseInPosition(467, positions[6].moving, 345, 28) then
		if not dummyTicks[2] then
			dummyTicks[2] = getTickCount()
			resetOtherTicks(2)
		end
	    local movingX = animate(0, 345, "Linear", 300, function() end, dummyTicks[2])
        dxDrawRectangle(467, 406, movingX, 1, tocolor(208, 166, 38, 174), false) -- Password Editbox Active
	elseif isMouseInPosition(467, positions[10].moving, 15, 15) then
		if not dummyTicks[3] then
			dummyTicks[3] = getTickCount()
			resetOtherTicks(3)
		end
	    local movingX = animate(0, 15, "OutQuad", 300, function() end, dummyTicks[3])
        dxDrawRectangle(467, 423, movingX, movingX, tocolor(208, 166, 38, 174), false) -- Checkbox 1 is active?
	elseif isMouseInPosition(467, positions[12].moving, 15, 15) then
		if not dummyTicks[4] then
			dummyTicks[4] = getTickCount()
			resetOtherTicks(4)
		end
	    local movingX = animate(0, 15, "OutQuad", 300, function() end, dummyTicks[4])
       	dxDrawRectangle(467, 448, movingX, movingX, tocolor(208, 166, 38, 174), false) -- Checkbox 2 is active?
	elseif isMouseInPosition(714, positions[13].moving, 97, 28) then
		if not dummyTicks[5] then
			dummyTicks[5] = getTickCount()
			resetOtherTicks(5)
		end
	    local movingX = animate(0, 97, "OutQuad", 300, function() end, dummyTicks[5])
	    local movingY = animate(0, 28, "OutQuad", 300, function() end, dummyTicks[5])
       	dxDrawRectangle(714, 436, movingX, movingY, tocolor(208, 166, 38, 174), false) -- login button is active?
    else
    	resetAllTicks()
	end 
end
addEventHandler( "onClientRender", getRootElement(), draw)

function resetOtherTicks(currentTick)
	for i,v in pairs(dummyTicks) do
		if (currentTick and i ~= currentTick) then
			dummyTicks[i] = nil
		end
	end
end

function resetAllTicks()
	for i,v in pairs(dummyTicks) do
		dummyTicks[i] = nil
	end
end

function animate(from, to, easing, duration, endfunction, tick)
	local now = getTickCount()
	local change = interpolateBetween(from, 0, 0, to, 0, 0, (now - tick) / duration, easing)
	if endfunction and now >= tick+duration then
		endfunction()
	end
	return change
end
function isMouseInPosition ( x, y, width, height )
	if ( not isCursorShowing( ) ) then
		return false
	end
    local sx, sy = guiGetScreenSize ( )
    local cx, cy = getCursorPosition ( )
    local cx, cy = ( cx * sx ), ( cy * sy )
    if ( cx >= x and cx <= x + width ) and ( cy >= y and cy <= y + height ) then
        return true
    else
        return false
    end
end

im not sure if its the best way but it works

Edited by kikos500
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
Go to topic listing

  • Recently Browsing   0 members

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