《MFC游戏开发》笔记六 图像双缓冲技术:实现一个流畅的动画

本系列文章由七十一雾央编写,转载请注明出处。

 http://blog.csdn.net/u011371356/article/details/9334121

作者:七十一雾央 新浪微博:http://weibo.com/1689160943/profile?rightmod=1&wvr=5&mod=personinfo

在前几节的笔记里,大家肯定会为一个问题感到心烦:画面怎么老是一闪一闪的啊,太难受了。确实是的,如果玩这样的游戏简直就是一种折磨。但是大家玩游戏的时候,从来没有遇到过这种情况吧?那么游戏开发者是怎么解决这个问题的呢?雾央在这一节笔记里给大家讲解一种简单通用的方法——图像双缓冲。

一、闪烁原因

为了解决问题,我们得首先搞清楚闪烁的原因是什么,然后才能对症下药。能够导致游戏画面闪烁的原因非常多,但是对于我们做游戏开发的同学来说,最主要的就是一种:贴图贴的太频繁。

如果大家是一个细心人的话,那么应该可以发现,在笔记三讲解贴图的时候,当我们贴出背景图的时候,是根本不会闪烁的,但是当我们贴出人物后,闪烁就出来了,而当我们移动人物的时候,闪烁的画面简直惨不忍睹啊。

想弄清楚真正的原因就得要理解GDI绘图的原理:GDI绘图的时候是先绘制到显存里面,然后显存每隔一段时间就需要把里面的内容输出到屏幕上,这个时间就是刷新周期。在绘图的时候,系统会先用一种背景色擦除掉原来的图像,然后再绘制新的图像。如果这几次绘制不在同一个刷新周期中,那么我们看到的就是先看到背景色,再看到内容出来,就会有闪烁的感觉,而绘制的次数越多,看到这种现象的可能性就越大,就闪烁的越厉害。

二、图像双缓冲技术

大家清楚了闪烁的原因后,再结合我们只贴出背景的时候并没有闪烁的事实,那么或许大家就可以想到一种解决方法了:我们事先将要画的所有东西画在一张图片上,然后将这张图直接贴出来,不就解决了吗?

如果你想到这里,那么恭喜你,你已经想到了图像双缓冲技术。其实看起来很高端的这个名词其实非常简单。我们之前画图的时候都是直接画在窗口DC上,在之前我们可以自己先创建一个内存DC,然后把画图都画在内存DC中,最后再一次性的将内存DC输出到窗口DC中,就可以解决画面闪烁的问题了。

下面我们讲述写代码的方法

 1.定义变量

首先在CChildView.h中定义两个变量

CDC m_cacheDC;   //缓冲DC
CBitmap m_cacheCBitmap;//缓冲位图

2.创建缓冲DC

然后呢,在CChildView.cpp中OnPaint中创建缓冲DC

//创建缓冲DC
m_cacheDC.CreateCompatibleDC(NULL);
m_cacheCBitmap.CreateCompatibleBitmap(cDC,m_client.Width(),m_client.Height());
m_cacheDC.SelectObject(&m_cacheCBitmap);

3.在缓冲DC上绘图

后面贴图都贴在缓冲DC上就可以了,如

m_bg.Draw(m_cacheDC,m_client);

      4.缓冲DC输出到窗口DC

最后一次性的将缓冲DC中的内容输出到窗口DC中去,函数都是之前笔记二介绍过的,不熟悉的同学请阅读笔记二。

cDC->BitBlt(0,0,m_client.Width(),m_client.Height(),&m_cacheDC,0,0,SRCCOPY);

此时OnPaint函数中的内容就如同下面这样

void CChildView::OnPaint()
{
//获取窗口DC指针
CDC *cDC=this->GetDC();
//获取窗口大小
GetClientRect(&m_client);
//创建缓冲DC
m_cacheDC.CreateCompatibleDC(NULL);
m_cacheCBitmap.CreateCompatibleBitmap(cDC,m_client.Width(),m_client.Height());
m_cacheDC.SelectObject(&m_cacheCBitmap); //————————————————————开始绘制——————————————————————
//贴背景,现在贴图就是贴在缓冲DC:m_cache中了
m_bg.Draw(m_cacheDC,m_client);
//贴英雄
MyHero.hero.Draw(m_cacheDC,MyHero.x,MyHero.y,80,80,MyHero.frame*80,MyHero.direct*80,80,80);
//最后将缓冲DC内容输出到窗口DC中
cDC->BitBlt(0,0,m_client.Width(),m_client.Height(),&m_cacheDC,0,0,SRCCOPY); //————————————————————绘制结束————————————————————— //在绘制完图后,使窗口区有效
ValidateRect(&m_client);
//释放缓冲DC
m_cacheDC.DeleteDC();
//释放对象
m_cacheCBitmap.DeleteObject();
//释放窗口DC
ReleaseDC(cDC);
}

三、实现一个真正意义上的动画demo

雾央在这里实现的是一个骑着白马的少年在场景中闲逛的demo,按下WASD人物会向四个方向移动,移动的过程中动态更换图片。图片使用的是一张大图,然后每次去取其中一小块显示出来,当然大家也可以使用一张张分开好的图。具体的请看代码。

先来几张截图看看效果,呵呵。

《MFC游戏开发》笔记六 图像双缓冲技术:实现一个流畅的动画

《MFC游戏开发》笔记六 图像双缓冲技术:实现一个流畅的动画

《MFC游戏开发》笔记六 图像双缓冲技术:实现一个流畅的动画

《MFC游戏开发》笔记六 图像双缓冲技术:实现一个流畅的动画

头文件

// ChildView.h : CChildView 类的接口
// #pragma once // CChildView 窗口 class CChildView : public CWnd
{
// 构造
public:
CChildView(); // 特性
public:
struct shero
{
CImage hero; //保存英雄的图像
int x; //保存英雄的位置
int y;
int direct; //英雄的方向
int frame; //运动到第几张图片
}MyHero; CRect m_client; //保存客户区大小
CImage m_bg; //背景图片 CDC m_cacheDC; //缓冲DC
CBitmap m_cacheCBitmap;//缓冲位图
// 操作
public: // 重写
protected:
virtual BOOL PreCreateWindow(CREATESTRUCT& cs); // 实现
public:
virtual ~CChildView(); // 生成的消息映射函数
protected:
afx_msg void OnPaint();
DECLARE_MESSAGE_MAP()
public:
afx_msg void OnKeyDown(UINT nChar, UINT nRepCnt, UINT nFlags);
afx_msg void OnLButtonDown(UINT nFlags, CPoint point);
afx_msg void OnTimer(UINT_PTR nIDEvent);
afx_msg int OnCreate(LPCREATESTRUCT lpCreateStruct);
};

CPP文件

// ChildView.cpp : CChildView 类的实现
// #include "stdafx.h"
#include "GameMFC.h"
#include "ChildView.h" #ifdef _DEBUG
#define new DEBUG_NEW
#endif //定时器的名称用宏比较清楚
#define TIMER_PAINT 1
#define TIMER_HEROMOVE 2
//四个方向
#define DOWN 0
#define LEFT 1
#define RIGHT 2
#define UP 3 // CChildView CChildView::CChildView()
{
} CChildView::~CChildView()
{
} BEGIN_MESSAGE_MAP(CChildView, CWnd)
ON_WM_PAINT()
ON_WM_KEYDOWN()
ON_WM_LBUTTONDOWN()
ON_WM_TIMER()
ON_WM_CREATE()
END_MESSAGE_MAP() //将png贴图透明
void TransparentPNG(CImage *png)
{
for(int i = 0; i <png->GetWidth(); i++)
{
for(int j = 0; j <png->GetHeight(); j++)
{
unsigned char* pucColor = reinterpret_cast<unsigned char *>(png->GetPixelAddress(i , j));
pucColor[0] = pucColor[0] * pucColor[3] / 255;
pucColor[1] = pucColor[1] * pucColor[3] / 255;
pucColor[2] = pucColor[2] * pucColor[3] / 255;
}
}
} // CChildView 消息处理程序 BOOL CChildView::PreCreateWindow(CREATESTRUCT& cs)
{
if (!CWnd::PreCreateWindow(cs))
return FALSE; cs.dwExStyle |= WS_EX_CLIENTEDGE;
cs.style &= ~WS_BORDER;
cs.lpszClass = AfxRegisterWndClass(CS_HREDRAW|CS_VREDRAW|CS_DBLCLKS,
::LoadCursor(NULL, IDC_ARROW), reinterpret_cast<HBRUSH>(COLOR_WINDOW+1), NULL); //-----------------------------------游戏数据初始化部分------------------------- //加载背景
m_bg.Load("bg.png");
//加载英雄图片
MyHero.hero.Load("heroMove.png");
TransparentPNG(&MyHero.hero);
//初始化英雄状态
MyHero.direct=UP;
MyHero.frame=0;
//设置英雄初始位置
MyHero.x=100;
MyHero.y=400; return TRUE;
} void CChildView::OnPaint()
{
//获取窗口DC指针
CDC *cDC=this->GetDC();
//获取窗口大小
GetClientRect(&m_client);
//创建缓冲DC
m_cacheDC.CreateCompatibleDC(NULL);
m_cacheCBitmap.CreateCompatibleBitmap(cDC,m_client.Width(),m_client.Height());
m_cacheDC.SelectObject(&m_cacheCBitmap); //————————————————————开始绘制——————————————————————
//贴背景,现在贴图就是贴在缓冲DC:m_cache中了
m_bg.Draw(m_cacheDC,m_client);
//贴英雄
MyHero.hero.Draw(m_cacheDC,MyHero.x,MyHero.y,80,80,MyHero.frame*80,MyHero.direct*80,80,80);
//最后将缓冲DC内容输出到窗口DC中
cDC->BitBlt(0,0,m_client.Width(),m_client.Height(),&m_cacheDC,0,0,SRCCOPY); //————————————————————绘制结束————————————————————— //在绘制完图后,使窗口区有效
ValidateRect(&m_client);
//释放缓冲DC
m_cacheDC.DeleteDC();
//释放对象
m_cacheCBitmap.DeleteObject();
//释放窗口DC
ReleaseDC(cDC);
} //按键响应函数
void CChildView::OnKeyDown(UINT nChar, UINT nRepCnt, UINT nFlags)
{
//nChar表示按下的键值
switch(nChar)
{
case 'd': //游戏中按下的键当然应该不区分大小写了
case 'D':
MyHero.direct=RIGHT;
MyHero.x+=5;
break;
case 'a':
case 'A':
MyHero.direct=LEFT;
MyHero.x-=5;
break;
case 'w':
case 'W':
MyHero.direct=UP;
MyHero.y-=5;
break;
case 's':
case 'S':
MyHero.direct=DOWN;
MyHero.y+=5;
break;
}
} //鼠标左键单击响应函数
void CChildView::OnLButtonDown(UINT nFlags, CPoint point)
{
char bufPos[50];
sprintf(bufPos,"你单击了点X:%d,Y:%d",point.x,point.y);
AfxMessageBox(bufPos);
} //定时器响应函数
void CChildView::OnTimer(UINT_PTR nIDEvent)
{ switch(nIDEvent)
{
case TIMER_PAINT:OnPaint();break; //若是重绘定时器,就执行OnPaint函数
case TIMER_HEROMOVE: //控制人物移动的定时器
{
MyHero.frame++; //每次到了间隔时间就将图片换为下一帧
if(MyHero.frame==4) //到最后了再重头开始
MyHero.frame=0;
}
break;
}
} int CChildView::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
if (CWnd::OnCreate(lpCreateStruct) == -1)
return -1; // TODO: 在此添加您专用的创建代码 //创建一个10毫秒产生一次消息的定时器
SetTimer(TIMER_PAINT,10,NULL);
//创建人物行走动画定时器
SetTimer(TIMER_HEROMOVE,100,NULL);
return 0;
}

       对于代码中一些地方,可能有一些同学有疑惑,雾央在这里作一下解释。

       首先是人物的移动动画,雾央使用了下面这张图作为素材

          《MFC游戏开发》笔记六 图像双缓冲技术:实现一个流畅的动画

       这张图片是320x320,也就是说每个人物大小是80x80,第一行是人物向下移动,第二行是向左,第三行是向右,第四行是向下。

       我们在人物结构体中使用了一个变量direct记录人物的方向,并且宏定义了四个方向分别为0,1,2,3

       比如当前人物移动方向是右,即RIGHT,也就是2,那么我们就应该截取这张图片的第三行画出来,第三行y的起始坐标就是80*2,也就是80*direct

       我们还使用了一个变量frame记录当前方向上的帧数,即在x方向上的起始坐标,比如当前应该显示第二张图片,frame为1,那么就是80*1,即80*frame

       在Draw函数中最后四个参数的含义分别是源图片的x起始坐标,y起始坐标,宽度,高度,即画出源图片的从x,y开始的宽为width,高为height的部分。

现在大家应该清楚了这个过程吧?

         

       下面雾央再举一个例子来帮大家充分的理解这个过程。

       当前玩家按下了D键,人物要向右边行走,那么此时direct=RIGHT,RIGHT被我们宏定义为2

       开始frame=0;那么我们就画出原来图片中80*frame,80*direct开始高为80,宽为80的图片,即下图

            《MFC游戏开发》笔记六 图像双缓冲技术:实现一个流畅的动画 
     

         在行走过程中frame++;接下来画的就是下面这个

          《MFC游戏开发》笔记六 图像双缓冲技术:实现一个流畅的动画

         依次类推,当frame=4的时候,即画到最后一个的时候再从头开始,frame=0



        然后有同学提到在一直按着键的时候刚开始会感觉会停一下,雾央在这里说一下自己的想法。

        关于停一下,这个是由于第一次按下键后,人物移动很小,后来一直按着键,可以认为是以非常高的频率不断按键,人物移动的非常快,这之间一个对比就感觉停了一下,如果你把人物每次按键移动的距离增大很多,比如到50,就会觉得这种感觉小了很多。事实上,这样按键后人物突然增加一段位移是非常不科学的,用在游戏中也是非常不合适的,在后面的讲解中我会讲解一种新的人物移动方式,会很流畅,敬请关注。

       

         如果大家还有疑问,欢迎留言



      由于这一节笔记我觉得对于新手来说可能内容较多,所以我把源代码上传了,大家可以下载回去自己试试,本着分享的精神,当然是0积分下载了。

《MFC游戏开发》笔记六 源代码下载

《MFC游戏开发》笔记六到这里就结束了,更多精彩请关注下一篇。如果您觉得文章对您有帮助的话,请留下您的评论,点个赞,能看到你们的留言是我最高兴的事情,因为这让我知道我正在帮助曾和我一样迷茫的少年,你们的支持就是我继续写下去的动力,愿我们一起学习,共同努力,复兴国产游戏。

对于文章的疏漏或错误,欢迎大家的指出。

上一篇:ActiveMQ传输协议


下一篇:ActiveMQ笔记(3):基于Networks of Brokers的HA方案