Gradient HP/SP Bars

[AbyssalLord]

If anyone is willing to explain how to make gradient HP and SP bars (by writing a script and explaining the parts) I would be very grateful.

I would also like to know how to make HP/SP bars appear above or below the player.  Maybe just explain this one?

Thanks for the help!

 

[khmp]

Well there are some things I would need to know. What direction is the gradient going? Left to right, top to bottom?

Here's the basic code for making a left to right gradient bar:

# The length and height of the bar to be drawn.
bar_length, bar_height = 64, 8

# The colors to interpolate between.
color_left, color_right = Color.new(0,0,0), Color.new(255,0,0)

# Our sprite and bitmap object so we actually see something.
@test = Sprite.new
@test.bitmap = Bitmap.new(bar_length, bar_height)

# Loop through the bar 1 column at a time.
for i in 0...bar_length
  # The percentage of the color to use from color_right.
  right = i / bar_length.to_f
  # The percentage of the color to use from color_left.
  left = 1.0 - right

  # Decide the color to draw at this particular column
  color = Color.new(color_left.red * left + color_right.red * right,
    color_left.green * left + color_right.green * right,
    color_left.blue * left + color_right.blue * right)

  # Draw the column of pixels with our interpolated color.
  @test.bitmap.fill_rect(i, 0, 1, bar_height, color)
end

 

[AbyssalLord]

I am now completely confused yet again...thanks for the help khmp!  I'll make sure to get this right.

 

[khmp]

Sorry had to go somewhere and didn't have a whole lot of time to explain. I'll go more in depth.

Ok first we need a length and a height for the bar. These will be used in deciding iteration amount as well as determine drawing behavior.

bar_length, bar_height = 64, 8

Next we need to decide the gradient. In this example we are going from left to right. So I make two colors named intuitively to help you understand there role in the gradient. If the color in this case uses full opacity than we don't need to mention it in the 4th parameter while creating the color. Remember colors in RGSS are RGBA thats short for Red, Green, Blue and Alpha. Color components each range from 0-255(256). In the below code color_left is being set to Black while color_right is being set to Red. If we don't enter an alpha amount it defaults to 255.

color_left, color_right = Color.new(0,0,0), Color.new(255,0,0)

Then I created a sprite and its bitmap object so we have enough for the bar to draw.

@test = Sprite.new
@test.bitmap = Bitmap.new(bar_length, bar_height)

Now for the most important part. Drawing the gradient. We will loop through each column of pixels and decide what color the column should be. So like I said each column of pixels would just be the length of the bar.

for i in 0...bar_length

Then we decide what the percentage of each color we should grab. If we are at the first column the color should be a ~100% of color_left adversely on the last column the color should be a ~100% of color_right. Its a sliding percentage, 100% of left means 0% of right, and vice versa. *(~)Because floats are almost never precisely an exact number but you should get the idea.* To figure out how much we want percentage we want of color_right we take i, which is the current pixel column, and divide it by the bar_length. Mathematically it makes sense because if we are at column 0 and divide it by anything(but 0) we get 0. So our variable right will equal 0.0 or 0% of color_right. Then to get the percentage of color_left we take a 100% and subtract right.

right = i / bar_length.to_f
left = 1.0 - right

Now that we know the percentages of each color we can make a final color which will be this column of pixels. Basically we multiply the components of each color respectively with their percentages. If we are at the middle of our gradient the percentages should both be equal at 0.5 or 50%.

color = Color.new(color_left.red * left + color_right.red * right,
  color_left.green * left + color_right.green * right,
  color_left.blue * left + color_right.blue * right)

Finally we draw the column of pixels using fill_rect of the bitmap object.

@test.bitmap.fill_rect(i, # The current column of pixels.
  0, # The starting position of y to draw our column
  1, # The width of the column, in this case 1
  bar_height, # The height of the bar.
  color) # The color of the column of pixels.

Then we repeat the process until we've touched every column.

Good luck with it AbyssalLord! :thumb:

 

[AbyssalLord]

Ok, thanks khmp, that makes a lot more sense.  I have one more question though.  What do you mean by repeat the process?  Do it over and over again?  Loop? 

Sounds tedious...of course, I may just be confused...

 

[khmp]

Ok, thanks khmp, that makes a lot more sense.  I have one more question though.  What do you mean by repeat the process?  Do it over and over again?  Loop? 

Sounds tedious...of course, I may just be confused...

That line was meant to be the end of the for loop. Like:

for i in 0..3

end # Then repeat

 

[AbyssalLord]

Ahh...that's what I missed.  Thanks khmp.