Jump to content

[HELP] How to make a HUD movable?


Turbesz

Recommended Posts

This is not an very easy job, all I can tell you is to use the functions @Hydraprovided and also :

getCursorPosition()

you may also need a useful function called isCursorInPosition() or isMausInPosition() if you don’t find it on wiki ask for it I will post it when I’m on PC, 

Also you need to store the positions gaint earlier into a db.

Other than that It’s just a matter of knowing to work with Lua and it’s s operators. 
 

Feel free to leave a reply if you’re in trouble we’re here to help you!

  • Thanks 1
Link to comment

I tried make movable a dx element and succeeded, then i tried in my hud script, and does not work with same method o.O

this is the calculation in my code: 

local sx_, sy_ = 1920, 1080
local sx__, sy__ = guiGetScreenSize()
local xm, ym = sx__/sx_, sy__/sy_

addEventHandler( "onClientCursorMove", getRootElement( ),
	function ( x2, y2, xs, ys )
		if isCursorShowing() then
            sx__, sy__ = xs, ys
		end
    end
)

The hud elements does not move anywhere when i move the cursor. Why?

Edited by Turbesz
Link to comment

Changing sx__, sy__ etch time you move your cursor it’s like changing the resolution of your screen, Also xm, ym are only defined one time so changing sx__, sy__ will have no effect on xm, ym afterwards.

You may post a proper example, I will trey to review it?

Link to comment
2 hours ago, Tekken said:

Changing sx__, sy__ etch time you move your cursor it’s like changing the resolution of your screen, Also xm, ym are only defined one time so changing sx__, sy__ will have no effect on xm, ym afterwards.

I tried to change sx__, and sy__ to xm, ym in onClientCursorMove event, but does not doesn't do anything that way too :S 

2 hours ago, Tekken said:

You may post a proper example, I will trey to review it?

What example do you think?

Link to comment

To start off, something wrong with your code that you should be careful of doing, for instance:

Error:

-- Replacing this:
local sx__, sy__ = guiGetScreenSize() -- keep this

-- With this:
sx__, sy__ = xs, ys 

-- = no no

To avoid positioning/scaling issues, I wouldn't recommend replacing the value of the variable which you're gonna be using for further calculations with the position of the cursor. 

Now what you could do is use the onClientClick with a variable to enable/disable the dragging, using onClientRender and getCursorPosition when the cursor is showing , then using the screen position from the cursor to set the value for your hud. A little example below, something like this should work:
 

local sx_, sy_ = 1920, 1080
local sx__, sy__ = guiGetScreenSize()
local xm, ym = sx__/sx_, sy__/sy_

local hudX, hudY = (sx_-245) * xm, (sy_/2-460) * ym
local isMovingHud = false

addEventHandler('onClientClick',root,
    function(btn,state,posX,posY)
        if btn == 'left' then
            if state == 'down' then
                isMovingHud = true
            else
                isMovingHud = false
            end
        end
    end
)
                
addEventHandler('onClientRender',root,
    function()
        
        if isMovingHud == true then
            if isCursorShowing() == true then
                local positionX, positionY, worldX, worldY, worldZ = getCursorPosition()
                hudX,hudY = getScreenFromWorldPosition(worldX,worldY,worldZ)
            else
                isMovingHud = false
            end
        end

        dxDrawRectangle( hudX,  hudY, 220 * xm, 10 * ym,tocolor(0,0,0,120))
    end
)


bindKey("m","down",function()
    if isCursorShowing() then
        showCursor(false)
    else
        showCursor(true)
    end
end)

 

Link to comment
32 minutes ago, Shux said:

To start off, something wrong with your code that you should be careful of doing, for instance:

Error:


-- Replacing this:
local sx__, sy__ = guiGetScreenSize() -- keep this

-- With this:
sx__, sy__ = xs, ys 

-- = no no

To avoid positioning/scaling issues, I wouldn't recommend replacing the value of the variable which you're gonna be using for further calculations with the position of the cursor. 

Now what you could do is use the onClientClick with a variable to enable/disable the dragging, using onClientRender and getCursorPosition when the cursor is showing , then using the screen position from the cursor to set the value for your hud. A little example below, something like this should work:
 


local sx_, sy_ = 1920, 1080
local sx__, sy__ = guiGetScreenSize()
local xm, ym = sx__/sx_, sy__/sy_

local hudX, hudY = (sx_-245) * xm, (sy_/2-460) * ym
local isMovingHud = false

addEventHandler('onClientClick',root,
    function(btn,state,posX,posY)
        if btn == 'left' then
            if state == 'down' then
                isMovingHud = true
            else
                isMovingHud = false
            end
        end
    end
)
                
addEventHandler('onClientRender',root,
    function()
        
        if isMovingHud == true then
            if isCursorShowing() == true then
                local positionX, positionY, worldX, worldY, worldZ = getCursorPosition()
                hudX,hudY = getScreenFromWorldPosition(worldX,worldY,worldZ)
            else
                isMovingHud = false
            end
        end

        dxDrawRectangle( hudX,  hudY, 220 * xm, 10 * ym,tocolor(0,0,0,120))
    end
)


bindKey("m","down",function()
    if isCursorShowing() then
        showCursor(false)
    else
        showCursor(true)
    end
end)

 

oh thanks!

btw how can i add to this more rectangles, texts, etc..?

Link to comment
1 hour ago, Shux said:

To start off, something wrong with your code that you should be careful of doing, for instance:

Error:


-- Replacing this:
local sx__, sy__ = guiGetScreenSize() -- keep this

-- With this:
sx__, sy__ = xs, ys 

-- = no no

To avoid positioning/scaling issues, I wouldn't recommend replacing the value of the variable which you're gonna be using for further calculations with the position of the cursor. 

Now what you could do is use the onClientClick with a variable to enable/disable the dragging, using onClientRender and getCursorPosition when the cursor is showing , then using the screen position from the cursor to set the value for your hud. A little example below, something like this should work:
 


local sx_, sy_ = 1920, 1080
local sx__, sy__ = guiGetScreenSize()
local xm, ym = sx__/sx_, sy__/sy_

local hudX, hudY = (sx_-245) * xm, (sy_/2-460) * ym
local isMovingHud = false

addEventHandler('onClientClick',root,
    function(btn,state,posX,posY)
        if btn == 'left' then
            if state == 'down' then
                isMovingHud = true
            else
                isMovingHud = false
            end
        end
    end
)
                
addEventHandler('onClientRender',root,
    function()
        
        if isMovingHud == true then
            if isCursorShowing() == true then
                local positionX, positionY, worldX, worldY, worldZ = getCursorPosition()
                hudX,hudY = getScreenFromWorldPosition(worldX,worldY,worldZ)
            else
                isMovingHud = false
            end
        end

        dxDrawRectangle( hudX,  hudY, 220 * xm, 10 * ym,tocolor(0,0,0,120))
    end
)


bindKey("m","down",function()
    if isCursorShowing() then
        showCursor(false)
    else
        showCursor(true)
    end
end)

 

oh now i realized, how to add more rectangles, and images to this. but if i add a text, the text will move left / right on different resolutions... why?

        dxDrawText(math.round(getElementHealth(localPlayer)).."%",(hudX-415) * 2, (hudY-20) * 2, 1130 * xm, 75 * ym, tocolor(255,255,255,255),1.10*xm, 1.10*ym,"default-bold","center","center",_,_,_,true)

 

Link to comment
1 hour ago, Tekken said:

What do you mean?

i place it the text in the rectangle on 1920x1080 resolution so far so good, but when i change resolution to 1366x768 the rectangle is in the good place, but the text moves away from rectangle (not with cursor move)

with this code: 

        dxDrawText(math.round(getElementHealth(localPlayer)).."%",(hudX-415) * 2, (hudY-20) * 2, 1130 * xm, 75 * ym, tocolor(255,255,255,255),1.10*xm, 1.10*ym,"default-bold","center","center",_,_,_,true)

 

Edited by Turbesz
Link to comment

 

local sx_, sy_ = 1920, 1080
local sx__, sy__ = guiGetScreenSize()
local xm, ym = sx__/sx_, sy__/sy_

local hudElements = {}

function _dxDrawImage(x,y,w,h,image,rot,rotOffsetX,rotOffsetY,color,postgui)
    local btn = guiCreateButton(x,y,w,h,"",false)
    if btn then
        setElementData(btn,"hudElement",true)
        guiSetAlpha(btn,0)
        
        table.insert(hudElements,{element=btn,type='image',dx={}})
        hudElements[#hudElements].dx[1] = x
        hudElements[#hudElements].dx[2] = y
        hudElements[#hudElements].dx[3] = w
        hudElements[#hudElements].dx[4] = h
        hudElements[#hudElements].dx[5] = image
        hudElements[#hudElements].dx[6] = tonumber(rot) or 0 
        hudElements[#hudElements].dx[7] = tonumber(rotOffsetX) or 0 
        hudElements[#hudElements].dx[8] = tonumber(rotOffsetY) or 0 
        hudElements[#hudElements].dx[9] = tonumber(color) or tocolor(255,255,255,255)
        hudElements[#hudElements].dx[10] = ( postgui == true ) or false
        return true
    end
end

function _dxDrawRectangle(x,y,w,h,color,postgui)
    local btn = guiCreateButton(x,y,w,h,"",false)
    if btn then
        setElementData(btn,"hudElement",true)
        guiSetAlpha(btn,0)
        
        table.insert(hudElements,{element=btn,type='rectangle',dx={}})
        hudElements[#hudElements].dx[1] = x
        hudElements[#hudElements].dx[2] = y
        hudElements[#hudElements].dx[3] = w
        hudElements[#hudElements].dx[4] = h
        hudElements[#hudElements].dx[5] = tonumber(color) or tocolor(255,255,255,255)
        hudElements[#hudElements].dx[6] = ( postgui == true ) or false
        return true
    end
end

                
addEventHandler('onClientRender',root,
    function()

        for i,v in ipairs(hudElements) do
            if targetElement and targetElement == v.element then
                if getKeyState("mouse1") ~= true then targetElement = nil end
                if isCursorShowing() == true then
                    local positionX, positionY, worldX, worldY, worldZ = getCursorPosition()
                    local screenx, screeny = getScreenFromWorldPosition(worldX,worldY,worldZ)
                    if screenx  and screenx < sx__ and screeny < sy__ then
                        v.dx[1],v.dx[2] = screenx,screeny
                    end
                    guiSetPosition(v.element,v.dx[1],v.dx[2],false)
                else
                    targetElement = false
                end
            end
            if v.type == 'rectangle' then
                dxDrawRectangle( v.dx[1],  v.dx[2], v.dx[3], v.dx[4],v.dx[5], v.dx[6])
            elseif v.type == 'image' then
                dxDrawImage( v.dx[1],  v.dx[2], v.dx[3], v.dx[4],v.dx[5], v.dx[6], v.dx[7], v.dx[8], v.dx[9], v.dx[10] )
            end
        end
    end
)


addEventHandler("onClientGUIMouseDown",resourceRoot,
    function(btn)
        if btn == "left" then
            if getElementData(source,"hudElement") == true then
                targetElement = source
            end
        end
    end
)

bindKey("m","down",function()
    if isCursorShowing() then
        showCursor(false)
    else
        showCursor(true)
    end
end)

_dxDrawRectangle( (sx_-245) * xm, (sy_/2-460) * ym, 220 * xm, 10 * ym,tocolor(0,0,0,120),true)

 

Made you this real quick so you have an idea of what to do, it's not all perfect at the moment but it's something you could use as a start. It's much simpler than you attempting to calculate for every single thing you'd want to draw. You can use what you have there to help you with doing the texts, good luck.

Edited by Shux
  • Thanks 1
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...