图像处理与二维游戏课件

图像处理与二维游戏论坛/chenwei/game校内：...谁能开一个ftp?供上传游戏课程的演示程序、Video等？课后和我发信联系！主要内容二维游戏简单框架图像文件结构(以BMP）图像显示（例程）典型图像操作典型的图像特效原理二维游戏（例程）

1. 初始化 2. 进入游戏循环 3. 查询用户输入状态 4. 执行游戏逻辑和AI判断 5. 绘制图像 6. 合成显示 7. 循环 8. 退出游戏循环的基本步骤GameRunGameInitGameMenuGameRestartGameExitGameStarting//definesforgameloopstates#defineGAME_INIT 1 //thegameisinitializing#defineGAME_MENU 2 //thegameisinthemenu#defineGAME_STARTING 3 //thegameisabouttorun#defineGAME_RUN 4 //thegameisnowrunning#defineGAME_RESTART 5 //thegameisgoingtorestart#defineGAME_EXIT 6 //thegameisexiting//gameglobalsintgame_state =GAME_INIT; //startoffinthisstateInterror =0; //usedtosenderrorsbacktoOS//mainbeginshereVoidmain(){ //implementationofmaingameloop caseGAME_MENU: //thegameisinthemenu { //callthemainmenufunctionandletitswitchstates game_state=Menu();

//note:wecouldforceaRUNstatehere }break;

caseGAME_STARTING: //thegameisabouttorun { //thisstateisoptional,butusuallyusedtosetthingsupright

//beforethegameisrunyoumightdoalittlemorehousekeeping Setup_For_Run();

//switchtorunstate

game_state=GAME_RUN; }break;

caseGAME_RUN:

//thegameisnowrunning

{

//thissectioncontainstheentiregamelogicloop Clear(); //clearthedisplay

Get_Input(); //gettheinput

Do_Logic(); //performlogicandAI

Render_Frame();//displaythenextframeofanimation

Wait(); //synchronizethedisplay

//theonlywaythatstatecanbechangedisthruuserinteraction //intheinputsectionorbymaybelosingthegame.

}break;

caseGAME_RESTART:

//thegameisrestarting

{

//thissectionisacleanupstateusedtofixupanylooseends //beforerunningagain

Fixup(); //switchstatesbacktothemenu

game_state=GAME_MENU;

}break;

二维游戏技术二维游戏概览地图的创建与显示颜色混合与半透明精灵动画碰撞检测游戏循环概念及实例解析二维游戏早期的游戏都是二维的如Diablo(黑暗破坏神)只有两个轴（上下，左右）很多RPG游戏是固定视角的二维半二维游戏（续）二维游戏对现在的编程仍然有意义（特别是现在的手机游戏）：如内存、分辨率本质上，视频游戏是一个连续的循环，执行逻辑指令，并将图像输出到屏幕。 这和电影的播放非常类似，但是这个电影是用户指定的。固定地图使用固定的背景作为地图将屏幕切割成棋盘状的一系列小块在内存中保持一个二维数组，保存每个小块对应的编号绘制时根据数组提供的信息，在每个小块画上相应图块

固定地图拼接算法实现 for(yi=0;yi<y轴小地图个数;yi++){ for(xi=0;xi<x轴小地图个数;xi++){ intscreenx=xi*tile_wide; //乘以宽度得到最后屏幕上位置 intscreeny=yi*tile_high; inttileid=mapping_matrix[yi][xi]; //在这个数组中存放着对应位置的小地图编 //号，如1表示水，2表示石头，3表示砖等 blit(tillid,screenx,screeny); //自编函数，把相应地图贴到正确位置 } }该程序段中blit函数的实现，可以调用Windows系统的一个API函数BitBlt直接实现滚屏地图是固定地图的进一步扩展，可以显示远大于固定地图的图像根据玩家所在位置，确定显示的地图部分滚屏地图滚屏地图算法实现（续）例程： intbeginx=tileplayerx-xtile/2 intendx=tileplayerx+xtile/2 intbeginy=tileplayery-ytile/2 intendy=tileplayery+ytile/2 tileplayerx=playerx/tile_widetileplayery=playery/tile_high for(yi=beginy;yi<endy;yi++){ for(xi=beginx;xi<endx;xi++){ intscreenx=xi*tile_wide–playerx+0.5*screen_wide; //屏幕上位置 intscreeny=yi*tile_high–playery+0.5*screen_high;inttileid=mapping_matrix[yi][xi]; //地图数据数组 blit(tillid,screenx,screeny);//自编函数，将相应地图贴到正确位置 } }多层次地图以下列情况，可以考虑使用多层次地图。需要小地图能重叠或者有层次关系；在背景上有多个物体运动；需要模拟物体远近不同的透视关系；多层次地图的实现思想并不复杂,在滚屏地图的基础上设置多个层次的地图即可。不妨设从底往上分别为0层，1层，…把地图数据数组改为三维数组。可以使每个图层以不同的速度运动,模拟景物远近不同的层次感。这种技术，又称视差卷轴（ParallaxScrollers）。

菱形地图菱形地图是在二维画面上表现三维场景的常用技术拼接所使用的小地图是菱形，计算比较复杂空间的离散的数字化的描述二维区域什么是图像(r0,g0,b0)(r1,g1,b1)(r2,g2,b2)(r3,g3,b3)(r4,g4,b4)(r5,g5,b5)(r6,g6,b6)(r7,g7,b7)图像表示文件格式BMP,TGA,TIFF,GIF,JPEG等定义(Bitmap)位图图像是一块由彩色点集组成的矩形区域。DIB(DeviceIndependentbitmap) 设备无关位图DDB(Device-DependentBitmaps)设备有关位图：老的Windows系统。位图信息typedefstruct{ DWORDbiSize; //=sizeof(BITMAPINFOHEADER) DWORDbiWidth; //位图宽度(以象素计) DWORDniHeight; //正数，左下角为起始点，从下向上 //负数，左上角为起点，从上向下

WORDbiplanes; //colorplane数，恒等于1 WORDbiBitCount; //1,4,8,24,32 DWORDbiCompression;//通常，以下域可以忽略，置为0即可 DWORDbiSizeImage; DWORDbiXPelsPerMeter; DWORDbiYPelsPerMeter; DWORDbiClrUsed; //位图使用的颜色 DWORDbiClrImportant;//重要颜色数}BITMAPINFOHEADERRGB四元组typedefstruct{ BYTErgbBlue; BYTErgbGreen; BYTErgbRed; BYTErgbReserved; }RGBQUAD

BMP图像显示从BMP文件中载入图像数据分配内存缓冲区基于文件结构提取图像数据在屏幕上显示图像：将图像数据发送至图卡Bitblt()：块拷贝图像数据OpenGL/DirectXStretchBlt：将一个保存在DIB中的图像数据拷贝到另外一个矩形区域，带缩放。图像的半透明操作每种颜色都由红绿蓝3种基本色彩（三原色）组合而成；三原色中每一种颜色的亮度用一个8位的二进制数来表示半透明图色彩=源图像色彩×（100%-透明度）+背景图像色彩×透明度WindowsAPI函数：AlphaBlend+基于精灵的人物表现鬼怪ghosts,精灵sprites,骑士knights精灵：前景是图像，背景是透明的精灵动画：将上一帧中精灵出现的地方用背景填充，并在新的指定地点绘制精灵透明区域精灵动画（1）图像镂空（2）将掩码图和背景图案进行按位AND，使得原始图像的主体对应位置变空。然后，再将原始图像和上一步处理结果按位OR。则原始图像的主体部分贴到背景上并遮盖背景，其余部分（掩码图中白色对应的部分）没有贴到背景上。

掩码图原始图像英文为spriteanimation一幅背景图一组模板图（mask）人物的连续显示方式双缓冲机制不要在窗口中直接贴图，避免闪烁建立一个内存DC，然后把所有的贴图动作都在这个DC上进行，最后把结果显示到操作窗口中。精灵动画（3）精灵动画（4）对动画序列中的每一帧Load背景图确定sprite绘画的位置将某一掩码图与背景图作AND运算将对应的人物图与背景图作OR运算更新sprite绘画的位置演示D3DSprite程序碰撞检测对运动物体的碰撞判断是许多游戏程序中不可或缺的要素常见的碰撞检测方法区域检测碰撞点检测颜色检测：较为精确， 相对耗时区域检测碰撞点检测区域检测采用某种规则形状逼近物体物体之间的碰撞检测转化为规则形状之间的检测碰撞点检测本质是区域检测的一种一般在两个运动物体中的一个物体上设置碰撞点，在另一个物体上设置检测区域，运行时逐个判断碰撞点是否在检测区域中。颜色检测为树林做一张掩码图，将树林用黑色填充。要产生汽车驶入树林后面的效果，先在背景上贴上汽车的图像，然后在上面用镂空图技术画上树林。然后，判断汽车图像在树林图像上的相对位置，将汽车图像上的点和掩码图上相应位置的点做按位AND操作，检查结果中是否有黑色点（RGB值为0）存在。任何颜色的RGB值与黑色图形进行按位AND运算，将得到黑色。如果存在黑色点，表明有碰撞。图像操作全局操作对图像上的所有象素作同样的操作如：傅立叶变换、直方图统计、块拷贝、灰度转换、缩放等局部操作操作只与象素及其周围邻居的值有关如：滤波、边缘检测等直方图表示图像中象素颜色值的分布直方图上每一点横坐标：颜色（亮度）值纵坐标：图像中具有该颜色（亮度）值的象素的数目亮度增强亮度图像象素颜色平均值用直方图进行亮度增强将每一个象素灰度值加上一个常数得到的直方图是原始直方图向正轴方向的平移提高对比度每一象素点(x,y)上的图像对比度C定义为I(x,y)-该点象素值I-背景亮度平均值Imax-图像灰度最大值0–图像灰度最小值通过直方图提高对比度将原始图像直方图的取值范围[Xmin,Xmax]通过线性变换扩大至[0,Ymax]算术运算加:减:除:与:或:异或:几何运算平移将图像沿坐标轴移动若干偏移量缩放整数倍放大整数倍缩小一般情况：缩放系数非整数的情况旋转旋转矩阵R及其逆矩阵R-1图像滤波算子垂直方向算子水平方向算子例如：边界增强算子本质上实现的时候都是将某个象素的新的值用邻域象素值的加权平均计算而得。形态算子一组空间滤波操作用于改变二值区域的形状腐蚀：减少物体边界的象素数膨胀：增加物体边界的象素数复合方法开：腐蚀，然后膨胀闭：膨胀，然后腐蚀OriginalImage膨胀与腐蚀（Dilation,Erosion）数学形态学里面最重要的操作腐蚀将图像的尺寸减少膨胀增加图像的尺寸可以用来消除图像上小的亮斑噪声和不规则的边腐蚀（续）定义：物体的颜色是白，背景是黑定义腐蚀模板为111111111将模板与图像进行加操作如果有，则结果为1，否则为0腐蚀（续）模板的效果相当于去掉物体边界处的单个象素4种情况:当前处理象素为1，邻域象素为1－》1当前处理象素为0，邻域象素为1－》0当前处理象素为0，邻域象素为1、0的混合－》0当前处理象素为1，邻域象素为1、0的混合－》1腐蚀（续）原始图像腐蚀后的图像腐蚀两次

膨胀膨胀是腐蚀的逆操作模板文件是000000000其效果相当于在物体的边界添加单个象素膨胀（续）4种情况当前处理象素为0，邻域象素为0－》0当前处理象素为1，邻域象素为1－》1当前处理象素为1，邻域象素为1、0的混合－》1当前处理象素为0，邻域象素为1、0的混合－》1逻辑操作算子是Or膨胀（续）原始图像膨胀多次后的图像膨胀图像开操作 开操作相当于先做腐蚀操作，再做膨胀操作效果相当于去掉单个象素，但是保留原来的形状何尺寸。原始图像腐蚀两次，然后膨胀两次（开操作）闭操作闭操作是开操作的相互操作先膨胀，然后腐蚀它可以用来填补一些小洞原始图像闭操作结果轮廓抽取 先做腐蚀操作，再将腐蚀结果图像减去原始图像图像特效工具例如:AdobePremiere或者Avid提供了丰富的特效非常方便和简单!电影广告中的特效经常以这种方式完成Hollywood由于资金不缺，经常是手工完成但是现在的趋势是编程实现淡入淡出最简单的图像特效图像从一个黑色背景中出现令透明度ALPHA从0变到1ALPHA=0图像为黑色ALPHA=1原始图像Alpha改变的速度决定了图像的溶解速度如果让ALPHA从1变到0，就得到淡出的效果Morphing（变形）图像处理中最有意思的效果某个物体伸展到另外一个物体通常利用网格辅助也涉及很多计算机视觉的知识图像溶解图像变形Morphing（变形）电影《黑与白》中应用的技术蜘蛛网格演示模糊（blur）本质上相当于一个信号处理中的反走样滤波将每个象素用其周围邻域象素值的加权平均值替代效果一般图像量化改变图像中颜色的数目或者灰度的层次效果非常有趣风格化图像保留尖锐的边缘其他部分用纹理来代替左图是Intel公司网页上的一个例子风格化图像（续）用多种合成滤波方法产生油画风格风格化图像（续）利用类比的方法产生更多风格各异的图像风格化图像（续）纹理合成＋类比的方法二维潜艇游戏分析具备了最基本的游戏要素：目标性、计分系统、竞技性等。主要利用的技术：WindowsGDI、二维图像二维潜艇游戏分析（续）CMyObjectCSubmarineCMyShipCTorpedoCScoreCBombCExplosionCChildView二维潜艇游戏分析（续）CMyObjectCmyObject

所有物体的基类CPointGetPos()；virtualCRectGetRect();虚函数，获得物体的矩形坐标virtualboolDraw(CDC*pDC,boolbPause);在pDC上绘制当前物体图像boolIsSubmarine();判断当前物体是否是潜艇

二维潜艇游戏分析（续）CMyShipCmyShip

我方战舰，由CmyObject继承 staticvoidDeleteImage();释放内存 staticBOOLLoadImage();图像初始化 boolDraw(CDC*pDC,boolbPause);绘制 voidSetMotion(intmotion)水平移动，motion是移动距离 intGetMotion() 获取战舰移动方面 CPointGetPos() 获取战舰绘