数値だけでなく、視覚的にHPやSPの増減を表現したい！
そう思う人も少なくはないはず。
なので今回はHP・SPゲージの作成方法を教えます。
画像いらずの表示方法（塗りつぶし）と、
画像で表示する方法があるので
自分に合った表示方法で作りましょう。
【今回の変更点】
【スクリーンショット】
残量によって色が変化するようにしている。画像を用意する必要がないので手軽に作れる
後ろは上のスクリーンショットと同じく塗りつぶしで表示
■Window_Base
支障がなければ（どちらの表示の仕方も）
「HP の描画」「SP の描画」に追加するだけです。
以下、描画のみの画像いらずバージョンです。
base_color = Color.new(赤, 緑, 青, 透明度)
hp_color = actor.hp <= actor.maxhp / 4 ? Color.new(200, 0, 0) :
actor.hp <= actor.maxhp / 2 ? Color.new(200, 200, 0) : Color.new(0,0,200)
self.contents.fill_rect(横位置, 縦位置, 横幅, 縦幅, base_color)
self.contents.fill_rect(横位置, 縦位置, actor.hp * 横幅 / actor.maxhp, 縦幅, hp_color)
spの場合はactor.hp、maxhpを
actor.sp、maxspに変更するだけです。
base_colorでの表示はゲージの後ろの方…
HPやSPが減ったら見える部分です（・ω・）
スクリーンショットを見ていただければ多分、わかると思いますが。
それから、上記の例では最大HPの1/2になると黄色に
1/4になると赤色にメインゲージの色が
変化するようになっています。
こちらもスクリーンショットを参考にしていただければ。
ちなみに上のスクリーンショットに写っているゲージですが
base_colorの縦幅・横幅をメインより+2して、
メインの縦、横位置に+1してベースで
ゲージに「囲い」みたいになるように作っています。
いらなかったらそのままでいいと思います。
以下は、画像使用バージョンです。
bitmap = Bitmap.new("Graphics/Pictures/HP・SPゲージ用画像名")
src_rect = Rect.new(0, 0, actor.hp * bitmap.width / actor.maxhp, bitmap.height)
self.contents.blt(横位置, 縦位置, bitmap, src_rect)
後ろの黒い部分（画像素材なしのベースカラー部分）を
作りたい場合は、描画のみバージョンのベースゲージ参照。
メインと同じく画像で表示させるのもいいかと思います。
どちらも計算は
「現在のHP×横幅÷HP最大値」
これで減ったらHPの％分減り、増えたら増えます。
画像表示は必ず、後ろに表示させたいものから
記述してあげる必要があります。
例えば、
前に表示したいメインゲージ
後ろにするベースゲージ
の順番だと、ベースバーがメインゲージに被ってしまいます。
被る、といえば。
ダメージの表示位置がデフォルトのままだと
HP・SPゲージがダメージに被さってしまって
見辛い状況になる可能性があります。
なので以前書いた記事の
「アローカーソル・ダメージ表示修正」のように
ダメージの表示にビューポートを通さないようにすると見やすくなるかと思います。
参考までに。