[solved] How to get gradients do their job

Sethir

Junior Devvie

Medals: 1
Exp: 3 years

[solved] How to get gradients do their job

« Posted 2013-07-22 12:46:03 »

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

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?

Sethir

Junior Devvie

Medals: 1
Exp: 3 years

Re: How to get gradients do their job

« Reply #2 - Posted 2013-07-22 14:41:04 »

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.

Sethir

Junior Devvie

Medals: 1
Exp: 3 years

Re: How to get gradients do their job

« Reply #4 - Posted 2013-07-22 20:45:44 »

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