ゲージの作り方

[ヒューガ]

モンハンの体力ゲージのようなゲージを作りたいのですが
たとえばモンハンだと緑色の部分にあたるところがはみ出てしまいます。
はみ出ないように作ることはできますか？

[みけCAT]

これだけではわかりません。
フォーラムルールをお読みください。

[ヒューガ]

ごめんなさい
http://blog-imgs-53.fc2.com/p/h/a/phant ... 4148c1.jpg
赤がゲージ枠
緑が体力バー
青がゲージ空の部分
として見てください。
緑色の部分を左右に動かせばいいと思っていましたが
画面端じゃないので緑色が外に出ているのが見えてしまいます。
はみ出ないようにするにはどうすればいいでしょうか？

[みけCAT]

使用しているOS、言語、開発環境、ライブラリなどを教えてください。

はみ出ないようにするにはどうすればいいでしょうか？

はみ出ないようなプログラムを組めばいいです。

[ヒューガ]

Win764bit
C言語
MicroSoftVisualC++2010Express
DXライブラリ
です

[みけCAT]

ゲージの左端の座標をa、最大の時の右端の座標をb、
ゲージが示したい値の最小値をc、最大値をd、現在の値をeとすると、
aからa+(b-a)*(e-c)/(d-c)までの範囲にゲージを描画すればよいです。

[ヒューガ]

やり方がわからないのですが・・・

[みけCAT]

こんな感じです。
上下キーで値を変えられます。

コード:

#include "DxLib.h"

char Key[256];

int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance,LPSTR lpCmdLine, int nCmdShow ){
	if( ChangeWindowMode(TRUE) != DX_CHANGESCREEN_OK || DxLib_Init() == -1 ) return -1; //初期化処理
	SetDrawScreen( DX_SCREEN_BACK );        //裏画面に設定

	int gezi_min_x=100;
	int gezi_max_x=540;
	int gezi_min_y=100;
	int gezi_max_y=150;
	
	int gezi_min_num=0;
	int gezi_max_num=300;
	int gezi_now_num=0;

	int frame=0;

	while(!ProcessMessage() && !ClearDrawScreen() && !GetHitKeyStateAll( Key ) && !Key[KEY_INPUT_ESCAPE]){
		//↑ﾒｯｾｰｼﾞ処理         ↑画面をｸﾘｱ          ↑ｷｰﾎﾞｰﾄﾞ入力状態取得       ↑ESCが押されていない

		//ココに処理を書いていく
		
		//ゲージの描画 
		DrawBox(gezi_min_x,gezi_min_y,gezi_max_x,gezi_max_y,GetColor(0,0,255),true);
		DrawBox(gezi_min_x,gezi_min_y,
		gezi_min_x+(gezi_max_x-gezi_min_x)*(gezi_now_num-gezi_min_num)/(gezi_max_num-gezi_min_num),
		gezi_max_y,GetColor(0,255,0),true);
		DrawBox(gezi_min_x,gezi_min_y,gezi_max_x,gezi_max_y,GetColor(255,0,0),false);
		
		//ゲージの値の変更
		DrawFormatString(100,200,GetColor(255,255,255),"%d",gezi_now_num);
		if(Key[KEY_INPUT_UP] && frame%2==0 && gezi_now_num<gezi_max_num)gezi_now_num++;
		if(Key[KEY_INPUT_DOWN] && frame%2==0 && gezi_now_num>gezi_min_num)gezi_now_num--; 
		frame++;

		ScreenFlip();//裏画面を表画面に反映
	}

	DxLib_End();
	return 0;
}

[ヒューガ]

あー・・・ごめんなさい
http://blog-imgs-53.fc2.com/p/h/a/phant ... 9185c4.png
これの水色の部分を増やしたり減らしたり
長方形じゃないんです・・・

[softya（ソフト屋)]

出来ないことは無いですが面倒ですね。
(準備)ロケットの形をグラフィックツールで作る。
(1)ロケット画像を読み込む
(2)Ｚバッファを使ったマスクを作成してロケットの形に書き換え可能にする。
「キャラがダメージを受けた時の点滅について • C言語交流フォーラム　～ mixC++ ～」　参考。
http://dixq.net/forum/viewtopic.php?t=9 ... 319#p78315

(3)みけCATさんの方法でメーターを描画(ロケットの形に描画される)
(4)Ｚバッファを無効にする

[補足]
もしロケットの形がシンプルなら、DrawTriangleで三角形を組み合わせて描画するという方法もあります。
こちらの方が概念的には簡単です。三角形を組み合わせるのは面倒ですけどね。

[みけCAT]

作ってみました。
座標の意味は画像を参考にしてください。
cBackが背景色、cDispが「水色の部分」の色、cLineが枠線の色です。

座標の説明です。

explain.png (4.82 KiB) 閲覧数: 9174 回

コード:

#include "DxLib.h"

void DrawRocketGauge(int x1,int x2,int x3,int x4,int x5,
		int y1,int y2,int y3,int y4,
		int cBack,int cDisp,int cLine,
		float min,float max,float now) {
	//万一のため
	if(now<min)now=min;
	else if(now>max)now=max;
	//とりあえず全体を塗る
	DrawTriangle(x2,y2,x3,y1,x4,y2,cDisp,true);
	DrawTriangle(x1,y4,x2,y3,x2,y4,cDisp,true);
	DrawTriangle(x4,y3,x5,y4,x4,y4,cDisp,true);
	DrawBox(x2,y2,x4,y4,cDisp,true);
	//溜まっていない部分を背景色で塗る
	int drawYMax=y1+(int)((y4-y1)*(max-now)/(max-min));
	if(drawYMax<y2) {
		DrawTriangle(x3,y1,
			x3-(x3-x2)*(drawYMax-y1)/(y2-y1),drawYMax,
			x3+(x4-x3)*(drawYMax-y1)/(y2-y1),drawYMax,
			cBack,true);
	} else if(drawYMax<y3) {
		DrawTriangle(x2,y2,x3,y1,x4,y2,cBack,true);
		DrawBox(x2,y2,x4,drawYMax,cBack,true);
	} else {
		DrawTriangle(x2,y2,x3,y1,x4,y2,cBack,true);
		DrawBox(x2,y2,x4,drawYMax,cBack,true);
		DrawTriangle(x2,y3,
			x2-(x2-x1)*(drawYMax-y3)/(y4-y3),drawYMax,
			x2,drawYMax,cBack,true);
		DrawTriangle(x4,y3,
			x4+(x5-x4)*(drawYMax-y3)/(y4-y3),drawYMax,
			x4,drawYMax,cBack,true);
	}
	//枠線の描画 
	DrawLine(x1,y4,x2,y3,cLine);
	DrawLine(x2,y2,x2,y4,cLine);
	DrawLine(x2,y2,x3,y1,cLine);
	DrawLine(x3,y1,x4,y2,cLine);
	DrawLine(x4,y2,x4,y4,cLine);
	DrawLine(x4,y3,x5,y4,cLine);
	DrawLine(x1,y4,x5,y4,cLine);
}

char Key[256];

int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance,LPSTR lpCmdLine, int nCmdShow ){
	if( ChangeWindowMode(TRUE) != DX_CHANGESCREEN_OK || DxLib_Init() == -1 ) return -1; //初期化処理
	SetDrawScreen( DX_SCREEN_BACK );        //裏画面に設定

	SetBackgroundColor(16,82,181);//背景色を設定 

	int gauge_min=0;
	int gauge_max=300;
	int gauge_now=0;

	while(!ProcessMessage() && !ClearDrawScreen() && !GetHitKeyStateAll( Key ) && !Key[KEY_INPUT_ESCAPE]){
		//↑ﾒｯｾｰｼﾞ処理         ↑画面をｸﾘｱ          ↑ｷｰﾎﾞｰﾄﾞ入力状態取得       ↑ESCが押されていない

		//ゲージの値の変更
		if(Key[KEY_INPUT_UP] && gauge_now<gauge_max)gauge_now++;
		if(Key[KEY_INPUT_DOWN] && gauge_now>gauge_min)gauge_now--;
		DrawFormatString(100,350,GetColor(255,255,255),"%d/%d",gauge_now,gauge_max);

		//ゲージの描画 
		DrawRocketGauge(100,130,180,230,260,
			100,150,250,330,
			GetColor(255,255,255),GetColor(153,217,234),GetColor(0,0,0),
			gauge_min,gauge_max,gauge_now);

		ScreenFlip();//裏画面を表画面に反映
	}

	DxLib_End();
	return 0;
}

[nil]

あんまりいい例ではないかもしれませんが、
ゲージの元になる画像(緑)をLoadDivGraphを使って、1pixelごとに分割して読み込み
体力に応じてループ処理で描画

みたいなのはどうですかね

[softya（ソフト屋)]

一色だけの単純メーターなら、空と満タンの２つの画像を用意してDrawRectGraphで合成はできますね。　←　今思いつきました。
これならDrawRectGraphを2回呼び出すだけです。

[ヒューガ]

softya（ソフト屋)さんの方法を採用させていただきました！
ありがとうございました！