お豆腐のふにふ日記

LINEのTL代わりに犠牲となったメモ帳

dxlibの隠し関数 DrawCircleGaugeを使ってhp量に合わせて色が変わる円形体力ゲージの作り方

チーム制作でゲームを作っているときにタイトル通りのものを作ったのでメモを残しておこうかなと

そもそもDrawCircleGaugeの情報があんまりない感じがしたので何かの役に立てばいいかなと

int DrawCircleGauge( int CenterX, int CenterY, double Percent, int GrHandle, double StartPercent = 0.0 ) ;// 円グラフ的な描画を行う( GrHandle の画像の上下左右の端は透過色にしておく必要があります )

非公式のリファレンスにはこのように書かれていますね

引数は順番に 描画する円の中心X,Y 描画する大きさ(0~100%) 画像ハンドル どこから円を描画するか(0が時計でいう12時のところ)

 

ではまず円形の体力ゲージではなく、長方形の体力ゲージを作ってみましょう

 

int hpゲージの横幅 = 200, 体力 = 100, 体力の最大値 = 100, HpGauge = 0; 


HpGauge = hpゲージの横幅*体力 / 体力の最大値;

DrawBox(50, 50, 50 + HpGauge, 70, GetColor(0, 255, 0), true);

 

とまあ、こんな感じですかね

日本語変数は説明のために使っているだけです 各自で英語に直してくださいね

今の状態で体力を減らせばゲージも減ると思います

では体力に合わせて色を変えていきましょう

色の変わり方って緑から赤に変わっていくじゃないですか

RGBでみたら緑(0、255、0)赤(255、0,0)

では体力が50%の時ってどうなっているか分かります?

答えは(255,255,0)です

何が言いたいかっていうと、100%~50%までは赤の値を加算していって50%~0%で緑の値を引いていけばいいですよね?

if文を使って書いていきたいところですけどもHSVって知っていますか?色相環っていうやつを回すだけで色が変わるんですね

んで今回はHの値だけいじっていきます(わからない人はHSVで調べてね)

Rで256 Gで256の値があるから適当に両方足してみればなんとかなるだろうって思って書いたのがこちら

 

int hpゲージの横幅 = 200, 体力 = 100, 体力の最大値 = 100, HpGauge = 0;

float H;

H = 体力*(512.0f / 体力の最大値);

unsigned int R = min(max((384 - H), 0), 0xff);

unsigned int G = min(max((H + 64), 0), 0xff);

unsigned int B = max((H - 384), 0);

HpGauge = hpゲージの横幅*体力 / 体力の最大値;

DrawBox(50, 50, 50 + HpGauge, 70, GetColor(R, G, B), true);

 

でもこれだと緑はなんか青っぽいし赤になりませんよね

適当にいじってたらそれっぽくなったのがH = 体力*(512.0f / 体力の最大値);をいじったんですよ

H = 体力*(512.0f / 体力の最大値)-100;

100引いてみてください(なんかいい感じになるから

 

はい、これで長方形のHpゲージは完成ですね(画像でやりたいって人はDrawExtendGraphを使ってみてください)

 

ここから円形ゲージに移ります

DrawCircleGaugeを使用するにはドーナツみたいな画像を用意する必要があります

          f:id:tohyaki:20180203232536p:plain

こんな感じのやつ

まずは表示してみましょう

DrawCircleGauge(200, 200, 360, HpImage, 0);

とか書けば表示されるはずです

 

では色が変わるようにしましょう

今回はSetDrawBrightを使います(画面の輝度をRGB指定して変える)

長方形の時に色を変えましたよね?そのRGBを入れてあげましょう

輝度で色を変えますので用意する画像は白にしてくださいね

 

SetDrawBright(R, G, B);

DrawCircleGauge(200, 200, 360, HpImage, 0);

SetDrawBright(255, 255, 255);

 

最後に輝度を戻すのを忘れないようにしてください 画面全体の色が変わってしまいます

はい、色の変わる円形のHpゲージが完成したと思います

念のために貼っておきます

 

int hpゲージの横幅 = 200, 体力 = 100, 体力の最大値 = 100, HpGauge = 0; 

float H;
H = 体力*(512.0f / 体力の最大値)-100;

unsigned int R = min(max((384 - H), 0), 0xff);

unsigned int G = min(max((H + 64), 0), 0xff);

unsigned int B = max((H - 384), 0);
HpGauge = hpゲージの横幅*体力 / 体力の最大値;

SetDrawBright(R, G, B);

DrawCircleGauge(200, 200, 360, HpImage, 0);

SetDrawBright(255, 255, 255);

 

 今回はこの辺で終わりにしたいと思います