[solved] How to get gradients do their job

Newbie & Debugging Questions
#1

Hey guys,
I try to create a final fantasy 7-ish combat without any library, I want to make a game from scratch before I use any of them.
My problem lies in the gradient. I want something like that:

But in the end it looks like:

They don’t look that diferent but the problem is, there are two bars (one for the player and one for the enemy/npc). The second bar doesn’t get any gradient at all:

Here is the code of the paint class:


int barWidth = 220;
int barHeight = 30;
int barInitiativeHeight = 6;
	
Graphics2D g2 = (Graphics2D) g;
		
// Background Color new Color(73,73,73)
// Border Color new Color(91,91,91)
		
		
g2.setColor(new Color(73,73,73));
g2.fillRect(63, 450, barWidth-1, barHeight-1);//Stam Player
g2.fillRect(523, 450, barWidth-1, barHeight-1);
g2.setColor(new Color(91,91,91));
g2.drawRect(62, 449, barWidth, barHeight);//Stam
g2.drawRect(522, 449, barWidth, barHeight);


//Stamina Color TODO: Gradient -> dark 234;158;15	light 251;181;15 
g2.setPaint(new GradientPaint(0,0,new Color(234, 158,15),100, 0,new Color(251,181,15)));
g2.fillRect(63, 450, (int) (barWidth*(player.getCharacters().get(0).getStamina()/(float)player.getCharacters().get(0).getMaxStamina())-1), barHeight-1);
g2.setPaint(new GradientPaint(0,0,new Color(251,181,15),100, 0,new Color(234, 158,15)));
g2.fillRect(523+(barWidth-(int)(barWidth*(enemies.get(0).getStamina()/(float)enemies.get(0).getMaxStamina()))), 450, (int) (barWidth*(enemies.get(0).getStamina()/(float)enemies.get(0).getMaxStamina())-1), barHeight-1);//HP
		
g2.setColor(new Color(73,73,73));
g2.fillRect(26, 434, barWidth-1, barHeight-1);//HP
g2.fillRect(63, 482, barWidth-1, barInitiativeHeight-1);//Init
		
g2.fillRect(558, 434, barWidth-1, barHeight-1);//HP
g2.fillRect(523, 482, barWidth-1, barInitiativeHeight-1);//Init
		
g2.setColor(new Color(91,91,91));
g2.drawRect(25, 433, barWidth, barHeight);//HP
g2.drawRect(62, 481, barWidth, barInitiativeHeight);//Init
	
g2.drawRect(557, 433, barWidth, barHeight);//HP
g2.drawRect(522, 481, barWidth, barInitiativeHeight);//Init
				
//HealthPoint Color TODO: Gradient -> dark 17,118,0		light 57,160,40
g2.setPaint(new GradientPaint(0,0,new Color(17,118,0),100, 0,new Color(57,160,40)));
g2.fillRect(25, 433, (int) (barWidth*(player.getCharacters().get(0).getHealthPoint()/(float)player.getCharacters().get(0).getMaxHealthPoint())), barHeight);//HP
g2.setPaint(new GradientPaint(0,0,new Color(57,160,40),100, 0,new Color(17,118,0)));
g2.fillRect(557+(int) (barWidth-(barWidth*(enemies.get(0).getHealthPoint()/(float)enemies.get(0).getMaxHealthPoint()))),433, (int) (barWidth*(enemies.get(0).getHealthPoint()/(float)enemies.get(0).getMaxHealthPoint())), barHeight);
		
//Init Color new Color(255,93,25)
g2.setColor(new Color(255,93,25));
g2.fillRect(63, 482, (int) (barWidth*(player.getCharacters().get(0).getTurnTimer() / (float)CombatState.MAX_TURN_TIMER )-1), barInitiativeHeight-1);//Init
g2.fillRect(523+(int) (barWidth-(barWidth*(enemies.get(0).getTurnTimer() / (float)CombatState.MAX_TURN_TIMER ))),482, (int) (barWidth*(enemies.get(0).getTurnTimer() / (float)CombatState.MAX_TURN_TIMER )), barInitiativeHeight-1);

Any Idea?

#2

Hmm, what? The screenshots look good to me, what seems to be wrong and what do you mean by gradient? :V

#3

The bar should be light green on the left and dark green on the right side. While the first one has a gradient in that way, even if it is not the way I want it, does the second not have any light green.

#4

Are the X locations of the bars properly matching up with the gradient’s X locs?

I think you are filling rects that are outside the area where the gradient is happening.

If the gradient goes from x = 0 to x = 100, and you paint at 500, only the second color will be used. Or, if you fill a rect at 20 and go to 120, only the portion from 20-to-100 will have the defined gradient.

#5

Thanks, that did the magic.
I thought x and y of each color was percentage, at least the java tutorials of oracle suggested it.