HGE 係列教材（5） --- 輸入、聲音和渲染

建議讀者對應 HGE 的官方的例子：Tutorial 02 - Using input, sound and rendering 來閱讀本文

渲染：

在 HGE 中，四邊形是一種圖元，對應了結構體 hgeQuad，另外還有三角形圖元，對應 hgeTriple，為了渲染，我們現在需要使用 hgeQuad 結構體，這個結構體如下：

struct hgeQuad
{
hgeVertex v[4];   // 頂點描述了這個四邊形
HTEXTURE   tex;   // 紋理的句柄或者為0
int        blend;   // 混合模式（blending mode）
};

HGE 中圖元對應的結構體總含有這3個部分：頂點，紋理句柄，混合模式

struct hgeVertex

{

    float x, y;   // 屏幕的 x，y 坐標

    float z;   // Z-order，範圍 [0, 1]

    DWORD col;   // 頂點的顏色

    float tx, ty;   // 紋理的 x，y 坐標（賦值前需要規格化坐標間隔，使得 tx，ty 取值範圍在[0,1]）

};

規格化坐標間隔在後麵的例子中會談到

 

1. 顏色的表示：

顏色使用32位表示，從左開始，8位為 Alpha 通道，8位紅色，8位綠色，8位藍色

對於後24位，如果全部為0，表示黑色，如果全部為1，表示白色

 

2. 定義顏色的運算：

我們把顏色看成一個四維向量，即 alpha 通道，紅色，綠色，藍色這四個分量

    <1> 顏色是可以相乘的

    顏色的相乘是對應的四個分量分別相乘的結果，即：alpha 通道的值與 alpha 通道的值相乘，紅色的值與紅色的值相乘，綠色的值與綠色的值相乘，藍色的值與藍色的值相乘。

    <2> 顏色是可以相加的

    同上，對應分量相加。

顏色的每個分量使用浮點數表示，範圍是[0-1]，相加操作可能導致溢出，一種處理的方式就是，如果溢出，則設定值為1。

 

3. 混合模式：

1）BLEND_COLORADD

表示頂點的顏色與紋理的紋元（texel）顏色相加，這使得紋理變亮，可見頂點顏色為 0x00000000 將不造成任何影響。

2）BLEND_COLORMUL

表示頂點的顏色與紋理的紋元顏色相乘，這使得紋理變暗，可見頂點顏色為 0xFFFFFFFF 將不造成任何影響。

注意：必須在1），2）中做一個選擇，且隻能選擇1），2）中的一個。處理的對象是紋理顏色和頂點顏色。

這裏有一個技巧：

如果我們需要在程序中顯示一個氣球，這個氣球的顏色不斷變化，這時候我們並不需要準備多張不同顏色的氣球紋理，而隻需要一張白色的氣球紋理，設置 blend 為 BLEND_COLORMUL，白色的R,G,B值被表示成 1.0，也就是說，紋理顏色和頂點顏色相乘的結果是頂點的顏色，那麼就可以通過修改頂點顏色，得到任意顏色的氣球了。

3）BLEND_ALPHABLEND

渲染時，將對象的像素顏色（而非頂點的顏色）與當前屏幕的對應像素顏色進行 alpha 混合。alpha 混合使用到 alpha 通道，對於兩個像素顏色進行如下操作，得到一個顏色：

R(C)=alpha*R(B)+(1-alpha)*R(A)
G(C)=alpha*G(B)+(1-alpha)*G(A)
B(C)=alpha*B(B)+(1-alpha)*B(A)

這裏的BLEND_ALPHABLEND使用的是對象像素的顏色的 alpha 通道。可見如果對象像素顏色 alpha 通道為 0，那麼結果就是隻有當前屏幕的像素顏色，也就是常常說的 100% 透明，因此，我們可以理解 alpha 混合就是一個是圖像透明的操作，0 表示完全透明，255 表示完全不透明。

4）BLEND_ALPHAADD

渲染時，將對象的像素顏色與當前屏幕的對應像素顏色相加，結果是有了變亮的效果。

注意：這裏的3），4）必選其一，且隻能選其一。處理的對象是對象像素顏色和屏幕像素顏色。

5）BLEND_ZWRITE

渲染時，寫像素的 Z-order 到 Z-buffer

6）BLEND_NOZWRITE

渲染時，不寫像素的 Z-order 到 Z-buffer

這裏一樣是二者選一

設置舉例：

quad.blend=BLEND_ALPHAADD | BLEND_COLORMUL | BLEND_ZWRITE;   // quad 為 hgeQuad 變量

 

4. HGE 渲染

1）定義和初始化 hgeQuad 結構體：

hgeQuad quad;   // 定義四邊形

2）初始化 hgeQuad 變量：

// 設置混合模式

quad.blend=BLEND_ALPHAADD | BLEND_COLORMUL | BLEND_ZWRITE;

// 加載紋理

quad.tex = pHGE->Texture_Load("particles.png");

注意，讀取硬盤上資源的時候，可能會失敗，因此通常都需要檢查，例如：

if (!quad.tex)

{

    MessageBox(NULL, "Load particles.png", "Error", 0);

}

// 初始化頂點

for(int i=0;i<4;i++)
{
    // 設置頂點的 z 坐標
    quad.v[i].z=0.5f;
    // 設置頂點的顏色，顏色的格式為 0xAARRGGBB
    quad.v[i].col=0xFFFFA000;
}

// 這裏假定載入的紋理大小為 128*128，現在截取由點（96，64），（128，64），（128，96），（96，96）這四個點圍成的圖形。

quad.v[0].tx=96.0/128.0; quad.v[0].ty=64.0/128.0;   // 規格化坐標間隔
quad.v[1].tx=128.0/128.0; quad.v[1].ty=64.0/128.0;
quad.v[2].tx=128.0/128.0; quad.v[2].ty=96.0/128.0;
quad.v[3].tx=96.0/128.0; quad.v[3].ty=96.0/128.0;

注意，對於 hgeQuad 結構體，頂點 quad.v[0] 表示左上那個點，quad.v[1] 表示右上的點，quad.v[2] 表示右下的點，quad.v[3] 表示左下的點。

// 設置 hgeQuad 在屏幕中的位置

float x=100.0f, y=100.0f;

quad.v[0].x=x-16; quad.v[0].y=y-16;
quad.v[1].x=x+16; quad.v[1].y=y-16;
quad.v[2].x=x+16; quad.v[2].y=y+16;

quad.v[3].x=x-16; quad.v[3].y=y+16;

 

3）設置渲染函數（render function）：

System_SetState(HGE_RENDERFUNC,RenderFunc);

RenderFunc 原型和幀函數一樣：

bool RenderFunc();

4）編寫 RenderFunc 函數：

bool RenderFunc()
{
   pHGE->Gfx_BeginScene();   // 在如何渲染之前，必須調用這個函數
   pHGE->Gfx_Clear(0);   // 清屏，使用黑色，即顏色為 0
   pHGE->Gfx_RenderQuad(&quad);   // 渲染
   pHGE->Gfx_EndScene();   // 結束渲染，並且更新窗口
   return false;   // 必須返回 false
}

補充：Load 函數是和 Free 函數成對出現的，即在硬盤上加載了資源之後，需要 Free 它們，例如：

quad.tex = pHGE->Texture_Load("particles");

// ...

pHGE->Texture_Free(quad.tex);

 

音效：

使用音效是很簡單的

1. 載入音效：

HEFFECT hEffect = pHGE->Effect_Load("sound.mp3");

2. 播放：

pHGE->Effect_PlayEx(hEffect);

或者 pHGE->Effect_Play(hEffect);

1）Effect_Play 函數隻接受一個參數就是音效的句柄 HEFFECT xx;

2）Effect_PlayEx 函數較為強大，一共有四個參數：

HCHANNEL Effect_PlayEx(
                       HEFFECT effect,   // 音效的句柄
                       int volume = 100,   // 音量，100為最大，範圍是[0, 100]
                       int pan = 0,   // 範圍是[-100, 100]，-100表示隻使用左聲道，100表示隻使用右聲道
                       float pitch = 1.0,   // 播放速度，1.0 表示正常速度，值越大播放速度越快，值越小播放越慢。這個值要大於0才有效（不可以等於0）
                       bool loop = false   // 是否循環播放，false表示不循環
                       );

 

輸入：

僅僅需要調用函數 pHGE->Input_GetKeyState(HGEK_xxx); 來判斷輸入，應該在幀函數中調用它，例如：

bool FrameFunc()

{

    if (pHGE->Input_GetKeyState(HGEK_LBUTTOM))

       // ...

    if (pHGE->Input_GetKeyState(HGEK_UP))

       // ...

}