谈一谈Cocos2d-x中的某些“大小”

[Cocos2d-x 相关教程来源于红孩儿的游戏编程之路  CSDN 博客地址： http://blog.csdn.net/honghaier]

红孩儿Cocos2d-X学习园地QQ群：249941957加群写：Cocos2d-x

            谈一谈Cocos2d-x中的某些“大小”

              首先感谢各位的大力支持，让本博主的博客排名坐上火箭，一路向前。吾与所有Cocos2d-x的学习者同在~

 

        又是一个孤独的周末，应各位同学的要求，把Cocos2d-x的cocos2d-2.0-x-2.0.2版本下载下来。继续用自已的VS2005方案打开，大概看了一下目录。嗯，改动还是挺多的。首先，最明显的是HelloWorld改名为了HelloCpp，其次加入了Javascript脚本支持，以及增加了Shader支持。感觉Cocos2d-x的更新速度算挺快了，而且比较紧跟现在游戏研发的方向。对于使用过Unity3d或长期进行图形引擎开发的程序来说，新增的两个节目应该还是比较对胃口的。最近Cocos2D-HTML5也发布了Alpha版，不错，学Cocos2d-x真是大有前途啊。

 

         好了，话归正转，本章的标题起的怪一点，其实我只是在重新学习2.0版本时看到一些东西，感觉对于初学者来说非常容易迷糊，正好写篇博文Mark一下，留得日后备查。

 

这里说的“大小”，包括了以下一些内容:

(1).窗口的大小

(2).分辨率的大小

(3).影幕的大小

(4).视口的大小

(5).裁剪区域的大小

 

              我们先来看(1)，窗口的大小

              窗口的大小，即是Windows窗体大小。我们以HelloCpp为例，打开main.cpp，。找到这两句代码：

[cpp]  view plain copy

1. <span style="font-family:SimSun;font-size:14px;">CCEGLView* eglView = CCEGLView::sharedOpenGLView();  
2. eglView->setFrameSize(960, 640 );</span>  

         这里取得了Opengl视窗类CCEGLView单件实例指针返回给指针变量eglView，并调用其setFrameSize函数设置一个所谓的Frame大小。这个大小是神马东西？进去看看！

进入到CCEGLView.cpp的相应函数：

[cpp]  view plain copy

1. <span style="font-size:14px;">void CCEGLView::setFrameSize(float width, float height)  
2. {  
3.     //我们在这里看到调用了Create函数，这里传入的width,height就是要创建的窗口的大小。  
4. Create((LPCTSTR)m_szViewName, (int)width, (int)height);  
5. //后面调用基类的setFrameSize，一会儿再分析，暂略过。  
6.     CCEGLViewProtocol::setFrameSize(width, height);  
7. }</span>  

      看一下Create函数：

[cpp]  view plain copy

1. <span style="font-size:14px;">bool CCEGLView::Create(LPCTSTR pTitle, int w, int h)  
2. {  
3.     bool bRet = false;  
4.     do   
5. {  
6.             //这里通过判断m_hWnd是否有效来确保只Create一次，不允许创建多个窗体。  
7.                 CC_BREAK_IF(m_hWnd);  
8.             //  
9.             HINSTANCE hInstance = GetModuleHandle( NULL );  
10.             WNDCLASS  wc;       //窗口类信息结构  
11.   
12.             //填充信息结构  
13.             wc.style          = CS_HREDRAW | CS_VREDRAW | CS_OWNDC;    
14.             wc.lpfnWndProc    = _WindowProc;                      
15.             wc.cbClsExtra     = 0;                                
16.             wc.cbWndExtra     = 0;                                
17.             wc.hInstance      = hInstance;                        
18.             wc.hIcon          = LoadIcon( NULL, IDI_WINLOGO );    
19.             wc.hCursor        = LoadCursor( NULL, IDC_ARROW );    
20.             wc.hbrBackground  = NULL;                            
21.             wc.lpszMenuName   = NULL;                            
22.             wc.lpszClassName  = kWindowClassName;                
23.             //注册窗口类  
24.             CC_BREAK_IF(! RegisterClass(&wc) && 1410 != GetLastError());          
25.   
26.             //取得电脑屏幕大小矩形  
27.             RECT rcDesktop;  
28.             GetWindowRect(GetDesktopWindow(), &rcDesktop);  
29.             //将窗口标题多字节转宽字符。  
30.             WCHAR wszBuf[50] = {0};  
31.             MultiByteToWideChar(CP_UTF8, 0, m_szViewName, -1, wszBuf, sizeof(wszBuf));  
32.   
33.             // 使用注册过的窗口类创建窗口  
34.             m_hWnd = CreateWindowEx(  
35.                 WS_EX_APPWINDOW | WS_EX_WINDOWEDGE,    // Extended Style For The Window  
36.                 kWindowClassName,                                    // Class Name  
37.                 wszBuf,                                                // Window Title  
38.                 WS_CAPTION | WS_POPUPWINDOW | WS_MINIMIZEBOX,        // Defined Window Style  
39.                 0, 0,                                                // Window Position  
40.                 0,                                                  // Window Width  
41.                 0,                                                  // Window Height  
42.                 NULL,                                                // No Parent Window  
43.                 NULL,                                                // No Menu  
44.                 hInstance,                                            // Instance  
45.                 NULL );  
46.         //通过窗口句柄有效性判断确保创建成功才能继续  
47.         CC_BREAK_IF(! m_hWnd);  
48.        //重点函数，调整窗口大小  
49.         resize(w, h);  
50.         //初始化OpenGL  
51.         bRet = initGL();  
52.        //返回成功判断  
53.         CC_BREAK_IF(!bRet);  
54.         //保存单件实例指针  
55.         s_pMainWindow = this;  
56.         bRet = true;  
57.     } while (0);  
58.     //返回成败  
59.     return bRet;  
60. }</span>  

创建窗口时并没有用到w和h，所以只有继续看重点函数才能知道窗口大小是怎么设置的。

[cpp]  view plain copy

1. <span style="font-size:14px;">void CCEGLView::resize(int width, int height)  
2. {     
3. //窗口句柄有效性判断  
4.     if (! m_hWnd)  
5.     {  
6.         return;  
7.     }  
8.   
9.     //获取窗口的客户区大小矩形，这个客户区其实就是咱们OpenGL视窗的实际大小，不包含一般窗口的菜单，边框，状态栏等部分。  
10. RECT rcClient;  
11.     GetClientRect(m_hWnd, &rcClient);  
12.     //如果当前窗口的客户区部分大小与参数width,height相同，直接返回  
13.         if (rcClient.right - rcClient.left == width &&  
14.             rcClient.bottom - rcClient.top == height)  
15.         {  
16.             return;  
17.         }  
18.         // 否则重新设置客户区大小矩形变量的值。  
19.         rcClient.right = rcClient.left + width;  
20.         rcClient.bottom = rcClient.top + height;  
21.         //此函数将使窗口的整体大小（即如果有则包含菜单栏，边框，底部状态栏和客户可视区的整个窗口的大小）按照  
22. 指定的客户区大小rcClient和窗口样式来自动调整，确保了客户区就是rcClient指定大小。其中GetWindowLong用来获取当前窗口的  
23. 样式，GWL_STYLE为基本样式信息,GWL_EXSTYLE为扩展栏式信息。返回窗口的整体大小再传给rcClient。  
24.         AdjustWindowRectEx(&rcClient, GetWindowLong(m_hWnd, GWL_STYLE), false,   
25.                 GetWindowLong(m_hWnd, GWL_EXSTYLE));  
26.   
27.         // 设置窗口的显示位置并应用rcClient做为窗口的大小。  
28.         SetWindowPos(m_hWnd, 0, 0, 0, rcClient.right - rcClient.left,   
29.             rcClient.bottom - rcClient.top, SWP_NOCOPYBITS | SWP_NOMOVE | SWP_NOOWNERZORDER   
30.                 | SWP_NOZORDER);  
31. }  
32. </span>  

 

      好了，我们看，窗口的大小就是这么设置的。作者考虑到了不同的样式窗口对于客户区大小的影响，故做了相应的处理。所以我们创建指定大小的窗口时其实真正的意思是创建一个指定客户区大小的窗口。

         我们再来看 (2)，分辨率的大小和 (3)，影幕的大小 (4)，视口的大小

 

       分辨率：即是屏幕上图像的精细度，在Cocos2d-x中其大小为屏幕在横向和纵向可以容纳的逻辑点数量，为了好理解，我们把它想像成投影机的分辨率。

       影幕：想想小时候看电影时用到的那块白布吧，当然也许公司会议室里也能看到它。也就是投影机用来投射画面的画布。

       视口：其实就是上面说的投影机投影出来的影片画面所占的矩形。它如果大于影幕的大小，那么你就不能看到完整的影片画面。如果小于影幕的大小。你就可以在它显示的区域里看到影片画面。

 

           我们现在看一下刚才略过的代码：CCEGLViewProtocol::setFrameSize(width,height);

          进入CCEGLViewProtocol.cpp中相应函数定义：

[cpp]  view plain copy

1. <span style="font-size:14px;">void CCEGLViewProtocol::setFrameSize(float width, float height)  
2. {  
3.     //这里使用参数对两个变量进行了赋值，第一个就是分辨率大小。第二个就是影幕的大小。  
4.     m_obDesignResolutionSize = m_obScreenSize = CCSizeMake(width, height);  
5. }  
6. </span>  

             双击“m_obDesignResolutionSize”,按下Ctrl+F,在弹出查找对话框里对当前文档CCEGLViewProtocol.cpp中查找全部使用。

 

            点击第一个查找结果，看一下所在函数setDesignResolutionSize,这个函数是用来设置分辨率大小的。前两个参数无疑就是设置分辨率横向纵向的像素数量的。最后一个参数resolutionPolicy我们必须了解一下，进入ResolutionPolicy的定义:

 

[cpp]  view plain copy

1. enum ResolutionPolicy  
2. {  
3.     // 扩展填充模式：这里等于是直接设置投影机的分辨率。如果这个分辨率与画布大小的比例失调，就会出现失真。  
4.     kResolutionExactFit,  
5.     // 低调整模式：这个吧，是按照设置的分辨率在横纵方向上最低值调整视口大小，使投影机投影出来的影片画面所占的矩形在  
6.     画布上所对应的相应方向上与最低值一致。  
7.     kResolutionNoBorder  
8.     // 高调整模式：与上面恰恰相反，按照设置的分辨率在横纵方向上最高值调整视口大小，使投影机投影出来的影片画面所占的  
9.     矩形在画布上所对应的相应方向上与最高值一致。同时这个矩形的另一个方向按最低值进行裁剪，区域外部分填充黑色。  
10.     kResolutionShowAll,  
11.     //无效值  
12.     kResolutionUnKnown,  
13. };  

        这个枚举归结为“分辨率模式”。是不是有点迷糊，得，我们在继续下面的函数之前，先以例子来说明一下：

打开HelloLua工程的AppDelegate.cpp，看一下这个函数：

[cpp]  view plain copy

1. <span style="font-size:14px;">bool AppDelegate::applicationDidFinishLaunching()  
2. {  
3.     // 取得显示设备的单件实例指针  
4. CCDirector *pDirector = CCDirector::sharedDirector();  
5. // 设置其使用的OpenGL视窗为单件OpenGL视窗  
6.     pDirector->setOpenGLView(CCEGLView::sharedOpenGLView());  
7.     //在这里设置了分辨率为480,320，与窗口客户区一致，显示模式为kResolutionShowAll。  
8.     CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320, kResolutionShowAll);  
9.       
10.     //开始高清显示模式  
11.     // pDirector->enableRetinaDisplay(true);  
12.   
13.     // 设置显示FPS相关  
14.     pDirector->setDisplayStats(true);  
15.   
16.     // 设置帧间隔时间  
17.     pDirector->setAnimationInterval(1.0 / 60);  
18.   
19.     // 注册LUA管理器并设置为当前使用的脚本系统  
20.     CCScriptEngineProtocol* pEngine = CCLuaEngine::engine();  
21.     CCScriptEngineManager::sharedManager()->setScriptEngine(pEngine);  
22.     //执行hello.lua脚本启动游戏，不懂的可以参见本博主的博文“HelloLua”深入分析一文  
23. #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)  
24.     CCString* pstrFileContent = CCString::createWithContentsOfFile("hello.lua");  
25.     if (pstrFileContent)  
26.     {  
27.         pEngine->executeString(pstrFileContent->getCString());  
28.     }  
29. #else  
30.     std::string path = CCFileUtils::sharedFileUtils()->fullPathFromRelativePath("hello.lua");  
31.     pEngine->addSearchPath(path.substr(0, path.find_last_of("/")).c_str());  
32.     pEngine->executeScriptFile(path.c_str());  
33. #endif   
34.   
35.     return true;  
36. }  
37. </span>  

        我们要干点坏事，好吧。我们尝试着将其分别改为

[cpp]  view plain copy

1. CCEGLView::sharedOpenGLView()->setDesignResolutionSize(80, 320, kResolutionExactFit);  
2. CCEGLView::sharedOpenGLView()->setDesignResolutionSize(80, 320, kResolutionNoBorder);  
3. CCEGLView::sharedOpenGLView()->setDesignResolutionSize(80, 320, kResolutionShowAll);  

       并进行测试。下面是测试图。

          好好理解一下。

          再回来看setDesignResolutionSize函数:

[cpp]  view plain copy

1. void CCEGLViewProtocol::setDesignResolutionSize(float width, float height, ResolutionPolicy resolutionPolicy)  
2. {  
3.     //是否使用高清模式（视网膜屏幕），高清模式不让设置分辨率。  
4. CCAssert(m_bIsRetinaEnabled == false, "can not enable retina while set design resolution size!");  
5. //确保分辨率显示方式有效  
6.     CCAssert(resolutionPolicy != kResolutionUnKnown, "should set resolutionPolicy");  
7.     //如果参数无效，直接返回。  
8.     if (width == 0.0f || height == 0.0f)  
9.     {  
10.         return;  
11.     }  
12.     //在这里对变量m_obDesignResolutionSize进行了设置。  
13.     m_obDesignResolutionSize.setSize(width, height);  
14.     //这里计算出影幕大小与分辨率大小的比率。存放在变量m_fScaleX,m_fScaleY中。  
15.     m_fScaleX = (float)m_obScreenSize.width / m_obDesignResolutionSize.width;  
16.     m_fScaleY = (float)m_obScreenSize.height / m_obDesignResolutionSize.height;  
17. //如果模式是kResolutionNoBorder，按照最大影幕方式，即保证像素不失真的情况下，影幕适应分辨率  
18. //如果是低调整模式  
19.     if (resolutionPolicy == kResolutionNoBorder)  
20. {  
21.        //缩放值按最大  
22.         m_fScaleX = m_fScaleY = MAX(m_fScaleX, m_fScaleY);  
23.     }  
24.     //如果是高调整模式  
25.     if (resolutionPolicy == kResolutionShowAll)  
26. {  
27.         //缩放值按最小  
28.         m_fScaleX = m_fScaleY = MIN(m_fScaleX, m_fScaleY);  
29.     }  
30.   
31.     // 根据缩放值和分辨率计算视口的宽高      
32.     float viewPortW = m_obDesignResolutionSize.width * m_fScaleX;  
33.     float viewPortH = m_obDesignResolutionSize.height * m_fScaleY;  
34.     // 设置视口位置居屏幕中间  
35.     m_obViewPortRect.setRect((m_obScreenSize.width - viewPortW) / 2, (m_obScreenSize.height - viewPortH) / 2, viewPortW, viewPortH);  
36.     //保存分辨率模式  
37.     m_eResolutionPolicy = resolutionPolicy;  
38.     //使用变量设置Opengl视口(此处屏蔽，在SetGLDefaultValues中会有设)  
39.     //setViewPortInPoints(0, 0,m_obScreenSize.width, m_obScreenSize.height);  
40. // 创建FPS的文字标签  
41. CCDirector::sharedDirector()->createStatsLabel();  
42. //初始化逻辑点和像素值大小  
43. CCDirector::sharedDirector()->m_obWinSizeInPoints = CCDirector::sharedDirector()->m_obWinSizeInPixels = getSize();   
44. //对OpengGL用到的一些设置进行初始化，其中有重设投影函数，会再重置视口。  
45.     CCDirector::sharedDirector()->setGLDefaultValues();  
46. }  

        现在大家明白我为什么将(2),(3),(4)并在一起说了。它们其实是有机结合的。相辅相成，缺一不可。

        我们最后来看一下:(5)，裁剪区域的大小：

裁剪区域：如果对Opengl显示窗口设定裁剪区域，则裁剪区域外的像素将不会显示。

        我们仍然在HelloLua工程中进行说明：

        在函数AppDelegate::applicationDidFinishLaunching()中我们在

[cpp]  view plain copy

1. CCEGLViewProtocol*  tpCCEGLView = (CCEGLViewProtocol*) CCEGLView::sharedOpenGLView();  
2.   
3. CCEGLView::sharedOpenGLView()->setDesignResolutionSize(80, 320, kResolutionShowAll);  

       后面增加代码：

[java]  view plain copy

1. //设定裁剪显示区域  
2. tpCCEGLView->setScissorInPoints(100,100,100,100);  
3.     //开启裁剪检测  
4. glEnable(GL_SCISSOR_TEST);  

 

        运行测试：

            可以看到,我们对画面进行了裁剪。从屏幕100,100位置起的大小为宽100,高100的区域被设为了裁剪显示区域，其它部分均被裁切掉了。

 

            好了，以上这些个“大小”的基础知识，也颇让我费了些脑子去想该怎么讲出来。希望本节课目不会令大家失望。