cocos2d-x屏幕适配原理

xiaoxiao2021-02-28  93

原文地址: http://m.blog.csdn.net/article/details?id=50827766

一、适配简介

如今市面上的手机种类越来越多,分辨率是千变万化的。但是我们做游戏开发,喜欢自己的游戏可以在各个手机都能合适的运行,那么就需要做多分辨率的适配。

二、retain屏幕概念

之前,苹果手机对480*320和960*640的手机适配策略是这样的,当分辨率是480*320时,寻找的图片是1.png。当分辨率是960*640时,寻找的图片是1@2x.png。这个图片是1.png的2倍大小,这样就能保证在不同的分辨率手机上都能很好的运行。但是,这给我们的美工增加了不小的工作量,而且安装包的大小也会大很多。

cocos2d-x里也有这种策略,它的做法是把图片放在不同的文件夹中。程序运行时,根据接口获取屏幕分辨率,然后进行判断,再设定图片的搜索路径,这样程序中读取图片就会从这个指定的路径读取。

if(Director::getInstance()->getWinSize().width > 480){ std::vector<std::string>s; s.push_back("lagre"); }else{ std::vector<std::string>s; s.push_back("small"); } 1234567

三、cocos2d-x适配策略

cocos2d-x在2.0.4版本开始提出了自己的适配策略。提出了设计分辨率这样的一个概念。 相关概念: 资源分辨率:就是我们的图片分辨率。 设计分辨率:我们将这个游戏放在这个分辨率的设备上,我们的游戏将完美展示。 设备分辨率:我们手机的分辨率。

那么具体的做法是什么呢? 这个适配过程可以分为两个部分。 1.第一个部分,就是资源分辨率到设计分辨率。但是我们一般在准备资源时,会让其一致,那么久可以省略这一步,但是如果不一样,cocos2d-x也提供了相应的接口。

Director::getInstance()->setContentScaleFactor(2.0); 1

我们可以设置图片的缩放银子,这个设置之后,就相当于将我们的图片资源缩小了4倍。因为这个的算法是(资源)/(设计分辨率)。 2.第二部分,就是从设计分辨率到设备分辨率。我们刚开始说我们将我们这么的设计的游戏,放在设备分辨率等于设计分辨率的手机上,我们的游戏将完美展示,但是,当放在手机分辨率不等于我们设备分辨率的手机上,那么它会怎么显示呢? 其实,设计分辨率的单位是点,而屏幕分辨率是像素。cocos2dx就是为了让我们的程序,可以不用直接关注手机分辨率,而提出了设计分辨率这样的一个概念。在最后绘制的时候,我们设计分辨率的一个点,可能对应好几个像素。

在代码上,我们的屏幕适配就只有下面这点代码:

GLView* gl = Director::getInstance()->getOpenGLView(); gl->setDesignResolutionSize(800, 400, ResolutionPolicy::FIXED_HEIGHT); 12

这里的三个参数分别是:设计分辨率的宽,设计分辨率的高,和适配策略。适配策略是cocos2d-x已经给我们写好的,现在有5种。

策略1:SHOW_ALL

根据屏幕的宽高与设计分辨率的宽高分别计算缩放因子,然后取较小的作为缩放因子。保证了设计区域全部显示到屏幕上,但是屏幕上可能有黑边。

策略2:NO_BORDER

根据屏幕的宽高与设计分辨率的宽高分别计算缩放因子,然后取较大的作为缩放因子。保证了设计区域在一个方向上铺满,而另一个方向一般会超出屏幕区域。

策略3:EXACT_FIT

根据屏幕的宽与设计分辨率的宽作为x方向上的缩放因子,根据屏幕的高与设计分辨率的高作为y方向上的缩放因子,保证了屏幕完全铺满,但是可能会出现图像的拉伸。

策略4:FIXED_HEIGHT

根据屏幕的的宽高比,保证设计分辨率的高不变,修改设计分辨率的宽。 就是根据屏幕的宽高比,来调整设计分辨率的宽高比,使其一直,在此过程中,不对高做调整。 例如:资源分辨率800*400->设计分辨率800*400->设备分辨率480*320。 首先,我们求出其设备分辨率的宽高比。 480/320 = 1.5。 其次,我们保持设计分辨率的高不变,调整宽,使其比例一致。 400*1.5 = 600。 我们的设计分辨率为800*400,然而我们计算得出这个策略使用后只需要600*400的分辨率,那么宽多出了200,则图片在x方向上有部分被截取了,且铺满了屏幕。

策略5:FIXED_WIDTH

根据屏幕分辨率的宽高比,保证设计分辨率的宽不变,修正设计分辨率的高。 同样使用上面那个例子: 首先,求出设备分辨率的宽高比。 480/320 = 1.5。 其次,我们保持设计分辨率的宽不变,调整高,使其比例一致。 800/1.5 = 533。 那么,可知,设计分辨率的高是400,比533小。那么最后图片在展示时在y方向上会有黑边。

转载请注明原文地址: https://www.6miu.com/read-34883.html

最新回复(0)