cocos2dx基础篇(27) 屏幕适配

【3.x】https://blog.csdn.net/qq_40338728/article/details/82964046

 

【屏幕适配】

一、两个分辨率

    1.一、窗口分辨率

    在main.cpp中有个设置窗口分辨率的函数。该函数是设置了咱们预想设备的屏幕大小，也就是应用程序窗口的大小。

//
	eglView->setFrameSize(480, 320);
//

    1.二、设计分辨率（可视区域）

    在AppDelegate.cpp中也有个设置设计分辨率的函数。该函数是设置了咱们游戏设计时候的分辨率，也就是可视区域的大小，也就是说设计者初衷的游戏可视区域的分辨率屏幕大小。

    可是对于每一个用户来讲，他们使用的设备不必定是（480/320）的，好比手机有大有小。

    然后面的kResolutionShowAll，意思是按照原比例（480/320）进行放缩以适配实际屏幕大小。

//
	CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480,320,kResolutionShowAll);
//

    如下贴了三张对比图，加深理解。

    （1）这是原图片大小，窗口大小为480 * 320。

    （2）若设置窗口大小为setFrameSize(960, 640)，而不设置设计分辨率kResolutionShowAll的状况下，图片不放缩，原图仍是480 * 320。

    （3）设置了kResolutionShowAll以后，图片放缩到适配整个屏幕960 * 640 了。

 

二、五种适配模式

    从上面的讲解咱们能够了解到，setFrameSize()是设置了窗口大小（即屏幕的实际大小），而这个参数只是为了咱们开发时做为模拟参照，在实际手机上运行时，手机的屏幕大小是咱们没法设置的。

    而屏幕适配的关键在于setDesignResolutionSize()，经过它来设置可视区域的分辨率以及屏幕适配模式。该函数的前两个参数为分辨率（即屏幕长宽比例），而最后一个参数则是适配的模式。

 

    2.一、适配模式

    （1）kResolutionExactFit   ：拉伸变形，使铺满屏幕。

    （2）kResolutionNoBorder   ：按比例放缩，全屏展现不留黑边。

                                    （长宽中小的铺满屏幕，大的超出屏幕）

    （3）kResolutionShowAll    ：按比例放缩，所有展现不裁剪。

                                    （长宽中大的铺满屏幕，小的留有黑边）

    （4）kResolutionFixedWidth ：按比例放缩，宽度铺满屏幕。

    （5）kResolutionFixedHeight：按比例放缩，高度铺满屏幕。

 

    2.二、计算方法

    假设：屏幕分辨率（fWidth，fHeight） ； 设计分辨率（dWidth，dHeight）。

          放缩因子：k1 = fWidth/dWidth ； k2 = fHeight/dHeight。

    则适配后的分辨率大小以下：

    （1）kResolutionExactFit   ：（ dWidth * k1         , dHeight * k2         ）

    （2）kResolutionNoBorder   ：（ dWidth * max(k1,k2) , dHeight * max(k1,k2) ）

    （3）kResolutionShowAll    ：（ dWidth * min(k1,k2) , dHeight * min(k1,k2) ）

    （4）kResolutionFixedWidth ：（ dWidth * k1         , dHeight * k1         ）

    （5）kResolutionFixedHeight：（ dWidth * k2         , dHeight * k2         ）

 

    2.三、有图有真相

        屏幕大小：400 X 400 。

        可视区域大小：480 X 320 。

        

 

        

 

        

 

三、横竖换屏

    cocos2dx开发的游戏，在手机上运行的时候，默认是横屏的。

    3.一、Android

    AndroidManifest.xml文件中

    （1）android:screenOrientation = "landscape"   //横屏显示（默认）

    （2）android:screenOrientation = "portrait"    //竖屏显示

     3.二、IOS

//
	- (NSUInteger) supportedInterfaceOrientations{
		//横屏显示
		//return UIInterfaceOrientationMaskLandscape;
		
		//竖屏显示
		return UIInterfaceOrientationMaskPortrait;
	}
//

四、屏幕大小及坐标

    （1）WinSize        ：屏幕大小

    （2）VisibleSize    ：可视区域大小

    （3）VisibleOrigin  ：可视区域的左下角坐标

//
	CCDirector::sharedDirector()->getWinSize()
	CCDirector::sharedDirector()->getVisibleSize();
	CCDirector::sharedDirector()->getVisibleOrigin();
//

    图解：