cocos2d——屏幕自适应（转）

最新推荐文章于 2025-01-18 10:07:07 发布

Steven_可乐

最新推荐文章于 2025-01-18 10:07:07 发布

阅读量940

点赞数

CC 4.0 BY-SA版权

分类专栏： android

本文链接：https://blog.youkuaiyun.com/Steven2947/article/details/12998257

android 专栏收录该内容

13 篇文章

订阅专栏

本文详细解释了DesignResolutionSize和ContentScaleFactor在游戏开发中的使用方法，包括如何设计资源、调整图片比例以及适应不同设备屏幕尺寸。通过实例和图表，演示了在不同屏幕尺寸下，如何根据设计分辨率和内容缩放因子调整游戏资源的显示效果，以实现全屏展示并避免变形或黑边问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始很不理解DesignResolutionSize和ContentScaleFactor是怎么使用的，看了比较多资料和图，把整理的理解记录以下：

pEGLView->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, kResolutionNoBorder);
我的理解的意思是设计资源时是：
1.按这个大小来设计各个部件的，也以此来决定部件的位置。
2.对于屏幕大小不同的时候，根据FrameSize的大小和design size（visible size）的大小比例进行拉伸（部件的大小和位置都会根据比例），拉伸的策略是后面的policy参数：
kResolutionNoBorder:等比拉伸，图片不变形，不允许上下左右有黑边，按高度或者宽度占满屏幕，超出的部分截取
kResolutionExactFit:图片高度按和宽度按格子和屏幕的比例拉伸，即不等比拉伸，图片会变形，宽度占满屏幕，高度也沾满屏幕
kResolutionShowAll:等比拉伸，图片不变形，整个图形需要在屏幕中能看到，屏幕上面或者下面会有黑边
3.注意计算比例都是按design size-》frame size时的比例来进行，显示成什么样子则需要看通过下面的contentScaleFactor函数设置的比例从原图中获取到的大小部分跟design size的大小情况。

pDirector->setContentScaleFactor(float scaleFactor)
从资源图按什么比例缩放到design resolution size中，如果不设置就是1.0f，如果需要整张图都可以看得到，一般需要设置宽比和高比中大的那个。
如果获取的比例图在design size不是完全吻合，则会在design中出现黑边（长和宽比design size小的情况）或者部分被截取（长或宽都比design size大的情况）的情况，那后面在frame size里根据policy显示出来的图也是会有相应的情况。

计算最后屏幕显示成什么样，
第一步应该先按scaleFactor计算出从原图缩放后的中间图大小
第二步是看这个图在desigz size中的显示情况
第三步按policy把design size缩放到frame size

下面就用插图的方式来说明一下，我们这里使用的高度来计算这个比例值。

图表1：资源大小=960*640，设计分辨率大小=480*320，目标设备屏幕大小=800*480，RH/DH=RW/DW=2.0f，第三个参数选择的是NoBorder模式。

当使用NoBorder模式的时候，有一些背景区域显示到屏幕以外去了。假如你使用绝对坐标在设计分辨率大小（480*320），你游戏的一些UI可能会显示不全。为了解决这个问题，你不得不设置这个坐标依据’visible rectangle’（可见矩形）的。你可以得到可见矩形的起点，通过CCDirector::sharedDirector()->getVisibleOrign()方法。调用CCDirector::sharedDirector()->getVisibleSize()方法你就可以确定屏幕上面的9个点，左边，右边，上面，下面，中间，左上角，右上角，左下角，右下角。
假如你的游戏的所有坐标就是依靠这9个点，那么你的游戏就可以全屏展示了。
关于怎么计算这些点，你可以参考TestCpp项目里面的“VisibleRect”类。

图表2：资源大小=1024*768，设计分辨率大小=480*320，目标设备屏幕大小=800*480，RH/DH！=RW/DW=，第三个参数选择的是NoBorder模式。

当RH/DH不等于RW/RH的时候，你就需要选择的是相对于设计分辨率的宽度比例还是高度比例。

在图表2中，我们仍然使用高度比例来计算contentScaleFator，因此资源背景的高度将会适应设计分辨率
在将设计分辨率绘制到屏幕上之后，标记① –> 标记②, 和标记③将会在屏幕外面。

现在，你有两个选择来让你的游戏全部显示出来。一种是让你的背景图变宽点。另外一种是去设置contentScaleFactor为宽度的比例。

模式现在cocos2d-x支持三种模式
Exact fit整个应用程序的内容都会在特殊区域可见，并且不用提供这些比例系数。可能会出现形变，所有的应用程序看起来可能会是拉伸或者压缩的。
No border当设置了屏幕高宽比之后，整个应用程序将会显示在这个特殊区域，但是没有形变，但是可能一些裁剪。
Show all当设置了屏幕高宽比之后，整个应用程序也是会显示在这个特殊的区域内，没有形变，不过可能会出现两条黑边。

图表3：资源大小 = 1024*768；设计分辨率大小 = 480*320；目标设备屏幕大小 = 800*480；RH/DH != RW/DW; ShowAll Policy
标记② 和标记③都是黑色的矩形区域。但是他们不同的，标记③是在Opengl可视区域外面的，因此你不能把任何的游戏元素放在上面。标记②的出现是因为RW/RH不等于DW/DH，但是在Opengl可视区域，你可以放置你的游戏元素在那里。