忍者ブログ
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。




2017/12/14 01:47 |
基本的なゲージ描画の解説
ゲージの描画は、見易さやデザイン的な彩りを考えると、どうしても避けては通れないファクターです。
ゲージ関連のスクリプト素材は色々なサイトで配布されていますが、
オリジナリティや、全体的なゲームの雰囲気との調和を考えた場合、
やはり自分で作ったものが一番しっくりくるでしょう。

しかしそれは、結局自分のゲームに合わせるものなので、
そのまま抜き出して他の場所で使うのはなかなか難しいです。汎用性に欠けるというか。
デフォにはない他のスクリプトに依存してたりね!

で、今回はとりあえず転用が比較的楽そうなステータスバーについて紹介してみようと思います。
かなり噛み砕いた解説です。分かってる人には読むまでもないです。
05ab3f6f.jpeg
 ←この緑の棒グラフ







まず、このバーを描画しているメソッドは、以下のようになっています。

#--------------------------------------------------------------------------
class Window_Base < Window
  #--------------------------------------------------------------------------
  # ● ステータスバーの描画
  #     actor: アクター
  #     x    : 描画先 X 座標
  #     y    : 描画先 Y 座標
  #     type : ステータスの種類
  #     length : 長さ(標準で160ピクセル)
  #--------------------------------------------------------------------------
  def draw_status_bar(actor, x, y, type, length = 160)
    
    目盛り1 =  Color.new(  0,   64,   0)
    目盛り2 =  Color.new( 28,  128,  28)
    目盛り3 =  Color.new(112,  192, 112)
    目盛り4 =  Color.new( 28,  192,  28)
    目盛り5 =  Color.new(  0,  128,   0)
    目盛り6 =  Color.new(  0,   96,   0)
    目盛り7 =  Color.new(  0,   32,   0)
    
    case type
    when 0
      基準値 = 1000
      数値 = actor.攻撃
      割合 = [Math::sqrt(数値) / Math::sqrt(基準値) , 1].min
      # Math::sqrt(p) => pの平方根
    when 1
      基準値 = 1000
      数値 = actor.敏捷
      割合 = [Math::sqrt(数値) / Math::sqrt(基準値) , 1].min
    when 2
      基準値 = 1000
      数値 = actor.守備
      割合 = [Math::sqrt(数値) / Math::sqrt(基準値) , 1].min
    when 3
      基準値 = 1000
      数値 = actor.霊力
      割合 = [Math::sqrt(数値) / Math::sqrt(基準値) , 1].min
    when 4
      基準値 = 1000
      数値 = actor.知性
      割合 = [Math::sqrt(数値) / Math::sqrt(基準値) , 1].min
    when 5
      基準値 = 1000
      数値 = actor.抵抗
      割合 = [Math::sqrt(数値) / Math::sqrt(基準値) , 1].min
    when 6
      基準値 = 1000
      数値 = actor.命中
      割合 = [Math::sqrt(数値) / Math::sqrt(基準値) , 1].min
    when 7
      基準値 = 1000
      数値 = actor.回避
      割合 = [Math::sqrt(数値) / Math::sqrt(基準値) , 1].min
    when 8
      基準値 = 100.0
      数値 = actor.必殺
      割合 = [数値 / 基準値 , 1].min
    when 9
      基準値 = 1000
      数値 = actor.愛
      割合 = [Math::sqrt(数値) / Math::sqrt(基準値) , 1].min
     
    end
    
      self.contents.fill_rect( x, y , length * 割合, 1, 目盛り1)
      self.contents.fill_rect( x, y + 1, length * 割合, 1, 目盛り2)
      self.contents.fill_rect( x, y + 2, length * 割合, 1, 目盛り3)
      self.contents.fill_rect( x, y + 3, length * 割合, 1, 目盛り4)
      self.contents.fill_rect( x, y + 4, length * 割合, 1, 目盛り5)
      self.contents.fill_rect( x, y + 5, length * 割合, 1, 目盛り6)
      self.contents.fill_rect( x, y + 6, length * 割合, 1, 目盛り7)   
   
  end
end
#--------------------------------------------------------------------------

 目盛り1 =  Color.new(  0,   64,   0)
 目盛り2 =  Color.new( 28,  128,  28)
 目盛り3 =  Color.new(112,  192, 112)
  …
この部分は、ゲージの色を上から順に設定しているだけ。
今回のゲージのデザインだと、太さが7ピクセルあるのでそれぞれの高さの色を設定しています。

次に、typeによって参照するステータスを分岐します。
アクターの能力値を参照するため、Game_Battler、もしくはGame_Actorで定義されている
各ステータスのメソッド名を引っ張ってこればOKです。
(この場合だと、 攻撃 とか 愛 とかのこと。デフォルトだと atk とか pdef とかです。
 Window_Baseの def draw_actor_parameter(actor, x, y, type) を参考にすれば分かり易いでしょう)

これで、draw_status_bar($game_actors[171], 25, 30, 2, 77)とか記述すれば、
記述したウィンドウの座標(25,30)に、アクター171の守備(type == 2)を表すバーが、最大長77ピクセルで
表示されるわけです。

バーの描画は、最下部のself.contents.fill_rectが並んでいる部分で行っています。
fill_rect( x, y , lx, ly, color)とは、その名の通り
座標(x,y)に、colorの色で(lx,ly)のサイズの矩形を描画します。
つまり、描画されるバーの長さは、 length * 割合 だということが判ると思います。

割合の計算は、基本的には「ステータスの現在値 / ステータスの限界値」でいいでしょう。
この場合だと、 攻撃 や 愛 等は限界値を1000とし、 必殺 のみ100としています。
現在の攻撃が 123 だと length * 123 / 1000 の長さのバーが表示されますし、
必殺が 80 だと length * 80 / 100 の長さのバーが表示されます。

ただ、私の場合は数値が低い場合に見た目で現れる長さの差を大きく取りたいため、
値の実数同士では比べていません。
値の平方根で長さを算出しています。
画像をよく見たら、攻撃が約140で知性が約70なのに、長さに倍も差は無い事が判るでしょう。
length * 140 / 1000 ではなく、 length * √140 / √1000 になっているためです。
スクリプト中にコメントアウトしてメモってますが、 Math::sqrt(p)  は p の平方根です。

純粋に現在値の最大値に対する割合をとりたいなら、
必殺 (type == 8)で使われているような計算方法にすれば良いです。
PR

2008/12/31 06:44 | Comments(0) | TrackBack(0) | テクニック

トラックバック

トラックバックURL:

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<バージョン0.2 問題点まとめ | HOME | XPのRTPサイズ歩行グラ その4(衣玖) >>
忍者ブログ[PR]