Introduction
I made this script because I wanted a gradient bar that didn't require a huge chunk of code to implement. This script creates a gradient bar that starts at a color and fades into white (or another color). You can call it from anywhere in your game where you want to display a gradient bar. From battle, from the menu, wherever. All you have to do is call the following function, draw_bar.
Create draw_bar
In this section, we will create the gradient bar.
1. Open your game and script editor.
2. Add the following script at the end of Window_Base.
CODE
#--------------------------------------------------------------------------
# ● Draw a gradient bar
# actor : actor assigned to the bar
# x : X coordinate of the upper-left pixel of the bar
# y : Y coordinate of the upper-left pixel of the bar
# bar_width : width of the bar
# bar_height : height of the bar
# current : current value to compare (eg. hp, sp, exp)
# max : max value to compare (eg. max hp, max sp, max exp)
# color : base color to use (eg. text_color(5))
#--------------------------------------------------------------------------
def draw_bar(actor, x, y, bar_width, bar_height, current, max, color)
adj_width = bar_width - 4
adj_height = bar_height - 4
# outline of bar
border_color = Color.new(255, 255, 255, 255)
self.contents.fill_rect(x + 3, y + 8, bar_width, bar_height, border_color)
# background of bar
background_color = Color.new(0, 0, 0, 255)
self.contents.fill_rect(x + 5, y + 10, adj_width, adj_height, background_color)
# current bar
if max != 0
percent = (current * 100) / max
adj_width = (adj_width * percent) / 100
for i in 1..adj_width
color.red += 1
color.blue += 1
color.green += 1
self.contents.fill_rect(x + 5, y + 10, adj_width, adj_height, color)
x += 1
adj_width -= 1
end
end
end
# ● Draw a gradient bar
# actor : actor assigned to the bar
# x : X coordinate of the upper-left pixel of the bar
# y : Y coordinate of the upper-left pixel of the bar
# bar_width : width of the bar
# bar_height : height of the bar
# current : current value to compare (eg. hp, sp, exp)
# max : max value to compare (eg. max hp, max sp, max exp)
# color : base color to use (eg. text_color(5))
#--------------------------------------------------------------------------
def draw_bar(actor, x, y, bar_width, bar_height, current, max, color)
adj_width = bar_width - 4
adj_height = bar_height - 4
# outline of bar
border_color = Color.new(255, 255, 255, 255)
self.contents.fill_rect(x + 3, y + 8, bar_width, bar_height, border_color)
# background of bar
background_color = Color.new(0, 0, 0, 255)
self.contents.fill_rect(x + 5, y + 10, adj_width, adj_height, background_color)
# current bar
if max != 0
percent = (current * 100) / max
adj_width = (adj_width * percent) / 100
for i in 1..adj_width
color.red += 1
color.blue += 1
color.green += 1
self.contents.fill_rect(x + 5, y + 10, adj_width, adj_height, color)
x += 1
adj_width -= 1
end
end
end
Example
Now that you have created your gradient bar function, you need to call it in your script. A good place to call it could be from Window_MenuStatus, which draws the HP/MAX HP and SP/MAX SP for each character in the main menu.
The following example is from Window_MenuStatus in the refresh function. There are several examples in here that show you how to call draw_bar:
CODE
#--------------------------------------------------------------------------
# * Refresh
#--------------------------------------------------------------------------
def refresh
self.contents.clear
@item_max = $game_party.actors.size
for i in 0...$game_party.actors.size
@leader = ""
x = 40
y = i * 80
actor = $game_party.actors[i]
draw_actor_graphic(actor, x-25, y + 60)
draw_actor_name(actor, x, y)
draw_actor_class(actor, x, y + 15)
draw_bar(actor, x + 140, y, 120, 16, actor.hp, actor.maxhp, text_color(3))
draw_actor_hp(actor, x + 115, y)
draw_bar(actor, x + 140, y + 20, 120, 16, actor.sp, actor.maxsp, text_color(4))
draw_actor_sp(actor, x + 115, y + 20)
draw_actor_state(actor, x + 280, y + 20)
draw_actor_level(actor, x + 280, y + 40)
end
# * Refresh
#--------------------------------------------------------------------------
def refresh
self.contents.clear
@item_max = $game_party.actors.size
for i in 0...$game_party.actors.size
@leader = ""
x = 40
y = i * 80
actor = $game_party.actors[i]
draw_actor_graphic(actor, x-25, y + 60)
draw_actor_name(actor, x, y)
draw_actor_class(actor, x, y + 15)
draw_bar(actor, x + 140, y, 120, 16, actor.hp, actor.maxhp, text_color(3))
draw_actor_hp(actor, x + 115, y)
draw_bar(actor, x + 140, y + 20, 120, 16, actor.sp, actor.maxsp, text_color(4))
draw_actor_sp(actor, x + 115, y + 20)
draw_actor_state(actor, x + 280, y + 20)
draw_actor_level(actor, x + 280, y + 40)
end
Change Gradient
By default, the code I provided makes a gradient that fades to a lighter color. Alternatively, you could have the gradient bar fade into a different color. To make this change, play around with color.red, color.blue, and color.green in the first section of code I provided. (Or just comment one or two of them out.)
