Circle Progress bar

[KariiiM]

Hello Community,

Did anyone here have done making the circle progresss bar before? if yes, I would like to know the steps you followed to make it.

Thanks in advance.

[AHMED MOSTAFA]

dxDrawCircle ??

[AE.]

6 minutes ago, Killer Project said:

dxDrawCircle ??

this only draw a circle doesn't make a " progress bar "

[AHMED MOSTAFA]

@3laa33 هو يبي يسوي شريط تقدم بالدائرة صح ؟ يعني مثلاً هو يبي يجيب دم اللاعب على اساس الدائرة .. يقدر يستعملها لأن مثلاً اذا دم اللاعب النص يقدر يخلي الدائرة نصف دائرة فقط
اذا لا ... حاول تفيده انت

@KariiiM u can use this Useful Function code

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

[Simple0x47]

DxDrawCircle made with the community circle shader you can do a circle progress bar without any problem

[KariiiM]

On 2017-6-9 at 23:08, Uknown. said:

DxDrawCircle made with the community circle shader you can do a circle progress bar without any problem

Steps to make it?

[AHMED MOSTAFA]

2 hours ago, KariiiM said:

Steps to make it?

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

addEventHandler( "onClientRender", root, 
	function( )
		-- bool dxDrawCircle ( int posX, int posY [, int radius = 50, int, width = 5, int angleAmount = 1, int startAngle = 0, int stopAngle = 360, int color = white, bool postGUI = false ] )
		dxDrawCircle( 200, 200, 50, 5, 1, 0, 90 )
	end
)

 

1. bool dxDrawCircle ( int posX, int posY [, int radius = 50, int, width = 5, int angleAmount = 1, int startAngle = 0, int stopAngle = 360, int color = white, bool postGUI = false ] )

Required Arguments

An example of how dxDrawCircle function works in practice.

• posX: An integer representing the absolute X position of the circle center, represented by pixels on the screen.
• posY: An integer representing the absolute Y position of the circle center, represented by pixels on the screen.

Optional Arguments

NOTE: When using optional arguments, you might need to supply all arguments before the one you wish to use. For more information on optional arguments, see optional arguments.

• radius: An integer representing the radius scale of the circle that is being drawn.
• width: An integer representing the width of the line that is being drawn.
• angleAmount: An integer representing the tightness of the circle. Lower amount makes it smoother, higher amount makes it more of a clock looking circle.
• startAngle: An integer representing the angle of the first point of the circle.
• stopAngle: An integer representing the angle of the last point of the circle.
• color: An integer of the hex color, produced using tocolor or 0xAARRGGBB (AA = alpha, RR = red, GG = green, BB = blue).
• postGUI: A bool representing whether the line should be drawn on top of or behind any ingame GUI (rendered by CEGUI).

[Simple0x47]

If you need it without body you could apply the circle shader to a shader mask and then you have it

[KariiiM]

@Killer Project You did nothing bro, only copied the wiki.

I'm talking about the steps to make circle becomes progress.

[AHMED MOSTAFA]

Just now, KariiiM said:

@Killer Project You did nothing bro, only copied the wiki.

I'm talking about the steps to make circle becomes progress.

i know that ... but you should read them

x = 10 -- or 20 -- or 50 -- or 90 -- or 40 -- or 360
dxDrawCircle( 200, 200, 50, 5, 1, 0, x )

[Rose]

(? 

local screenWidth, screenHeight = guiGetScreenSize( )
local stopAngle = 0
local time = 5000; -- Seconds to complete the circle
local speed = ((getFPSLimit() / 60) * 100) / (time / 60);
local tick = getTickCount();


addEventHandler( "onClientRender", root,
	function( )
		local now = getTickCount()
		local endTime = tick + time
		local elapsedTime = now - tick
		local duration = endTime - tick
		local progress = elapsedTime / duration

		local angle = interpolateBetween ( 0, 0, 0, 360, 0, 0, progress, "Linear")
		
		dxDrawCircle( screenWidth / 2, screenHeight / 2, nil, nil, nil, nil, angle )
	end
)

@Arsilex's code.

[</Mr.Tn6eL>]

You can get angle from progress such as :

angle_deg = progress/100*360 -- in degrees
angle_rad = progress/100*(math.pi*2) -- in radians

 

[KariiiM]

Alright, does anyone know how to make this circle's shape looks smooth?

[IIYAMA]

Create the outlines of the ring in Photoshop, that solved the problem for me.

See pm.

Edited June 12, 2017 by IIYAMA

[thisdp]

Draw a circle with shader that can make it more smooth. But you should first script a .fx file.

Edited June 14, 2017 by thisdp

[ShayF2]

dxDrawCircle is not an MTA function I do not believe, so the code they give you is code that you need in your script, if you have not already added it, then you call that function. I've made a progress bar before only with rectangles instead of circles. I'm not quite sure how you would work it with a circle but with rectangles, I drew a rectangle with a lower alpha and then used a count system so that each time the screen rendered a frame the progress went up 0.5% This moved the second bar with a higher alpha, over top of the bar with a lower alpha, making it look like a progress bar. Although I'm sure you could make a 'real' progress bar by getting the load progress and then dividing it by 100 or using it as is, and just keep updating that second rectangle. Again as I said before, I've done this with rectangles, not circles, I'm not sure if this will be helpful or not. Good luck.

I have just checked the script for dxDrawCircle, you can indeed set the angle of the circle. I advise you to make a default first angle and then set the second angle to the progress, note that this needs to be a 0-360 value, so if your using progress 0-100% you'll need to multiply your progress by 3.6.
It will look like this

startAngle+(progress*3.6) = endAngle

heres a check for it to reset if need be, or stop at the correct place.

if endAngle > 360 then endAngle = 0 end

and if you want to draw the percent that the angle is at you can use endAngle/360 = circlePercent.
I believe this is how it should work. Again I wish you the best of luck.

Edited June 15, 2017 by shay103