【学习心得】关于自动适配分辨率的那些事

好吧~我承认我最近一直在提问,对论坛一点贡献都没有。。。作为一个新手,我把最近的学习心得发出来,供给其他新手参考,大神表喷:6:

lz是个新手,刚开始做游戏的时候一放到真机上图片就各种飞,弄得lz很是纠结。。。遂学上一学适配分辨率,给新手们详解一下。

0 拿helloworld说事:

大部分新手的环境搭建好之后,第一个程序应该都是这货。咱们来看一下图片尺寸以及实际效果: 

大概就是这样了。这是一个480*320的图片,比例是3:2,这货被放到了屏幕的中间,当做一张背景图片。好吧~我想让他适配16:9的屏幕~而且要全屏~肿么办!

1 setDesignResolutionSize:

首先先把屏幕改成16:9的吧~~

在AppDelegate.cpp中添加一句话

 
     auto director = Director::getInstance(); 
    auto glview = director->getOpenGLView(); 
    if(!glview) { 
        glview = GLView::create("My Game"); 
        director->setOpenGLView(glview); 
    } 
//↓这玩意就是设置屏幕大小,设置成960*540的吧~16:9的 
 glview->setFrameSize(960,540); 

接下来是完成一切适配的函数~setDesignResolutionSize

setDesignResolutionSize 这里有三个参数,前两个就是。。恩。。。长和宽~这么理解吧~既然是想把480*320的图片全屏化,那么前两个就写480,320吧~至于第三个参数,这里有如下选择:http://cn.cocos2d-x.org/doc/cocos2d-x-3.0/d3/df4/_c_c_g_l_view_protocol_8h.html#a1cffba1e93904c18739b3a67171e7894a0511658da394104004f2280de2679459EXACT_FIT, http://cn.cocos2d-x.org/doc/cocos2d-x-3.0/d3/df4/_c_c_g_l_view_protocol_8h.html#a1cffba1e93904c18739b3a67171e7894a2f015b4197d85c9acc95af0642e1ca1aNO_BORDER, http://cn.cocos2d-x.org/doc/cocos2d-x-3.0/d3/df4/_c_c_g_l_view_protocol_8h.html#a1cffba1e93904c18739b3a67171e7894a0402808b20c3a88797a684aa2f6903b4SHOW_ALL, http://cn.cocos2d-x.org/doc/cocos2d-x-3.0/d3/df4/_c_c_g_l_view_protocol_8h.html#a1cffba1e93904c18739b3a67171e7894a2131adbb4dd319b41fde159e863c39adFIXED_HEIGHT, http://cn.cocos2d-x.org/doc/cocos2d-x-3.0/d3/df4/_c_c_g_l_view_protocol_8h.html#a1cffba1e93904c18739b3a67171e7894a6dbddc7549d601a2c4d3c202ff4382a5FIXED_WIDTH, http://cn.cocos2d-x.org/doc/cocos2d-x-3.0/d3/df4/_c_c_g_l_view_protocol_8h.html#a1cffba1e93904c18739b3a67171e7894a696b031073e74bf2cb98e5ef201d4aa3UNKNOWN

setDesignResolutionSize(480.0f,320.0f,EXACT_FIT):长宽拉伸满,既480拉伸到960;320拉伸到540。这样话效果是图片会变形。

setDesignResolutionSize(480.0f,320.0f,NO_BORDER):直译没有黑边,即按比例缩放,缩放到撑满屏幕为止。这里的话,480拉伸到960;320拉伸到640。

setDesignResolutionSize(480.0f,320.0f,SHOW_ALL):直译显示全部。按比例缩放,缩放到一边碰到屏幕边缘为止。这样的话480拉伸到810,320拉伸到560(高先碰到边缘)。这样的效果是对于任意的屏幕都会显示全部的图片内容,不过如果分辨率不一样的话,可能黑边在上下两侧,也可能在左右两侧。

setDesignResolutionSize(480.0f,320.0f,FIXED_WIDTH):按比例缩放,一直到宽撑满屏幕为止。

setDesignResolutionSize(480.0f,320.0f,FIXED_HEIGHT):按比例缩放,一直到高撑满屏幕为止。

setDesignResolutionSize(480.0f,320.0f,UNKNOWN):直译不知道,我也不知道。。。。

好吧,咱们来添加一个,比如SHOW_ALL。

 
     auto director = Director::getInstance(); 
    auto glview = director->getOpenGLView(); 
    if(!glview) { 
        glview = GLView::create("My Game"); 
        director->setOpenGLView(glview); 
    } 
//↓这玩意就是设置屏幕大小,设置成960*540的吧~16:9的 
 glview->setFrameSize(960,540); 
//↓这玩意就是适配分辨率用的。 
 glview->setDesignResolutionSize(480.0f,320.0f,ResolutionPolicy::SHOW_ALL); 

看看效果~是不是像咱们算的一样

效果还不错~

2 坐标转换以及资源缩放:

现在资源图片是480 320,屏幕时960 540,然后资源图片适配了这个屏幕。那么如果我在240 160这个坐标上加一个Lable,他是放在哪呢~

试上一试~看看结果:

答案是放在了中间~~

因此可知:用了适配函数后,整套坐标系都是按照适配的像素来计算的。即你用了glview->setDesignResolutionSize(480.0f,320.0f,ResolutionPolicy::SHOW_ALL);

那么不管你真是设备屏幕多大,那么你的坐标系都是长480像素,宽320像素。

有的程序可能会有这样的问题,原来用的480 320适配的屏幕,代码中也是用坐标来确定各个元素的位置,这时候美工给你来了一套640 480的资源,这该如何是好!

想来想去只能把640 480的缩成480 XXX 或者 XXX 320的图片,然后在用他去适配了~为啥用XXX呢。。。因为原来是3:2的,现在是4:3的,怎么缩都不能按比例编程480 320~

这里就要用到这个函数了~setContentScaleFactor(float fl); —按照参数进行缩放。具体就是~你里面写2~所有元素长宽都会缩小两倍。写个0.5就都扩大两倍。。恩。。好像就是这样。

因此想让640 480的图片能用的话,就可以进行如下两种缩放方式:

Director::getInstance()->setContentScaleFactor(640.0/480.0); ----把长缩成480~高按比例缩,结果是图片的长能完全显示。

或者
Director::getInstance()->setContentScaleFactor(480.0/320.0); —把高缩成320~长按比例缩,结果是图片的高能完全显示。

WARNING:里面参数一定要保证是浮点啊。。。别拿俩整数去操作,你懂得

 
     auto director = Director::getInstance(); 
    auto glview = director->getOpenGLView(); 
    if(!glview) { 
        glview = GLView::create("My Game"); 
        director->setOpenGLView(glview); 
    } 
//↓这玩意就是设置屏幕大小,设置成960*540的吧~16:9的 
 glview->setFrameSize(960,540); 
//↓这玩意就是适配分辨率用的。 
 glview->setDesignResolutionSize(480.0f,320.0f,ResolutionPolicy::SHOW_ALL); 
//↓缩放所有资源 
director->setContentScaleFactor(640.0/480.0);  

这样就差不多了吧。。。。

3 一句话攻略:

想让长全部显示:

glview->setDesignResolutionSize(设计的长,设计的宽,ResolutionPolicy::FIXED_WIDTH);

Director::getInstance()->setContentScaleFactor(图片的长/设计的长);

想让宽全部显示:

glview->setDesignResolutionSize(设计的长,设计的宽,ResolutionPolicy::FIXED_WIDTH);

Director::getInstance()->setContentScaleFactor(图片的宽/设计的宽);

。。废半天话不如直接给代码。。。

以上就是我的个人理解。。。。。希望对新人有所帮助吧。。。

为毛图片是XX~~~

=.=这么快就沉下去了