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

プログラミングやRPGツクール、DTM等について、学んだことや備忘録をアウトプットとして残し、情報を必要としている誰かにとって「かゆいところに手が届く」ツールでありたいという願いを込めつつ、記事を書きます。

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

RPGツクールXPに関する記事となります。

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

イメージとしてはこんな感じです。
f:id:rinne_grid2_1:20180413213925p:plain

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

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

#--------------------------------------------------------------------------
# ▲ メーター描画
# frame_c : 外枠の色
# base_c : メーターの下地色
# float_c : 浮動メーター色
#--------------------------------------------------------------------------
 def draw_meter_param(x, y, width, height, value, max_value, frame_c, base_c, float_c, frm_size_list=nil)
    # 外枠サイズのデフォルト値設定
    frame_side_bold = 1
    frame_height_bold = 1
    
    # 外枠サイズの指定があった場合、値を更新
    if frm_size_list != nil && frm_size_list.size == 2
      frame_side_bold = frm_size_list[0] * 2
      frame_height_bold = frm_size_list[1] * 2
    end    
    
    # 外枠メーター
    frame = Bitmap.new(width, height)
    frame.fill_rect(0, 0, width, height, frame_c)
    
    # メーター下地
    base = Bitmap.new(width-frame_height_bold, height-frame_side_bold)
    base.fill_rect(0, 0, width, height, base_c)

  
    # 浮動メーターの現在値から、表示するメーター幅のRect値を算出
    meter_value = ((value.to_f / max_value.to_f) * (width-frame_height_bold)).to_i
    if meter_value <= 0
      meter_value = 1

    end
    
    float = Bitmap.new(meter_value, height-frame_side_bold)
    #float_c2 = Color.new(float_c.red, float_c.green + 100, float_c.blue + 100)
    
    float.fill_rect(0, 0,meter_value,height, float_c[0])
    #float.gradient_fill_rect(0, 0, meter_value, height, float_c[0], float_c[1], false, 10)
    
    # メーター外枠部分を考慮し、floatとbaseのx,y座標を算出
    fb_x    = x + (frame_height_bold/2).round
    fb_y    = y + (frame_side_bold/2).round
 
    # frameのRectサイズ
    f_rect_width = frame.width
    f_rect_height = frame.height
    
    # baseのRectサイズ
    b_rect_width = base.width
    b_rect_height = base.height
    
    # floatのRectサイズ 算出したmeter_valueを利用
    fl_rect_width = meter_value
    fl_rect_height = float.height
    
     # frame用Rect
    f_rect  = Rect.new(0,0, f_rect_width, f_rect_height)
    
    # base用Rect
    b_rect  = Rect.new(0,0, b_rect_width, b_rect_height)
    
    # float用Rect
    fl_rect = Rect.new(0,0,fl_rect_width, fl_rect_height)
    
    return {"frame" => frame, "f_rect" => f_rect, 
            "base" => base,   "b_rect" => b_rect,
            "float" => float, "fl_rect" => fl_rect,
            "fb_x" => fb_x, "fb_y" => fb_y}  
  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))
@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"]等でメーターを使うことができます。すごく便利。

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

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


以上となります。