[HELP] How to make a HUD movable?

Turbesz · December 21, 2020

I want to make my "non-movable" HUD to movable, but i dont understand how can i do it... Anyone can help me in this, what do i need for this, etc.?

Hydra · December 21, 2020

onClientClick()
onClientCursorMove()

These functions can help you

Edited December 21, 2020 by Hydra

Tekken · December 21, 2020

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!

Turbesz · December 21, 2020

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

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 December 21, 2020 by Turbesz

Turbesz · December 21, 2020

Anyone can help, pls?

Tekken · December 21, 2020

What does xm, ym are used for?

Turbesz · December 21, 2020

6 minutes ago, Tekken said:

What does xm, ym are used for?

they are needed for positioning, example:

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

Tekken · December 22, 2020

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?

Turbesz · December 22, 2020

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

2 hours ago, Tekken said:

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

What example do you think?

justn · December 22, 2020

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)

Turbesz · December 22, 2020

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..?

Turbesz · December 22, 2020

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)

Tekken · December 22, 2020

You need to scale it to different resolution I recommend you this tutorial best out there:

Turbesz · December 22, 2020

2 minutes ago, Tekken said:

You need to scale it to different resolution I recommend you this tutorial best out there:

the rectangles, and images does not move, only the text

Tekken · December 22, 2020

What do you mean?

Turbesz · December 22, 2020

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 December 22, 2020 by Turbesz

justn · December 22, 2020

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 December 22, 2020 by Shux

[HELP] How to make a HUD movable?

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

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members