【CocoStudio游戏开发之一】制作多分辨率UI布局
如何快速地制作UI,是开发游戏时不得不面临的问题. Cocos2d-x 经历了1.0时代的固定位置,2.0时代的相对位置,在3.0时代引入了全新的GUI机制. 新的GUI机制,类似于Android的GUI系统,功能强大但如果手动编码来实现就很繁琐. CocoStudio对Cocos2d-x的新的GUI系统进行了全面的支持,可以让大家在快速开发UI的同时也享受到Cocos2d-x强大的新功能.@H_403_12@
今天我们来看下如何在CocoStudio中如何快速制作多分辨率的UI布局. (转载这个文章的目的是为了支持多分辨率下的ui自适应功能，主要是控件图片的拉伸)
一 下载和安装 Cocos2d-x 为v2.2版本也添加了新的GUI系统,尽管我们推荐大家使用更新的3.0来制作游戏,如果你因为各种原因无法升级到v3.0,依然可以采用v2.2来享受新的GUI系统和CocoStudio带来的便捷. 我们采用的是Cocos2d-x 3.0RC0和CocoStudio1.3. 大家可以在 http://cocos2d-x.org/download 找到下载链接,下载安装过程,这里不再赘述. 二 子控件布局 在CocoStudio中有四种布局方式: 1. 绝对布局 绝对布局下,子控件的位置由其坐标决定.优点在于布局灵活性大,但对于移动开发来说,通常要适应多种不同的分辨率,绝对布局在做全屏多分辨率的情况下就不太适用. (个人觉得在手机开发中不太适用)
2. 相对布局 相对布局,子控件的位置由其相对于父控件的纵横两个方向的位置决定. 其中横方向上分居左,居中,居右三个位置,纵方向上分为居上,居下三个位置. 这样也就是说子控件的位置由其相对于父节点的9个位置(左上,左中,左下,上中,中心,下中,右上,右中,右下)决定. 相对布局还允许子控件相对于以上9个位置做偏移.
由于相对布局的相对性,所以对父节点的大小不敏感. 在多分辨率的情况下,优势很大.
(这个是重点)
3. 线性横向布局 线性布局,可以用糖葫芦做比喻,子控件在父控件上依次排列. 分横向和竖向两种. (这个在多分辨率中也有很大的优势，建议可以和相对布局一起混合使用)4. 线性横向布局 同上,不介绍了. 我们可以在CocoStudio的UI编辑器中,查看一个层容器并的属性. 可以看到如下图所示,子控件布局共有四个选项,分别是绝对布局,相对布局,线性横向,线性纵向布局.
三 目标 我们今天要制作一个游戏的界面如上图所示,并且要自动适应多分辨率的界面. 我们在其中用到了相对布局,线性的横向和纵向布局. 我们使用的cocos2d-x的版本是3.0RC0,CocoStudio的版本是1.3.0.0. 不同的版本,功能上会有差异,大家学习时,最好采用对应的版本. CocoStuido sample----SampleLayout源代码地址 官方地址: https://github.com/chukong/CocoStudioSamplesBasedOnCocos2d-x3.0 目前临时地址,希望以后能合并进官方库 https://github.com/young40/CocoStudioSamplesBasedOnCocos2d-x3.0 大家可以预先下载这个源代码,等下要用到里面的图片资源哦 四 创建项目并导入资源 大家可以在下载到源代码SampleUILayout\SampleLayout_Editor\Resources目录下找到需要的资源. 请大家自行创建UI编辑器项目并导入资源. 五 根节点属性设置 因为我们资源是940*640最佳适用的,所以我们在UI编辑器的普通模式下,切换分辨率到960*640. 这时我们对象结构面板只有一个根节点,我们先来看下如何设置根节点的属性. 我们修改下根节点的属性,子控件布局设置为相对布局,名字修改为root,并且勾选"自适应分辨率". 勾选自适应分辨率后,整个根节点大小将随着手机屏幕大小(电脑上就是窗口大小了)变化而变化. (1.相对布局是为了固定ui显示的位置
2.自适应分辨率是固定当前ui的大小
==》设置完这两个根结点就已经完成自我拉伸的自适应)
六 top-left的属性设置 我们接下来为根节点添加一个图片,这次我们修改了较多的属性,我们来逐一解释下. 名称属性修改为top-left便于识别,文件属性设置为top-left.png这张图片. 我们希望图片的大小随着分辨率的变化而变化,把尺寸的模式从Auto修改为了Custom,并且勾选了百分比选框. 图片的原始尺寸是144*66,所以我们重设下其尺寸为144*66. 这样在960*640的分辨率下,就显示了原始大小. 我们勾选了百分比选框,在其他分辨率下,比如480*320下,图片显示的尺寸就变成了72*33. 这样显示效果就保证了一致性. 需要说明的是,如果非960:640的比例分辨率,图片难免就会出现拉伸. 我们在适配多分辨率的屏幕的时候,需要考虑多种因素,屏幕大小,像素密度,高宽比,安装包大小甚至项目组人力因素和上线日期,最终的方案大部分都是一个折衷的方案. 然后我们在控件布局中选择其横向布局为左边,纵向布局为上边. 大家可以看到在渲染区我们的图片已经紧贴了根节点的左上角了. 我们再渲染区中拖动该控件到一个合适的位置,可以看到空间布局区域的边缘属性左和上有变化(图中分别为23,21). 这个就是指无论屏幕分辨率变化,这个控件都会离屏幕的左上角23,21像素的距离. 同样地,大家可以添加并设置左下的图片.(子控件设置
1.模式使用custom==》使用自定义，然后设置显示大小使用“百分比”
==》设置了尺寸和模式中的百分比显示目的是不同分辨率下图片会被拉伸
2.设置控件布局中的，控件布局百分比
==》目的是在不同的分辨率下会按百分比率进行位置的放置
3.控件布局中还会有一个停靠，记得设置成根结点
)
#include"HelloWorldScene.h"
@H_403_12@
#include"CocosGUI.h"
@H_403_12@
#include"CocoStudio.h"
@H_403_12@
@H_403_12@
@H_403_12@
USING_NS_CC;
@H_403_12@
usingnamespaceui;
@H_403_12@
usingnamespacecocostudio;
@H_403_12@
我们修改下HelloWorld::init函数,你可以清除下原有的无用的代码,并添加读取导出的文件.
Layout*layout =dynamic_cast<Layout*>(GUIReader::getInstance()->widgetFromJsonFile("Sample.ExportJson"));
@H_403_12@
addChild(layout);
@H_403_12@
我们需要让游戏运行在不同的分辨率大小下,来看下我们的最终效果.
在iOS下,可以用不同的模拟器来查看效果,比较方便. 我们来看下Win32平台下如何查看效果.
我们打开main.cpp修改_tWinMain函数
auto
director =
Director
::getInstance();
autoglview = director->getOpenGLView();
@H_403_12@
if(!glview) {
@H_403_12@
glview =GLView::create("My Game");
@H_403_12@
glview->setFrameSize(480,320);
@H_403_12@
