游戏开发基础_二维_三维

第3章二维游戏的基本编程技术

随着游戏制作技术的发展，简单的二维游戏正慢慢被三维游戏取代。然而，二维游戏的编程技术仍然是游戏软件开发的基础，二维游戏仍然占有一定的市场份额，并且不会消失，特别是在手持设备、街机游戏上。本章将介绍二维游戏的相关技术，如二维游戏的基本流程、图像文件的解析、地图编辑、精灵动画等。通过这些知识的学习，可以了解一些游戏编程设计的基本方法，并对游戏的基本结构和交互流程有个初步的认识。

3.1二维游戏的基本流程和架构

游戏的世界丰富多彩，充满了挑战和乐趣。从系统实现的角度看，二维游戏程序应该具备两个基本的功能：交互和输出。交互部分根据用户的操作，改变游戏的各种数据，以反映游戏的当前状态。输出部分处理游戏运行过程中的各种数据，在输出设备（如显示器、音箱）上体现游戏的内容，包括游戏画面、游戏音效、游戏提示等。这两个部件的执行由调度模块指挥，协调它们的运行。简单的调度模块是一个do-while循环，串行执行：交互→输出→再输出→再渲染→……。当然也可以将这两个部件分成不同的线程，并行执行。

如果要编写一个探险类的二维小游戏，一般需要实现这样一个典型场景：代表玩家的小人在地图上移动，寻找各种物品。游戏采用简单的调度模块，即do-while循环来控制。渲染部件将游戏窗口分割为若干个小块，用地图图像填充，然后读取玩家的位置、方向、状态等信息，将角色画到地图上。交互部件检测玩家的输入，并据此更改相应的数据以便输出时使用。至此，一个游戏的基本框架就大体完成。

为实现这个基本的二维游戏框架，首先要实现游戏地图的各种加载和编辑操作，为角色提供游戏环境。在显示地图和游戏角色时，需要采用图像的半透明技术。为了达到游戏角色的动态效果，通常利用精灵动画技术。此外，碰撞检测用于检查游戏场景中的物体是否发生接触，使得游戏环境更加真实。下面的章节将逐一介绍这些二维游戏中的主要技术。

3.2地图的创建与显示

二维游戏中，地图是一个不可或缺的要素。不同的游戏，对地图有不同的要求。有些游戏要求地图尽量接近现实，有真实感；有的游戏则只需要一个简单的背景图片。在本节中，将介绍一些常见的地图类型。

若是只需要一幅背景图片，那么可以简单地把图像读取到内存中，在渲染的时候绘制到屏幕上。一般情况下，地图很大，如果把整个地图作为一个图像文件进行操作，会耗费大量内存资源，或需要长时间读取存储介质上的内容。一般的处理方法是，将大的地图区域拆分成小块，每块对应一个小块地图（tile），这些小块的地图可以重复使用，并且可以拼合在一起，形成大的地图。本节将分别介绍4种通用地图实现的方法：固定地图、滚屏地图、多层次地图、菱形地图。

3.2.1 固定地图

固定地图使用固定的背景作为地图，并将屏幕切割成棋盘状的一系列小块。应用程序在

内存中保持一个二维数组，保存每个小块对应的编号。绘制时根据数组所提供的信息，在每个小块中画上正确的图块，即可拼接成所需要的地图，如图3-2所示。

图3-2 地图的拼接

具体的伪代码如例程3-2所示。

例程3-2 固定地图的拼接算法 for (yi = 0; yi

for(xi = 0; xi

int screenx = xi * tile_wide; //乘以宽度得到最后屏幕上位置

int screeny = yi * tile_high;

//在这个数组中，存放着对应位置的小地图编号，如1表示水，2表示石头，3表示砖等

int tileid = mapping_matrix[yi][xi];

blit(tillid,screenx,screeny); //自编函数，把相应地图贴到正确位置

}

}

该程序段中blit 函数的实现，可以调用Windows 系统的一个API 函数BitBlt()直接实现。该函数的说明如下： BitBlt( hdc,

//设备上下文句柄 (Handle to Device Context) screenx, screeny,

tile_wide, tile_high,

hdcSrc,

//小地图所在的设备上下文句柄 tileid * tile_wide, 0,

//本例将小地图按编号依次排列，拼接成一起，方便读取显 //示时将编号乘以小地图宽度即得所需小地图图像左上角的横坐标

SRCCOPY); 3.2.2 滚屏地图

滚屏地图是固定地图的进一步扩展（如图3-3所示），可以显示远大于固定地图的图像。每屏只显示部分图像，当游戏中人物角色行进时，根据玩家所在位置，确定显示的地图部分。

设置变量：

Playerx 、playery —人物相对于完整地图左上角的坐标。

screen_wide 、screen_high —屏幕的宽和高。

xtile —屏幕上x 轴上可显示的小地图个数。

ytile —屏幕上y 轴上可显示的小地图个数。

tileplayerx=playerx/tile_wide —人物所在格x 轴下标。 tileplayery=playery/tile_high —人物所在格y 轴下标。 应该绘制的地图范围如下：

x 轴—由tileplayerx-xtile/2至tileplayerx+xtile/2。

y 轴—由tileplayery-ytile/2至tileplayery+ytile/2。

当人物在屏幕正中央时，地图到屏幕的位置变化公式为：

screenx=xi*tile_wide –playerx+0.5*screen_wide

screeny=yi*tile_high –playery+0.5*screen_high

图3-3 滚屏地图

因此，例程变为：

int beginx = tileplayerx - xtile/2;

int endx = tileplayerx + xtile/2;

int beginy = tileplayery - ytile/2;

int endy = tileplayery + ytile/2;

tileplayerx = playerx / tile_wide;

tileplayery = playery / tile_high;

for (yi = beginy; yi

for(xi = beginx; xi

int screenx = xi * tile_wide –playerx + 0.5 * screen_wide; //屏幕上位置

int screeny = yi * tile_high –playery + 0.5 * screen_high;

int tileid = mapping_matrix[yi][xi]; //地图数据数组

blit(tillid,screenx,screeny); //自编函数，将相应地图贴到正确位置}

}

3.2.3 多层次地图

当遇到下列情况时，可以考虑使用多层次地图。

需要小地图能重叠或者有层次关系。

在背景上有多个物体运动。

需要模拟物体远近不同的透视关系。

多层次地图的实现思想并不复杂。在滚屏地图的基础上设置多个层次的地图即可。不妨设从底往上分别为0层、1层、……把地图数据数组改为三维数组。

其次，如果希望某层的某一格透明显示，可以采用一个特定的数据（如负数）表示，则：

for (yi = beginy; yi

for (xi = beginx; xi

int screenx = xi * tile_wide –playerx + 0.5 * screen_wide; //屏幕上位置

int screeny = yi * tile_high –playery + 0.5 * screen_high;

for (layeri=0; layeri

int tileid = mapping_matrix[layeri][yi][xi]; //地图数据数组

if (tileid>=0) blit (tillid,screenx,screeny); //把相应地图贴到正确位置

}

}

}

更进一步，可以使每个图层以不同的速度运动。例如，使底部的表示背景的图层移动慢，前景图层移动快。这与现实生活中近大远小的经验是一致的，从而模拟了景物远近不同的层次感。这种技术又称视差卷轴（parallax scroller）。具体实现时，可以对每个图层赋予一个单独的观察者位置，设置每层的观察者位置的运动速度不相同，即可达到目的。

3.2.4 菱形地图

除了使用视差卷轴技术来模拟三维效果外，还有一种常用的在二维画面上表现三维场景的技术，这就是菱形地图技术。菱形地图拼接所使用的小地图是菱形，而不是上文用到的矩形地图，所以关于贴图位置的计算方法较为复杂。

首先，按照如图3-5所示的方式将地图分割并标上二维坐标。

通常，前一个坐标值被称为X坐标，后一个被称为Y坐标。从图3-5可以看出，当X 坐标值增大n时，对应的菱形水平位置右移n×菱形小地图长度/2，竖直位置下移n×菱形小地图高度/2。同理，当Y坐标值增大n时，对应的菱形水平位置左移n×菱形小地图长度/2，竖直位置下移n×菱形小地图高度/2。

设置变量MAXSCREENX和MAXSCREENY 为窗口的宽和高，TILEWIDE和TILEHIGH为菱形地图的宽和高，Data[100][100]为地图数据数组。创建变量hdcTiles[4]对应的内存设备中，存储着4个不同的矩形小地图，地图4个角用纯绿色填充。

图3-5 菱形地图的排列

在输出图像时，使用TransparentBlt( )函数（此函数具体用法见后文“精灵动画”部分），将绿色作为透明关键色，即裁去4个角，从而实现菱形图像效果，如例程3-3所示。

例程3-3 菱形地图

int MapDraw(HDC hdc){

int i,j;

int lim=MAXSCREENX/TILEWIDE; //所需绘制地图的范围

for (i=-lim; i

for (j=-lim; j

int sx=MAXSCREENX/2-(TILEWIDE/2)+(i*TILEWIDE/2)-(j*TILEWIDE/2);

int sy=MAXSCREENY/2-(TILEHIGH/2)+(i*TILEHIGH/2)+(j*TILEHIGH/2);

if((sx0)&&(sy+TILEHIGH>0)

&& (playerx+i<100 && playerx+i>=0) && (playery+j<100 && playery+j>=0) ){ //边界判断TransparentBlt(hdcMem,sx,sy,TILEWIDE,TILEHIGH,

hdcTiles[Data[playerx+i][playery+j]],0,0,TILEWIDE,TILEHIGH,RGB(0,255,0)); //贴图

}

}

BitBlt(hdc,0,0,MAXSCREENX,MAXSCREENY,hdcMem,0,0,SRCCOPY); //画到窗

口

return 0;

}

在具体实现的时候，可以根据实际需要，参照前面提到的滚屏地图技术，加入键盘控制，通过移动观察者所在位置坐标，使地图能向斜45°的4个方向延伸。

图3-6显示了菱形地图拼接的效果。可以看出，菱形地图确实能很好地增强游戏地图的立体感。所以这一技术在各种流行的二维游戏中都得到了运用。

图3-6 菱形地图的效果

3.3颜色的混合与半透明效果

在二维游戏开发中，颜色的混合和半透明效果处理是最常见的二维画面的视觉效果生成方法之一，下面将介绍其基本原理和算法步骤。

3.3.1 基本原理和步骤

在二维游戏中，常常需要将多个图像重叠显示，但又不是完全遮盖。这时就会用到“半透明图”技术，如图3-7所示。本节将简要介绍这种技术的实现方法。

图3-7 半透明操作示意

在颜色的混合和半透明效果的实现中，图像的色彩是一个十分重要的因素。Windows 系统中，每种颜色都由红、绿、蓝三种基本色彩（三原色）组合而成。三原色中每种颜色的亮度用一个8位的二进制数来表示。比如黑色，构成它的三种颜色的亮度都最小，则有黑色的颜色值是RGB(0,0,0)。

在进行半透明处理之前，需要为重叠的各个图像指定透明度（一般只对顶层的物体指定）。规定100%的透明度表示完全透明，0%的透明度为完全不透明（实际应用中的透明度用Alpha值来表示，0～255）。下面举例说明半透明操作的步骤。假设要把图A以40%的透明度覆盖在背景图B上，首先取出A图各像素点的数据，并将RGB值的三个颜色分量分别乘以40%；然后取出B图与A图重叠部分的各像素点的数据，将RGB值的各分量乘以（1～40%）；最后将前面计算得到的两组数据相加，得到对应点半透明叠加结果，并输出结果。公式如下：

半透明图色彩=源图像色彩×(100%-透明度)+背景图像色彩×透明度例程3-4解释和演示了具体的操作过程。

例程3-4 图像半透明处理

int Process(HINSTANCE hInstance, float Alpha, int dx, int dy){

int x,y,bits,i=0;

BITMAP bmiSrc,bmiBack; //存储位图信息

hBitmapSrc=LoadBitmap(hInstance,TEXT("Src")); //读源位图

hBitmapBack=LoadBitmap(hInstance,TEXT("Back")); //背景位图

GetObject(hBitmapSrc,sizeof(BITMAP),&bmiSrc); //源位图信息

GetObject(hBitmapBack,sizeof(BITMAP),&bmiBack); //背景位图信息

bits=bmiSrc.bmBitsPixel/8; //每像素占用字节（本例中为4）

iWidth=bmiBack.bmWidth; //结果图像宽度

iHeight=bmiBack.bmHeight; //结果图像高度

unsigned char *pData1=new unsigned char[bmiSrc.bmHeight * bmiSrc.bmWidthBytes];

//分配内存

GetBitmapBits(hBitmapSrc, bmiSrc.bmHeight*bmiSrc.bmWidthBytes, pData1);

//取各点RGB值

unsigned char *pData2=new unsigned char[bmiBack.bmHeight * bmiBack.bmWidthBytes];

GetBitmapBits(hBitmapBack, bmiBack.bmHeight*bmiBack.bmWidthBytes, pData2);

for (y=0; y

for (x=0; x

pData1[x*bits+y*bmiSrc.bmWidthBytes] *=(1-Alpha); //源位图B值*(1-透明度)

pData1[x*bits+y*bmiSrc.bmWidthBytes+1] *=(1-Alpha); // G值*(1-透明度)

pData1[x*bits+y*bmiSrc.bmWidthBytes+2] *=(1-Alpha); // R值*(1-透明度)

}

}

for (y=dy; y

pData2[x*bits+y*bmiBack.bmWidthBytes] *=Alpha; //背景位图B值*透明度

pData2[x*bits+y*bmiBack.bmWidthBytes] += pData1[i]; //逐像素叠加

pData2[x*bits+y*bmiBack.bmWidthBytes+1] *=Alpha; // G值*透明度

pData2[x*bits+y*bmiBack.bmWidthBytes+1] += pData1[i+1]; //逐像素叠加

pData2[x*bits+y*bmiBack.bmWidthBytes+2] *=Alpha; // R值*透明度

pData2[x*bits+y*bmiBack.bmWidthBytes+2] += pData1[i+2]; //逐像素叠加

i+=bits; //此处bits=4，第四位为Alpha值，本例不用，另见AlphaBlendDemo }

}

SetBitmapBits(hBitmapBack,bmiBack.bmHeight*bmiBack.bmWidthBytes,pData2);//写各点R G B值

SelectObject(hdcMem,hBitmapBack); //选位图对象到内存DC中

delete [ ]pData1;

delete [ ]pData2;

return 0;

}

例程3-4首先用API函数GetObject()获取要处理的位图的相关信息，然后用函数GetBitmapBits()分别读出位图图像的数据，放入申请的动态数组中，最后用循环结构对数组中每个重叠的点进行相应的处理，将结果写回位图，并输出到屏幕。

3.3.2 Alpha融合技术

前面提到，在32位显示模式下，图像每个像素点有1字节是透明度Alpha值。在Windows 系统中，有一个API函数AlphaBlend()专门对带有Alpha值的图像进行透明和混合处理。

BOOL AlphaBlend( HDC hdcDest, // 目标DC

int nXOriginDest, int nYOriginDest, // 目标图像左上角坐标

int nWidthDest, // 目标图像宽度

int nHeightDest, // 目标图像高度

HDC hdcSrc, // 源DC

int nXOriginSrc, int nYOriginSrc, // 源图像左上角坐标

int nWidthSrc, // 源图像宽度

int nHeightSrc, // 源图像高度

BLENDFUNCTION blendFunction ); // 结构体，格式见下文

typedef struct _BLENDFUNCTION {

BYTE BlendOp; // 操作数

BYTE BlendFlags; // 混合标志

BYTE SourceConstantAlpha; // 常量透明度

BYTE AlphaFormat; // 透明方式

} BLENDFUNCTION;

其中，BLENDFUNCTION结构体说明如下：

BlendOp —目前有意义的值只有一个，在wingdi.h中定义为AC_SRC_OVER，意为将源图像叠放在目标图像上，该值等于0。

BlendFlags —保留字节，为0。

SourceConstantAlpha —指定一个全局的透明度，作用在整个源图像上。该值置为最大值255时，相当于对源图像不产生影响，100%显示。

AlphaFormat —指定源图像和目标图像的叠放关系，目前可用值为AC_SRC_ALPHA或0。

3.4精灵动画

二维动画就是一组连续的图像序列，当按照一定的速率显示的时候，能传递一种运动的感觉。在二维游戏的动画生成中，一种方法是采用直接播放来实现，如在游戏的片头或者片尾中，使用预先设计好的A VI或者MPEG文件来展示动画内容。另一种常见的方式是采用连续贴图的方式来产生动画效果，即精灵动画，它是使用得最多的二维动画技术之一。所谓“精灵”，是指一个或者一组位图图像被合成到背景图像上，并产生运动的效果。相对于屏幕的大小而言，“精灵”通常是很小的，当今的图形硬件可以很快地处理精灵动画，使得场景里的很多“精灵”物体可以同时运动。在具体讲述精灵动画实现技术之前，本节首先介绍二维图像处理的镂空图技术，它是实现精灵动画技术的基础。

镂空图技术在算法实现上就是将源图像的一部分（可以是不规则图形）贴到背景上，忽略源图像上的其他部分，其表现出来的视觉效果就像把源图像挖去一部分，然后贴在背景图上。Windows GDI的API函数只支持对矩形图像的操作，那么如何进行镂空处理呢？前面讲过，黑色对应的RGB值是全0，白色则是全1（二进制）。联系C语言里的位运算，可以知道，任何颜色RGB值和黑色按位与，得到黑色；和白色按位与，结果不变。同样的，任何颜色和黑色按位或，不变；白色按位或，得到白色。根据这个原理就可以制作镂空图。

图3-8的左边是原始图像，右边是掩码图。首先将掩码图和背景图案进行按位与，将原始图像的主体对应位置挖空。然后，将原始图像和上一步处理结果按位或，则原始图像的主体部分贴到背景上并遮盖背景，其余部分（掩码图中白色对应的部分）没有贴到背景上。

图3-8 原始图和掩码图

在BitBlt()等函数的参数中，有一选项是DWORD dwRop，这是光栅运算操作码，它指定了如何将源矩形里的颜色数据与目标矩形里的数据进行运算，以得到最后的图像。其中，操作数SRCAND表示把源图像和目标图像按位与，操作数SRCPAINT则表示按位或。要注意的一点是，如果直接在窗口对应的DC里进行多次BitBlt操作，会使画面出现闪烁。因此，需要首先通过CreateCompatibleDC()函数建立一个内存中的缓冲DC，用CreateCompatibleBitmap()函数建立一个位图对象，并选入新建的DC。做完这些之后，就可以在内存DC上进行操作，只要最后将结果做一次BitBlt到窗口即可，镂空图的具体编程实

现如例程3-6所示。还有一些常用的操作码，如表3-2所示。

例程3-6 镂空图的实现

hdc=GetDC(hwnd); //屏幕上可见的窗口DC

hdcSrc=CreateCompatibleDC(hdc); //源图像DC

hdcBack=CreateCompatibleDC(hdc); //目标图像DC

hdcMem=CreateCompatibleDC(hdc); //内存DC

hBitmapSrc=LoadBitmap(hInstance,TEXT("CARS")); //读入图像

hBitmapBack=LoadBitmap(hInstance,TEXT("SCENE"));

hBitmapMem=CreateCompatibleBitmap(hdc,388,517);

//为内存DC建立一个位图，大小以放得下最大的图像为准，此处取背景图大小SelectObject(hdcSrc,hBitmapSrc); //将位图分别选入DC

SelectObject(hdcBack,hBitmapBack);

SelectObject(hdcMem,hBitmapMem);

//以下是镂空图操作

BitBlt(hdcMem,0,0,388,517,hdcBack,0,0,SRCCOPY); //将背景拷贝到内存DC上

BitBlt( //处理掩码图

hdcMem,0,0,220,133, //目标为内存DC上位置为(0,0)～(220,133)的矩形

hdcSrc,220,0, //源DC上以(220,0)为左上角，大小和目标区域一致的图像，本例为掩码图部分

SRCAND); //按位与

BitBlt(hdcMem,0,0,220,133,hdcSrc,0,0,SRCPAINT); //将原始图与上一步结果按位或

BitBlt(hdc,0,0,388,517,hdcMem,0,0,SRCCOPY); //把最终结果画到屏幕上的窗口的DC

表3-2 光栅运算操作码

镂空图做好之后的运动方式可以通过替换上面代码中的两句达到：

BitBlt(hdcMem,iCarX,iCarY,220,133,hdcSrc,220,0,SRCAND); //处理掩码图

BitBlt(hdcMem,iCarX,iCarY,220,133,hdcSrc,0,0,SRCPAINT); //处理目标图像

1[①]目标位图指的是在函数中指定的、在目标DC上一个区域中的图形。

2[②] AND——与运算&；OR——或运算|；XOR——异或运算^ ；NOT——取反运算~。

然后，在程序中改变iCarX和iCarY的值，就可以改变镂空图的坐标，从而产生动画的效果了。最常见的方法是使用一个定时器，每隔一定时间改变图像坐标，让图中的汽车在背景上运动起来。

在系统实现上，绘制动画序列中的每一帧的算法步骤为：加载背景图→确定“精灵”的位置→将某一镂空图与背景图作AND运算→将对应的人物图与背景图作OR运算→更新“精灵”的位置。

上述步骤只是让“精灵”运动起来，但如何在屏幕上产生行走的人物之类的动画，而不仅仅是简单的图像平移呢？这就需要具体分析相应的运动特性，在行走动画序列中，每幅图像或者每一动画帧，都必须有机地、无缝地与其他图像融合在一起，这样才能随着时间的变化，产生平滑的、连续的行走运动。

在系统实现上，可使用多幅精灵图像，参照关键帧方法来模拟更为复杂的运动效果。例如，对于人物行走的动画模拟，可将游戏人物的图像按行走方向分为4行，如图3-9所示，每行包含两个可以连贯成动画的图像。在程序中，用一个变量存储列的编号。然后按照用户键盘的控制，改变行的编号，同时在两个列中循环变化。再按照镂空图的原理，就可以做出较好的动画了。例程3-7给出了使用键盘控制游戏人物行走的精灵动画编程实现方法。

图3-9 精灵动画所用图像及其原理

例程3-7 键盘控制与精灵的绘制

//键盘处理部分（在WM_KEYDOWN消息中处理）

step = 4; //角色步长

switch(wParam){

case VK_UP: //分别处理四个方向

Row=0; posy-=step; break;

case VK_RIGHT:

Row=1; posx+=step; break;

case VK_DOWN:

Row=2; posy+=step; break;

case VK_LEFT

Row=3; posx-=step; break;

}

Col++; //列号循环变化

Col = Col%3;

posx = (posx < 0 ? 0 : posx); posy = ( posy < 0 ? 0 : posy); //防止移出窗口范围

posx = (posx > WindowWidth ? WindowWidth : posx);

posy = (posy > WindowHeight ? WindowHeight : posy);

……

//精灵的绘制部分（WM_PAINT消息中处理）

BitBlt (hdcMem, 0, 0, WindowWidth, WindowHeight, hdcBack, 0, 0, SRCCOPY); //背景

BitBlt (hdcMem, posx, posy, TankWidth, TankHeight, hdcTank,

MaskPosX + Col*TankWidth, //列号乘以角色宽，加上大掩码图的起始位置

Row*TankHeight, //行号乘以角色高度

SRCAND); //按位与（镂空图处理步骤1）

BitBlt (hdcMem, posx, posy, TankWidth, TankHeight, hdcTank,

Col*TankWidth, Row*TankHeight, SRCPAINT); //镂空图处理步骤2

//把内存DC内容复制到窗口DC上

BitBlt (hdc, 0, 0, WindowWidth, WindowHeight, hdcMem, 0, 0, SRCCOPY);

精灵动画技术的主要不足之处在于，它的图像来源于某些固定的资源，所以无法直接在精灵上面体现出场景的深度和光照所需的细节。因此，精灵动画大多应用在要求显示速度而不要求真实感的交互中。

3.5二维游戏世界的模拟

现实世界存在着各种特征：物体相互碰撞、物体相互遮挡和物体相对运动等。在二维游戏中，往往需要通过编程的方法来模拟这些特征，使游戏世界更为接近现实。

3.5.1 碰撞检测

对运动物体的碰撞判断是许多游戏程序中不可或缺的要素：人物与物体碰撞、人物与人物的碰撞等。常见的碰撞检测方法一般有：区域检测、碰撞点检测和颜色检测。

在要求的精确度不高的情况下，可以使用区域检测来判断碰撞，将被检测物体置于某种规则形状之中进行判断。例如，将两个复杂图形的碰撞检测简化为两个矩形或两个圆的碰撞检测。矩形可以通过比较各自的左上角和右下角的坐标来实现检测；圆一般要通过圆心距与各自半径的关系来检测。这种检测方式速度快，但如果用单个检测区域来表示物体的话，显然精度不高，有可能出现两物体还没碰撞就误判的情况。为了尽可能减少这种情况的产生，可以对一个物体设定多个检测区域（如图3-10所示），尽量使检测区域的外形与物体轮廓接近。

图3-10 基于区域检测的碰撞判断

碰撞判断的另一种方法是基于碰撞点检测来判断，它其实也是区域检测的一种（如图3-11所示），不同的只是用碰撞点来代替碰撞区域。如果运用得当，可以减少碰撞检测的工作量。一般在两个运动物体中的一个物体上设置碰撞点，在另一个物体上设置检测区域，运行时逐个判断碰撞点是否在检测区域中。

图3-11 碰撞点检测

在二维游戏中，也可以通过颜色检测来判断碰撞情况，它提供了一种较为精确但也相对耗时的检测方法。如图3-12所示，要检测汽车与树林的碰撞（或是遮盖）情况，就要为树林做一张掩码图，将树林主体轮廓用黑色填充。要产生汽车驶入树林后面的效果，先在背景上贴上汽车的图像，然后在上面用镂空图技术画上树林。再者，判断汽车图像在树林图像上的相对位置，将汽车图像上的点和掩码图上相应位置的点做按位与操作，检查结果中是否有黑色点（RGB值为0）存在。联想到前面讲过的，任何颜色的RGB值与黑色图形进行按位与运算，将得到黑色。如果预先排除汽车图像中原本的黑色部分，以及汽车图像中的白色部分，那么黑色点的出现就表明发生了碰撞。

图3-12 基于颜色检测来判断碰撞所需要使用的图像

3.6一个简单的二维潜艇游戏循环实例

本质上，游戏是一个连续过程，要不断地执行逻辑指令，并将图像输出到屏幕，这与电影的播放过程非常类似。但是这个过程由用户参与交互，这种有交互的循环过程叫做“游戏循环”。“游戏循环”是在游戏退出之前循环执行的代码。这段代码包括：在屏幕上绘制场景、处理游戏的逻辑过程、处理用户的输入信息等。因此，除了绘制精灵动画以外，如何实现游戏循环也是游戏开发中的关键问题。

最早期的游戏循环相对容易，仅需要“等待输入－处理输入－反馈信息”这样三个简单的步骤。实时游戏中的循环过程相对复杂，要求无论是否有用户输入信息，游戏都要循环继续，因此最基本的游戏循环模式如图3-13所示。

图3-13 二维游戏基本事件流程

为了方便理解，在此使用一个二维潜艇游戏的游戏循环代码来对此加以解释说明，如例程3-9所示。

例程3-9 二维潜艇游戏的游戏循环代码

// 定义游戏循环的状态

#define GAME_INIT 1 //游戏初始化

#define GAME_MENU 2 //游戏目录选择

#define GAME_STARTING 3 //游戏开始

#define GAME_RUN 4 //游戏进行中

#define GAME_RESTART 5 //重新启动游戏

#define GAME_EXIT 6 //退出游戏

// 游戏全局变量

int game_state= GAME_INIT; //初始状态

Int error = 0; //向操作系统反馈错误信息

// 主函数

void main( ){

while (game_state != GAME_EXIT){ //游戏循环的实现部分

switch(game_state) {

case GAME_INIT: { //初始化

Init( ); // 分配内存和资源

game_state = GAME_MENU;

}

break;

case GAME_MENU: { //游戏目录

game_state = Menu( ); //调用菜单并等待选择

}

break;

//游戏准备运行，这是个可选部分，但通常使用这个状态来将一些游戏中要用到

//的变量赋值初始化

case GAME_STARTING: {

Setup_For_Run( ); //切换到运行状态

game_state = GAME_RUN;

}

break;

case GAME_RUN: { //游戏运行，这部分包括整个游戏逻辑循环过程Clear( ); //清屏

Get_Input( ); //获取输入

Do_Logic( ); // AI逻辑

Render_Frame( ); //图像绘制，精灵动画的实现部分

Wait( ); // 等待显示同步，切换游戏状态的唯一办法就是在Get_Input()中的用户输入}

break;

//游戏重新启动，这部分是用来将游戏循环中改变的状态进行恢复的

case GAME_RESTART:

Fixup( ); //切换回游戏目录

game_state = GAME_MENU;

} break;

case GAME_EXIT: { // 游戏退出，进入这个状态就将释放一切内存并退出游戏Release_And_Cleanup( );

error =0; //正常退出

}

break;

default: break;

} // switch结束

} // while结束

return(error); //返回错误代码

} // main函数结束

在这个游戏循环中，程序通过game_state状态的改变来不断切换switch语句的分支情况。其中，Get_Input()函数获取输入信息并相应处理，由此实现了游戏的交互和实时性，使程序不间断运行下去，直到用户退出。程序运行的界面如图3-14所示。

图3-14 二维游戏舰艇实例

习题3

1. 尝试编程实现一段精灵动画效果，包括详细的开发文档说明。

2. 尝试编程实现菱形地图的拼接技术，包括详细的开发文档说明。

参考文献

[1] 荣钦科技. Visual C++ 游戏设计. 北京科海电子出版社，2003

[2] Charles Petzold. Programming Windows. Microsoft Press，1998

[3] MSDN Library for Visual Studio 6.0. Microsoft，1998

[4] 网冠科技. Visual C++.net小游戏开发时尚编程百例. 机械工业出版社，2004

[5] https://www.360docs.net/doc/c36562782.html,/shipsource.html

[6] https://www.360docs.net/doc/c36562782.html,

[7] “潜艇大战”游戏的制作. https://www.360docs.net/doc/c36562782.html,/qtdz.htm

第4章三维图形学基础

早期的计算机游戏以字符类为主，缺乏视觉美感。随着Windows平台的推出和计算机图形硬件的发展，出现了二维游戏、二维半游戏、三维游戏甚至虚拟沉浸式游戏，并逐渐演化成为当今游戏的主流形式。这些三维游戏的开发，与三维计算机图形学密切相关，了解和掌握这些基本理论知识是三维游戏编程的基础。本章将针对三维计算机游戏编程，简要介绍所涉及的三维计算机图形学的基本概念和原理性知识。

4.1向量、矩阵及四元数运算

本节介绍三维图形学的数学基础：向量、矩阵及四元数的运算。为规范起见，本章中提及的数值用小写的斜体罗马或希腊文字表示，如a、b、c、x、y、z；点或向量用小写的粗体罗马或希腊文字表示，如u、v、w；矩阵用大写的粗体罗马或希腊文字表示，如A、B、C、D。

4.1.1 向量运算

游戏中涉及的向量的维数一般是二、三、四。一维空间的向量本质上是一个数值。三维空间中的向量可写成(x, y, z)或者[x, y, z]。在运算式中，写成水平排列形式的向量称为行向量；写成垂直排列形式的向量则称为列向量。如果将向量看成矩阵形式，同一个向量的行向量和列向量形式的矩阵的维数正好相反。尽管空间中的向量与点（位置）都表现为一系列数值，但两者的意义并不一样。向量拥有大小和方向，表达的是一个相对的位移关系，没有确定的位置关系，因此一个向量可以处在空间的任意位置。而空间中的点则表示一个绝对的位置，没有方向和大小。两个不同的点决定一个向量，一个点和一个向量则可以决定另外一个点。令三维向量，则与三维空间向量有关的定义和操作有：

①零向量——零向量的含义是各个分量为零：。

②向量取反——对向量的各个分量乘以“-1”，这在几何上的解释是将向量旋转180o：

③向量的范数——一个n维向量的大小称为范数，一般采用欧氏距离计算：

④单位向量——其含义是它的范数或者说大小是1个单位，即||v||=1。

⑤向量与数值的乘法：

⑥向量的归一化——将一个非零向量变成一个单位向量的过程叫做向量的归一化，零

向量不能进行向量归一化：，。一类特殊的单位向量是几何物体表面的朝向，又称为法向。

⑦两个n维向量的加法：

⑧向量的点积——点积又称内积（dot），它等于一个向量在另一个向量上的投影的大小，是一个数值。

点积等价于两个向量的范数与两者夹角的余弦的积。因此可以通过向量的点积来计算它

们的夹角：。点积满足交换率与分配率，即：u·v=v·u，(u+v) w=u·w+v·w。

⑨向量的投影——给定两个向量v和n，可以将v分成两部分，和v_，它们分别平行和垂直于n，且v=+v_。v||称为v在n上的投影：

⑩向量的叉积——又叫外积（cross），两个三维向量的叉积是一个三维向量：

向量叉积的范数等于两个向量的范数与两者夹角的正弦的积。因此可以从向量的叉积计算它们的夹角：||a×b||=||a||·||b||sinθ。两个向量的叉积满足表达式：a×b=-b×a，(a+b)×c=a×c+b×c，(a×b)×c=a×(b×c)。叉积与点积的混合计算满足交换率：(a·b)×c=a·(b×c)。

4.1.2 矩阵运算

矩阵是一个按行列排列的四边形网格，每个格子记录一个数值，因此被看做二维数组。二维并不是指空间维数，而是指矩阵的排列方式。数组的维数可以是任意值，包括1。广义地说，一个向量是一个数值数组，一个矩阵是一个向量数组。一个n维的向量可以看成1×n （行向量）或n×1（列向量）的矩阵。对于一个n×n的矩阵，若它的非对角线元素（即坐标为(i, j),且i≠j，i=0, 1, …, n-1，j=0, 1, …, n-1的元素）为零，则称为对角矩阵。若一个对角矩阵的对角线上的值都是1，称为单位矩阵。三维空间中的几何变换与矩阵关系非常密切，通常可以用矩阵来表示。下面列出矩阵的一些运算规则。

①矩阵的转置——若矩阵的维数是m×n，那么它的转置M T是一个n×m的矩阵，其

中M T的列由的行变换而来，也就是说，=M n（i=0, 1, …, n-1，j=0, 1, …, m-1）。3×3矩阵的转置为：

②矩阵与数值的乘法：

③矩阵乘法——矩阵A、B相乘，A的行数必须等于B的列数，若A m×n，B m×p，C=AB

的结果C是一个m×p的矩阵。矩阵乘法的公式是：c ij=a ik b kj（i=0, …, m-1，j=0, …, p-1）。

④向量与矩阵的乘法——向量可被看成一个只有一行或者一列的矩阵。只要满足矩阵乘法规则，向量与矩阵之间也可以进行乘法操作。下面是一个三维向量与3×3矩阵的乘法公式：

如果矩阵的行数与列数相同，且各行代表的向量满足下列条件：不为零向量；互相垂直（即相互点积为0），范数为1，则该矩阵为正交矩阵。若p、q和r为三维空间中互相正交的单位向量，则它们构成了三维空间的一组基，任意三维向量v可表示为p、q、r的线性组合。p、q和r组成的变换矩阵M为：

将矩阵乘以某个向量可表示为：。

因此，一个3×3正交矩阵的解释为：矩阵的行是坐标空间的基向量，一个向量乘以该矩阵相当于矩阵将向量旋转变换到另外一个向量，这种变换称为线性变换。线性变换不包含平移变换。若包含线性变换和平移变换则称为仿射变换，它不能用3×3矩阵表示，但可以表示为4×4齐次坐标矩阵。

⑤绕坐标轴的旋转矩阵——如图4-1所示，将某点绕x、y、z轴分别旋转角度的公式如下：

图4-1 沿三个坐标轴的旋转示意图。

矩阵的乘法不满足交换率，因此复合顺序非常重要。假设旋转矩阵是,和

，应用旋转矩阵与应用结果不同。在游戏编程中用得最多的次序是首先绕y轴（roll），再绕x轴（pitch），最后绕z轴（pan）旋转：

展开后得：

⑥由局部坐标系统确定旋转轴角度——若局部坐标系统的三个正交向量分别是x、y、z，则从向量(1, 0, 0)、(0, 1, 0)、(0, 0, 1)到它的变换矩阵是：

对照上面两个公式得y z=-sin t x，因此t x=a sin(-y z)。由(cos t x(-sin t y), cos t y)=(x z, z z)，得t y=a tan2(x z, z z)。又因为(cos t x sin(t z,cos t z)=(y x, y y)，得t z=a tan2(y x, y y)。由于角度的混合有多种可能性，(t x, t y, t z)的解并不唯一。

⑦绕任意单位向量的旋转矩阵——绕单位向量n旋转角的矩阵可表示为：

⑧沿坐标轴的缩放矩阵——在x、y、z方向缩放、、的矩阵为

齐次坐标和齐次矩阵——前面我们用到的都是二维和三维向量，而齐次矩阵以及齐

次坐标定义在四维空间，它们是人们为了简化三维坐标变换的操作而引入的。设三维空间坐标(x, y, z)，引入第4个分量w，构成齐次坐标(x, y, z, w)。若w任意变化，则x/w、y/w、z/w 形成了一个过原点且与(x, y, z)连线射向无穷远处的直线。因此，三维空间中任意一点都有齐次坐标空间中的无限个点与之对应。3×3线性变换矩阵并不能表示平移变换，而4×4矩阵恰恰统一了线性变换与平移变换。设旋转变换为R，平移变换为T，则两者的结合是：

绕任意一点旋转的矩阵——即两个平移矩阵和一个旋转矩阵的复合。以二维

为例（如图4-2所示），令三角形绕它的中心旋转90°可分为三步。首先，平移坐标系使得中心与原点重合。然后，绕原点旋转90°。最后，将三角形中心点平移回中心处。这三步的矩阵分别是：、和。整个过程可以用矩阵表示为

图4-2 绕任意一点旋转的三个步骤

4.1.3 四元数及其运算

四元数将三维空间的旋转拓展到四维空间，在旋转和方向的变化方面，它优于欧拉角和变换矩阵。特别地，比欧拉角的直接插值能产生更为平滑和连续的旋转，因此被广泛用于游戏世界中的旋转设置。

一个四元数q由4个浮点数定义：q x，q y，q z和q w。在数学形式上，它表示为

q=i q x+j q y+k q z+q w=q v+ q w i2=j2=k2=-1

式中，q v=(q x, q y, q z)称为四元数的虚部，q w称为四元数的实部。

对于两个四元数q和r，其加法定义为

q+r=(q v, q w)+(r v+r w)=(q v+r v, q w+r w)

实现四元数加法运算的代码示例如下：

// 四元数表达为(x, y, z, w)

Quaternion QuaternionAddition( Quaternion &q1, Quaternion &q2) {

Quaternion res;

res.x=q1.x+q2.x; res.y=q1.y+q2.y; res.z=q1.z+q1z; res.w=q1.w+q2.w;

return res;

}

四元数的共轭定义为q*=(q v, q w)*=(-q v, q w)。

四元数的模定义为n(q)=q x2+q y2+q z2+q w2。

单位化的四元数长度为q x2+q y2+q z2+q w2=1.0。

×r v+r w×q v+q w×r v, q w×r w-q v·r v)。

四元数乘法定义为q×r=(q

v

实现四元数乘法运算的代码示例如下：

// 四元数表达为(x, y, z, w)

Quaternion QuaternionMultiplication(Quaternion &q1, Quaternion &q2) {

Quaternion res;

Float A, B, C, D, E, F, G, H;

A=(q1.w+q1.x)*(q2.w+q2.x); B=(q1.z-q1.y)*(q2.y-q2.z);

C=(q1.w-q1.x)*(q2.y+q2.z); D=(q1.y + q1.z) * (q2.w-q2.x);

E=(q1.x+q1.z)*(q2.x+q2.y); F=(q1.x-q1.z)*(q1.x-q2.y);

G=(q1.w+q1.y)*(q2.w-q2.z); H=(q1.w-q1.y) * (q2.w + q2.z);

res.w=B+(-E-F+G+H)/2.0f; res.x=A-(E+F+G+H)/2.0f;

res.y=C+(E-F+G-H)/2.0f; res.z=D+(E-F-G+H)/2.0f;

return res;

}

四元数的逆定义为

由上述定义，可推导出以下一些性质：

①共轭运算规则(q*)*=q，(q+r)*=q*，(q×r)*=r*×q*

②模的运算规则n(q*)=n(q)，n(q×r)=n(q)×n(r)

③乘法分配律p×(s+t)=p×s+p×r，(p+q)×r=p×r+q×r

④乘法结合律p×(q×r)=(p×q)×r

在计算机图形学的旋转变换中，一般使用单位化的四元数，q x、q y和q z定义一个旋转轴向量q v，q w描述了扭曲或者旋转的角度，即：

q=(q x, q y, q z, q w)=(sin(θ/2)x, sin(θ/2)y, sin(θ/2)z, cos(θ/2))

q x=Axis.x×sin(θ/2)，q y=Axis.y×sin(θ/2)，q z=Axis.z×sin(θ/2)，q w=cos(θ/2)

式中，Axis是一个单位长度的向量，即Axis.x2+Axis.y2+Axis.z2=1.0。

旋转角度的计算公式为θ=arccos q

×2.0。

v

四元数的轴向Axis与旋转角度的关系如图4-3所示。

图4-3 四元数的轴向量Axis与旋转角度的关系

从图4-3可以看出，对于一个四元数q，-q是将它的轴向和旋转角度改变为负方向，实际上表达了同一个旋转。因此，在表达旋转时，q与-q等价。四元数的最大特点是它能表达任意的三维旋转，而且这种表达方式十分简洁。

仿照复数的对数和指数幂的定义：cosφ+i sinφ=e iφ，单位化四元数的对数可定义为

log q=logeθ/2 Axis=θ/2 Axis

而单位化四元数的指数幂可定义为

q t=(sin(θ/2) Axis+cos(θ/2))t=e(θ/2)t Axis=sin(tθ/2) Axis+cos(tθ/2)

将四元数Q=(q x, q y, q z , q w)转化为一个对应的旋转矩阵

式中，s=2/||Q||。如果Q是单位化的四元数，那么转换公式为

假设一个旋转矩阵为

将它转换为四元数Q(q x, q y, q z, q w)的公式为

，，，