Cocos Studio制作多分辨率UI布局

Cocos Studio制作多分辨率UI布局

如何快速地制作UI, 是开发游戏时不得不面临的问题. cocos2d-x 经历了1.0时代的固定位置, 2.0时代的相对位置, 在3.0时代引入了全新的GUI机制. 新的GUI机制, 类似于Android的GUI系统, 功能强大但如果手动编码来实现就很繁琐. cocostudio对cocos2d-x的新的GUI系统进行了全面的支持, 可以让大家在快速开发UI的同时也享受到cocos2d-x强大的新功能.  

今天我们来看下如何在cocostudio中如何快速制作多分辨率的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, 并且勾选"自适应分辨率"。

 

勾选自适应分辨率后, 整个根节点大小将随着手机屏幕大小(电脑上就是窗口大小了)变化而变化。

 

六、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像素的距离.  

 

同样地, 大家可以添加并设置左下的图片.  

 

七、居中的三个糖葫芦  

居中的元素在游戏里面也很常见, 我们拖动一个层容器添加到根节点,修改其属性。

 

子控件布局为线性纵向, 尺寸设置为200*200并勾选百分比. 名字修改为center.控件布局设置为纵横布局都为居中。

 

然后我们给center添加三个子节点, 分别是图片center0.png, center1.png, center2.png. 并修改下其尺寸及名字属性, 不再赘述。

 

我们为center0, center1, center2的横向布局设置为居中. 这样三个子节点就居中对齐了。  

 

这时我们将center0向下移动一些(比如20个像素). 可以看到center1, center2也跟着向下移动了。

 

这里我们就能看出线性布局的特点. 父控件设置为线性纵向, 那么子节点会在纵向上依次排列, 并且下第二个子节点的纵向上偏移是依照第一个子节点来的。

 

好了大家接下来可以按照源代码中的例子将右下的几个小按钮也添加进来。

 

如果有什么问题, 大家可以到CocoaChina的CocoStudio的专区来交流。

 

八、导出资源  

我们在编辑器里面用快捷键Ctrl+E打开导出对话框, 选择导出的路径,  按默认配置导出. 我们稍后会用到这些文件。

 

九、在cocos2d-x工程中添加导出后的资源  

想必各位看官都已经熟练掌握了cocos2d-x工程的创建, 我这里就不再��嗦了。

 

创建完工程之后, 需要将我们上面用CocoStudio导出的几个文件拷贝到cocos2d-x工程的Resources文件夹下。

 

需要指出的是, 2d-x 3.0RC0的win32工程简单设置下才能支持CocoStudio, 可以参见这篇文章：http://www.cocoachina.com/bbs/read.php?tid=194668  

 

 

十、代码实现  

 我们在默认的HelloWorld的稍作修改就能看到多分辨率的UI布局在游戏中的效果。

 

打开HelloWorld.cpp添加头文件  

 

#include "HelloWorldScene.h"

#include "CocosGUI.h"

#include "CocoStudio.h"

 

USING_NS_CC;

using namespace ui;

using namespace cocostudio;

 

 

我们修改下HelloWorld::init函数, 你可以清除下原有的无用的代码, 并添加读取导出的文件。

 Layout *layout = dynamic_cast<Layout *>(GUIReader ::getInstance()->widgetFromJsonFile("Sample.ExportJson"));

            addChild(layout);

 

 我们需要让游戏运行在不同的分辨率大小下, 来看下我们的最终效果。

 

在iOS下, 可以用不同的模拟器来查看效果, 比较方便. 我们来看下Win32平台下如何查看效果。 

我们打开main.cpp修改_tWinMain函数  

    auto director = Director::getInstance();

 auto glview = director->getOpenGLView();

 if (!glview) {

                        glview = GLView::create( "My Game");

 

                        glview->setFrameSize(480, 320);

 //glview->setFrameSize(960, 640);

 

                        director->setOpenGLView(glview);

            }

 

 // create the application instance

 AppDelegate app;

 return Application::getInstance()->run();

 

我们通过修改FrameSize就能看到不同分辨率下的显示效果。

 

我们再来贴一张960*640的效果.

 

原帖地址：http://www.cocoachina.com/bbs/read.php?tid=195102