Hexagon HUD Create

[Snoowy]

Hy! I'm started today the special HUD. The shape of HUD hexagon. How to create the hud? ( similar the circle hud, however not filled, just outline. ) I try the ImageSection, however not work. ( Similar the circle loading... )

 

MY TRY: ( Not working )

	eX, eY = 1366, 768 -- Sjáat képernyőméret
local x, y = guiGetScreenSize() -- Játékos képernyőméretének lekérése
	function dxdrawok()
    local health, armor = getElementHealth (localPlayer), getPedArmor(localPlayer) -- Élet lekérése
    showPlayerHudComponent("all", false) -- HUD kikapcsolása ( összes )
    dxDrawImage ( 1006/eX*x, -2/eY*y, 362/eX*x, 90/eY*y, 'files/hud.png') -- A kép kirajzolása
    dxDrawImageSection(1017, 8, 85, 71*health/100, 0, 0, 85, 71*health/100, 'files/health.png') -- Élet karika kirajzolása
    dxDrawImageSection(1103, 8, 85, 71*armor/100, 0, 0, 85, 71*armor/100, 'files/armor.png') -- Élet karika kirajzolása
    dxDrawRectangle(1039, 76, 41, 2, tocolor(255, 255, 255, 255), false)
end
addEventHandler("onClientRender", root, dxdrawok)
	

[IIYAMA]

You can make a hexagon with circle math. Just limit the points to 8.

https://wiki.multitheftauto.com/wiki/DxDrawCircle

 

---

If you also want fill it, you can use the local mta browser to draw svg.

 

[Snoowy]

Hy. Sorry, i dont know the dxcircle. What is edit the script?

	function dxDrawCircle( posX, posY, radius, width, angleAmount, startAngle, stopAngle, color, postGUI )
    if ( type( posX ) ~= "number" ) or ( type( posY ) ~= "number" ) then
        return false
    end
    
    local function clamp( val, lower, upper )
        if ( lower > upper ) then lower, upper = upper, lower end
        return math.max( lower, math.min( upper, val ) )
    end
    
    radius = type( radius ) == "number" and radius or 50
    width = type( width ) == "number" and width or 5
    angleAmount = type( angleAmount ) == "number" and angleAmount or 1
    startAngle = clamp( type( startAngle ) == "number" and startAngle or 0, 0, 360 )
    stopAngle = clamp( type( stopAngle ) == "number" and stopAngle or 360, 0, 360 )
    color = color or tocolor( 255, 255, 255, 200 )
    postGUI = type( postGUI ) == "boolean" and postGUI or false
    
    if ( stopAngle < startAngle ) then
        local tempAngle = stopAngle
        stopAngle = startAngle
        startAngle = tempAngle
    end
    
    for i = startAngle, stopAngle, angleAmount do
        local startX = math.cos( math.rad( i ) ) * ( radius - width )
        local startY = math.sin( math.rad( i ) ) * ( radius - width )
        local endX = math.cos( math.rad( i ) ) * ( radius + width )
        local endY = math.sin( math.rad( i ) ) * ( radius + width )
    
        dxDrawLine( startX + posX, startY + posY, endX + posX, endY + posY, color, width, postGUI )
    end
    
    return true
end
	

[IIYAMA]

angleAmount 

360 / 8 = 45
 

Just play with it and debug it. It is the only way to understand it...

 

 

[DNL291]

If you mean a radar, you can use shader to do it. Take a look at this resource:

https://wiki.multitheftauto.com/wiki/Shader_examples#Hud_mask

[Snoowy]

Thank you, it's not radar, health, armor, hunger etc. HUD, but thank you. IIYAMA, i have modified angleAmount for 45, but not working. 

[IIYAMA]

I can't look at it and help you, if you don't post it.

 

[Snoowy]

function dxDrawCircle( posX, posY, radius, width, angleAmount, startAngle, stopAngle, color, postGUI )
	if ( type( posX ) ~= "number" ) or ( type( posY ) ~= "number" ) then
		return false
	end
	
	local function clamp( val, lower, upper )
		if ( lower > upper ) then lower, upper = upper, lower end
		return math.max( lower, math.min( upper, val ) )
	end
	
	radius = type( radius ) == "number" and radius or 50
	width = type( width ) == "number" and width or 5
	angleAmount = type( angleAmount ) == "number" and angleAmount or 
	startAngle = clamp( type( startAngle ) == "number" and startAngle or 0, 0, 360 )
	stopAngle = clamp( type( stopAngle ) == "number" and stopAngle or 360, 0, 360 )
	color = color or tocolor( 255, 255, 255, 200 )
	postGUI = type( postGUI ) == "boolean" and postGUI or false
	
	if ( stopAngle < startAngle ) then
		local tempAngle = stopAngle
		stopAngle = startAngle
		startAngle = tempAngle
	end
	
	for i = startAngle, stopAngle, angleAmount do
		local startX = math.cos( math.rad( i ) ) * ( radius - width )
		local startY = math.sin( math.rad( i ) ) * ( radius - width )
		local endX = math.cos( math.rad( i ) ) * ( radius + width )
		local endY = math.sin( math.rad( i ) ) * ( radius + width )
	
		dxDrawLine( startX + posX, startY + posY, endX + posX, endY + posY, color, width, postGUI )
	end
	
	return true
end

What edited?

 

addEventHandler( "onClientRender", root, 
	function( )
		-- We're starting to draw the circle at 0° which means that the first point of the arc is ( 200+50 | 200 )
		-- Therefore the last point is ( 200 | 200+50 ). > Our arc is the "lower right" quarter of the circle.
		dxDrawCircle( 200, 200, 45, 5, 1, 0, 90 )
	end
)

Edited December 27, 2017 by Snoowy

[IIYAMA]

You are setting the angleAmount to 1 and not to 45.

 

Use 5e argument and not 3e argument.

1, 2, 3, 4, 5, ...

posX, posY, radius, width, angleAmount

dxDrawCircle( 200, 200, 45, 5, HERE, 0, 90 )

 

Edited December 27, 2017 by IIYAMA

[</Mr.Tn6eL>]

I think this will be simple & high performance

function dxDrawHexagon(x, y, radius, rotation, ...) -- ... : color, width, postGUI
    local x1, y1
    for deg=0, 6 do
        local rad = math.rad(rotation+(deg*60))
        local x2, y2 = x+radius*math.cos(rad), y+radius*math.sin(rad)
        if x1 then
            dxDrawLine(x1, y1, x2, y2, ...)
        end
        x1, y1 = x2, y2
    end
end

--Ex.
dxDrawHexagon(x, y, 128, 0, 0xFFFF0000, 2)

 

[Snoowy]

Thank you, but I didn't think so. As it looks in a picture, as health decreases a hexagonal pixel to pixel shifts from left to right. 

This is i drawing to DxDrawLine hexagon:

	dxDrawLine(999+40, 78, 1079, 78, tocolor(217, 14, 14, 200), 1.7, false) -- Alja
    dxDrawLine(1039, 78, 1019, 45, tocolor(217, 14, 14, 200), 1.5, false) -- Bal alja
    dxDrawLine(1019, 45, 1040, 10, tocolor(217, 14, 14, 200), 1.5, false) -- Bal fent
    dxDrawLine(1039, 11, 1079, 11, tocolor(217, 14, 14, 200), 1.7, false) -- Teteje
    dxDrawLine(1078, 11, 1098, 45, tocolor(217, 14, 14, 200), 1.7, false) -- Jobb fent
    dxDrawLine(1098, 44, 1079, 78, tocolor(217, 14, 14, 200), 1.7, false) -- Jobb lent