Cocos2dx-3.x 学习笔记一:屏幕分辨率及适配问题

Cocos2dx-3.x 学习笔记一:屏幕分辨率及适配问题,第1张

概述如何实现屏幕的适配,尤其是利用cocos studio进行开发的过程中,制定的界面采用绝对布局,在实际设备显示的时候可能出现很多的问题 http://www.tuicool.com/articles/RZbumq 给出了一个很好的小结,可以参考,下面小结一下,给出自己的理解 准备  first:  利用cocos  studio创建一个scene, 在其中添加一些基本元素,如背景,text,but

如何实现屏幕的适配,尤其是利用cocos studio进行开发的过程中,制定的界面采用绝对布局,在实际设备显示的时候可能出现很多的问题

http://www.tuicool.com/articles/RZbumq给出了一个很好的小结,可以参考,下面小结一下,给出自己的理解


准备


first:

利用cocos studio创建一个scene,在其中添加一些基本元素,如背景,text,button等

本文设计的为 640x960的场景,如:


将上面的场景发布到visual studio中,然后我们开始测试编辑,首先在AppDelegate.cpp中进行相关设置

second:

介绍一下VisibleSize,WinSize,FrameSize, VisibleOrigin之间的联系和区别

(参考:http://www.jb51.cc/article/p-tiqzxfjo-gv.html)

​FrameSize: 屏幕实际分辨率,固定不变的,由设备(即具体的手机自己决定)

​WinSize: 设计分辨率,相当于游戏设计的逻辑大小(即我们计划的游戏场景大小)

​VisibleSize: 显示分辨率,总是小于等于WinSize的

​VisibleOrigin: 即VisibleSize在WinSize中的左下角坐标

​e.g:

​​FrameSize-> wIDth:720,height:420

​​WinSize-> wIDth:360,height:240

​​在无ResolutionPolicy::NO_border的条件下为:(NO_border的具体意义下面讲述)

third:

setDesignResolutionSize(DW, DH, resolutionPolicy)

有三个参数,设计分辨率宽,设计分辨率高,分辨率策略。

ResolutionPolicy::SHOW_ALL :屏幕宽、高分别和设计分辨率宽、高计算缩放因子,取较(小)者作为宽、高的缩放因子。保证了设计区域全部显示到屏幕上,但可能会有黑边。

ResolutionPolicy::SHOW_FIT:屏幕宽 与 设计宽比 作为X方向的缩放因子,屏幕高 与 设计高比 作为Y方向的缩放因子。保证了设计区域完全铺满屏幕,但是可能会出现图像拉伸

ResolutionPolicy::NO_border: 屏幕宽、高分别和设计分辨率宽、高计算缩放因子,取较(大)者作为宽、高的缩放因子。保证了设计区域总能一个方向上铺满屏幕,而另一个方向一般会超出屏幕区域


测试FrameSize,VisableSize之间关系


first :

原始图像如上所示,现在我们假设设备FramSize(640,960),设置FramSize为(320,480),则显示结果为

glvIEw->setFrameSize(640,960);

director->getopenGLVIEw()->setDesignResolutionSize(320,480,ResolutionPolicy::SHOW_ALL);


如果将WinSize设置为 (640, 960):

glvIEw->setFrameSize(640, 960);

director->getopenGLVIEw()->setDesignResolutionSize(640,960,ResolutionPolicy::SHOW_ALL);

----》因为屏幕太小,所以没有能完全显示出来,理论上是ok的



换算成:

glvIEw->setFrameSize(320,480);

director->getopenGLVIEw()->setDesignResolutionSize(640,ResolutionPolicy::SHOW_ALL);

---->winSize---wIDth:640,height:960

---->visibleSize---wIDth:640,height:960



测试适配问题


上面测试的FrameSize和VisibleSize之间正好成比例,那么不成比例的情况呢,如

glvIEw->setFrameSize(320,500);

director->getopenGLVIEw()->setDesignResolutionSize(640,ResolutionPolicy::SHOW_ALL);

--------------------------------------------------------------------------------------------------------------

glvIEw->setFrameSize(340,ResolutionPolicy::SHOW_ALL);


最常用的分辨率策略是SHOW_ALL,那么上面的问题如何解决?

在 show all 的基础上加以改进,完全消除黑边,原理如下:

show all表示保证图片资源全部能够显示在界面上,因此按比例进行缩放时,是有选择的,我们举例说明:

放大---->

​设 FrameSize: DW,dh,VisibleSize: vw,vh

​缩放比例为: sx = DW / vw,sy = dh / vh -----> 如 sx=2,sy=3,全部显示时,需要将资源宽放大两倍,高放大三倍,故此处选择的将是统一放大两倍,即高将填不满,有黑边,考虑将vh放大一点也达到dh的一半

即​这里选择方案将是重设vh = dh / sx

​---> 放大时,选择较小的比例

​if sx < sy then vh=dh/sx

​然后整体的放大sx倍即可完美的填充界面

缩小时----->

​ ​正和上面相反,假设sx=0.25,sy=0.5 -----> 按照show_all的原则,选择宽填满,缩小1/4,此时可以知道高将有空白黑边,因此需要放大vh为之前的两倍才有可能在缩小1/4的时候恰好填充屏幕

​即这里选择方案是重设

if sx < sy then vw = DW/sy

这里,通过实际测试,发现:

---->在WinSize小于FrameSize的时候,即需要缩小图片时,可以采用下面的来实现:


    float deviceWIDth = 300;    float deviceHeight = 460;     float designWIDth = 640;    float designHeight = 960;     float scaleX = deviceWIDth / designWIDth;    float scaleY = deviceHeight / designHeight;    if(scaleX > scaleY) // 这里是区别处        designHeight = deviceHeight / scaleX;    else        designWIDth = deviceWIDth / scaleY;    log("design: %f %f %f %f\n",designWIDth,designHeight,scaleX,scaleY);    director->getopenGLVIEw()->setDesignResolutionSize(designWIDth,ResolutionPo

---->当WinSize大于FrameSize的时候,即需要放大图片时,采用

float deviceWIDth = 300;    float deviceHeight = 460;     float designWIDth = 640;    float designHeight = 960;     float scaleX = deviceWIDth / designWIDth;    float scaleY = deviceHeight / designHeight;    if(scaleX < scaleY) // ------------> 区别处        designHeight = deviceHeight / scaleX;    else        designWIDth = deviceWIDth / scaleY;    log("design: %f %f %f %f\n",ResolutionPolicy::SHOW_ALL);
总结

以上是内存溢出为你收集整理的Cocos2dx-3.x 学习笔记一:屏幕分辨率及适配问题全部内容,希望文章能够帮你解决Cocos2dx-3.x 学习笔记一:屏幕分辨率及适配问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1054872.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)