http://www.cocoachina.com/bbs/read.php?tid-288123.html

Cocos v2.1开始新增了一种新的多分辨率适配方案:流式布局。 
这种布局相比CocosStudio v1.x时代简单纯粹得多,没那么多复杂的概念也没那么难理解,上手更简单,这篇教程就是来教大家怎么使用这个功能的。 
实际上之前也写过一篇布局教程,不过反响感觉不太好,不少人看完之后还有不少疑问,尤其是跟2d-x协作相关的疑问。因此,这次提供一个更给力的版本,从Cocos编辑配置到与Cocos2d-x协作的一个完整教程。 
____________________________________________________________________________ 
目录: 
1. Cocos编辑器配置部分。 
2. Cocos2d-x(CocosFramework)中的相关概念及代码设置。 
____________________________________________________________________________ 
 
一、Cocos编辑器配置部分。

这部分算是从手册中抄来的(其实也是我写的>。<)。

自动布局系统主要涉及固定与拉伸属性: 
 
如图,总共可以修改控件的上下左右四个图钉和中间的两个拉伸条六个属性。 
效果 
1.当打开其中的任意一个图钉时,当前节点与父节点的对应边的距离即被固定。当父节点的大小修改时,当前节点与父节点对应边的距离总是不变。 
  
2.当打开其中的任意两个相对的图钉时,当前节点与父节点对应的两边的距离成固定比例。即当修改父节点的大小时,当前节点到父节点对应两条边的距离之比总是不变的。 
 
3.当开启中间任意一条拉伸条,如横向拉伸条,节点的宽度与父节点的宽度之比固定不变。 
 
其他 
1. 不开启上述任意属性时,对象默认相对左下角位置不变。 
2. 当前仅控件对象(文本、FNT字体也没有)和容器两种类型有拉伸条属性。 
其实据我观察根据上述描述大部分人已经能够完全了解这个东西的配置方法了。所以这里我不再赘述。 
接下来我们拉一个这样的界面出来,并用固定图钉、拉伸条将其中的控件固定在相应的位置上: 
  
  
其中除了no set那个按钮其他所有控件都有布局相关的设置。附件中有这个界面的工程和第二部分的代码(以下简称demo)。具体可以自己打开去看。看的话最好调整调整左上角的场景大小,看看效果。 
 
二、Cocos2d-x(Cocos Framework)中的相关概念及代码设置。 
 
设计分辨率和屏幕分辨率: 
首先我们需要了解两个概念:在Cocos2d-x中有两种分辨率:设备分辨率、屏幕分辨率。设备分辨率即当前游戏所运行平台的实际分辨率;设计分辨率就是我们设计的游戏的分辨率。 
设计分辨率是可设置的,是我们的游戏程序能够“感知到”的分辨率大小,我们的界面超过这个区域的部分都不会显示。 
设计分辨率一般在启动时进行设置,demo里边的相关设置在AppDelegate:: applicationDidFinishLaunching中进行,代码如下: 
director->getOpenGLView()->setDesignResolutionSize(960,640,ResolutionPolicy::FIXED_HEIGHT); 
(这句代码上边还有一句createWithRect这个是在桌面系统上,创建游戏模拟器用的。可以修改里边的Rect的后边两个值来修改设备分辨率,但这个值在移动设备上是无效的。) 
这句代码什么意思呢? 
这里把设计分辨率设置为960,640,并把游戏界面调整方案设置为固定宽度。但这么设置之后,我们后边再获取设计分辨率时得到的大小却不一定是960,640。这又是为什么呢? 
看看源码(侯捷大爷那句“源码面前,了无秘密~”在耳边缭绕。): 
转到setDesignResolutionSize的定义看看。里边做了一些判断和赋值,最终调用了updateDesignResolutionSize,继续转到updateDesignResolutionSize里边,这个函数的部分代码如下:

//1.计算游戏界面在缩放至充满屏幕的情况下X、Y轴的缩放率:
_scaleX= (float)_screenSize.width/ _designResolutionSize.width;
_scaleY= (float)_screenSize.height/ _designResolutionSize.height;
 
//2.根据设配策略,调整缩放率和设计分辨率:
if(_resolutionPolicy== ResolutionPolicy::NO_BORDER)
{//将X、Y轴缩放值设置为其中的最大者
_scaleX = _scaleY = MAX(_scaleX,_scaleY);
}
else if(_resolutionPolicy== ResolutionPolicy::SHOW_ALL)
{//将X、Y轴缩放值设置为其中的最小者
_scaleX = _scaleY = MIN(_scaleX,_scaleY);
}
else if( _resolutionPolicy == ResolutionPolicy::FIXED_HEIGHT) {
_scaleX = _scaleY;//将X、Y轴缩放值固定为Y轴缩放值,调整设计分辨率的宽度,使设计分辨率的宽度在缩放后依然能够充满屏幕。
_designResolutionSize.width= ceilf(_screenSize.width/_scaleX);
}
else if( _resolutionPolicy == ResolutionPolicy::FIXED_WIDTH) {
_scaleY= _scaleX;//将X、Y轴缩放值固定为X轴缩放值,调整设计分辨率的高度,使设计分辨率的高度在缩放后依然能够充满屏幕。
_designResolutionSize.height= ceilf(_screenSize.height/_scaleY);
}
//其他缩放策略:EXACT_FIT不作调整
 
这段代码主要做了两件事:
1.根据设备分辨率和设计分辨率计算游戏界面的缩放率;
2.调整设计分辨率。
根据以上源码我们应该很容易就能够理解几种缩放策略的意义:
·NO_BORDER就是在保持设计分辨率大小不变的情况下,将游戏界面按比例缩放至充满屏幕。游戏的上下或者左右两边可能会被裁剪。
·SHOW_ALL(Cocos2d-x默认方案)就是在保持设计分辨率大小不变的情况下,将游戏界面按比例缩放至设计分辨率的其中一边顶住屏幕。游戏上下或者左右两边可能会有黑边。
·FIXED_HEIGHT就是固定设计分辨率的高度,调整设计分辨率的宽度,使设计分辨率的长宽比与设备分辨率的长宽比相同,然后缩放游戏界面至充满屏幕。
·FIXED_WIDTH同上,不同的是保持宽度不变。
·EXACT_FIT是最粗暴的方式,直接将游戏界面缩放到充满整个屏幕,X轴Y轴缩放比率不一定一致。
那么。。。我们应该选择哪个方案呢?必然的我们应该选择FIXED_HEIGHT或者FIXED_WIDTH。因为只有这两个方案下,界面是会自动根据设备分辨率调整设计分辨率的大小并且充满屏幕。
Demo怎么做的?:
Demo里我设置的是FIXED_HEIGHT。大家也可以去下载这个Demo调整这个值,还有设计分辨率的大小,看看现象。
OK,设置完之后Demo的游戏界面的分辨率就可以自动根据手机的分辨率调整啦。
接下来加载界面。
Demo中加载界面在HelloWorld::init中进行:
auto rootNode= CSLoader::createNode("MainScene.csb");
auto size= Director::getInstance()->getVisibleSize();
rootNode->setContentSize(size);
ui::Helper::doLayout(rootNode);
addChild(rootNode);
这里除了用createNode把界面加载出来,并添加到HelloWorld之外,还做了两件事情:
设置加载出来的界面的ContentSize,调用对rootNode调用了ui::Helper::doLayout对加载出来的界面进行处理。
为什么要这么设计呢,做成自动的多好啊?
来个段子:
我们的研发同学也考虑了下在createNode里边帮大家设置大小,但他犹豫了下:这样加载出来的界面跟开发者在编辑器里边设置的会不一样啊,这么一个不一致的东西放出去等下是不是又会被骂呢,然后他就吓的出去抽了根烟回来继续加班了。
OK,段子讲完了。虽然是段子但是还是说了其中一个理由:跟编辑器不一致;另外一个理由是:自动调整界面被设计为是被动的,如果是主动进行的话,可能会造成大量的性能损失——如果每次设置大小都要重新遍历计算所有的子节点的位置,那得浪费多少CPU时间啊。
 
效果:
我一直觉得有部分开发者懒癌很严重,不打算下载Demo去看效果。那么我抽几个栗子给这部分晚期患者看看效果吧。我懒癌也不轻,所以以下为偷懒式描述,不理解自己看代码。
1. 设备分辨率X/Y相对设计分辨率X/Y较大,设配策略为固定高度
         
2. 设备分辨率X/Y相对设计分辨率X/Y较大,设配策略为固定宽度
         
3. 设备分辨率X/Y相对设计分辨率X/Y较小,设配策略为固定高度
         
4. 设备分辨率X/Y相对设计分辨率X/Y较小,设配策略为固定高度
         

demo:(我这么辛苦,还给你们讲段子。不收你们钱,帮我顶顶贴总可以吧?)

本部分设定了隐藏,您已回复过了,以下是隐藏的内容

http://pan.baidu.com/s/1bnFADHl

PS:枚举类型 ResolutionPolicy 是框架提供给我们的方便的默认方案。其实我们在设置设计分辨率之前可以获取设备分辨率,然后自己根据设备分辨率调整设计分辨率。

Cocos与Cocos2d-x协作教程——多分辨率适配的更多相关文章

  1. 【转】Unity3d + NGUI 的多分辨率适配

    原文地址:http://www.cnblogs.com/cqgreen/p/3348154.html   一.当下移动设备的主流分辨率(数据来自“腾讯分析移动设备屏幕分辨率分析报告”) 1.1 iOS ...

  2. Unity3d + NGUI 的多分辨率适配

    一.当下移动设备的主流分辨率(数据来自“腾讯分析移动设备屏幕分辨率分析报告”) 1.1 iOS设备的分辨率主要有:   宽 高 宽高比 960 640 1.5 1136 640 1.775 1024 ...

  3. Android多分辨率适配

    前一阶段开发android项目,由于客户要求进行多分辨率适配,能够支持国内主流的分辨率手机.因此经过了几次开发走了很多弯路,目前刚刚领略了android多分辨率适配的一些方法. 先介绍一下所走的弯路, ...

  4. Android多分辨率适配经验总结

      Android多分辨率适配是一件很有意义但是比较麻烦的事情,网上有很多关于多分辨率适配的文章,多数文章讲解的都是整个APP的图片比较规则,可以将图片做成9图来完成多分辨率适配,但是对于一些游戏类应 ...

  5. Unity3d + NGUI 的多分辨率适配(黑边)

    原地址:http://www.2cto.com/kf/201310/250921.html 一.当下移动设备的主流分辨率(数据来自“腾讯分析移动设备屏幕分辨率分析报告”) 1.1 iOS设备的分辨率主 ...

  6. 【转】android多分辨率适配

    前一阶段开发android项目,由于客户要求进行多分辨率适配,能够支持国内主流的分辨率手机.因此经过了几次开发走了很多弯路,目前刚刚领略了android多分辨率适配的一些方法. 先介绍一下所走的弯路, ...

  7. Cocos2d-x 多分辨率适配完全解析

    从Cocos2d-x 2.0.4开始,Cocos2d-x提出了自己的多分辨率支持方案,废弃了之前的retina相关设置接口,提出了design resolution概念. 有以下相关接口: CCEGL ...

  8. 超详细!Github团队协作教程(Gitkraken版)

    超详细!Github团队协作教程(Gitkraken版) 一.前期工作 1. 在 Github 上创建 organization step1. 登录Github网站,点击右上角头像,选择 " ...

  9. (16)Cocos2d-x 多分辨率适配完全解析

    Overview 从Cocos2d-x 2.0.4开始,Cocos2d-x提出了自己的多分辨率支持方案,废弃了之前的retina相关设置接口,提出了design resolution概念. 3.0中有 ...

随机推荐

  1. PHP文件读写操作之文件写入代码

    在PHP网站开发中,存储数据通常有两种方式,一种以文本文件方式存储,比如txt文件,一种是以数据库方式存储,比如Mysql,相对于数据库存储,文件存储并没有什么优势,但是文件读写操作在基本的PHP开发 ...

  2. [zhang] ViewController的生命周期分析和使用

    iOS的SDK中提供很多原生ViewController,大大提高了我们的开发效率,下面是我的一些经验. 一.结构 按结构可以对iOS的所有ViewController分成两类:1.主要用于展示内容的 ...

  3. Action<T1, T2>委托

    封装包含两个参数的方法委托,没有返回值. 语法 public delegate void Action<in T1, in T2>( T1 arg1, T2 arg2 ) 类型参数 in ...

  4. The listener supports no services解决一例

    The listener supports no services解决一例   Listener动态监听静态监听注册实例 今天做Advacned Replication实验的时候碰到一个问题,启动目标 ...

  5. ORCLE数据库导出导入

    从一个用户导出用户所有结构数据 再导入另一个用户里面 ORACLE导出用户下的数据库  exp 命令 用户名/密码服务名 文件地址  owner=(用户名)exp COM_HIOSC_OLD/COM_ ...

  6. XidianOJ 1120 Gold of Orz Pandas

    题目描述 Orz Panda is addicted to one RPG game. To make his character stronger, he have to fulfil tasks ...

  7. c 数据拼接

    char buf1[] = {0x31,0x32,0x33,0x00,0x51,0x52,0x53,0xaa,0xbb,0xcc,0x00}; int a=0xabcd6799; int b=0x88 ...

  8. HTML标签CSS默认值研究

    最近写css的时候,发现在div元素里面添加ul元素后发现,ul列表在div里面距离最上方总是有一段空行,当时很奇怪,以为是哪个css出了问题,就把css去掉了,发现问题依旧,然后就查了一下发现htm ...

  9. 循序渐进Python3(三) -- 3 -- 内置函数

    上一篇我们又介绍了26个Python内置函数.现回忆一下吧: 1.all 2.any 3.ascii 4.bin 5.bool 6.bytes 7.bytearray 8.callable 9.chr ...

  10. widows下jieba分词的安装

    在切词的时候使用到jieba分词器,安装如下: 切入到结巴包,执行 python setup.py install 安装后,可以直接在代码中引用: import jieba