1、2D游戏编程基础,浙江大学软件学院 梁秀波 Email：,主要内容,二维游戏简单框架 图像文件结构(以BMP为例） 图像显示（例程） 典型图像操作 典型的图像特效原理 二维游戏（例程）,课程目标,理解图像概念 图像操作的实现 简单的图像特效 简单的二维游戏,1. 初始化2. 进入游戏循环3. 查询用户输入状态4. 执行游戏逻辑和AI判断5. 绘制图像6. 循环7. 退出,游戏循环的基本步骤,1. 初始化2. 进入游戏循环3. 查询用户输入状态4. 执行游戏逻辑和AI判断5. 绘制图像6. 循环7. 退出,游戏循环的基本步骤,Demo: Airplane演示,/ defines for game
2、 loop 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 /
3、game globals int game_state = GAME_INIT; / start off in this state Int error = 0; / used to send errors back to OS/ main begins here Void main( ) / implementation of main game loop,While (game_state != GAME_EXIT) / implementation of main game loopswitch(game_state)case GAME_INIT: / the game is initi
4、alizing / allocate 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 s
5、tate is optional, 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
6、 the displayGet_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_R
7、ESTART: / 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 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/
8、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 loop iteration the code will fall out of the main while and / exit back to the OS break;default: break; / end switchreturn(er
9、ror); / return error code to operating system / end main,二维游戏技术,二维游戏概览 地图的创建与显示 颜色混合与半透明 精灵动画 碰撞检测 游戏循环概念及实例解析,二维游戏,早期的游戏都是二维的 如Diablo(暗黑破坏神) 只有两个轴（上下，左右）很多RPG游戏是固定视角的二维半,二维游戏（续）,二维游戏对现在的编程仍然有意义（特别是现在的手机游戏）：如内存、分辨率本质上视频游戏是一个连续的循环，执行逻辑指令，并将图像输出到屏幕。这和电影的播放非常类似，但是这个电影是用户指定的。,地图的创建与显示,为实现一个基本的二维游戏框架，首先要
10、实现游戏地图的各种加载和编辑操作，为角色提供游戏环境。4种通用地图实现的方法：固定地图、滚屏地图、多层次地图、菱形地图,固定地图,使用固定的背景作为地图 将屏幕切割成棋盘状的一系列小块 在内存中保持一个二维数组，保存每个小块对应的编号 绘制时根据数组提供的信息，在每个小块画上相应图块,固定地图拼接算法实现,for (yi = 0; yiy轴小地图个数; yi+)for(xi = 0; xix轴小地图个数; xi+)int screenx = xi * tile_wide; /乘以宽度得到最后屏幕上位置int screeny = yi * tile_high;int tileid = mappi
11、ng_matrixyixi; /在这个数组中存放着对应位置的小地图编 /号，如1表示水，2表示石头，3表示砖等blit(tillid,screenx,screeny); /自编函数，把相应地图贴到正确位置该程序段中blit函数的实现，可以调用Windows系统的一个API函数BitBlt直接实现,滚屏地图,是固定地图的进一步扩展，可以显示远大于固定地图的图像 根据玩家所在位置，确定显示的地图部分,滚屏地图,滚屏地图算法实现,变量设置： 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 playe
13、rx + 0.5 * screen_wide screeny = 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_widetileplayery = playery / tile_highfor (yi = b
14、eginy; 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); /自编函数，将相应地图贴到正确位置,多层次地图,以下列情况，可以考虑使用多层次地图。 需要小地图能重叠或者有层次关系； 在
15、背景上有多个物体运动； 需要模拟物体远近不同的透视关系；多层次地图的实现思想并不复杂,在滚屏地图的基础上设置多个层次的地图即可。不妨设从底往上分别为0层，1层，把地图数据数组改为三维数组。 可以使每个图层以不同的速度运动,模拟景物远近不同的层次感。这种技术，又称视差卷轴（Parallax Scrollers）。,菱形地图,菱形地图是在二维画面上表现三维场景的常用技术拼接所使用的小地图是菱形，计算比较复杂,菱形地图算法实现,int MapDraw(HDC hdc)int i,j;int lim=MAXSCREENX/TILEWIDE; /所需绘制地图的范围for (i=-lim; i0) ,空间
16、的离散的数字化的描述 二维区域,什么是图像,(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文件头 比较简单的头信
17、息 位图信息 关于数据尺寸的详细信息 调色板(optional)：相当于一个查找表 RGB四元组 位图数据 RGB象素值 索引值(如果有调色板),BMP文件头,typedef struct WORD bfType; /“BM”,表示该文件为位图DWORD bfSize; /文件大小(以byte计)WORD bfReserved1; /保留位WORD bfReserved2;DWORD bfOffbits; /实际位图起始位置相对于文件头的偏移量 BITMAPFILEHEADER,位图信息,typedef struct DWORD biSize; /= sizeof(BITMAPINFOHEAD
18、ER)DWORD biWidth; / 位图宽度(以象素计)DWORD niHeight; /正数，左下角为起始点，从下向上/负数，左上角为起点，从上向下WORD biplanes; /color plane数，恒等于1WORD biBitCount; / 1, 4, 8, 24, 32DWORD biCompression; /通常，以下域可以忽略，置为0即可DWORD biSizeImage;DWORD biXPelsPerMeter;DWORD biYPelsPerMeter;DWORD biClrUsed; /位图使用的颜色DWORD biClrImportant; /重要颜色数 BI
19、TMAPINFOHEADER,RGB四元组,typedef struct BYTE rgbBlue;BYTE rgbGreen; BYTE rgbRed;BYTE rgbReserved; RGBQUAD,BMP图像显示,从BMP文件中载入图像数据 分配内存缓冲区 基于文件结构提取图像数据 在屏幕上显示图像：将图像数据发送至显卡 Bitblt()：块拷贝图像数据 OpenGL/DirectX StretchBlt：将一个保存在DIB中的图像数据拷贝到另外一个矩形区域，带缩放。,图像的半透明操作,每种颜色都由红绿蓝3种基本色彩（三原色）组合而成； 三原色中每一种颜色的亮度用一个8位的二进制数来表
20、示 半透明图色彩 = 源图像色彩（100% - 透明度）+背景图像色彩透明度 Windows API函数：AlphaBlend,精灵动画（1）,基于精灵的人物表现 鬼怪ghosts,精灵 sprites,骑士 knights 精灵：前景是图像，背景是透明的 精灵动画：将上一帧中精灵出现的地方用背景填充，并在新的指定地点绘制精灵,透明区域,图像镂空（2）,将掩码图和背景图案进行按位AND，使得原始图像的对应位置变空。 将原始图像和上一步处理结果按位OR。 这样，原始图像贴到背景上并遮盖背景，其余部分（掩码图中白色部分）没有贴到背景上。,掩码图,原始图像,精灵动画（3）,英文为sprite ani
21、mation 一幅背景图 一组模板图（mask） 人物的连续显示方式 双缓冲机制 不要在窗口中直接贴图，避免闪烁 建立一个内存DC，然后把所有的贴图动作都在这个DC上进行，最后把结果显示到操作窗口中。,精灵动画（4）,对动画序列中的每一帧 Load 背景图 确定sprite绘画的位置 将某一掩码图与背景图作AND运算 将对应的人物图与背景图作OR运算 更新sprite绘画的位置演示 D3D Sprite程序,碰撞检测,对运动物体的碰撞判断是许多游戏程序中不可或缺的要素 常见的碰撞检测方法 区域检测 碰撞点检测 颜色检测：较为精确，相对耗时,区域检测,碰撞点检测,区域检测,采用某种规则形状逼近物
22、体 物体之间的碰撞检测转化为规则形状之间的检测,碰撞点检测,本质是区域检测的一种 一般在两个运动物体中的一个物体上设置碰撞点，在另一个物体上设置检测区域，运行时逐个判断碰撞点是否在检测区域中。,颜色检测,为树林做一张掩码图，将树林用黑色填充。要产生汽车驶入树林后面的效果，先在背景上贴上汽车的图像，然后在上面用镂空图技术画上树林。然后，判断汽车图像在树林图像上的相对位置，将汽车图像上的点和掩码图上相应位置的点做按位AND操作，检查结果中是否有黑色点（RGB值为0）存在。任何颜色的RGB值与黑色图形进行按位AND运算，将得到黑色。如果存在黑色点，表明有碰撞。,图像操作,全局操作 对图像上的所有象素
23、作同样的操作 如：傅立叶变换、直方图统计、块拷贝、灰度转换、缩放等 局部操作 操作只与象素及其周围邻居的值有关 如：滤波、边缘检测等,直方图,表示图像中象素颜色值的分布 直方图上每一点 横坐标：颜色（亮度）值 纵坐标：图像中具有该颜色（亮度）值的象素的数目,亮度增强,亮度 图像象素颜色平均值 用直方图进行亮度增强 将每一个象素灰度值加上一个常数 得到的直方图是原始直方图向正轴方向的平移,提高对比度,每一象素点(x,y)上的图像对比度C定义为I(x,y) - 该点象素值 I - 背景亮度平均值 Imax - 图像灰度最大值 0 图像灰度最小值 通过直方图提高对比度 将原始图像直方图的取值范围Xm
24、in,Xmax通过线性变换扩大至0,Ymax,算术运算,加: 减:除: 与: 或: 异或:,几何运算,平移 将图像沿坐标轴移动若干偏移量 缩放 整数倍放大 整数倍缩小 一般情况：缩放系数非整数的情况 旋转 旋转矩阵R及其逆矩阵R-1,图像滤波算子,垂直方向算子,水平方向算子,例如：边界增强算子,本质上实现的时候都是将某个象素的新的值用邻域象素值的加权平均计算而得。,形态算子,一组空间滤波操作 用于改变二值区域的形状 腐蚀：减少物体边界的象素数 膨胀：增加物体边界的象素数 复合方法 开：腐蚀，然后膨胀 闭：膨胀，然后腐蚀,Original Image,膨胀与腐蚀（Dilation, Erosio
25、n）,数学形态学里面最重要的操作 腐蚀将图像的尺寸减少 膨胀增加图像的尺寸 可以用来消除图像上小的亮斑噪声和不规则的边,腐蚀（续）,定义：物体的颜色是白，背景是黑 定义腐蚀模板为 1 1 1 1 1 1 1 1 1 将模板与图像进行加操作 如果有，则结果为1，否则为0,腐蚀（续）,模板的效果相当于去掉物体边界处的单个象素 4种情况: 当前处理象素为1，邻域象素为11 当前处理象素为0，邻域象素为10 当前处理象素为0，邻域象素为1、0的混合0 当前处理象素为1，邻域象素为1 、0的混合1,腐蚀（续）,原始图像,腐蚀后的图像,腐蚀两次,膨胀,膨胀是腐蚀的逆操作 模板文件是 0 0 0 0 0 0
26、 0 0 0 其效果相当于在物体的边界添加单个象素,膨胀（续）,4种情况 当前处理象素为0，邻域象素为00 当前处理象素为1，邻域象素为11 当前处理象素为1，邻域象素为1、0的混合1 当前处理象素为0，邻域象素为1 、0的混合1 逻辑操作算子是Or,膨胀（续）,原始图像,膨胀多次后的图像,膨胀图像,开操作,开操作相当于先做腐蚀操作，再做膨胀操作 效果相当于去掉单个象素，但是保留原来的形状何尺寸。,原始图像,腐蚀两次，然后膨胀两次（开操作）,闭操作,闭操作是开操作的相互操作 先膨胀，然后腐蚀 它可以用来填补一些小洞,原始图像,闭操作结果,轮廓抽取,先做腐蚀操作， 再将腐蚀结果图像减去原始图像,
27、图像特效工具,例如: Adobe Premiere或者 Avid 提供了丰富的特效 非常方便和简单! 电影广告中的特效经常以这种方式完成 Hollywood由于资金不缺，经常是手工完成 但是现在的趋势是编程实现,淡入淡出,最简单的图像特效 图像从一个黑色背景中出现 令透明度ALPHA 从0变到1 ALPHA = 0 图像为黑色 ALPHA = 1 原始图像 Alpha改变的速度决定了图像的溶解速度 如果让ALPHA从1变到0，就得到淡出的效果,Morphing（变形）,图像处理中最有意思的效果 某个物体伸展到另外一个物体 通常利用网格辅助 也涉及很多计算机视觉的知识,图像溶解,图像变形,Mor
28、phing（变形）,电影黑与白中应用的技术,蜘蛛网格演示,模糊（blur）,本质上相当于一个信号处理中的反走样滤波 将每个象素用其周围邻域象素值的加权平均值替代 效果一般,图像量化,改变图像中颜色的数目或者灰度的层次 效果非常有趣,风格化图像,保留尖锐的边缘 其他部分用纹理来代替 下图是Intel公司网页上的一个例子,风格化图像（续）,用多种合成滤波方法产生油画风格,风格化图像（续）,利用类比的方法产生更多风格各异的图像,风格化图像（续）,纹理合成类比的方法,二维潜艇游戏分析,具备了最基本的游戏要素：目标性、计分系统、竞技性等。 主要利用的技术：Windows GDI、二维图像,二维潜艇游戏分
29、析（续）,CMyObject,CSubmarine,CMyShip,CTorpedo,CScore,CBomb,CExplosion,CChildView,二维潜艇游戏分析（续）,CMyObject,CMyObject 所有物体的基类 CPoint GetPos()； virtual CRect GetRect(); 虚函数，获得物体的矩形坐标 virtual bool Draw(CDC* pDC, bool bPause); 在pDC上绘制当前物体图像 bool IsSubmarine(); 判断当前物体是否是潜艇,二维潜艇游戏分析（续）,CMyShip,CmyShip 我方战舰，由CmyO
30、bject继承static void DeleteImage(); 释放内存static BOOL LoadImage(); 图像初始化bool Draw(CDC* pDC, bool bPause); 绘制void SetMotion(int motion) 水平移动，motion是移动距离int GetMotion() 获取战舰移动方面CPoint GetPos() 获取战舰绘制坐标CRect GetRect() 获得物体的矩形坐标,二维潜艇游戏分析（续）,CSubmarine,Csubmarine 敌方潜水艇static void DeleteImage(); 释放内存static BO
31、OL LoadImage(); 图像初始化CRect GetRect() 获得物体的矩形坐标int GetType() 获得潜艇类型，（绿色、黄色）bool Draw(CDC* pDC, bool bPause); 绘制void SetFireFlag() 设置已经开火标志，以防潜艇多次开火bool GetFireFlag() 判断潜艇是否开火,二维潜艇游戏分析（续）,Cexplosion 我方炸弹CRect GetRect() 获得物体的矩形坐标int GetMulti() 获取m_nMulti（标记连锁爆炸的潜艇个数）void SetMulti(int Multi) m_nMulti =
32、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. 熟练掌握一种图像处理工具，推荐ACDSee, Photoshop； 2. 详细读码：潜艇游戏与飞机游戏； 3. 熟练掌握Windows图像操作； 4. 实现一个精灵动画； 5. 参考VC+数字图像处理代码，实现任意一种图像滤波算子；,课后预读,1. 三维向量代数与矩阵运算 2. 基本的三维变换矩阵 3. 图形流水线与OpenGL,
