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

渲染：

在 HGE 中，四邊形是一種圖元，對應(yīng)了結(jié)構(gòu)體 hgeQuad，另外還有三角形圖元，對應(yīng) hgeTriple，為了渲染，我們現(xiàn)在需要使用 hgeQuad 結(jié)構(gòu)體，這個結(jié)構(gòu)體如下：

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

HGE 中圖元對應(yīng)的結(jié)構(gòu)體總含有這3個部分：頂點(diǎn)，紋理句柄，混合模式

struct hgeVertex

{

    float x, y;   // 屏幕的 x，y 坐標(biāo)

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

    DWORD col;   // 頂點(diǎn)的顏色

    float tx, ty;   // 紋理的 x，y 坐標(biāo)（賦值前需要規(guī)格化坐標(biāo)間隔，使得 tx，ty 取值范圍在[0,1]）

};

規(guī)格化坐標(biāo)間隔在后面的例子中會談到。不過先要談到的一點(diǎn)是 tx，ty 的值超過 1 也是合法的

 

1. 顏色的表示：

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

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

 

2. 定義顏色的運(yùn)算：

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

    <1> 顏色是可以相乘的

    顏色的相乘是對應(yīng)的四個分量分別相乘的結(jié)果，即：alpha 通道的值與 alpha 通道的值相乘，紅色的值與紅色的值相乘，綠色的值與綠色的值相乘，藍(lán)色的值與藍(lán)色的值相乘。

    <2> 顏色是可以相加的

    同上，對應(yīng)分量相加。

顏色的每個分量使用浮點(diǎn)數(shù)表示，范圍是[0-1]，相加操作可能導(dǎo)致溢出，一種處理的方式就是，如果溢出，則設(shè)定值為1。

 

3. 混合模式：

1）BLEND_COLORADD

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

2）BLEND_COLORMUL

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

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

這里有一個技巧：

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

3）BLEND_ALPHABLEND

渲染時，將對象的像素顏色（而非頂點(diǎn)的顏色）與當(dāng)前屏幕的對應(yīng)像素顏色進(jìn)行 alpha 混合。alpha 混合使用到 alpha 通道，對于兩個像素顏色進(jìn)行如下操作，得到一個顏色：

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，那么結(jié)果就是只有當(dāng)前屏幕的像素顏色，也就是常常說的 100% 透明，因此，我們可以理解 alpha 混合就是一個是圖像透明的操作，0 表示完全透明，255 表示完全不透明。

4）BLEND_ALPHAADD

渲染時，將對象的像素顏色與當(dāng)前屏幕的對應(yīng)像素顏色相加，結(jié)果是有了變亮的效果。

注意：這里的3），4）必選其一，且只能選其一。處理的對象是對象像素顏色和屏幕像素顏色。選擇 BLEND_ALPHABLEND 并且設(shè)定對象的 alpha 通道為 FF，可使此組參數(shù)無效。

5）BLEND_ZWRITE

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

6）BLEND_NOZWRITE

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

這里一樣是二者選一

設(shè)置舉例：

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

 

4. HGE 渲染

1）定義和初始化 hgeQuad 結(jié)構(gòu)體：

hgeQuad quad;   // 定義四邊形

2）初始化 hgeQuad 變量：

// 設(shè)置混合模式

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);

}

// 初始化頂點(diǎn)

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

// 這里假定載入的紋理大小為 128*128，現(xiàn)在截取由點(diǎn)（96，64），（128，64），（128，96），（96，96）這四個點(diǎn)圍成的圖形。

quad.v[0].tx=96.0/128.0; quad.v[0].ty=64.0/128.0;   // 規(guī)格化坐標(biāo)間隔
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 結(jié)構(gòu)體，頂點(diǎn) quad.v[0] 表示左上那個點(diǎn)，quad.v[1] 表示右上的點(diǎn)，quad.v[2] 表示右下的點(diǎn)，quad.v[3] 表示左下的點(diǎn)。

// 設(shè)置 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）設(shè)置渲染函數(shù)（render function）：

System_SetState(HGE_RENDERFUNC,RenderFunc);

RenderFunc 原型和幀函數(shù)一樣：

bool RenderFunc();

4）編寫 RenderFunc 函數(shù)：

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

補(bǔ)充：Load 函數(shù)是和 Free 函數(shù)成對出現(xiàn)的，即在硬盤上加載了資源之后，需要 Free 它們，例如：

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

// ...

pHGE->Texture_Free(quad.tex);

 

這里不得不談一下規(guī)格化坐標(biāo)間隔，而這之前，需要說說 Texture_GetWidth(xxx) 和 Texture_GetHeight(xxx) 函數(shù)，如果這樣調(diào)用：Texture_GetWidth(xxx) 獲取的是處于顯存中的紋理寬度，而 Texture_GetWidth(xxx, true) 獲取到的是圖像文件的寬度，需要特別主義的是，對于同一張紋理來說，這兩個值可能是不一樣的，那么在規(guī)格化坐標(biāo)間隔的時候，應(yīng)該明確的是，對于一個 w*h 圖像的圖片，那么對于圖中點(diǎn)（x,y）應(yīng)該轉(zhuǎn)換成為：

tx = x / pHGE->GetWidth(xxx);
ty = y / pHGE->GetHeight(xxx);

而不能寫成：

tx = x / pHGE->GetWidth(xxx, true);

ty = y / pHGE->GetHeight(xxx, true);

這里要注意一下 x，y 的含義

最后再談一下 tx 和 ty，實(shí)際上 tx，ty 大于 1 也是合法的，例如：

tx = 800 / 64;

ty = 600 / 64;

這會使得圖片重復(fù)，而具體的含義，可以通過實(shí)現(xiàn)來體會

 

音效：

使用音效是很簡單的

1. 載入音效：

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

2. 播放：

pHGE->Effect_PlayEx(hEffect);

或者 pHGE->Effect_Play(hEffect);

1）Effect_Play 函數(shù)只接受一個參數(shù)就是音效的句柄 HEFFECT xx;

2）Effect_PlayEx 函數(shù)較為強(qiáng)大，一共有四個參數(shù)：

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   // 是否循環(huán)播放，false表示不循環(huán)
                       );

 

輸入：

僅僅需要調(diào)用函數(shù) pHGE->Input_GetKeyState(HGEK_xxx); 來判斷輸入，應(yīng)該在幀函數(shù)中調(diào)用它，例如：

bool FrameFunc()

{

    if (pHGE->Input_GetKeyState(HGEK_LBUTTOM))

       // ...

    if (pHGE->Input_GetKeyState(HGEK_UP))

       // ...

}