【CocoStudio游戏开发之一】制作多分辨率UI布局

【CocoStudio游戏开发之一】制作多分辨率UI布局

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

今天我们来看下如何在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.控件布局中还会有一个停靠,记得设置成根结点

)

七 居中的三个糖葫芦 居中的元素在游戏里面也很常见,我们拖动一个层容器添加到根节点,修改其属性. 子控件布局为线性纵向,尺寸设置为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;
usingnamespaceui;
usingnamespacecocostudio;
我们修改下HelloWorld::init函数,你可以清除下原有的无用的代码,并添加读取导出的文件. Layout*layout =dynamic_cast<Layout*>(GUIReader::getInstance()->widgetFromJsonFile("Sample.ExportJson"));
addChild(layout);
我们需要让游戏运行在不同的分辨率大小下,来看下我们的最终效果. 在iOS下,可以用不同的模拟器来查看效果,比较方便. 我们来看下Win32平台下如何查看效果. 我们打开main.cpp修改_tWinMain函数 auto director = Director ::getInstance();
autoglview = director->getOpenGLView();
if(!glview) {
glview =GLView::create("My Game");
glview->setFrameSize(480,320);
//glview->setFrameSize(960,640);
director->setOpenGLView(glview);
}
// create the application instance
AppDelegateapp;
returnApplication::getInstance()->run();
我们通过修改FrameSize就能看到不同分辨率下的显示效果. 我们再来贴一张960*640的效果.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


    本文实践自 RayWenderlich、Ali Hafizji 的文章《How To Create Dynamic Textures with CCRenderTexture in Cocos2D 2.X》,文中使用Cocos2D,我在这里使用Cocos2D-x 2.1.4进行学习和移植。在这篇文章,将会学习到如何创建实时纹理、如何用Gimp创建无缝拼接纹
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@163.com微信公众号:HopToad 欢迎转载,转载标注出处:http://blog.csdn.netotbaron/article/details/424343991.  软件准备 下载地址:http://cn.cocos2d-x.org/download 2.  简介2.1         引用C
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从Cocos2D-x官网上下载,进入网页http://www.cocos2d-x.org/download,点击Cocos2d-x以下的Download  v3.0,保存到自定义的文件夹2:从python官网上下载。进入网页https://www.python.org/downloads/,我当前下载的是3.4.0(当前最新
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发引擎,易学易用,支持多种智能移动平台。官网地址:http://cocos2d-x.org/当前版本:2.0    有很多的学习资料,在这里我只做为自己的笔记记录下来,错误之处还请指出。在VisualStudio2008平台的编译:1.下载当前稳
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《最强大脑》娱乐节目。将2048改造成一款挑战玩家对数字记忆的小游戏。邮箱:appdevzw@163.com微信公众号:HopToadAPK下载地址:http://download.csdn.net/detailotbaron/8446223源码下载地址:http://download.csdn.net/
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试以QtCreatorIDE来进行CMake构建。Cocos2d-x3.X地址:https://github.com/cocos2d/cocos2d-x1.打开QtCreator,菜单栏→"打开文件或项目...",打开cocos2d-x目录下的CMakeLists.txt文件;2.弹出CMake向导,如下图所示:设置
 下载地址:链接:https://pan.baidu.com/s/1IkQsMU6NoERAAQLcCUMcXQ提取码:p1pb下载完成后,解压进入build目录使用vs2013打开工程设置平台工具集,打开设置界面设置: 点击开始编译等待编译结束编译成功在build文件下会出现一个新文件夹Debug.win32,里面就是编译
分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!http://www.captainbed.net前言上次用象棋演示了cocos2dx的基本用法,但是对cocos2dx并没有作深入的讨论,这次以超级马里奥的源代码为线索,我们一起来学习超级马里奥的实
1. 圆形音量button事实上作者的本意应该是叫做“电位计button”。可是我觉得它和我们的圆形音量button非常像,所以就这么叫它吧~先看效果:好了,不多解释,本篇到此为止。(旁白: 噗。就这样结束了?)啊才怪~我们来看看代码:[cpp] viewplaincopyprint?CCContro
原文链接:http://www.cnblogs.com/physwf/archive/2013/04/26/3043912.html为了进一步深入学习贯彻Cocos2d,我们将自己写一个场景类,但我们不会走的太远,凡是都要循序渐进,哪怕只前进一点点,那也至少是前进了,总比贪多嚼不烂一头雾水的好。在上一节中我们建
2019独角兽企业重金招聘Python工程师标准>>>cocos2d2.0之后加入了一种九宫格的实现,主要作用是用来拉伸图片,这样的好处在于保留图片四个角不变形的同时,对图片中间部分进行拉伸,来满足一些控件的自适应(PS: 比如包括按钮,对话框,最直观的形象就是ios里的短信气泡了),这就要求图
原文链接:http://www.cnblogs.com/linji/p/3599478.html1.环境和工具准备Win7VS2010/2012,至于2008v2版本之后似乎就不支持了。 2.安装pythonv.2.0版本之前是用vs模板创建工程的,到vs2.2之后就改用python创建了。到python官网下载版本2.7.5的,然后
环境:ubuntu14.04adt-bundle-linux-x86_64android-ndk-r9d-linux-x86_64cocos2d-x-3.0正式版apache-ant1.9.3python2.7(ubuntu自带)加入环境变量exportANDROID_SDK_ROOT=/home/yangming/adt-bundle-linux/sdkexportPATH=${PATH}:/$ANDROID_SDK_ROOTools/export
1开发背景游戏程序设计涉及了学科中的各个方面,鉴于目的在于学习与进步,本游戏《FlappyBird》采用了两个不同的开发方式来开发本款游戏,一类直接采用win32底层API来实现,另一类采用当前火热的cocos2d-x游戏引擎来开发本游戏。2需求分析2.1数据分析本项目要开发的是一款游
原文链接:http://www.cnblogs.com/linji/p/3599912.html//纯色色块控件(锚点默认左下角)CCLayerColor*ccc=CCLayerColor::create(ccc4(255,0,0,128),200,100);//渐变色块控件CCLayerGradient*ccc=CCLayerGradient::create(ccc4(255,0,0,
原文链接:http://www.cnblogs.com/linji/p/3599488.html//载入一张图片CCSprite*leftDoor=CCSprite::create("loading/door.png");leftDoor->setAnchorPoint(ccp(1,0.5));//设置锚点为右边中心点leftDoor->setPosition(ccp(240,160));/
为了答谢广大学员对智捷课堂以及关老师的支持,现购买51CTO学院关老师的Cocos2d-x课程之一可以送智捷课堂编写图书一本(专题可以送3本)。一、Cocos2d-x课程列表:1、Cocos2d-x入门与提高视频教程__Part22、Cocos2d-x数据持久化与网络通信__Part33、Cocos2d-x架构设计与性能优化内存优
Spawn让多个action同时执行。Spawn有多种不同的create方法,最终都调用了createWithTwoActions(FiniteTimeAction*action1,FiniteTimeAction*action2)方法。createWithTwoActions调用initWithTwoActions方法:对两个action变量初始化:_one=action1;_two=action2;如果两个a
需要环境:php,luajit.昨天在cygwin上安装php和luajit环境,这真特么是一个坑。建议不要用虚拟环境安装打包环境,否则可能会出现各种莫名问题。折腾了一下午,最终将环境转向linux。其中,luajit的安装脚本已经在quick-cocos2d-x-develop/bin/中,直接luajit_install.sh即可。我的lin
v3.0相对v2.2来说,最引人注意的。应该是对触摸层级的优化。和lambda回调函数的引入(嗯嗯,不枉我改了那么多类名。话说,每次cocos2dx大更新。总要改掉一堆类名函数名)。这些特性应该有不少人研究了,所以今天说点跟图片有关的东西。v3.0在载入图片方面也有了非常大改变,仅仅只是