気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM、VOCALOIDについてのんびり書きます。

【RGSS】メニュー画面へのメーター描画スクリプト

久々のRGSS記事です。

今回は、HPやMPの状態を表す「メーター」を描画するスクリプトを作ってみました。

だいたいこんな感じ
meter_20110904

上記の図では、現在のHPと最大HPの割合で、色付きメーターが表示されています。

ではでは、実際のスクリプトを見ていきましょう。

  1. #--------------------------------------------------------------------------
  2. # ▲ メーター描画
  3. # frame_c : 外枠の色
  4. # base_c : メーターの下地色
  5. # float_c : 浮動メーター色
  6. #--------------------------------------------------------------------------
  7. def draw_meter_param(width, height, value, max_value, frame_c, base_c, float_c)
  8. # 外枠メーター
  9. @bmp_frame = Bitmap.new(width, height)
  10. @bmp_frame.fill_rect(0, 0, width, height, frame_c)
  11. # メーター下地
  12. @bmp_base = Bitmap.new(width, height)
  13. @bmp_base.fill_rect(2, 2, width + 2, height - 2, base_c)
  14. # 浮動メーター
  15. @meter_value = @bmp_frame, "base" => @bmp_base, "float" => @bmp_float}end

    なんかごちゃごちゃ書いてます。
    以下にこのスクリプトの概要を挙げます。

    ・メーターを作成する際に、部品ごとに作成する
    ・部品には、外枠・下地・浮動 の3つがある
    ・外枠・下地・浮動の順で、表示する
    ・ハッシュにまとめたメーター部品を戻り値とする

    ●使い方
    1.Window_Baseの262行目あたりに、上記スクリプトを突っ込みます。
    2.draw_actor_hpメソッドを探します。
    3.下記のスクリプトを見つけます。
    # MaxHP を描画
    if flag
    self.contents.font.color = normal_color
    self.contents.draw_text(hp_x + 48, y, 12, 32, "/", 1)
    self.contents.draw_text(hp_x + 60, y, 48, 32, actor.maxhp.to_s)
    end
    4.その下で改行し、下記スクリプトを追記します(X座標、Y座標、サイズ等々は変更する必要があります)
    #HPメータの描画
    hp_wd = 120
    hp_ht = 14
    hp_y = y + 28

    # 枠、基盤、浮動部分を取得
    @hp_meters = draw_meter_param(hp_wd, hp_ht, actor.hp, actor.maxhp,Color.new(105,105,105), Color.new(225,225,225), Color.new(198, 96, 13">*1

    @hp_f_rect = Rect.new(0,0,hp_wd,hp_ht)
    self.contents.blt(x, hp_y, @hp_meters["frame"], @hp_f_rect)
    @hp_b_rect = Rect.new(0,0,hp_wd-2 , hp_ht-2)
    self.contents.blt(x, hp_y, @hp_meters["base"], @hp_b_rect)
    @hp_fl_rect = Rect.new(0, 0, hp_wd-2, hp_ht-2)
    self.contents.blt(x, hp_y, @hp_meters["float"], @hp_fl_rect)

draw_meter_paramメソッドは以下のような引数になっています。
draw_meter_param(
width:メーター横幅,
height:メーター縦幅,
value:値,
max_value:最大値
frame_c:外枠の色
base_c:下地の色
float_c:浮動メーターの色
)

draw_meter_paramにて、それぞれのメーター部品を作成した後、
外枠用、下地用、浮動用の矩形(Rect)を作成し、
self.contents.bltにて、X座標・Y座標を指定することで、メーターが画面に現れます。

@hp_metersという変数には、作成したメーター部品が参照されているため、
@hp_meter["frame"]等でメーターを使うことができます。すごく便利。

スクリプトについては、ご自由にお持ちください。
しかしながら、試作ということもあり、動作は保障できかねます。
ごめんなさい。

色々と勉強になったスクリプトでした。

ボーマス(VOCALOID MASTER17)に行けなかったため、若干自棄になって作った。

以上となります。

あ、ついでですが、本日アップしたボカロ曲も宜しくお願いしますw
初音ミクDarkオリジナル曲「BlaNK memories-another」

*1:value.to_f / max_value.to_f) * width).to_i

  • if value <= 0
  • @meter_value = 1
  • end
  • @bmp_float = Bitmap.new(@meter_value, height)
  • @bmp_float.fill_rect(2, 2, @meter_value + 2, height - 2, float_c)
  • return {"frame" => @bmp_frame, "base" => @bmp_base, "float" => @bmp_float}
  • end
  • なんかごちゃごちゃ書いてます。 以下にこのスクリプトの概要を挙げます。 ・メーターを作成する際に、部品ごとに作成する ・部品には、外枠・下地・浮動 の3つがある ・外枠・下地・浮動の順で、表示する ・ハッシュにまとめたメーター部品を戻り値とする ●使い方 1.Window_Baseの262行目あたりに、上記スクリプトを突っ込みます。 2.draw_actor_hpメソッドを探します。 3.下記のスクリプトを見つけます。

    # MaxHP を描画 if flag self.contents.font.color = normal_color self.contents.draw_text(hp_x + 48, y, 12, 32, "/", 1) self.contents.draw_text(hp_x + 60, y, 48, 32, actor.maxhp.to_s) end

    4.その下で改行し、下記スクリプトを追記します(X座標、Y座標、サイズ等々は変更する必要があります)

    #HPメータの描画 hp_wd = 120 hp_ht = 14 hp_y = y + 28 # 枠、基盤、浮動部分を取得 @hp_meters = draw_meter_param(hp_wd, hp_ht, actor.hp, actor.maxhp,Color.new(105,105,105), Color.new(225,225,225), Color.new(198, 96, 13