how paint

[Deceiver]

how does 1 go about painting a progress bar for a skill?

 

e.g. > im training attack and my paint shows a progress bar that will progressively fill as i gain exp then rest once i reach the next level

 

how do

[Chris]

A progress bar for those who are unsure if they are looking for the correct thing or for those who dont know is a coloured bar that grows with each exp gained until it reaches full at 100% They are usually added to show how close to the next level you are without showing numbers or perhaps to add that something a little extra special. So here i'm going to show you how to add this.

We will be using percent to next level calculated in the previous segment of this tutorial so please do that first if you wish to use this.

First you need to work out how big the width of your bar is going to be. Mine in this example is 337 pixels in length & will be full when it reaches 100% So copy the following code into your onPaint method below the calculations for percent to next level and before the g.drawstrings begin.

 

double width = (337 * (percentTNL / 100));

Let me explain the above. We declare a double variable because thats what we used to work out our percentage. We then label our new variable width and then do the calculation percent to next level divided by 100, the percentage our bar will be when full. Then divde that value by the total length of the bar which in our example is 337 pixels long. Next we want to make that value an integer so copy the following below:

 

int widdth = (int) width;

This now coverts the double into an int. Much easier to work with when displaying rectangles. Next we want to display out growing rectangle on the screen so put this above the first g.drawstring:

g.fillRect(169,427, widdth, 20);

The above is simply saying positon on the screen of X so 169 pixels from the left edge of the screen horizontally. Then the Y value the height on which the screen it will be displayed which is 427. Then we have our changing variable widdth which changes as our percent increases. Then lastly you have the height of the bar which is 20, you can adjust this to fit it in with your paint.

Thats it, the most complicated calculation you will have in your paint in three simple steps!

 

Credits: offsite tutorial

Edit: pmed u with source

Edited March 6, 2016 by Sinatra

[Deceiver]

A progress bar for those who are unsure if they are looking for the correct thing or for those who dont know is a coloured bar that grows with each exp gained until it reaches full at 100% They are usually added to show how close to the next level you are without showing numbers or perhaps to add that something a little extra special. So here i'm going to show you how to add this.

We will be using percent to next level calculated in the previous segment of this tutorial so please do that first if you wish to use this.

First you need to work out how big the width of your bar is going to be. Mine in this example is 337 pixels in length & will be full when it reaches 100% So copy the following code into your onPaint method below the calculations for percent to next level and before the g.drawstrings begin.

 

double width = (337 * (percentTNL / 100));

Let me explain the above. We declare a double variable because thats what we used to work out our percentage. We then label our new variable width and then do the calculation percent to next level divided by 100, the percentage our bar will be when full. Then divde that value by the total length of the bar which in our example is 337 pixels long. Next we want to make that value an integer so copy the following below:

 

int widdth = (int) width;

This now coverts the double into an int. Much easier to work with when displaying rectangles. Next we want to display out growing rectangle on the screen so put this above the first g.drawstring:

g.fillRect(169,427, widdth, 20);

The above is simply saying positon on the screen of X so 169 pixels from the left edge of the screen horizontally. Then the Y value the height on which the screen it will be displayed which is 427. Then we have our changing variable widdth which changes as our percent increases. Then lastly you have the height of the bar which is 20, you can adjust this to fit it in with your paint.

Thats it, the most complicated calculation you will have in your paint in three simple steps!

 

Credits: offsite tutorial

Edit: pmed u with source

 

 

thanks boo