AI 助理
备案控制台
开发者社区 人工智能 文章 正文

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

2017-11-15 1013
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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

(1).窗口的大小

(2).分辨率的大小

(3).影幕的大小

(4).视口的大小

(5).裁剪区域的大小

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

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

源码 copy to clipboard 打印 ？
  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的相应函数：


源码 copy to clipboard 打印 ？
  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函数：

源码 copy to clipboard 打印 ？
  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; //窗口类信息结构
  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());
  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));
  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，所以只有继续看重点函数才能知道窗口大小是怎么设置的。


源码 copy to clipboard 打印 ？
  1. <SPAN style="FONT-SIZE: 14px">void CCEGLView::resize(int width, int height)
  2. {
  3. //窗口句柄有效性判断
  4. if (! m_hWnd)
  5. {
  6. return;
  7. }
  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));
  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中相应函数定义：


源码 copy to clipboard 打印 ？
  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的定义:

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

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

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

源码 copy to clipboard 打印 ？
  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);
  10. //开始高清显示模式
  11. // pDirector->enableRetinaDisplay(true);
  13. // 设置显示FPS相关
  14. pDirector->setDisplayStats(true);
  16. // 设置帧间隔时间
  17. pDirector->setAnimationInterval(1.0 / 60);
  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
  35. return true;
  36. }
  37. </SPAN>

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

源码 copy to clipboard 打印 ？
  1. CCEGLView::sharedOpenGLView()->setDesignResolutionSize(80, 320, kResolutionExactFit);
  2. CCEGLView::sharedOpenGLView()->setDesignResolutionSize(80, 320, kResolutionNoBorder);
  3. CCEGLView::sharedOpenGLView()->setDesignResolutionSize(80, 320, kResolutionShowAll);

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




好好理解一下。

再回来看setDesignResolutionSize函数:


源码 copy to clipboard 打印 ？
  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. }
  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()中我们在

源码 copy to clipboard 打印 ？
  1. CCEGLViewProtocol* tpCCEGLView = (CCEGLViewProtocol*) CCEGLView::sharedOpenGLView();
  3. CCEGLView::sharedOpenGLView()->setDesignResolutionSize(80, 320, kResolutionShowAll);

后面增加代码：


源码 copy to clipboard 打印 ？
  1. //设定裁剪显示区域
  2. tpCCEGLView->setScissorInPoints(100,100,100,100);
  3. //开启裁剪检测
  4. glEnable(GL_SCISSOR_TEST);

运行测试：

 


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


















本文转蓬莱仙羽51CTO博客，原文链接：http://blog.51cto.com/dingxiaowei/1366387，如需转载请自行联系原作者

文章标签：
编解码
Windows
技术小美
目录
相关文章
67vpym2vvkfhs
|
5月前
|
程序员 Linux C语言
程序员必知：如何用cocos2d
程序员必知：如何用cocos2d
67vpym2vvkfhs
28 2
hnrk7epeorhrk
|
5月前
|
C++ 流计算
程序与技术分享：Cocos2d
程序与技术分享：Cocos2d
hnrk7epeorhrk
22 1
程序员牛哥
|
人工智能 缓存 算法
我所理解的cocos2dx 读书笔记
我所理解的cocos2dx 读书笔记
程序员牛哥
64 0
技术小胖子
|
iOS开发
cocos2d-x学习笔记番外篇04：开发问题汇总01
技术小胖子
1242 0
余二五
|
iOS开发
【iOS-Cocos2d 游戏开发之二】Cocos2D 游戏开发资源贴
余二五
1226 0
技术小甜
Cocos2d-x 2.x编程之CCNotificationCenter
技术小甜
986 0
吞吞吐吐的
|
Web App开发 Android开发 iOS开发
【iOS-Cocos2d游戏开发】系列（总结了多篇文章，可以好好学习
吞吞吐吐的
1561 0
华章计算机
《Cocos2D权威指南》——第1章 1.0　开始前的准备工作
本节书摘来自华章计算机《Cocos2D权威指南》一书中的第1章，第1.0节，作者：王寒，屈光辉，周雪彬著， 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
华章计算机
1199 0
异步社区
|
C++ 开发者 iOS开发
《Cocos2D-X游戏开发技术精解》一1.2 Cocos2D-X引擎的来历
异步社区
1775 0
异步社区
|
开发者
《Cocos2D-X游戏开发技术精解》一导读
凭借Cocos2D-X强大丰富的功能、简单易用的特点，读者成为一个优秀的游戏开发者将是轻而易举的事情。同时，网上商店也为开发者提供了面向全球用户的开放市场。此时，正是读者尽显才华、影响世界的机会。
异步社区
1009 0