ホームへ戻る

 s.6章 Android 3.0 の背景みたいなエフェクトの作り方

 まずは、どんなエフェクトを作ろうとしているか、映像をご覧ください。以下の映像の 0:31~ 位です。


(0:31~)



フレームが部分的に光りながら回転します。

このように「画像の一部を光らせる」には「マスク」を利用します。

マスクの使い方についてはこちらで紹介予定です。

4.11章 マスクを使って特定の部分だけを描画する (注:未制作)

まず、



この画像をぐるぐる回転させます。

回転するときは DrawRotaGraph2関数 を使って回転の中心点を指定して回転させます。

関数の使い方はリファレンスこちらをご覧ください。



そして、以下のような画像を用意し、



黒い所だけを描画可能エリアにします。

描画可能エリアのみを加算ブレンドでブレンドすると・・。



このようになりますね。

では、下に表示する表示する画像と合わせて描画するとどうなるか、以下実行結果と合わせてご覧ください。


ピュアC版


/* MenuBack.h */


void MenuBack_Load();
void MenuBack_Delete();
void MenuBack_Calc();
void MenuBack_Graph(); 

/* MenuBack.cpp */


#include "DxLib.h"
#include "MenuBack.h"

#define PI2 (3.141592654f*2)

static int m_imgBack;
static int m_imgMask;
static int m_imgOverLay;
static int m_Count;

// 読み込み
void MenuBack_Load(){
        m_imgBack = LoadGraph("img/top_back.png");
        m_imgMask = LoadMask("img/menu_back_mask.png");
        m_imgOverLay = LoadGraph("img/menu_back_over.png");
        m_Count = 0;
}

// 削除
void MenuBack_Delete(){
        DeleteGraph( m_imgBack );
        DeleteGraph( m_imgMask );
        DeleteGraph( m_imgOverLay );
}

// 回転計算(というよりカウンタ加算してるだけ)
void MenuBack_Calc(){
        m_Count++;
}

// 描画
void MenuBack_Graph(){
        DrawGraph( 0, 0, m_imgBack, FALSE );    // 背景描画
        CreateMaskScreen();     // マスクここから
        DrawMask( 0, 0, m_imgMask, DX_MASKTRANS_BLACK ); // 黒い所のみを描画領域に
        SetDrawBlendMode( DX_BLENDMODE_ADD, 255 );               // 加算ブレンドに設定
        DrawRotaGraph2 ( 320, 240, 370, 370 , 1.0, PI2/240*m_Count, m_imgOverLay , TRUE);
        DrawRotaGraph2 ( 320, 240, 370, 370 , 1.0, PI2/240*(m_Count-120), m_imgOverLay , TRUE);
        SetDrawBlendMode( DX_BLENDMODE_NOBLEND, 0 );     // ブレンドモードリセット
        DeleteMaskScreen(); // マスクここまで
}

/* main.cpp */


#include "DxLib.h"
#include "MenuBack.h"

int WINAPI WinMain(HINSTANCE,HINSTANCE,LPSTR,int){
        ChangeWindowMode(TRUE), DxLib_Init(), SetDrawScreen( DX_SCREEN_BACK );
        MenuBack_Load();        // 素材ロード
        while( ScreenFlip()==0 && ProcessMessage()==0 && ClearDrawScreen()==0 ){
                MenuBack_Calc();        // 回転計算
                MenuBack_Graph();       // 描画
        }
        MenuBack_Delete();      // 素材削除
        DxLib_End();
        return 0;
} 

実行結果


C言語版 プロジェクトファイルはこちら

C++版 プロジェクトファイルはこちら

C言語版もC++を意識した書き方をしてみました。

C++とほとんど設計としては変わりありません。

このように書くことで、main.cppからMenuBack.cppのグローバル変数を侵す危険性が無くなりました。

MenuBack.cppのグローバル変数はこのファイル内でしか変更されることが無いので、設計が大規模になっても、

変数が変更されるタイミングの把握がしやすいのです。

今回、MenuBack_Calc関数 でほとんど何も処理をしていません。

変数を減らすために角度の計算は省略しましたが、本来であれば、描画関数内で角度を求めるのではなく、

角度を代入する変数を用意し、角度の計算は MenuBack_Calc関数 で行うのがベストでしょう。

→分からないことがあれば掲示板で質問して下さい


- Remical Soft -