CocoStudio的GUI框架提供了一个简单的多分辨率适配方案,是将编辑器编辑界面的设计尺寸适配到具体的屏幕分辨率,对控件的坐标以及尺寸进行调整以达到适配的效果,后续CocoStudio将提供布局系统配合Cocos2d-x适配方案来解决分辨率适配问题,我们先来介绍一下现有的分辨率适配方案以及使用方法。
首先来看一下UI编辑器导出的json文件中设计尺寸的信息:
254
json文件中标注了编辑器在编辑时的设计尺寸,GUI框架在解析json文件时,会根据设计尺寸和当前设备的分辨率尺寸对控件的位置和大小进行调整,实现适配。
ok,下面来看一下如何进行多分辨率的适配。
255
从json文件创建ui,CocoStudio提供了2个接口,createWidgetFromJsonFile和createWidgetFromJsonFileWithAdapt。
通过createWidgetFromJsonFileWithAdapt接口创建出的ui界面是可以适配到设备分辨率的。该接口有3个参数,第一个fileName是json文件路径,scaleAdapt是指是否对控件的尺寸进行缩放适配,equalProportions是指是否需要对控件尺寸缩放进行等比处理。
以刚才的json文件为例,我们看在正常分辨率,也就是设计分辨率的设备下,ui界面显示的效果如下:256
当设备分辨率发生变化时,比如切换到1024768时,呈现的效果如下:257
设计尺寸为480320的ui界面这样就适配到了不同的分辨率下。
当然,如果你是手动通过代码创建的ui,同样也可以做到适配效果,如下:258如上图,可以通过CCUIHELPER的接口对手动创建的ui界面进行分辨率适配。
刚才演示的是CocoStudio目前提供的分辨率适配方案,可能还不够完善,下一步CocoStudio将提供布局系统,对分辨率的适配进行完善的支持。CocoStudio将提供线性布局,相对布局,平铺布局,边缘布局,以及绝对布局等布局方案,在创建ui时,只需要选择好相应的布局参数,就可以轻松的适配到各个不同的分辨率下。
259
上图显示的是UIContainerWidget类中即将实现的接口,大家可以通过设置不同的布局参数来对ui界面进行布局排布。