建議讀者對應 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]）

};

規格化坐標間隔在后面的例子中會談到。不過先要談到的一點是 tx，ty 的值超過 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）必選其一，且只能選其一。處理的對象是對象像素顏色和屏幕像素顏色。選擇 BLEND_ALPHABLEND 并且設定對象的 alpha 通道為 FF，可使此組參數無效。

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

 

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

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，實際上 tx，ty 大于 1 也是合法的，例如：

tx = 800 / 64;

ty = 600 / 64;

這會使得圖片重復，而具體的含義，可以通過實現來體會

 

音效：

使用音效是很簡單的

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

       // ...

}