トランジションエフェクトについて

[SDD]

乱立気味での質問すみません、SDDです。

今回気になったのは、東方に使われている、ゲーム開始時のトランジション（？）のエフェクトです。

エフェクトです。

色んなワードでぐぐったり、このトピックでもしばらく探していたのですが、なかなか該当するものもなく、
ラスタースクロールとか、画像に頂点を増やし、歪ませる方法なども視野に入れたのですが、どうもそういう感じではなさそうで。
これはマスクなどを使っているのでしょうか。どういう技法なのでしょうか。参考として伺いたいです。

よろしくお願いします。

[SDD]

すみません。一応環境を。


Win7,VC++2008EE,DXライブラリを使用しています。

[softya（ソフト屋)]

動画見ましたが、コマ送りでは見ていません。詳しく調べたいならコマ送りで見るべきです。
一種のフェードアウト・インですね。
クロスフェードしていないので、それほど難しいことはしていません。
変形する三角形が黒一色の一枚絵に合体変形している様に見えました。画面が出てくるときはその逆です。
つまり黒い三角形が描画できれば出来そうなエフェクトです。
コマ送りで見ていないので、間違いがあるかもしれません。

【訂正】
スマホで見てたら黒に見えましたが、背景が出てるんですね。
これだとＺバッファを使わないと出来ませんが、それほど難易度はありません。

[SDD]

ソフト屋さん、毎度お世話になります。

【訂正】
スマホで見てたら黒に見えましたが、背景が出てるんですね。

はい、その通りで、新しい背景画像が変形して合体して、分解して解散するという感じです。
Zバッファ・・・ですか。少し調べてみます。ご指摘ありがとうございます。

[softya（ソフト屋)]

Ｚバッファで透明抜き以外でも、別画面バッファをつかって２Ｄポリゴン処理を使っても出来そうです。

MakeScreen
http://homepage2.nifty.com/natupaji/DxL ... html#R3N25
DrawPolygon2D
http://hpcgi2.nifty.com/natupaji/bbs/pa ... ew&no=3033

１．ゲーム画面を別画面バッファに描画。
２．背景だけを裏画面に描画。
３．ゲーム画面を三角形ポリゴンのUV指定のテクスチャとして裏画面に描画。必要な三角形の数だけ繰り返す。
（発想の逆転で背景が侵入してくるように見えますが、実はゲーム画面が欠けていたって方法です）

[SDD]

関数の提示までしていただき、ありがとうございます。

ちょうどブラー効果もためしてみたいと思っており、こういうグラフィック処理はそういうときにも有効そうですね。
ただ、３番が難しそうです。考えて見ます。


また、少し本題からそれるのですが、DrawPolygon2Dが、今まで使ってたバージョンにはなかったようで、先ほどライブラリを更新したのですが、
それで既存のプロジェクトを実行すると、音がでなくなり、ChangeVolumeSoundMemの音量を上げてみたところ、音が出るようになりました。
今まで聞こえてた音量が聞こえなくなったということみたいなのですが、なにか匙加減が変わったのかな・・・？

[SDD]

コード:

#include "DxLib.h"



//画像サイズは512*512


int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow )
{
	int gh;//画像ハンドル

	int screen_hndl;//画面用ハンドル

	VERTEX2D Vert[12] ;

	ChangeWindowMode( TRUE ) ;

	// ＤＸライブラリの初期化
	if( DxLib_Init() < 0 ) return -1;


	gh=LoadGraph("test2.png" ) ;


	
	screen_hndl=MakeScreen(512,512,FALSE);




	Vert[ 0 ].pos = VGet(0.0f,0.0f,0.0f) ;
	Vert[ 0 ].rhw = 1.0f ;
	Vert[ 0 ].dif = GetColorU8(255,255,255,255 ) ;
	Vert[ 0 ].u   = 0.0f ;
	Vert[ 0 ].v   = 0.0f ;

	Vert[ 1 ].pos = VGet( 512.0f,0.0f,0.0f) ;
	Vert[ 1 ].rhw = 1.0f ;
	Vert[ 1 ].dif = GetColorU8( 255,255,255,255 ) ;
	Vert[ 1 ].u   = 1.0f ;
	Vert[ 1 ].v   = 0.0f ;

	Vert[ 2 ].pos = VGet(0.0f,256.0f,0.0f ) ;
	Vert[ 2 ].rhw = 1.0f ;
	Vert[ 2 ].dif = GetColorU8( 255,255,255,255 ) ;
	Vert[ 2 ].u   = 0.0f ;
	Vert[ 2 ].v   = 0.5f ;

	Vert[ 3 ].pos = VGet(512.0f,256.0f,0.0f) ;
	Vert[ 3 ].rhw = 1.0f ;
	Vert[ 3 ].dif = GetColorU8( 255,255,255,255 ) ;
	Vert[ 3 ].u   = 1.0f ;
	Vert[ 3 ].v   = 0.5f ;

	Vert[ 4 ].pos = VGet(0.0f,256.0f,0.0f) ;
	Vert[ 4 ].rhw = 1.0f ;
	Vert[ 4 ].dif = GetColorU8( 255,255,255,255 ) ;
	Vert[ 4 ].u   = 0.0f ;
	Vert[ 4 ].v   = 0.5f ;

	Vert[ 5 ].pos = VGet( 512.0f,0.0f,0.0f ) ;
	Vert[ 5 ].rhw = 1.0f ;
	Vert[ 5 ].dif = GetColorU8( 255,255,255,255 ) ;
	Vert[ 5 ].u   = 1.0f ;
	Vert[ 5 ].v   = 0.0f ;

	Vert[ 6 ].pos = VGet( 0.0f,256.0f,0.0f ) ;
	Vert[ 6 ].rhw = 1.0f ;
	Vert[ 6 ].dif = GetColorU8( 255,255,255,255 ) ;
	Vert[ 6 ].u   = 0.0f ;
	Vert[ 6 ].v   = 0.5f ;

	Vert[ 7 ].pos = VGet( 512.0f,256.0f,0.0f ) ;
	Vert[ 7 ].rhw = 1.0f ;
	Vert[ 7 ].dif = GetColorU8( 255,255,255,255 ) ;
	Vert[ 7 ].u   = 1.0f ;
	Vert[ 7 ].v   = 0.5f ;


	Vert[ 8 ].pos = VGet( 0.0f,512.0f,0.0f ) ;
	Vert[ 8 ].rhw = 1.0f ;
	Vert[ 8 ].dif = GetColorU8( 255,255,255,255 ) ;
	Vert[ 8 ].u   = 0.0f ;
	Vert[ 8 ].v   = 1.0f ;


	Vert[ 9 ].pos = VGet( 512.0f,512.0f,0.0f ) ;
	Vert[ 9 ].rhw = 1.0f ;
	Vert[ 9 ].dif = GetColorU8( 255,255,255,255 ) ;
	Vert[ 9 ].u   = 1.0f ;
	Vert[ 9 ].v   = 1.0f ;


	Vert[ 10 ].pos = VGet( 0.0f,512.0f,0.0f ) ;
	Vert[ 10 ].rhw = 1.0f ;
	Vert[ 10 ].dif = GetColorU8( 255,255,255,255 ) ;
	Vert[ 10 ].u   = 0.0f ;
	Vert[ 10 ].v   = 1.0f ;


	Vert[ 11 ].pos = VGet( 512.0f,256.0f,0.0f ) ;
	Vert[ 11 ].rhw = 1.0f ;
	Vert[ 11 ].dif = GetColorU8( 255,255,255,255 ) ;
	Vert[ 11 ].u   = 1.0f ;
	Vert[ 11 ].v   = 0.5f ;
	


	while(!ProcessMessage()){

		//作成したグラフィックを描画対象に
		SetDrawScreen(screen_hndl);

		//作成したグラフィックに描画
		DrawGraph(0,0,gh,TRUE);

		//裏画面セット
		SetDrawScreen(DX_SCREEN_BACK);

		//裏画面に描画
		DrawPolygon2D( Vert,4,screen_hndl,TRUE ) ;
	
		ScreenFlip();
	}
	// ＤＸライブラリの後始末
	DxLib_End();

	// ソフトの終了
	return 0;
}

とりあえず試しに、別画面に描画されたものを４つの三角形に分割し、テクスチャ化し、裏画面に描画するようにだけしたのですが、
参考にしている動画のようなエフェクトはもっと自由な三角形と伺えるのですが、この方法ではあそこまでのものは無理なのでしょうか。

引き続きいろいろ調べてみます。

[softya（ソフト屋)]

出来るできないかで言えば出来ます。
が、現状のコードよりもロジックはもっと複雑です。
三角形が移動できたり、三角形の頂点を動かせたり、その移動にあわせてUVをコントロールできる必要があります。

で、考えてみてんですが、次のようにしたほうが考え方として簡単かもしれません。

１．背景だけを別画面バッファに描画。
２．背景とゲーム画面を裏画面に描画。
３．別画面バッファを三角形ポリゴンのUV指定のテクスチャとして裏画面に描画。必要な三角形の数だけ繰り返す。

これなら差し込んでくる三角形の背景の考え方のまま処理できます。
もちろん、「三角形が移動できたり、三角形の頂点を動かせたり、その移動にあわせてUVをコントロールできる」関数を用意するのは前提です。

[SDD]

お忙しいところ、毎度ありがとうございます。

背景だけ別画面の方でもたしかによさそうですね。このエフェクトのためだけに、別のゲーム画面を別画面に
描かせるのもなんですし・・・。

簡易的な動き（例えば、特定の頂点だけ特定の位置までuvをあわせる）ならできそうなのですが、
参考にしてるようなあれほど自在な動かし方は、今の自分には少し難しそうです。

とりあえずは簡易的な動きをするコードを書いてみようと思います。

[ISLe()]

グレースケールで鉤爪のような画像をひとつ用意して、αチャンネルなりを潰していくだけなのでは。

件の動画では、常に同じ背景を挟んで切り替わっているのでより簡単だと思います。

[ISLe()]

サンプルコード書いてみました。

適当な画像ファイルを2つ読み込ませて、片方の画像だけが見えるように表示します。
マウスの左ボタンを押すとカーソルの下あたりにもう片方の画像が見えてきます。
マウスの右ボタンを押すと逆にカーソルの下あたりが元の画像で隠れていきます。

ブラシはαチャンネルだけを持った任意の画像が使えます。
ここを鉤爪のような画像にして一定の法則で画面を埋めていけば件の動画のような効果にできます。

コード:

#include "DxLib.h"
 
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow)
{
	ChangeWindowMode(TRUE);
	if (DxLib_Init() != 0) return 0;

	int grahBrsh = MakeScreen(48,48,TRUE);
	int grahOver = MakeScreen(640,480,TRUE);

	int graphA = LoadGraph("Penguins.jpg");
	int graphB = LoadGraph("Koala.jpg");

	/*
	 * αチャンネルを操作するためのブラシ
	 * とりあえず円
	 */
	SetDrawScreen(grahBrsh);
	SetDrawBlendMode(DX_BLENDMODE_ALPHA, 0);
	DrawBox(0,0,48,48,GetColor(0,0,0),TRUE);
	SetDrawBlendMode(DX_BLENDMODE_ALPHA, 128);
	DrawCircle(24,24,20,GetColor(0,0,0),TRUE);
	SetDrawBlendMode(DX_BLENDMODE_ALPHA, 192);
	DrawCircle(24,24,16,GetColor(0,0,0),TRUE);
	SetDrawBlendMode(DX_BLENDMODE_ALPHA, 255);
	DrawCircle(24,24,12,GetColor(0,0,0),TRUE);
	SetDrawBlendMode(DX_BLENDMODE_NOBLEND, 255);

	/*
	 * かぶせる方の画面
	 */
	SetDrawScreen(grahOver);
	//DrawBox(0,0,640,480,GetColor(255,0,0),TRUE);
	DrawGraph(0,0,graphA,FALSE);
	// αチャンネルを削って透明にする
	SetDrawBlendMode(DX_BLENDMODE_SUB, 255);
	DrawBox(0,0,640,480,GetColor(0,0,0),TRUE);
	SetDrawBlendMode(DX_BLENDMODE_NOBLEND, 255);

	while (ProcessMessage() == 0 && ScreenFlip() == 0) {
		int mouseX, mouseY;
		GetMousePoint(&mouseX, &mouseY);
		if (GetMouseInput() & MOUSE_INPUT_LEFT) {
			SetDrawScreen(grahOver);
			SetDrawBlendMode(DX_BLENDMODE_ADD, 255);
			DrawGraph(mouseX-24,mouseY-24,grahBrsh,TRUE);
			SetDrawBlendMode(DX_BLENDMODE_NOBLEND, 255);
		}
		if (GetMouseInput() & MOUSE_INPUT_RIGHT) {
			SetDrawScreen(grahOver);
			SetDrawBlendMode(DX_BLENDMODE_SUB, 255);
			DrawGraph(mouseX-24,mouseY-24,grahBrsh,TRUE);
			SetDrawBlendMode(DX_BLENDMODE_NOBLEND, 255);
		}
		SetDrawScreen(DX_SCREEN_BACK);
		//DrawBox(0,0,640,480,GetColor(0,0,255),TRUE);
		DrawGraph(0,0,graphB,FALSE);
		DrawGraph(0,0,grahOver,TRUE);
	}
	
	DxLib_End();
	return 0;
}

[SDD]

ISLeさん
毎度ありがとうございます。
サンプルまで頂いてしまってすみません。自分でも暇を見て、uvや座標を軽くいじくるようなのを書いていたのですが、
なかなかうまくいかずじまいでした。

サンプルのコード、ものすごい面白そうです。時間のあるときに、じっくり研究します。
最終的には、参考にさせていただき、コードを載せようと思います。