<MFC_8>2D游戏效果之五：一个跑酷游戏的小Demo

转载  :http://blog.csdn.net/crocodile__/article/details/17357533

本文由BlueCoder编写   转载请说明出处：

http://blog.csdn.net/crocodile__/article/details/17228209

我的邮箱：bluecoder@yeah.net    欢迎大家和我交流编程心得

我的微博：BlueCoder_黎小华    欢迎光临^_^

最近两天稍微空闲点儿，故又有时间来写博客了

由于对游戏编程的喜好，因此最近一直都在借用MFC框架来模拟2D游戏中常见的场景和效果，幻灯片、反弹、粒子系统、重力……当然也写了两个小游戏：<空中大战>、<Hold On>，可能在后期还会出一个小游戏，敬请期待吧^_^……

So，今儿来实现一个什么样的效果呢？

一直关注本博客的朋友可能知道(我上期已经小有透露)——对，就是跑酷游戏的小Demo，实现游戏中常见的一个特效：动画

Ok，下面进入今天的正题

一、效果演示

        注：由于csdn博客编辑对gif的支持有局限性故以后就用静态的截图代替了，更好的效果请运行资源中的可执行程序(exe)

运行效果截图：

怎么样，还是蛮不错的吧，呵呵：）

二、准备工作

1、两张用于滚动的背景jpg，16帧人物跑动的png素材(很多，就不贴出来了)

2、来一首悦耳的背景音乐

3、类图

             

三、实现细节

程序有两大特点：背景的滚动和人物跑动，这都是动画的元素

我封装了两个C++类：CScene(场景，负责背景滚动)， CCharacter(人物，负责跑动动画)

实现原理剖析：

1、背景滚动

熟悉本博客的应该知道，我在前期写的游戏<空中大战>中就已经实现了这个技术，而且已经做了很详细的剖析，这里呢再一次贴出我之前自己绘制的原理图，方便大家理解：

(红框区域的1、2分别表示在内存中绘制的两张连续的背景 , 蓝色区域表示窗口客户区)

(如此循环，给人视角效果就是这两张背景在连续的变换)

2、人物跑动动画

其实这个效果很简单，主要是素材，需要一个连贯的16帧人物跑动图片，然后重复对每一帧图片的切换，频率快了，看起来就是一个连贯的动画效果——其实这也是视频的制作原理

原理差不多了，下面来看看具体的代码剖析吧……

四、代码剖析

主要讲一下我封装的两个类，View窗口中代码就直接贴出来(但依然有详尽注释)

我封装的两个类

1、CScene

(1)、程序中用了两张图，起始背景和用于滚动的背景，因此首先需要两个CImage对象：m_imgStt和m_imgNxt作为该类的成员变量

(2)、另外，起始背景不参与后期背景滚动操作，因此我们还要有一个是否贴起始背景的标识m_isStart

(3)、再就是背景需要移动，水平x坐标是变化的，故还得需要一个成员变量：m_bgX

以下是该类的成员变量：

[cpp]  view plain copy print ?

1. //成员变量  
2. private:  
3.     CImage  m_imgStt;//起始背景  
4.     CImage  m_imgNxt;//滚动背景  
5.     int     m_bgX;//背景的x坐标  
6.   
7.     bool    m_isStart;//是否开始  

 

成员函数不用多说什么，都是必须的。以下是该类成员函数的声明：

[cpp]  view plain copy print ?

1. //成员函数  
2. public:  
3.     bool InitScene();//初始化场景  
4.     void MoveBg();//移动背景  
5.     绘制场景(注：这里bufferDC是引用参数)  
6.     void StickScene(CDC &bufferDC, CRect rClient);  
7.     void ReleaseScene();//释放内存资源  

 

成员函数的实现：

[cpp]  view plain copy print ?

1. //初始化场景  
2. bool CScene::InitScene()  
3. {  
4.     this->m_imgStt.Load(L"res\\bgStart.jpg");  
5.     this->m_imgNxt.Load(L"res\\bgNext.jpg");  
6.   
7.     //如果加载失败, 返回false  
8.     if(this->m_imgStt.IsNull() ||  
9.         this->m_imgNxt.IsNull())  
10.     {  
11.         return false;  
12.     }  
13.   
14.     //开始为真, 背景起始坐标为0  
15.     this->m_isStart = true;  
16.     this->m_bgX = 0;  
17.   
18.     //播放背景音乐  
19.     mciSendString(L"open res\\bgm.mp3 alias bgm", NULL, 0, NULL);  
20.     mciSendString(L"play bgm repeat", NULL, 0, NULL);  
21.     return true;  
22. }  
23.   
24. //绘制场景  
25. void CScene::StickScene(CDC &bufferDC, CRect rClient)  
26. {  
27.     //设置缩放图片的模式为:COLORONCOLOR, 以消除像素重叠  
28.     bufferDC.SetStretchBltMode(COLORONCOLOR);  
29.   
30.     //如果到了左边界, 回到起点  
31.     if(m_bgX <= -rClient.Width())  
32.     {  
33.         m_bgX = 0;  
34.   
35.         if(m_isStart)  
36.             m_isStart = false;  
37.     }  
38.   
39.     //客户区宽度  
40.     int cltWth = rClient.Width();  
41.   
42.     rClient.right = cltWth + m_bgX;  
43.     rClient.left = m_bgX;  
44.   
45.     //如果是开始就绘制起始背景  
46.     if(m_isStart)  
47.     {  
48.         this->m_imgStt.StretchBlt(bufferDC, rClient, SRCCOPY);  
49.     }  
50.     //将下一张背景作为起始背景  
51.     else  
52.     {  
53.         this->m_imgNxt.StretchBlt(bufferDC, rClient, SRCCOPY);  
54.     }  
55.   
56.     //绘制下一张背景  
57.     rClient.left += cltWth;  
58.     rClient.right += cltWth;  
59.     m_imgNxt.StretchBlt(bufferDC, rClient, SRCCOPY);  
60. }  
61.   
62. //移动背景  
63. void CScene::MoveBg()  
64. {  
65.     //移动背景  
66.     m_bgX -= 6;  
67. }  
68.   
69. //释放内存资源  
70. void CScene::ReleaseScene()  
71. {  
72.     if(!m_imgStt.IsNull())  
73.         this->m_imgStt.Destroy();  
74.   
75.     if(!m_imgNxt.IsNull())  
76.         this->m_imgNxt.Destroy();  
77.   
78.     mciSendString(L"close bgm", NULL, 0, NULL);  
79. }  

 

2、CCharacter

(1)、由于mfc的限制，我觉得响应WM_SIZE消息来获得窗口客户区的Rect显得不是那么方便，所以我在该类中直接用两个静态常量成员来标识窗口客户区的宽度(VIEWWIDTH)和高度(VIEWHEIGHT)

(2)、要用到16帧人物跑动的图片，所以需要一个静态常量成员MAXFRAME=16，以及一个CImage数组m_imgCharacter[MAXFRAME]，还需要一个成员变量标识当前应该贴的是哪一帧m_curFrame

(3)、当人物跑到窗口客户区水平中央时，才停止移动坐标，故还得要个成员变量m_leftTop来标识当前帧的坐标

以下是该类的常量成员和变量成员：

[cpp]  view plain copy print ?

1. //静态常成员变量  
2. private:  
3.     //最大帧数:16  
4.     static const int MAXFRAME = 16;  
5.     //视口客户区宽度  
6.     static const int VIEWWIDTH = 790;  
7.     //视口客户区高度  
8.     static const int VIEWHEIGHT = 568;  
9.   
10. //成员变量  
11. private:  
12.     CImage  m_imgCharacter[MAXFRAME];//人物  
13.     CSize   m_sCharacter;//人物大小  
14.     CPoint  m_leftTop;//人物的位置(左上角点)  
15.     int     m_curFrame;//人物的当前帧  

以下是成员函数的声明及实现：

[cpp]  view plain copy print ?

1. //成员函数  
2. public:  
3.     //初始化人物  
4.     bool InitCharacter();  
5.   
6.     //向前移动  
7.     void MoveFront();  
8.   
9.     //下一帧  
10.     void NextFrame();  
11.   
12.     //绘制人物(注：这里bufferDC是引用参数)  
13.     void StickCharacter(CDC& bufferDC);  
14.   
15.     //释放内存资源  
16.     void ReleaseCharacter();  

[cpp]  view plain copy print ?

1. //初始化人物  
2. bool CCharacter::InitCharacter()  
3. {  
4.     int i;  
5.     CString path;  
6.   
7.     //初始化每一帧  
8.     for(i=0; i<this->MAXFRAME; i++)  
9.     {  
10.         //一个小技巧——获取人物每一帧png的路径  
11.         path.Format(L"res\\%d.png", i+1);  
12.   
13.         this->m_imgCharacter[i].Load(path);  
14.   
15.         //如果加载失败  
16.         if(this->m_imgCharacter[i].IsNull())  
17.         {  
18.             return false;  
19.         }  
20.     }  
21.   
22.     //初始化人物大小  
23.     int w = m_imgCharacter[0].GetWidth();  
24.     int h = m_imgCharacter[0].GetHeight();  
25.     this->m_sCharacter.SetSize(w, h);  
26.   
27.     //初始化人物位置  
28.     this->m_leftTop.SetPoint(0,  
29.         VIEWHEIGHT - h - ELEVATION);  
30.   
31.     //初始化为第1帧  
32.     this->m_curFrame = 0;  
33.   
34.     return true;  
35. }  
36.   
37. //向前移动(如果移动到了客户区中间, 不继续移动了)  
38. void CCharacter::MoveFront()  
39. {  
40.     int border = (VIEWWIDTH - m_sCharacter.cx) / 2;  
41.   
42.     if(this->m_leftTop.x <= border)  
43.     {  
44.         this->m_leftTop.x += 4;  
45.     }  
46. }  
47.   
48. //下一帧  
49. void CCharacter::NextFrame()  
50. {  
51.     //------------------------------------------  
52.     // 本可以直接使用求余运算, 但是%求余运算速  
53.     // 度及效率不好, 所以使用简单的判断操作代替  
54.     //------------------------------------------  
55.   
56.     //进入下一帧  
57.     this->m_curFrame++;  
58.   
59.     if(this->m_curFrame == this->MAXFRAME)  
60.         this->m_curFrame = 0;  
61. }  
62.   
63. //绘制人物  
64. void CCharacter::StickCharacter(CDC& bufferDC)  
65. {  
66.     int i = this->m_curFrame;  
67.     //透明贴图  
68.     this->m_imgCharacter[i].TransparentBlt(bufferDC,  
69.         this->m_leftTop.x, this->m_leftTop.y,  
70.         this->m_sCharacter.cx, this->m_sCharacter.cy,  
71.         RGB(0, 0, 0));  
72. }  
73.   
74. //释放内存资源  
75. void CCharacter::ReleaseCharacter()  
76. {  
77.     for(int i=0; i<this->MAXFRAME; i++)  
78.         this->m_imgCharacter[i].Destroy();  
79. }  

 

最后直接贴出View窗口的处理及相关定义

[cpp]  view plain copy print ?

1. //计时器ID  
2. #define ID_TIMER_BG 100//变换背景  
3. #define ID_TIMER_Character 101//变换人物  

 

[cpp]  view plain copy print ?

1. //成员变量  
2. private:  
3.     CScene      m_scene;//场景  
4.     CCharacter  m_char;//人物  

 

[cpp]  view plain copy print ?

1. void CChildView::OnPaint()   
2. {  
3.     CPaintDC dc(this); // 用于绘制的设备上下文  
4.   
5.     //---------双缓冲贴图---------------  
6.     CDC bufferDC;  
7.     CBitmap bufferBmp;  
8.   
9.     //获取窗口客户区大小  
10.     CRect cltRect;  
11.     this->GetClientRect(&cltRect);  
12.   
13.     bufferDC.CreateCompatibleDC(NULL);  
14.     bufferBmp.CreateCompatibleBitmap(&dc,  
15.         cltRect.Width(), cltRect.Height());  
16.     bufferDC.SelectObject(bufferBmp);  
17.   
18.     //绘制场景  
19.     m_scene.StickScene(bufferDC, cltRect);  
20.   
21.     //绘制人物  
22.     m_char.StickCharacter(bufferDC);  
23.   
24.     //贴到客户区  
25.     dc.BitBlt(0, 0, cltRect.Width(), cltRect.Height(),  
26.         &bufferDC, 0, 0, SRCCOPY);  
27.   
28.     //释放内存资源  
29.     bufferBmp.DeleteObject();  
30.     bufferDC.DeleteDC();  
31. }  

 

[cpp]  view plain copy print ?

1. int CChildView::OnCreate(LPCREATESTRUCT lpCreateStruct)  
2. {  
3.     if (CWnd::OnCreate(lpCreateStruct) == -1)  
4.         return -1;  
5.   
6.     //-----------初始化工作------------  
7.   
8.     //场景初始化失败  
9.     if(!m_scene.InitScene() ||  
10.         !m_char.InitCharacter())  
11.     {  
12.         AfxMessageBox(L"图片资源加载失败");  
13.         exit(0);  
14.     }  
15.   
16.     //设置定时器  
17.     SetTimer(ID_TIMER_BG, 10, NULL);  
18.     SetTimer(ID_TIMER_Character, 40, NULL);  
19.   
20.     return 0;  
21. }  

 

[cpp]  view plain copy print ?

1. void CChildView::OnTimer(UINT_PTR nIDEvent)  
2. {  
3.     switch(nIDEvent)  
4.     {  
5.     //移动背景  
6.     case ID_TIMER_BG:  
7.         m_scene.MoveBg();  
8.         break;  
9.   
10.     //移动人物并切换到下一帧  
11.     case ID_TIMER_Character:  
12.         m_char.MoveFront();  
13.         m_char.NextFrame();  
14.     }  
15.   
16.     //重绘客户区  
17.     InvalidateRect(NULL, false);  
18.   
19.     CWnd::OnTimer(nIDEvent);  
20. }  

 

[cpp]  view plain copy print ?

1. void CChildView::OnDestroy()  
2. {  
3.     CWnd::OnDestroy();  
4.   
5.     //关闭计时器  
6.     KillTimer(ID_TIMER_BG);  
7.     KillTimer(ID_TIMER_Character);  
8.   
9.     //释放内存资源  
10.     m_scene.ReleaseScene();  
11.     m_char.ReleaseCharacter();  
12. }  

五、零积分源码下载

点击下载源代码

亲，如果你觉得BlueCoder的博文还可以，能帮助到你，那就请为BlueCoder投一票吧^_^

支持 BlueCoder 的地址^_^：
http://vote.blog.csdn.net/blogstaritem/blogstar2013/crocodile_

最后还是送大家一句真言，和大家共勉：

       每天早上醒来时，我们可以有两个简单的选择，回头去睡，继续做梦，或者起身去追逐梦想，选择权在你手上。