テクスチャ―を使った描画
ついにテクスチャーを使って画像を描画していきます。
今回はサンプル画像にこちらを用意しました。
bridge.png
先ずはテクスチャーを張るためのUV値を頂点に追加します。
#define FVF_CUSTOM2D (D3DFVF_XYZRHW | D3DFVF_DIFFUSE | D3DFVF_TEX1)
struct SimpleVertex
{
float x, y, z;
float rhw;
DWORD color;
float u, v;
};
D3DFVF_TEX1はテクスチャーを1枚使いますという定義です。
uとvはそれぞれテクスチャーのどの部分を表示するかという指定に使います。
0.0f～1.0fの間で範囲を表現します。
例えば横幅が128pixelのテクスチャーの64pixel目を指す場合は0.5fとなります。
次に生成処理です。
TextureData g_texData;
IDirect3DVertexBuffer9* g_pVertexBuffer;
// リソースの初期化
bool InitializeResource(void)
{
// assetsフォルダ内のbridge.pngをテクスチャーとして読み込み
if( !LoadTexture(TEXT("assets/bridge.png"), &g_texData) )
{
return false;
}
// 画像サイズから幅と高さを設定
float rect[] =
{
10.0f, 10.0f,
10.0f + (float)g_texData.srcWidth, 10.0f + (float)g_texData.srcHeight,
};
// テクスチャーサイズから画像サイズのUVを取得(画像が2の累乗であれば1.0fになる)
float u = (float)g_texData.srcWidth / (float)g_texData.width;
float v = (float)g_texData.srcHeight / (float)g_texData.height;
// 画像サイズに合わせてUVも追加した頂点データ
const SimpleVertex vertices[4] =
{
// 1つ目の矩形
{ rect[0], rect[1], 0.0f, 1.0f, 0xffffffff, 0.0f, 0.0f },
{ rect[2], rect[1], 0.0f, 1.0f, 0xffffffff, u, 0.0f },
{ rect[0], rect[3], 0.0f, 1.0f, 0xffffffff, 0.0f, v },
{ rect[2], rect[3], 0.0f, 1.0f, 0xffffffff, u, v },
};
// 頂点バッファの生成
g_pVertexBuffer = CreateVertexBuffer(vertices, sizeof(vertices));
if( g_pVertexBuffer == NULL )
{
return false;
}
return true;
}
// リソースの解放
void CleanupResource(void)
{
ReleaseTexture(&g_texData);
SAFE_RELEASE(g_pVertexBuffer);
}
今回はソースコードのあるフォルダの直下にassetフォルダを作成してその中にbridge.pngを入れました。
下記の処理でフォルダ階層を指定して画像の読み込みとテクスチャーの生成を行っています。
LoadTexture(TEXT("assets/bridge.png"), &g_texData)
次に画像とテクスチャーのサイズから頂点データの値を設定して頂点バッファを作成しています。
今回は単純な矩形一つなのでインデックスバッファは使いません。
そして毎回ですが作った後はちゃんと解放しておきましょう。
次に描画処理です。
void Render(void)
{
IDirect3DDevice9* pDevice = GetDirect3DDevice();
// 描画シーンの開始
pDevice->BeginScene();
// バックバッファのクリア
pDevice->Clear(0, NULL, D3DCLEAR_TARGET, 0xff5f5f5f, 1.0f, 0);
// デフォルトの描画ステートを設定
SetDefaultRenderState();
// 通常書き込みモードに設定
SetRenderMode(Multiple, false);
// テクスチャーの設定
pDevice->SetTexture(0, g_texData.pTexture);
// 頂点バッファの設定
pDevice->SetStreamSource(0, g_pVertexBuffer, 0, sizeof(SimpleVertex));
// 頂点フォーマットの指定
pDevice->SetFVF(FVF_CUSTOM2D);
// 描画
pDevice->DrawPrimitive(D3DPT_TRIANGLESTRIP, 0, 2);
// 描画シーンの終了
pDevice->EndScene();
// モニターに絵を表示する
pDevice->Present(NULL, NULL, NULL, NULL);
}
基本の流れは同じですがいくつか追加している項目があります。
先ずは聞きなれないかもしれませんが描画ステートの設定です。
// デフォルトの描画ステートを設定 SetDefaultRenderState(); // 通常書き込みモードに設定 SetRenderMode(Multiple, false);
こちらの中身は後述しますが、別途関数を追加しています。
テクスチャ―を使って加算や半透明等の表現をする際は重要な役割があります。
次にテクスチャーの設定です。
// テクスチャーの設定 pDevice->SetTexture(0, g_texData.pTexture);
ここは単純で0番目のステージにテクスチャーをセットしています。
テクスチャーが複数になった場合は0の場所を1, 2と変えていきます。
これで一部飛ばしましたがテクスチャーの描画が出来ます。
実行結果がこれです。
無事にbridge.pngがWindowの上に表示されました。
次のページの準備のために背景の色がグレーに変えています。