cocos2d-x3.0中图片分辨率自动适配设置以及源码,原理分析。

http://www.2cto.com/kf/201407/321086.html


和以前的版本不太一样,每当我们打开cocos2d-x3.0的新建工程时,都会看到其中加载的图片比较小,只占据了大概四分之一的空间,如下图所示:

\


视觉效果不太好,我就喜欢把它调整为全屏幕显示,且能够自动适应与各种不同的分辨率下,于是就找着了相关的代码,发现和以前的版本设置还是有一定的区别。不过核心内容没有变化。由于网上没有新版本的资料,相关的个别信息也很很系统和完整,自己研究了搞清楚了还是决定写出来归纳下。


可以在AppDelegate::applicationDidFinishLaunching()的方法中先获取导演类的单例,然后通过导演类的单例获取glview对象,即为openglview对象,如果不存在(glview为空),就重新创建一个,如下代码所示<喎�"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PC9wPgo8cD4gYXV0byBkaXJlY3RvciA9CkRpcmVjdG9yOjpnZXRJbnN0YW5jZSgpOzwvcD4KPHA+ICAgCmF1dG8gZ2x2aWV3ID0gZGlyZWN0b3ItPmdldE9wZW5HTFZpZXcoKTs8L3A+CjxwPiAgIAppZighZ2x2aWV3KSB7PC9wPgo8cD4gICAgICAgIGdsdmlldyA9CkdMVmlldzo6Y3JlYXRlKA=="My Game");

director->setOpenGLView(glview);

}


在setOpenGLView(glview)函数对进行了设置_openGLView,其中包括很多配置信息,含有取得我们设置屏幕大小适配相关的函数_winSizeInPoints = _openGLView->getDesignResolutionSize(),在里面取出来了我们可以设置的分辨率配置信息。

代码如下所示:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
void Director::setOpenGLView(GLView *openGLView)
{
     CCASSERT(openGLView, "opengl view should not be null" );
 
     if (_openGLView != openGLView)
     {
         // Configuration. Gather GPU info
         Configuration *conf = Configuration::getInstance();
         conf->gatherGPUInfo();
         CCLOG( "%s\n" ,conf->getInfo().c_str());
 
         if (_openGLView)
             _openGLView->release();
         _openGLView = openGLView;
         _openGLView->retain();
 
         // set size
         _winSizeInPoints = _openGLView->getDesignResolutionSize();
 
         createStatsLabel();
 
         if (_openGLView)
         {
             setGLDefaultValues();
         }
 
         _renderer->initGLView();
 
         CHECK_GL_ERROR_DEBUG();
 
         if (_eventDispatcher)
         {
             _eventDispatcher->setEnabled( true );
         }
     }
}


下面是取出配置方案的函数代码,

?
1
2
3
4
const Size& GLViewProtocol::getDesignResolutionSize() const
{
     return _designResolutionSize;
}

其中的_designResolutionSize是通过GLViewProtocol::setDesignResolutionSize()函数设置的,而这个函数是设置自动适配分辨率大小的关键函数,代码如下所示:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
void GLViewProtocol::setDesignResolutionSize( float width, float height, ResolutionPolicy resolutionPolicy)
{
     CCASSERT(resolutionPolicy != ResolutionPolicy::UNKNOWN, "should set resolutionPolicy" );
     
     if (width == 0 .0f || height == 0 .0f)
     {
         return ;
     }
 
     _designResolutionSize.setSize(width, height);
     _resolutionPolicy = resolutionPolicy;
     
     updateDesignResolutionSize();
  }

其中包括宽高和重要的适配策略ResolutionPolicy,作为一个枚举类型,包括了如下方案:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
enum class ResolutionPolicy
{
 
     EXACT_FIT,
 
     NO_BORDER,
 
     SHOW_ALL,
  
     FIXED_HEIGHT,
 
     FIXED_WIDTH,
 
     UNKNOWN,
};

其中的各个配置参数的配置含义如下:

EXACT_FIT:图片在选定的区域全部可见,图片显示可能会被压缩或者拉伸,不再保持原来的纵横比。

NO_BORDER:图片在特定的区域全部可见,不会扭曲,但可能会被剪裁,维持原来的纵横比。

SHOW_ALL:图片在特定的区域全部可见,不会扭曲,维持原来的纵横比,但可能显示边界。

FIXED_HEIGHT:固定高度,修改内部画布的宽度已适应设备的纵横比。不会扭曲。

FIXED_WIDTH:固定宽度,修改内部画布的高度已适应设备的纵横比。不会扭曲。


好了,我们掌握了所有关于自动适配屏幕的一切知识,下面就可以调用相关的函数设置想要的效果;

如我需要全屏幕的显示:

添加代码如下所示:


?
1
2
3
4
5
6
7
8
auto director = Director::getInstance();
     auto glview = director->getOpenGLView();
     if (!glview) {
         glview = GLView::create( "My Game" );
         director->setOpenGLView(glview);
     }
     
     glview->setDesignResolutionSize( 480 , 320 , ResolutionPolicy::NO_BORDER);

最后一行为添加的设置代码,分辨率方案选择NO_BORDER,最后显示效果如下所示:


<img src="http://www.2cto.com/uploadfile/Collfiles/20140728/2014072809104863.png" alt="n块ズ楗�…�" http:="" www.2cto.com="" os="" "="" target="_blank" class="keylink" style="border-width: 0px; padding: 0px; margin: 0px; list-style: none; width: 630px; height: 335.625px;">系统的全面的介绍,网上却没有,是个遗憾,自己研究了下,写出来,希望能够帮助需要的朋友,使用起来也更加的方便。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值