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

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

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

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

(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
|
7月前
|
程序员 Linux C语言
程序员必知：如何用cocos2d
程序员必知：如何用cocos2d
67vpym2vvkfhs
34 2
程序员牛哥
|
人工智能 缓存 算法
我所理解的cocos2dx 读书笔记
我所理解的cocos2dx 读书笔记
程序员牛哥
74 0
谙忆
|
设计模式 定位技术
【Cocos2d-x】开发基础-Cocos2d-x核心概念
【Cocos2d-x】开发基础-Cocos2d-x核心概念
谙忆
123 0
二哈卖豆腐
|
图形学 Android开发
Unity3D 个人尝试经验总结
通过StaticBatchingUtility.Combine(GameObject[], RootGameObject)的GameObject可以通过SetActive()控制显示与隐藏。并且在运行过程中可以将GameObject[]中的元素移出来改变位置与材质，并将原位置设置为null，在改动完成后再赋值回去。
二哈卖豆腐
1423 0
技术小胖子
|
iOS开发
cocos2d-x学习笔记番外篇04：开发问题汇总01
技术小胖子
1246 0
余二五
|
iOS开发 开发框架
iphone开发之Cocos 2D简介
余二五
1045 0
异步社区
|
C++ 开发者 iOS开发
《Cocos2D-X游戏开发技术精解》一1.2 Cocos2D-X引擎的来历
异步社区
1785 0
异步社区
|
开发者
《Cocos2D-X游戏开发技术精解》一1.10 本章小结
异步社区
1162 0
异步社区
|
开发者
《Cocos2D-X游戏开发技术精解》一导读
凭借Cocos2D-X强大丰富的功能、简单易用的特点，读者成为一个优秀的游戏开发者将是轻而易举的事情。同时，网上商店也为开发者提供了面向全球用户的开放市场。此时，正是读者尽显才华、影响世界的机会。
异步社区
1013 0
异步社区
《Cocos2D-X游戏开发技术精解》一第1章 Cocos2D-X引擎的介绍
异步社区
1502 0

热门文章

最新文章

  • 1
    跟阿里云技术专家阙寒一起深度了解视频直播CDN技术
  • 2
    流批一体的近实时数仓的思考与设计
  • 3
    丰富、连接、待集成—MaxCompute 生态再出发
  • 4
    securecrt克隆会话与sshd 的 MaxSessions
  • 5
    McAfee揭秘网络最危险搜索关键词
  • 6
    微软再爆IE 0day漏洞 绿盟科技提供预警及防护手段
  • 7
    uboot命令分析+实现【转】
  • 8
    读书笔记--101个shell脚本 之#11--炫
  • 9
    SQL Server 深入解析索引存储(堆)
  • 10
    OAF_EO系列3 - Initialize详解和实现（案例）
  • 1
    【claude官网中文版】国内如何使用claude?记住这十大技巧！
    102
  • 2
    调用云端Qwen系列大模型（TURBO、PLUS、MAX和MAX_LATEST）在国际商业咨询智能体场景的实践探索
    55
  • 3
    已解决：国内如何使用Claude 3.5 Sonnet \ claude官网中文入口
    44
  • 4
    HarmonyOS 5.0 Next实战应用开发—‘我的家乡’【HarmonyOS Next华为公司完全自研的操作系统】
    64
  • 5
    自学记录鸿蒙API 13：实现多目标识别Object Detection
    161
  • 6
    《探索人工智能产业的可持续发展模式与策略》
    18
  • 7
    《人工智能助力社会学研究：数据挖掘与分析方法的深度探索》
    22
  • 8
    《软体机器人与仿生机器人的人工智能控制技术：挑战与突破》
    18
  • 9
    《探索机器人自主导航与路径规划技术的热点》
    22
  • 10
    《集成学习：堆叠泛化与提升法在人工智能中的应用热点》
    16

    • 相关课程

    更多
  • 「大师课」搞定 Java 开发基础
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 【科技少年】Python绘画编程第一课
  • 面向运维的 python 脚本速成-1024程序员节创造营公益课
  • 移动Web前端开发

    • 相关电子书

    更多
  • Flutter技术解析与实战
  • 闲鱼《Flutter 技术解析与实战》
  • 基于flutter的产品应用实践

    • 相关实验场景

    更多
  • 1分钟部署经典小游戏
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)