フェードイン・フェードアウト2013/12/02

画面描画にはフレームバッファを使用しています(11/6の記事参照)。
最終的に画面に出すフレームバッファはテクスチャとして描画していますので、カラーを設定することができます。
このフレームバッファ描画時のカラーを変更することによって、画面のフェードイン・フェードアウトを実装してみます。


Renderer.h
	static GLubyte	screen_color[4*4];					// 画面描画カラー
	static int		fade_bright;						// 画面の明るさ
	static int		fade_speed;							// フェードの速さ

クラス sys::Rendererの静的メンバ変数です。
固定だったカラーバッファを変更できるようにしています。

	static void		fade_in(int _cnt = 500/FRAME_PERIOD)		// フェードイン
					{
						fade_speed = (_cnt > 0) ? (254 + _cnt)/_cnt : 255;
					}
	static void		fade_out(int _cnt = 500/FRAME_PERIOD)		// フェードアウト
					{
						fade_speed = (_cnt > 0) ? -(254 + _cnt)/_cnt : -255;
					}
	static int		get_bright(void)							// 画面明るさ取得
					{
						return	fade_bright;
					}

フェードイン・フェードアウトの関数です。
フェード時間をフレーム数単位で指定します。


Renderer.cpp
/********************
    描画(後処理)
 ********************/
void	Renderer::draw(void)
{
	if ( fade_speed > 0 ) {				// フェードイン
		fade_bright += fade_speed;
		if ( fade_bright >= 255 ) {
			fade_bright	= 255;
			fade_speed	= 0;
		}
		for (int i = 0; i < 4*3; i++) {
			screen_color[i + i/3] = (GLubyte)fade_bright;
		}
	}
	else if ( fade_speed < 0 ) {		// フェードアウト
		fade_bright += fade_speed;
		if ( fade_bright <= 0 ) {
			fade_bright	= 0;
			fade_speed	= 0;
		}
		for (int i = 0; i < 4*3; i++) {
			screen_color[i + i/3] = (GLubyte)fade_bright;
		}
	}


	static const
	GLfloat	_projection[4*4] =
			{
				1.0f, 0.0f, 0.0f, 0.0f,
				0.0f, 1.0f, 0.0f, 0.0f,
				0.0f, 0.0f, 1.0f, 0.0f,
				0.0f, 0.0f, 0.0f, 1.0f,
			};

	static const
	GLfloat	_texcoords[] =
			{
				0.0f, 0.0f,
				1.0f, 0.0f,
				0.0f, 1.0f,
				1.0f, 1.0f
			};

	static const
	GLfloat	_vertices[] =
			{
				-1.0f, -1.0f,
				 1.0f, -1.0f,
				-1.0f,  1.0f,
				 1.0f,  1.0f,
			};

	ShaderProgram*	_shader = use_shader(SHADER_TEXTURE);

	// フレームバッファテクスチャ描画
	glBindFramebuffer(GL_FRAMEBUFFER, 0);
	glViewport(screen_rect.x, screen_rect.y, screen_rect.w, screen_rect.h);
	glUniformMatrix4fv(_shader->projection, 1, GL_FALSE, _projection);
	glBindTexture(GL_TEXTURE_2D, frame_buffer->texture);
	glVertexAttribPointer(_shader->texcoord, 2, GL_FLOAT, GL_FALSE, 0, _texcoords);
	glVertexAttribPointer(_shader->position, 2, GL_FLOAT, GL_FALSE, 0, _vertices);
	glVertexAttribPointer(_shader->color, 4, GL_UNSIGNED_BYTE, GL_TRUE, 0, screen_color);
	glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
}

描画前に明るさの変更を行い、カラーバッファに値を設定します(249~268行)。
フレームバッファテクスチャ描画で、設定したカラーバッファを指定しています(307行)。


サンプル
AppMain.cpp
/******************************
    稼働
		戻り値	アプリ続行か
 ******************************/
Bool	update_app(void)
{
	sprite[SPR_PHOTO].draw(0.0f, 0.0f);					// 背景
	for (int i = 0; i < 4; i++) {						// ビー玉
		int		t = ((cnt + i*15) % 60) - 30;

		sprite[SPR_BALL_BLUE + i].draw(((i*180 + cnt*4) % 720) - 360, 400 - (30*30 - t*t)/2);
	}
	cnt++;

	if ( sys::TouchPanel[0].flag & sys::TouchManager::TRIGGER ) {
		if ( sys::Renderer::get_bright() == 0 ) {
			sys::Renderer::fade_in(60);					// フェードイン
		}
		else if ( sys::Renderer::get_bright() == 255 ) {
			sys::Renderer::fade_out(60);				// フェードアウト
		}
	}

	return	TRUE;
}

画面をタッチすると、現在の明るさに応じてフェードイン・フェードアウトを行います。


プロジェクト一式は、こちらから。

コメント

コメントをどうぞ

※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。

※投稿には管理者が設定した質問に答える必要があります。

名前:
メールアドレス:
URL:
次の質問に答えてください:
○○○人を右に!

コメント:

トラックバック

このエントリのトラックバックURL: http://raseene.asablo.jp/blog/2013/12/02/7089113/tb