Question.

[LiOneLMeSsIShoT]

How to change the Theme of the Progress bar like this one:

http://i1.ytimg.com/vi/aqBAxsI0VmI/maxresdefault.jpg

?

[Dealman]

Make your own progress bar using DirectX Drawing functions.

[LiOneLMeSsIShoT]

Make your own progress bar using DirectX Drawing functions.

Still don't understand.

[Dealman]

DX Drawing Functions. I'd recommend you use the GUI Editor.

[LiOneLMeSsIShoT]

DX Drawing Functions. I'd recommend you use the GUI Editor.

Yeah..i use Gui Editor Already and made Progress bar...and need to change the color of the Progress..and put some image...such... so?

[Driggero]

You can't use the GUI progress bar if you want it to look like that. As Dealman says use the drawing functions, along with some math to make it draw correctly.

Specifically these

dxDrawRectangle 
dxDrawImage 
dxDrawText 

[LiOneLMeSsIShoT]

You can't use the GUI progress bar if you want it to look like that. As Dealman says use the drawing functions, along with some math to make it draw correctly.

Specifically these

dxDrawRectangle 
dxDrawImage 
dxDrawText 

Alright.. how can i make image like this one?

[Dealman]

It's not an image. That progress bar is most likely made out of rectangles only. Basically it's 2 rectangles inside a bigger rectangle. And then to increase the progress, you increase the width of the inner coloured rectangle, not the black one.

[LiOneLMeSsIShoT]

It's not an image. That progress bar is most likely made out of rectangles only. Basically it's 2 rectangles inside a bigger rectangle. And then to increase the progress, you increase the width of the inner coloured rectangle, not the black one.

Alright..what i understand from you now is..it's not an image...so can you give me the functions to edit the progress bar like that?

[Dealman]

Alright..what i understand from you now is..it's not an image...so can you give me the functions to edit the progress bar like that?

dxDrawRectangle 

Edit:

I made a quick image to try to explain it to you visually.

You increase or decrease the width of Rectangle 3 to make it look like it's progressing.

[LiOneLMeSsIShoT]

Alright..what i understand from you now is..it's not an image...so can you give me the functions to edit the progress bar like that?

dxDrawRectangle 

Edit:

I made a quick image to try to explain it to you visually.

You increase or decrease the width of Rectangle 3 to make it look like it's progressing.

ِAlright but...how to +1 the Progress? or even -1

[Driggero]

Say the longest length of rectangle 3 is 100 pixels, this is the length it will be when full.

  
local progress = 1 
x, y = guiGetScreenSize() 
dxDrawRectangle((x/2)-50, y/2, 100, 5, tocolor(0, 255, 0, 100)) 
dxDrawRectangle((x/2)-50, y/2, progress, 5, tocolor(0, 255, 0, 255)) 
  

So you just need to set the progress to whatever number between 0-100 you want it to be. Bear in mind that if your bar is not 100 pixels then you will need to convert the progress into a percentage of whatever the bars full length will be.

[LiOneLMeSsIShoT]

Say the longest length of rectangle 3 is 100 pixels, this is the length it will be when full.

  
local progress = 1 
x, y = guiGetScreenSize() 
dxDrawRectangle((x/2)-50, y/2, 100, 5, tocolor(0, 255, 0, 100)) 
dxDrawRectangle((x/2)-50, y/2, progress, 5, tocolor(0, 255, 0, 255)) 
  

So you just need to set the progress to whatever number between 0-100 you want it to be. Bear in mind that if your bar is not 100 pixels then you will need to convert the progress into a percentage of whatever the bars full length will be.

In this one...the Full Progress is 608!! Much!

local progress = 608 
addEventHandler("onClientRender", root, 
    function() 
        dxDrawRectangle(316, 649, 615, 38, tocolor(13, 115, 0, 255), true) 
        dxDrawRectangle(320, 653, 605, 29, tocolor(0, 0, 0, 255), true) 
        dxDrawRectangle(320, 653, progress, 30, tocolor(229, 0, 0, 200), true) 
    end 
) 
  

I don't need the 608 i want it to be like 100 then full

[TAPL]

local progress = 100 
addEventHandler("onClientRender", root, 
    function() 
        dxDrawRectangle(316, 649, 615, 38, tocolor(13, 115, 0, 255), true) 
        dxDrawRectangle(320, 653, 605, 29, tocolor(0, 0, 0, 255), true) 
        dxDrawRectangle(320, 653, progress*6.08, 30, tocolor(229, 0, 0, 200), true) 
    end 
) 
  

[Dealman]

You increase or decrease the width of Rectangle 3 to make it look like it's progressing.

ِAlright but...how to +1 the Progress? or even -1

To simulate there effect that it is increasing or decreasing in progress, you simply increase or decrease the width of the rectangle. Driggero and TAPL gave you good examples.

[Driggero]

Bear in mind that if your bar is not 100 pixels then you will need to convert the progress into a percentage of whatever the bars full length will be.

Try something like this:

local progress = 100 
  
local newProgress = progress*6.08 
addEventHandler("onClientRender", root, 
    function() 
        dxDrawRectangle(316, 649, 615, 38, tocolor(13, 115, 0, 255), true) 
        dxDrawRectangle(320, 653, 605, 29, tocolor(0, 0, 0, 255), true) 
        dxDrawRectangle(320, 653, newprogress, 30, tocolor(229, 0, 0, 200), true) 
    end 
) 

EDIT: Just now noticed TAPL's post which is essentially doing the exact same thing, feel free to ignore this