图像处理与二维游戏

《图像处理与二维游戏》由会员分享，可在线阅读，更多相关《图像处理与二维游戏（80页珍藏版）》请在装配图网上搜索。

1、 图像处理与二维游戏 论坛http:/ 主要内容o二维游戏简单框架o图像文件结构(以BMP）o图像显示（例程）o典型图像操作o典型的图像特效原理o二维游戏（例程） 课程目标o理解图像概念o图像操作的实现o简单的图像特效o简单的二维游戏 1.初始化2.进入游戏循环3.查询用户输入状态4.执行游戏逻辑和AI判断5.绘制图像6.合成显示7.循环8.退出游戏循环的基本步骤 初始化 过程循环 按键处理 图像绘制 AI逻辑 退出游戏 Game RunGame Init Game MenuGame Restart Game ExitGame Starting / defines for game loop

2、states#define GAME_INIT 1 / the game is initializing#define GAME_MENU 2 / the game is in the menu#define GAME_STARTING 3 / the game is about to run#define GAME_RUN 4 / the game is now running#define GAME_RESTART 5 / the game is going to restart#define GAME_EXIT 6 / the game is exiting/ game globalsi

3、nt game_state = GAME_INIT; / start off in this stateInt error = 0; / used 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 / alloc

4、ate all memory and resourcesInit( );game_state = GAME_MENU; break; case GAME_MENU: / the game 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 optiona

5、l, but usually used to set things up right / before the game is run you might do a little more housekeeping 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 displayGe

6、t_Input( ); / get the inputDo_Logic( ); / perform logic and AIRender_Frame( ); / display the next frame of animationWait( ); / synchronize 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

7、game is restarting / this section is a cleanup state used to fix up any loose ends / before running againFixup( );/ switch states back to the menugame_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

8、 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 loop iteration the code will fall out of the main while and / exit back to the OS break;default: break; / end switchreturn(error); / return

9、 error code to operating system / end main 二维游戏技术o二维游戏概览o地图的创建与显示o颜色混合与半透明 o精灵动画o碰撞检测o游戏循环概念及实例解析 二维游戏o早期的游戏都是二维的n如Diablo(黑暗破坏神)n只有两个轴（上下，左右）o很多RPG游戏是固定视角的二维半 二维游戏（续）o二维游戏对现在的编程仍然有意义（特别是现在的手机游戏）：如内存、分辨率o本质上，视频游戏是一个连续的循环，执行逻辑指令，并将图像输出到屏幕。这和电影的播放非常类似，但是这个电影是用户指定的。 地图的创建与显示o为实现一个基本的二维游戏框架，首先要实现游戏地图的各种加

10、载和编辑操作，为角色提供游戏环境。o4种通用地图实现的方法：固定地图、滚屏地图、多层次地图、菱形地图 固定地图o使用固定的背景作为地图o将屏幕切割成棋盘状的一系列小块o在内存中保持一个二维数组，保存每个小块对应的编号o绘制时根据数组提供的信息，在每个小块画上相应图块 固定地图拼接算法实现for (yi = 0; yiy轴小地图个数; yi+)for(xi = 0; xix轴小地图个数; xi+)int screenx = xi * tile_wide; /乘以宽度得到最后屏幕上位置int screeny = yi * tile_high;int tileid = mapping_matrixy

11、ixi; /在这个数组中存放着对应位置的小地图编 /号，如1表示水，2表示石头，3表示砖等blit(tillid,screenx,screeny); /自编函数，把相应地图贴到正确位置 o该程序段中blit函数的实现，可以调用Windows系统的一个API函数BitBlt直接实现 滚屏地图o是固定地图的进一步扩展，可以显示远大于固定地图的图像 o根据玩家所在位置，确定显示的地图部分 屏幕可见范围 完整地图 滚屏地图 滚屏地图算法实现变量设置：playerx, playery 为人物相对于完整地图左上角的坐标；screen_wide, screen_high 为屏幕的宽和高；xtile为屏幕上x

12、轴上可显示的小地图个数；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 +

13、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_highfor (yi = beginy;

14、 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); /自编函数，将相应地图贴到正确位置 多层次地图o以下列情况，可以考虑使用多层次地图。n需要小地图能重叠或者有层次关系；n在背景

15、上有多个物体运动；n需要模拟物体远近不同的透视关系；o多层次地图的实现思想并不复杂,在滚屏地图的基础上设置多个层次的地图即可。不妨设从底往上分别为0层，1层，把地图数据数组改为三维数组。o可以使每个图层以不同的速度运动,模拟景物远近不同的层次感。这种技术，又称视差卷轴（Parallax Scrollers）。 菱形地图 o菱形地图是在二维画面上表现三维场景的常用技术o拼接所使用的小地图是菱形，计算比较复杂 菱形地图算法实现int MapDraw(HDC hdc)int i,j;int lim=MAXSCREENX/TILEWIDE; /所需绘制地图的范围for (i=-lim; ilim; i

16、+)for (j=-lim; jlim; 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(sxMAXSCREENX) /贴图BitBlt(hdc,0,0,MAXSCREENX,MAXSCREENY,hdcMem,0,0,SRCCOPY);/画到窗口return 0; o空间的离散的数字化的描述o二维区域什么是图像(r0,g0,b0)(r1,g1,b1)(r2,g2,b2)(r3,g

17、3,b3)(r4,g4,b4)(r5,g5,b5)(r6,g6,b6)(r7,g7,b7) 图像表示o文件格式n BMP, TGA, TIFF, GIF, JPEG 等o定义(Bitmap)n位图图像是一块由彩色点集组成的矩形区域。oDIB(Device Independent bitmap)n设备无关位图oDDB(Device-Dependent Bitmaps)n设备有关位图：老的Windows系统。 BMP结构oBMP文件头 n比较简单的头信息o位图信息n关于数据尺寸的详细信息o调色板(optional)：相当于一个查找表n RGB四元组o位图数据n RGB象素值n索引值(如果有调色板)

18、 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; /正数，左下角为起始点，从下向上/负数，左上角为起点，从

19、上向下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 rgbRe

20、d;BYTE rgbReserved; RGBQUAD BMP图像显示o从BMP文件中载入图像数据n分配内存缓冲区n基于文件结构提取图像数据o在屏幕上显示图像：将图像数据发送至图卡n Bitblt()：块拷贝图像数据n OpenGL/DirectX oStretchBlt：将一个保存在DIB中的图像数据拷贝到另外一个矩形区域，带缩放。 图像的半透明操作o每种颜色都由红绿蓝3种基本色彩（三原色）组合而成；o三原色中每一种颜色的亮度用一个8位的二进制数来表示 o半透明图色彩 = 源图像色彩（100% - 透明度）+背景图像色彩透明度o Windows API函数：AlphaBlend + o基于精

21、灵的人物表现o鬼怪ghosts,精灵 sprites,骑士 knightso精灵：前景是图像，背景是透明的o精灵动画：将上一帧中精灵出现的地方用背景填充，并在新的指定地点绘制精灵透明区域精灵动画（1） 图像镂空（2）o将掩码图和背景图案进行按位AND，使得原始图像的主体对应位置变空。然后，再将原始图像和上一步处理结果按位OR。则原始图像的主体部分贴到背景上并遮盖背景，其余部分（掩码图中白色对应的部分）没有贴到背景上。 掩码图原始图像 o英文为sprite animationn一幅背景图n一组模板图（mask）n人物的连续显示方式o双缓冲机制o不要在窗口中直接贴图，避免闪烁n建立一个内存DC，然

22、后把所有的贴图动作都在这个DC上进行，最后把结果显示到操作窗口中。精灵动画（3） 精灵动画（4）o对动画序列中的每一帧n Load 背景图n确定sprite绘画的位置n将某一掩码图与背景图作AND运算n将对应的人物图与背景图作OR运算n更新sprite绘画的位置o演示n D3D Sprite程序 碰撞检测o对运动物体的碰撞判断是许多游戏程序中不可或缺的要素o常见的碰撞检测方法n区域检测n碰撞点检测n颜色检测：较为精确，相对耗时区域检测 碰撞点检测 区域检测o采用某种规则形状逼近物体o物体之间的碰撞检测转化为规则形状之间的检测 碰撞点检测o本质是区域检测的一种o一般在两个运动物体中的一个物体上设

23、置碰撞点，在另一个物体上设置检测区域，运行时逐个判断碰撞点是否在检测区域中。 颜色检测o为树林做一张掩码图，将树林用黑色填充。要产生汽车驶入树林后面的效果，先在背景上贴上汽车的图像，然后在上面用镂空图技术画上树林。然后，判断汽车图像在树林图像上的相对位置，将汽车图像上的点和掩码图上相应位置的点做按位AND操作，检查结果中是否有黑色点（RGB值为0）存在。任何颜色的RGB值与黑色图形进行按位AND运算，将得到黑色。如果存在黑色点，表明有碰撞。 图像操作o全局操作n对图像上的所有象素作同样的操作如：傅立叶变换、直方图统计、块拷贝、灰度转换、缩放等o局部操作n操作只与象素及其周围邻居的值有关如：滤波

24、、边缘检测等 直方图o表示图像中象素颜色值的分布o直方图上每一点n横坐标：颜色（亮度）值n纵坐标：图像中具有该颜色（亮度）值的象素的数目 亮度增强o亮度n图像象素颜色平均值o用直方图进行亮度增强n将每一个象素灰度值加上一个常数n得到的直方图是原始直方图向正轴方向的平移 提高对比度o每一象素点(x,y)上的图像对比度C定义为n I(x,y) - 该点象素值n I - 背景亮度平均值n Imax - 图像灰度最大值n 0 图像灰度最小值o通过直方图提高对比度n将原始图像直方图的取值范围Xmin,Xmax通过线性变换扩大至0,Ymax 算术运算o加:o减:o除:o与:o或:o异或: 几何运算o平移n

25、将图像沿坐标轴移动若干偏移量o缩放n整数倍放大n整数倍缩小n一般情况：缩放系数非整数的情况o旋转 n旋转矩阵R及其逆矩阵R -1 图像滤波算子垂直方向算子水平方向算子例如：边界增强算子o本质上实现的时候都是将某个象素的新的值用邻域象素值的加权平均计算而得。 形态算子o一组空间滤波操作o用于改变二值区域的形状n腐蚀：减少物体边界的象素数n膨胀：增加物体边界的象素数n复合方法o开：腐蚀，然后膨胀o闭：膨胀，然后腐蚀 Original Image 膨胀与腐蚀（Dilation, Erosion）o数学形态学里面最重要的操作o腐蚀将图像的尺寸减少o膨胀增加图像的尺寸o可以用来消除图像上小的亮斑噪声和不

26、规则的边 腐蚀（续）o定义：物体的颜色是白，背景是黑o定义腐蚀模板为n 1 1 1n 1 1 1n 1 1 1o将模板与图像进行加操作o如果有，则结果为1，否则为0 腐蚀（续）o模板的效果相当于去掉物体边界处的单个象素o4种情况:n当前处理象素为1，邻域象素为11n当前处理象素为0，邻域象素为10n当前处理象素为0，邻域象素为1、0的混合0n当前处理象素为1，邻域象素为1 、0的混合1 腐蚀（续）原始图像腐蚀后的图像 腐蚀两次 膨胀o膨胀是腐蚀的逆操作o模板文件是n 0 0 0n 0 0 0n 0 0 0o其效果相当于在物体的边界添加单个象素 膨胀（续）o4种情况n当前处理象素为0，邻域象素为

27、00n当前处理象素为1，邻域象素为11n当前处理象素为1，邻域象素为1、0的混合1n当前处理象素为0，邻域象素为1 、0的混合1o逻辑操作算子是Or 膨胀（续）原始图像膨胀多次后的图像膨胀图像 开操作o开操作相当于先做腐蚀操作，再做膨胀操作o效果相当于去掉单个象素，但是保留原来的形状何尺寸。原始图像腐蚀两次，然后膨胀两次（开操作） 闭操作o闭操作是开操作的相互操作o先膨胀，然后腐蚀o它可以用来填补一些小洞原始图像闭操作结果 轮廓抽取o先做腐蚀操作， 再将腐蚀结果图像减去原始图像 图像特效工具o例如: Adobe Premiere或者 Avidn提供了丰富的特效n非常方便和简单!o电影广告中的特

28、效经常以这种方式完成oHollywood由于资金不缺，经常是手工完成 n但是现在的趋势是编程实现 淡入淡出o最简单的图像特效n图像从一个黑色背景中出现o令透明度ALPHA 从0变到1n ALPHA = 0 图像为黑色n ALPHA = 1 原始图像n Alpha改变的速度决定了图像的溶解速度o如果让ALPHA从1变到0，就得到淡出的效果 Morphing（变形）o图像处理中最有意思的效果n某个物体伸展到另外一个物体n通常利用网格辅助n也涉及很多计算机视觉的知识图像溶解图像变形 Morphing（变形）o电影黑与白中应用的技术蜘蛛网格演示 模糊（blur）o本质上相当于一个信号处理中的反走样滤波

29、o将每个象素用其周围邻域象素值的加权平均值替代o效果一般 图像量化o改变图像中颜色的数目或者灰度的层次o效果非常有趣 风格化图像o保留尖锐的边缘o其他部分用纹理来代替o左图是Intel公司网页上的一个例子 风格化图像（续）o用多种合成滤波方法产生油画风格 风格化图像（续）o利用类比的方法产生更多风格各异的图像 风格化图像（续）o纹理合成类比的方法 二维潜艇游戏分析o具备了最基本的游戏要素：目标性、计分系统、竞技性等。o主要利用的技术：Windows GDI、二维图像 二维潜艇游戏分析（续）CMyObject CSubmarineCMyShipCTorpedo CScoreCBombCExplo

30、sionCChildView 二维潜艇游戏分析（续）CMyObject CmyO bject 所有物体的基类CPoint GetPos()；virtual CRect GetRect(); 虚函数，获得物体的矩形坐标virtual bool Draw(CDC* pDC, bool bPause); 在pDC上绘制当前物体图像bool IsSubmarine(); 判断当前物体是否是潜艇 二维潜艇游戏分析（续）CMyShipCmyShip 我方战舰，由CmyObject继承static void DeleteImage(); 释放内存static BOOL LoadImage(); 图像初始化b

31、ool Draw(CDC* pDC, bool bPause); 绘制void SetMotion(int motion) 水平移动，motion是移动距离int GetMotion()获取战舰移动方面CPoint GetPos()获取战舰绘制坐标CRect GetRect() 获得物体的矩形坐标 二维潜艇游戏分析（续）CSubmarineCsubmarine 敌方潜水艇static void DeleteImage(); 释放内存static BOOL LoadImage(); 图像初始化CRect GetRect() 获得物体的矩形坐标int GetType() 获得潜艇类型，（绿色、黄色

32、）bool Draw(CDC* pDC, bool bPause); 绘制void SetFireFlag() 设置已经开火标志，以防潜艇多次开火bool GetFireFlag() 判断潜艇是否开火 二维潜艇游戏分析（续）Cexplosion 我方炸弹CRect GetRect() 获得物体的矩形坐标int GetMulti() 获取m_nMulti（标记连锁爆炸的潜艇个数）void SetMulti(int Multi) m_nMulti = Multi; 设置m_nMultibool Draw(CDC* pDC, bool bPause); 绘制 二维潜艇游戏分析（续）CScoreCscore 分数显示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