フェードイン・フェードアウト ― 2013/12/02
画面描画にはフレームバッファを使用しています(11/6の記事参照)。
最終的に画面に出すフレームバッファはテクスチャとして描画していますので、カラーを設定することができます。
このフレームバッファ描画時のカラーを変更することによって、画面のフェードイン・フェードアウトを実装してみます。
Renderer.h
クラス sys::Rendererの静的メンバ変数です。
固定だったカラーバッファを変更できるようにしています。
フェードイン・フェードアウトの関数です。
フェード時間をフレーム数単位で指定します。
Renderer.cpp
描画前に明るさの変更を行い、カラーバッファに値を設定します(249~268行)。
フレームバッファテクスチャ描画で、設定したカラーバッファを指定しています(307行)。
サンプル
AppMain.cpp
画面をタッチすると、現在の明るさに応じてフェードイン・フェードアウトを行います。
プロジェクト一式は、こちらから。
最終的に画面に出すフレームバッファはテクスチャとして描画していますので、カラーを設定することができます。
このフレームバッファ描画時のカラーを変更することによって、画面のフェードイン・フェードアウトを実装してみます。
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;
}
画面をタッチすると、現在の明るさに応じてフェードイン・フェードアウトを行います。
プロジェクト一式は、こちらから。
最近のコメント