RGSS-HP・SPゲージ表示

カテゴリ: 投稿日: 2012-08-23
«RGSS一覧

数値だけでなく、視覚的にHPやSPの増減を表現したい!
そう思う人も少なくはないはず。
なので今回はHP・SPゲージの作成方法を教えます。

画像いらずの表示方法(塗りつぶし)と、
画像で表示する方法があるので
自分に合った表示方法で作りましょう。



【今回の変更点】
・Window_Base

【スクリーンショット】
スクリプトの「塗りつぶし」で作成したHP・SPバー。
残量によって色が変化するようにしている。画像を用意する必要がないので手軽に作れる


グラデーションした画像を使用したHPバー
後ろは上のスクリーンショットと同じく塗りつぶしで表示




■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ゲージがダメージに被さってしまって
見辛い状況になる可能性があります

なので以前書いた記事の
アローカーソル・ダメージ表示修正」のように
ダメージの表示にビューポートを通さないようにすると見やすくなるかと思います。
参考までに。



★このスクリプトを使った関連作品