RPGのマップ表示の仕方

[史上最悪のデスペナ]

たとえばこんなマップがあるとして、

例.PNG (15.5 KiB) 閲覧数: 11452 回

このマップを未探検のときは以下のようにマップが表示されます

例-最初.PNG (8.13 KiB) 閲覧数: 11452 回

しかし、次のようにキャラが移動するとマップが徐々に表示されていきます

例-結果.PNG (16.5 KiB) 閲覧数: 11452 回

こういうのをDXLib＆C++で作りたいのですがどのようにしたらいいか教えてください。
画像の表示は出来ますが、方法が全く思いつきません。

[beatle]

RPGマップ

rpg_map.png (9.53 KiB) 閲覧数: 11436 回

ではないのですか？（左下の形について）

[ふりかけ]

DXライブラリは使った事ないのですが、方針の助けになれば・・・

普段は表画面用と裏画面用に2枚のキャンバス（描画可能領域）を使っていると思います。
これにマスクデータ用と探索済みマップ（あなたの3枚目の画像のような）用に2枚のキャンバスを追加します。

マスクデータにはプレイヤーキャラクターの視野を（たぶん白黒で）描画します。それを真のマップ（1枚目の画像のような）
と合成します。これで今見えている地形が作れると思います。

これを探索済みマップ用のキャンバスに描画します（スプライトのように透過色を利用して）。

具体的な関数は MakeScreen, SetDrawBlendMode 辺りでしょうか、調べてみてください。

[non]

マップをどのように作っているのかで考え方が変わります。
たとえば、マップを縦横の格子状に区切り、マップチップを組み合わせて
作っているのなら、可視か不可視のフラグをデータに持たせる方法をとります。

最初に添付されているように可視範囲が円であらわされているなら、ふりかけさんの
ような考え方になるかもしれません。

[史上最悪のデスペナ]

マップという言葉が適切じゃなかったですかね？ステージを指すマップではなく、簡易地図の方のマップというつもりでした。申し訳ありません

>>beatleさん
はい。確かにその通りでした。

>>ふりかけさん
ん～・・・・・おっしゃりたいことは多分（？）分かりました。しかしプログラムをどう組めばいいのか・・・・・
今の自分のレベルだとおそらく

マスクデータにはプレイヤーキャラクターの視野を（たぶん白黒で）描画します。それを真のマップ（1枚目の画像のような）
と合成します。これで今見えている地形が作れると思います。

ここは一瞬一瞬なら作れると思います。暗闇の中をキャラの周りだけが明るくなるステージみたいな状況です。

これを探索済みマップ用のキャンバスに描画します（スプライトのように透過色を利用して）。

たぶんここが無理です。

>>nonさん

マップをどのように作っているのかで

３DRPGを作ってるので、ステージを真上から見た状態をPrntScrしてマップを作りました。

[softya（ソフト屋)]

次のことを実現する必要がありますね。
(1)キャラの範囲で見える状態を記録していく。　→　画像データの形？
(2)見れる範囲だけの画像を部分表示する。

(1)に関しては、MakeScreen()で専用のバッファを作ってそちらに描画すれば良いと思います。
白いので塗りつぶして見える部分だけは透明の円で塗りつぶせれば良いですかね。透明の円で塗りつぶせるのかと言うのが問題ですが。
(2)に関しては、縮小マップの上に(1)で作った画像を重ねれば良いと思います。

あるいは、マスク系を使って
(1)自分でマスク画像を作成。円塗りつぶしを自分で行う。
(2)マスクを使って縮小マップを繰り抜き描画。

あるいはＺバッファを上手く使って繰り抜くか。
「Draw○○ToZBuffeｒ関数系はどう使いますか？」
http://hpcgi2.nifty.com/natupaji/bbs/pa ... ew&no=1317

どちらにしろ色々大変です。

[史上最悪のデスペナ]

むむ・・・・・なかなか難しそうですね・・・・・・・・・
解決にチェックを入れるかどうか迷うところです・・・・・・・

[softya（ソフト屋)]

他の人の参考にもなるので出来たコードを貼れるまで行って欲しいですね。
ちなみにマスク系はリファレンスにも書いてありますが重いです。

[史上最悪のデスペナ]

他の人の参考にもなるので出来たコードを貼れるまで行って欲しいですね。

が・・・・頑張ります。

[史上最悪のデスペナ]

ここまで出来たので見ていただけますでしょうか？
test.exeを起動していただければ大丈夫です。
カーソルキーで小さな赤丸が移動します（画面外に移動しないようにはしてません）。かなり小さいです（数ドットサイズ）
Mで肌色のブラインド用画面が現れ、キャラを動かすとそれにそって黒丸が動きます
黒丸が動いたとこは透明となってブラインド画面の下にある画像が透けて見えます。

あとは黒丸を表示しないようにするのと、黒丸の通った後の縞縞を無くすことですが上手く出来ません。また、ブラインド用画像の保存は出来るのですが上書きがされません。

使用したのは非公開関数
DxLib.h内
3027行目

コード:

extern int LoadSoftImage( const TCHAR *FileName ) ; // ソフトウエアで扱うイメージの読み込み( -1:エラー  -1以外:イメージハンドル )

3060行目

コード:

extern int BltSoftImageWithTransColor( int SrcX, int SrcY, int SrcSizeX, int SrcSizeY, int SrcSIHandle, int DestX, int DestY, int DestSIHandle, int Tr, int Tg, int Tb, int Ta ) ; // ソフトウエアで扱うイメージを透過色処理付きで転送する

3075行目

コード:

extern int DrawSoftImage( int x, int y, int SIHandle ) ; // ソフトウエアで扱うイメージを画面に描画する

です。

[softya（ソフト屋)]

色々問題がありそうですが、あとで対策を考えてみます。

[史上最悪のデスペナ]

よろしくお願いします

[softya（ソフト屋)]

この方法だと解決は難しそうです。
ＤＸライブラリで出来るだけ高速に出来る方法を考えてみます。

[史上最悪のデスペナ]

お手数をおかけします。

[softya（ソフト屋)]

MakeScreenで作ったアルファチャンネル付きのスクリーンを円形で透明に切り抜くことで実現しました。
雑なコードなのでリファインをお願いしますね。

ここを参考にしました。↓
「MakeGraph() による背景の透明化」
http://hpcgi2.nifty.com/natupaji/bbs/pa ... ew&no=2278

無理やり１ファイルにしてあります。フォルダがdata2になっています。セーブする画像のファイル名がblind2.pngです。

コード:

#include "DXLib.h"

struct S_CharaData
{
	int X, Y;
};

class C_Test {

	int CharaHandle, MapHandle;
	int ScHandle;
	S_CharaData CharaData;
	int KeyCnt;
	int MapFlag;

public:

	void Load(void);
	void InIt(void);
	void Move(char *KeyBuf);
	void Draw(char *KeyBuf);
	void Save(void);
};

void C_Test::Load(void)
{
	FILE *lf;
	lf = fopen( "data2\\data0.test" , "rb" );
	fread( &CharaData, sizeof(CharaData), 1, lf);
	fclose(lf);
}

void C_Test::InIt(void)
{
	CharaHandle = LoadGraph("data2\\キャラ.png");
	MapHandle = LoadGraph("data2\\マップ.png");

	//	透明抜き用のスクリーン作成
	ScHandle = MakeScreen(600,480,TRUE);

	// 作成したスクリーンを描画対象にする
	SetDrawScreen( ScHandle ) ;
	//	セーブファイルから読み込み
	if( -1 == LoadGraphScreen(0,0,"data2\\blind2.png",TRUE) ) {
		//	元の画像を読み込み
		LoadGraphScreen(0,0,"data2\\blind.bmp",FALSE);
	}
	// 描画対象を裏画面に戻す
	SetDrawScreen( DX_SCREEN_BACK ) ;
}

void C_Test::Move(char *KeyBuf)
{

	//カーソルキー↑が押されていたら上移動
	if(KeyBuf[KEY_INPUT_UP]==1)
	{
		CharaData.Y -= 3;
	}

	//カーソルキー↓が押されていたら下移動
	if(KeyBuf[KEY_INPUT_DOWN]==1)
	{
		CharaData.Y += 3;
	}

	//カーソルキー←が押されていたら左移動
	if(KeyBuf[KEY_INPUT_LEFT]==1)
	{
		CharaData.X -= 3;
	}

	//カーソルキー→が押されていたら右移動
	if(KeyBuf[KEY_INPUT_RIGHT]==1)
	{
		CharaData.X += 3;
	}
}

void C_Test::Draw(char *KeyBuf)
{
	//ステージ描画
	DrawGraph( 0, 0, MapHandle, FALSE );
	DrawGraph( CharaData.X-25, CharaData.Y-25, CharaHandle, TRUE );
	
	//	マッピング処理
	{
		// 作成したスクリーンを描画対象にする
		SetDrawScreen( ScHandle ) ;
		
		//	透明抜きするために描画するとαチャンネルを0になるように設定。
		SetDrawBlendMode( DX_BLENDMODE_MUL, 0 );	// 0 を指定するとαチャンネルは必ず 0 になる

		//	円形に透明に繰り抜く
		DrawCircle( (CharaData.X-25)/2, (CharaData.Y-25)/2, 25, GetColor(255,255,255), TRUE );
		
		//	ノーマルブレンドに戻す。
		SetDrawBlendMode( DX_BLENDMODE_NOBLEND, 255 );

		// 描画対象を裏画面に戻す
		SetDrawScreen( DX_SCREEN_BACK ) ;
	}
	
//	BltSoftImageWithTransColor(0, 0, 50, 50, SeeSightHandle, (CharaData.X-25)/2, (CharaData.Y-25)/2, BlindHandle,0,0,0,255);
//	BltSoftImage(0, 0, 50, 50, SeeSightHandle, (CharaData.X-25)/2, (CharaData.Y-25)/2, BlindHandle );

	if(KeyBuf[KEY_INPUT_M]==1)
	{
		KeyCnt++;
		if(KeyCnt == 1) MapFlag = 1 - MapFlag;
	} else {
		KeyCnt = 0;
	}

	if( MapFlag == 1 )
	{
		DrawExtendGraph( 150, 120, 450, 360, MapHandle, FALSE );
		DrawExtendGraph( 150, 120, 450, 360, ScHandle, TRUE );
		//DrawExtendGraph( 150, 120, 450, 360, BlindHandle, FALSE );
//		DrawSoftImage( 0, 0, BlindHandle);
	}

}

void C_Test::Save()
{
	FILE *sf;
	sf = fopen( "data2\\data0.test" , "wb" );
	fwrite( &CharaData, sizeof(CharaData), 1, sf);
	fclose(sf);

	// 作成したスクリーンを描画対象にする
	SetDrawScreen( ScHandle ) ;
	// 保存する
	SaveDrawScreenToPNG( 0, 0, 600, 480, "data2\\blind2.png" );
	// 描画対象を裏画面に戻す
	SetDrawScreen( DX_SCREEN_BACK ) ;
}


C_Test Test;
char KeyBuf[256];
int KeyCnt;
int SaveFlag;

int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow)
{
	{
		//画面作成
		SetGraphMode( 600, 480, 32);
		// ウインドウモード
		ChangeWindowMode( TRUE );
		if(DxLib_Init() == -1) return -1;
		//バックバッファに描画
		if(SetDrawScreen(DX_SCREEN_BACK) != 0) return -1;

		Test.Load();
		Test.InIt();
	}

	//メインループ（ESCで終了）
    while(ProcessMessage() == 0 && CheckHitKey(KEY_INPUT_ESCAPE) == 0)
	{
		GetHitKeyStateAll(KeyBuf);

		//画面の初期化
		ClearDrawScreen();

		Test.Move(KeyBuf);
		Test.Draw(KeyBuf);

		if(KeyBuf[KEY_INPUT_S]==1)
		{
			KeyCnt++;
			if(KeyCnt == 1) SaveFlag = 1 - SaveFlag;
		} else {
			KeyCnt = 0;
		}

		if( SaveFlag == 1 )
		{
			Test.Save();
			return 0;
		}

		//フリップ
        ScreenFlip();
    }

    DxLib_End();

    return 0;
}

[史上最悪のデスペナ]

ありがとうございます！
リファイン後のプログラムを載せた方がいいでしょうか？

[softya（ソフト屋)]

ありがとうございます！
リファイン後のプログラムを載せた方がいいでしょうか？

出来ればお願いします。
特に問題なのはスクリーンのサイズが決め打ちなことですね。
出来れば画像データのサイズを見てスクリーンサイズを設定して欲しいです。

[史上最悪のデスペナ]

出来ればお願いします。

了解です。

特に問題なのはスクリーンのサイズが決め打ちなことですね。
出来れば画像データのサイズを見てスクリーンサイズを設定して欲しいです。

ゲームに実装するときはクライアントがウィンドウサイズを変更できるようにしているので
ウィンドウサイズに合わせ、かつ、マウスで移動できるようにしたものを貼り付けます。
UIサイズをクライアントが変更出来るかできないかも設定できるようにしておきます。

[史上最悪のデスペナ]

ふと思ったのですが、
今回は円を用いて透明化を行いましたが任意の形に対して行えたらペイントの消しゴムのような機能になるのではないでしょうか。
そうすると、あらかじめくりぬきたい形に作成しておいた（今回で言うと"視野範囲.png"）を用いることになると思います。
その場合、いい方法はないのでしょうか？SetTransColorを用いてもきちんと透明になりません。

ここを参考にしました。↓
「MakeGraph() による背景の透明化」
http://hpcgi2.nifty.com/natupaji/bbs/pa ... ew&no=2278

このリンク先に書かれていた通りSetDrawValidAlphaChannelGraphCreateFlag() 関数に TRUE を引き渡しても駄目でした。

ちなみに

ゲームに実装するときはクライアントがウィンドウサイズを変更できるようにしているので
ウィンドウサイズに合わせ、かつ、マウスで移動できるようにしたものを貼り付けます。
UIサイズをクライアントが変更出来るかできないかも設定できるようにしておきます。

ウィンドウサイズに合わせるとこまでしかまだ出来ていません

[softya（ソフト屋)]

この方法は描画した部分全てを透明化してしまうので、DrawGraph()で書くとどんなデータを用意しようとも四角形にくりぬきます。そういう要望であるなら根本的に考えなおさないと難しいですね。もっと難しい処理すれば出来そうですが(ピクセルシェーダを使うとか)。

[史上最悪のデスペナ]

そういう要望であるなら根本的に考えなおさないと難しいですね。

今回のゲーム用マップに関しましては円で十分です。
もし、今後「DXライブラリでペイントのようなソフトが作りたいのですがいろんな形の消しゴム機能の作り方が分かりません」
という方が現れましたら、その方に教えてあげてください。

[softya（ソフト屋)]

そういう要望であるなら根本的に考えなおさないと難しいですね。

今回のゲーム用マップに関しましては円で十分です。
もし、今後「DXライブラリでペイントのようなソフトが作りたいのですがいろんな形の消しゴム機能の作り方が分かりません」
という方が現れましたら、その方に教えてあげてください。

ただ消すだけで「透明抜き」さえしなければ難しくないですよ。

[史上最悪のデスペナ]

ただ消すだけで「透明抜き」さえしなければ難しくないですよ。

もちろん透明抜きです

[softya（ソフト屋)]

ただ消すだけで「透明抜き」さえしなければ難しくないですよ。

もちろん透明抜きです

ペイントの消しゴムにマスクしての消しゴム機能なんて有りましたっけ？
PhotoShopならありますが。

[補足]
一般にペイントソフトはGDI+などのWin32APIの機能などを使って実装されています。
ＤＸライブラリを含むDirectX系で実装されていることはないと思いますよ。

[史上最悪のデスペナ]

普段Gimpを使ってるので分かりません＾＾；
ペイントソフトという意味で取っていただければ。

ウィンドウサイズに合わせ、かつ、マウスで移動できるようにしたものを貼り付けます。
UIサイズをクライアントが変更出来るかできないかも設定できるようにしておきます。

よく考えたら「マウスで移動でき、UIサイズを変更出来るかできないか設定できる」っていうのは私が作らなくてもいいような気がしましたので
完成したということで添付します。

コード:

int Load( GraphData *a, const TCHAR *Blind, int ScreenX, int ScreenY )

GraphData *a・・・・・・・・・・・・・・・・グラフィックハンドルと画像サイズが格納される。
const TCHAR *Blind・・・・・・・・・・・ブラインド用の画像のパス
int ScreenX, int ScreenY・・・・・・画面のサイズ
戻り値・・・・・・・・・・・・・・・・・・・・・・画像がロードできなかったら-1

コード:

void Draw( GraphData *a, int x, int y, int r )

GraphData *a・・・・・・・・・・・・・・・・Loadで使った構造体
int x, int y, int r・・・・・・・・・・・・・透明化する円の位置と半径

コード:

void Save( GraphData *a, const TCHAR *FileName, int SizeX, int SizeY, int Type, int Level )

GraphData *a・・・・・・・・・・・・・・・・Loadで使った構造体
const TCHAR *FileName・・・・・・・保存したい画像の名前のパス（例：save\\pic.png）
int SizeX, int SizeY・・・・・・・・・・・保存したい画像のサイズ。ただしLoadで入れたScreenX, ScreenYのサイズは越えれない
int Type・・・・・・・・・・・・・・・・・・・・・pngで保存するなら0、jpgなら1、bmpなら2
int Level・・・・・・・・・・・・・・・・・・・・Typeが0なら値が大きいほど高圧縮率高負荷、0は無圧縮,0～9
　　　　　　　　　　　　　　　　　　　　　Typeが1なら値が大きいほど画質、値が大きいほど低圧縮高画質,0～100

普通にEasyDrawFunc.hとEasyDrawFunc.cppをプロジェクト内に入れておけば大丈夫だと思います。

[softya（ソフト屋)]

今頃ですが、
if( Load( &a, "data\\blind2.png", 600, 480 ) == -1 ) Load( &a, "data\\blind.bmp", 600, 480 );
の決め打ちは良くないと思います。GetGraphSize()を使って下さい。
あと、EasyDrawFuncはなぜクラスではないのでしょうか？

[史上最悪のデスペナ]

EasyDrawFuncはなぜクラスではないのでしょうか？

自分で使う場合は自分の分かりやすいとこ（クラス）に組み込む予定ですが、
私が完全にクラス化してしまうよりも、もし万が一、将来似た様な質問が来たときにその方が自分の好きな場所に入れれるようにしたほうがいいかな
と思ったからです。