《图像处理与二维游戏.ppt》由会员分享，可在线阅读，更多相关《图像处理与二维游戏.ppt（80页珍藏版）》请在三一办公上搜索。
1、图像处理与二维游戏,论坛,http:/chenwei/game校内：,谁能开一个ftp?供上传游戏课程的演示程序、Video等？课后和我发信联系！,主要内容,二维游戏简单框架图像文件结构(以BMP）图像显示（例程）典型图像操作典型的图像特效原理二维游戏（例程）,课程目标,理解图像概念图像操作的实现简单的图像特效简单的二维游戏,1.初始化2.进入游戏循环3.查询用户输入状态4.执行游戏逻辑和AI判断5.绘制图像6.合成显示7.循环8.退出,游戏循环的基本步骤,/defines for game loop states#define GAME_INIT1/the game is initializ
2、ing#define GAME_MENU2/the game is in the menu#define GAME_STARTING3/the game is about to run#define GAME_RUN4/the game is now running#define GAME_RESTART5/the game is going to restart#define GAME_EXIT6/the game is exiting/game globalsint game_state=GAME_INIT;/start off in this stateInt error=0;/used
3、 to send errors back to OS/main begins hereVoid main()/implementation of main game loop,While(game_state!=GAME_EXIT)/implementation of main game loopswitch(game_state)case GAME_INIT:/the game is initializing/allocate all memory and resourcesInit();game_state=GAME_MENU;break;,case GAME_MENU:/the game
4、 is in the menu/call the main menu function and let it switch statesgame_state=Menu();/note:we could force a RUN state here break;case GAME_STARTING:/the game is about to run/this state is optional,but usually used to set things up right/before the game is run you might do a little more housekeeping
5、 Setup_For_Run();/switch to run stategame_state=GAME_RUN;break;,case GAME_RUN:/the game is now running/this section contains the entire game logic loop Clear();/clear the displayGet_Input();/get the inputDo_Logic();/perform logic and AIRender_Frame();/display the next frame of animationWait();/synch
6、ronize the display/the only way that state can be changed is thru user interaction/in the input section or by maybe losing the game.break;,case GAME_RESTART:/the game is restarting/this section is a cleanup state used to fix up any loose ends/before running againFixup();/switch states back to the me
7、nugame_state=GAME_MENU;break;,case GAME_EXIT:/the game is exiting/if the game is in this state then its time to bail,kill everything/and cross your fingersRelease_And_Cleanup();error=0;/set the error word to whatever/note:we do not have to switch states since we are already in this state/on the next
8、 loop iteration the code will fall out of the main while and/exit back to the OS break;default:break;/end switchreturn(error);/return error code to operating system/end main,二维游戏技术,二维游戏概览地图的创建与显示颜色混合与半透明 精灵动画碰撞检测游戏循环概念及实例解析,二维游戏,早期的游戏都是二维的如Diablo(黑暗破坏神)只有两个轴（上下，左右）很多RPG游戏是固定视角的二维半,二维游戏（续）,二维游戏对现在的编程
9、仍然有意义（特别是现在的手机游戏）：如内存、分辨率本质上，视频游戏是一个连续的循环，执行逻辑指令，并将图像输出到屏幕。这和电影的播放非常类似，但是这个电影是用户指定的。,地图的创建与显示,为实现一个基本的二维游戏框架，首先要实现游戏地图的各种加载和编辑操作，为角色提供游戏环境。4种通用地图实现的方法：固定地图、滚屏地图、多层次地图、菱形地图,固定地图,使用固定的背景作为地图将屏幕切割成棋盘状的一系列小块在内存中保持一个二维数组，保存每个小块对应的编号绘制时根据数组提供的信息，在每个小块画上相应图块,固定地图拼接算法实现,for(yi=0;yiy轴小地图个数;yi+)for(xi=0;xix轴小
10、地图个数;xi+)int screenx=xi*tile_wide;/乘以宽度得到最后屏幕上位置int screeny=yi*tile_high;int tileid=mapping_matrixyixi;/在这个数组中存放着对应位置的小地图编/号，如1表示水，2表示石头，3表示砖等blit(tillid,screenx,screeny);/自编函数，把相应地图贴到正确位置该程序段中blit函数的实现，可以调用Windows系统的一个API函数BitBlt直接实现,滚屏地图,是固定地图的进一步扩展，可以显示远大于固定地图的图像 根据玩家所在位置，确定显示的地图部分,滚屏地图,滚屏地图算法实现,
11、变量设置：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
12、；当人物在屏幕正中央时，地图到屏幕的位置变化公式为：screenx=xi*tile_wide playerx+0.5*screen_widescreeny=yi*tile_high playery+0.5*screen_high,滚屏地图算法实现（续）,例程：int beginx=tileplayerx-xtile/2int endx=tileplayerx+xtile/2int beginy=tileplayery-ytile/2int endy=tileplayery+ytile/2tileplayerx=playerx/tile_wide tileplayery=playery/tile
13、_highfor(yi=beginy;yiendy;yi+)for(xi=beginx;xiendx;xi+)int screenx=xi*tile_wide playerx+0.5*screen_wide;/屏幕上位置 int screeny=yi*tile_high playery+0.5*screen_high;int tileid=mapping_matrixyixi;/地图数据数组 blit(tillid,screenx,screeny);/自编函数，将相应地图贴到正确位置,多层次地图,以下列情况，可以考虑使用多层次地图。需要小地图能重叠或者有层次关系；在背景上有多个物体运动；需要模
14、拟物体远近不同的透视关系；多层次地图的实现思想并不复杂,在滚屏地图的基础上设置多个层次的地图即可。不妨设从底往上分别为0层，1层，把地图数据数组改为三维数组。可以使每个图层以不同的速度运动,模拟景物远近不同的层次感。这种技术，又称视差卷轴（Parallax Scrollers）。,菱形地图,菱形地图是在二维画面上表现三维场景的常用技术拼接所使用的小地图是菱形，计算比较复杂,菱形地图算法实现,int MapDraw(HDC hdc)int i,j;int lim=MAXSCREENX/TILEWIDE;/所需绘制地图的范围for(i=-lim;i0),空间的离散的数字化的描述二维区域,什么是图像
15、,(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(Device Independent bitmap)设备无关位图DDB(Device-Dependent Bitmaps)设备有关位图：老的Windows系统。,BMP结构,BMP文件头 比较简单的头信息位图信息关于数据尺寸的详细信息调色板(optional)：相当于一个查找表RGB四元组位图数据RGB
16、象素值索引值(如果有调色板),BMP文件头,typedef struct WORD bfType;/“BM”,表示该文件为位图DWORD bfSize;/文件大小(以byte计)WORD bfReserved1;/保留位WORD bfReserved2;DWORD bfOffbits;/实际位图起始位置相对于文件头的偏移量 BITMAPFILEHEADER,位图信息,typedef struct DWORD biSize;/=sizeof(BITMAPINFOHEADER)DWORD biWidth;/位图宽度(以象素计)DWORD niHeight;/正数，左下角为起始点，从下向上/负数，左
17、上角为起点，从上向下WORD biplanes;/color plane数，恒等于1WORD biBitCount;/1,4,8,24,32DWORD biCompression;/通常，以下域可以忽略，置为0即可DWORD biSizeImage;DWORD biXPelsPerMeter;DWORD biYPelsPerMeter;DWORD biClrUsed;/位图使用的颜色DWORD biClrImportant;/重要颜色数 BITMAPINFOHEADER,RGB四元组,typedef struct BYTE rgbBlue;BYTE rgbGreen;BYTE rgbRed;B
18、YTE rgbReserved;RGBQUAD,BMP图像显示,从BMP文件中载入图像数据分配内存缓冲区基于文件结构提取图像数据在屏幕上显示图像：将图像数据发送至图卡Bitblt()：块拷贝图像数据OpenGL/DirectX StretchBlt：将一个保存在DIB中的图像数据拷贝到另外一个矩形区域，带缩放。,图像的半透明操作,每种颜色都由红绿蓝3种基本色彩（三原色）组合而成；三原色中每一种颜色的亮度用一个8位的二进制数来表示 半透明图色彩=源图像色彩（100%-透明度）+背景图像色彩透明度Windows API函数：AlphaBlend,基于精灵的人物表现鬼怪ghosts,精灵 sprit
19、es,骑士 knights精灵：前景是图像，背景是透明的精灵动画：将上一帧中精灵出现的地方用背景填充，并在新的指定地点绘制精灵,透明区域,精灵动画（1）,图像镂空（2）,将掩码图和背景图案进行按位AND，使得原始图像的主体对应位置变空。然后，再将原始图像和上一步处理结果按位OR。则原始图像的主体部分贴到背景上并遮盖背景，其余部分（掩码图中白色对应的部分）没有贴到背景上。,掩码图,原始图像,英文为sprite animation一幅背景图一组模板图（mask）人物的连续显示方式双缓冲机制不要在窗口中直接贴图，避免闪烁建立一个内存DC，然后把所有的贴图动作都在这个DC上进行，最后把结果显示到操作窗
20、口中。,精灵动画（3）,精灵动画（4）,对动画序列中的每一帧Load 背景图确定sprite绘画的位置将某一掩码图与背景图作AND运算将对应的人物图与背景图作OR运算更新sprite绘画的位置演示D3D Sprite程序,碰撞检测,对运动物体的碰撞判断是许多游戏程序中不可或缺的要素常见的碰撞检测方法区域检测碰撞点检测颜色检测：较为精确，相对耗时,区域检测,碰撞点检测,区域检测,采用某种规则形状逼近物体物体之间的碰撞检测转化为规则形状之间的检测,碰撞点检测,本质是区域检测的一种一般在两个运动物体中的一个物体上设置碰撞点，在另一个物体上设置检测区域，运行时逐个判断碰撞点是否在检测区域中。,颜色检测
21、,为树林做一张掩码图，将树林用黑色填充。要产生汽车驶入树林后面的效果，先在背景上贴上汽车的图像，然后在上面用镂空图技术画上树林。然后，判断汽车图像在树林图像上的相对位置，将汽车图像上的点和掩码图上相应位置的点做按位AND操作，检查结果中是否有黑色点（RGB值为0）存在。任何颜色的RGB值与黑色图形进行按位AND运算，将得到黑色。如果存在黑色点，表明有碰撞。,图像操作,全局操作对图像上的所有象素作同样的操作如：傅立叶变换、直方图统计、块拷贝、灰度转换、缩放等局部操作操作只与象素及其周围邻居的值有关如：滤波、边缘检测等,直方图,表示图像中象素颜色值的分布直方图上每一点横坐标：颜色（亮度）值纵坐标：
22、图像中具有该颜色（亮度）值的象素的数目,亮度增强,亮度图像象素颜色平均值用直方图进行亮度增强将每一个象素灰度值加上一个常数得到的直方图是原始直方图向正轴方向的平移,提高对比度,每一象素点(x,y)上的图像对比度C定义为I(x,y)-该点象素值I-背景亮度平均值Imax-图像灰度最大值0 图像灰度最小值通过直方图提高对比度将原始图像直方图的取值范围Xmin,Xmax通过线性变换扩大至0,Ymax,算术运算,加:减:除:与:或:异或:,几何运算,平移将图像沿坐标轴移动若干偏移量缩放整数倍放大整数倍缩小一般情况：缩放系数非整数的情况旋转 旋转矩阵R及其逆矩阵R-1,图像滤波算子,垂直方向算子,水平方
23、向算子,例如：边界增强算子,本质上实现的时候都是将某个象素的新的值用邻域象素值的加权平均计算而得。,形态算子,一组空间滤波操作用于改变二值区域的形状腐蚀：减少物体边界的象素数膨胀：增加物体边界的象素数复合方法开：腐蚀，然后膨胀闭：膨胀，然后腐蚀,Original Image,膨胀与腐蚀（Dilation,Erosion）,数学形态学里面最重要的操作腐蚀将图像的尺寸减少膨胀增加图像的尺寸可以用来消除图像上小的亮斑噪声和不规则的边,腐蚀（续）,定义：物体的颜色是白，背景是黑定义腐蚀模板为1 1 11 1 11 1 1将模板与图像进行加操作如果有，则结果为1，否则为0,腐蚀（续）,模板的效果相当于去
24、掉物体边界处的单个象素4种情况:当前处理象素为1，邻域象素为11当前处理象素为0，邻域象素为10当前处理象素为0，邻域象素为1、0的混合0当前处理象素为1，邻域象素为1、0的混合1,腐蚀（续）,原始图像,腐蚀后的图像,腐蚀两次,膨胀,膨胀是腐蚀的逆操作模板文件是0 0 00 0 00 0 0其效果相当于在物体的边界添加单个象素,膨胀（续）,4种情况当前处理象素为0，邻域象素为00当前处理象素为1，邻域象素为11当前处理象素为1，邻域象素为1、0的混合1当前处理象素为0，邻域象素为1、0的混合1逻辑操作算子是Or,膨胀（续）,原始图像,膨胀多次后的图像,膨胀图像,开操作,开操作相当于先做腐蚀操作
25、，再做膨胀操作效果相当于去掉单个象素，但是保留原来的形状何尺寸。,原始图像,腐蚀两次，然后膨胀两次（开操作）,闭操作,闭操作是开操作的相互操作先膨胀，然后腐蚀它可以用来填补一些小洞,原始图像,闭操作结果,轮廓抽取,先做腐蚀操作，再将腐蚀结果图像减去原始图像,图像特效工具,例如:Adobe Premiere或者 Avid提供了丰富的特效非常方便和简单!电影广告中的特效经常以这种方式完成Hollywood由于资金不缺，经常是手工完成 但是现在的趋势是编程实现,淡入淡出,最简单的图像特效图像从一个黑色背景中出现令透明度ALPHA 从0变到1ALPHA=0 图像为黑色ALPHA=1 原始图像Alpha
26、改变的速度决定了图像的溶解速度如果让ALPHA从1变到0，就得到淡出的效果,Morphing（变形）,图像处理中最有意思的效果某个物体伸展到另外一个物体通常利用网格辅助也涉及很多计算机视觉的知识,图像溶解,图像变形,Morphing（变形）,电影黑与白中应用的技术,蜘蛛网格演示,模糊（blur）,本质上相当于一个信号处理中的反走样滤波将每个象素用其周围邻域象素值的加权平均值替代效果一般,图像量化,改变图像中颜色的数目或者灰度的层次效果非常有趣,风格化图像,保留尖锐的边缘其他部分用纹理来代替左图是Intel公司网页上的一个例子,风格化图像（续）,用多种合成滤波方法产生油画风格,风格化图像（续）,
27、利用类比的方法产生更多风格各异的图像,风格化图像（续）,纹理合成类比的方法,二维潜艇游戏分析,具备了最基本的游戏要素：目标性、计分系统、竞技性等。主要利用的技术：Windows GDI、二维图像,二维潜艇游戏分析（续）,CMyObject,CSubmarine,CMyShip,CTorpedo,CScore,CBomb,CExplosion,CChildView,二维潜艇游戏分析（续）,CMyObject,CmyObject 所有物体的基类CPoint GetPos()；virtual CRect GetRect();虚函数，获得物体的矩形坐标virtual bool Draw(CDC*pDC
28、,bool bPause);在pDC上绘制当前物体图像bool IsSubmarine();判断当前物体是否是潜艇,二维潜艇游戏分析（续）,CMyShip,CmyShip 我方战舰，由CmyObject继承static void DeleteImage();释放内存static BOOL LoadImage();图像初始化bool Draw(CDC*pDC,bool bPause);绘制void SetMotion(int motion)水平移动，motion是移动距离int GetMotion()获取战舰移动方面CPoint GetPos()获取战舰绘制坐标CRect GetRect()获得
29、物体的矩形坐标,二维潜艇游戏分析（续）,CSubmarine,Csubmarine 敌方潜水艇static void DeleteImage();释放内存static BOOL LoadImage();图像初始化CRect GetRect()获得物体的矩形坐标int GetType()获得潜艇类型，（绿色、黄色）bool Draw(CDC*pDC,bool bPause);绘制void SetFireFlag()设置已经开火标志，以防潜艇多次开火bool GetFireFlag()判断潜艇是否开火,二维潜艇游戏分析（续）,Cexplosion 我方炸弹CRect GetRect()获得物体的矩
30、形坐标int GetMulti()获取m_nMulti（标记连锁爆炸的潜艇个数）void SetMulti(int Multi)m_nMulti=Multi;设置m_nMultibool Draw(CDC*pDC,bool bPause);绘制,二维潜艇游戏分析（续）,CScore,Cscore 分数显示bool Draw(CDC*pDC,bool bPause);绘制CRect GetRect()（返回NULL，无效函数）static int GetTotalScore()return m_nTotalScore;获得当前总得分,课后作业,1.熟练掌握一种图像处理工具，推荐Photoshop7.0；2.详细读码：潜艇游戏与飞机游戏；3.熟练掌握Windows图像操作；4.实现一个精灵动画；5.参考VC+数字图像处理代码，实现任意一种图像滤波算子；,课后预读,1.三维向量代数与矩阵运算2.基本的三维变换矩阵3.图形流水线与OpenGL,
