How to create ui which can adapt screen resolution automatic using CocosStudio and Cocos2dx . by cnsoft Dec 23 2014.
用 Cocos2dx 做游戏UI多分辨率的制做流程要点讲述. 祝大家圣诞快乐！
更多更新移步. 未经允许请勿转载.请保留原始链接.
http://www.chenlong.me/cocos2dx/how-to-create-a-ui-can-adapt-screen-resolution-automatic-using-cocosstudio-and-cocos2dx/
准备工作：
CocoStudio 是 ChuKong 开发配合 Cocos2dx引擎而开发的辅助制作工具. 1.5 版本是我开发 Super Bomber Crush 制做时选用的UI制作工具. 目前已经是 2.0 了. 尽管版本已经更新，但1.5是个working的版本。有时间再更新到2.0吧.
下载地址: http://cdn.cocos2d-x.org/CocosStudio_v1.5.0.1.exe
引擎层面 cocos2dx 是2.x 3.0 都可以用。重点使用了 CocoStudio 扩展库.
— Begin quote from ____
题外话： 一直都想写一些分享的东西, 最早参与CCGamebox 最近做了 KBE-Cocos2dx , 我想作为已经验证过从制做到上线整个环节的人 终于可以来给大家分享一下我的心得体会了。
确认OK了再和大家分享,希望来的不是很晚。 如果能帮大家节省一些RD的时间, 多陪陪家人什么的，也算是件好事。
我自己做的时候也是遇到了一些坑的. 希望能节省后来者一些时间. 人生苦短啊。 一定要看最后的部分
— End quote
正式开始：
准备讲几个点： UI自适应的做法. 常见UI的实现 , 适配设备时的要点。 下面是一张做完的效果图. 希望能讲得明白一些。
cocos2dx 自适应分辨率UI的制做方法要点演示.
先讲讲UI自适应的做法.
关键字: 相对布局. 自适应分辨率. 绝对布局, 停靠目标.
步骤：
- 新建UI项目.默认会有一个root panel
选中 root panel 设置 自适应分辨率 ＝ true. checkbox 为选中状态. child 为相对布局。
添加 占位(定位) panel 设置为 居中 or 其它. 横－上中下 ＊ 竖 上中下 9种组合. child 这次可以为绝对布局了。
要点: 设置好对齐方式后, 要把无用的方向的数值清零. 举个例子, 是左上对齐,那么 右和下的值就没用了, 但Cocostudio 不会自己清零. 而不清零会导致实际运行时位置跑偏。 切记. 有个简单方法,你可以自己试着改一下这四个值上下左右,如果发现哪个改了UI位置也没变的话,就给它改成零就对了。
实际需要显示的UI组件添加到定位panel下面. 按实际需要的位置效果来摆放即可. 加个 Image 什么的
要点同上.
2. 做完以后来看一下Checklist : 重点检查一下几个地方.
检查是否有透明的Panel 激活了 交互 选项。不需要的应该关闭。
是否root panel 选中了自适应分辨率。
补充要点: 所有UI都可以 调整Alpha透明 ＝ 0 于是就看不到这个UI了 . 如果不需要处理Touch事件的UI就把 交互选项关闭。 不要选中即可。
偶之前遇到最多的就是 点击没反应, 结果一看, 有个透明的大Panel 把事件给拦截了. 所以切记切记.
//试着录一下视频.放在Youku了.
视频链接: http://player.youku.com/player.php/sid/XODU1MjU1Mzg4/v.swf
再来回顾一下,
做自适应多分辨率Ui的第一步是建9个格子来占位. 然后是把自己需要显示的Ui放到这些占位Panel里. 用绝对位置摆放就可以. 实际显示的UI也会是自适应的。 当然也不是死板的非要建9个 自己根据需要就是了。
利用第一层的相对布局, 让占位的Panel可以随着尺寸自动变化位置. 而不用写一行代码。
然后二层占位Panel下面再添加实际需要显示的UI控件, 一般使用绝对布局就可以了. 摆放的效果和最终运行的效果是一致的. 差别不大。一定要注意清零… 这个不清零，十有八九设备上会是偏的位置。
编辑完毕后, 使用 cocostudio 的导出功能 导出一个JSON文件. 后面会用到代码里. 我这个叫做 UIDemo2_1.json 文件名字是根据画布的名字来 的。
最后别忘了把这些占位的Panel 设置为背景透明 以及 不响应触碰事件.
//好了自己动手试试. 然后build一下. 看看效果何吧…
我来上一个模拟器的截图. 算了 有打广告嫌疑.
大家可以自己动手试试
可以任意设备切换都可以自适应。理解了占位Panel 下面就好办了.
代码我稍后建了个Github的项目. 大家可以下来看看. 对比一下, 就透彻了。
如果2014/12/26 之前有看到这个贴, 来参加Super Bomber Crush线上的活动咯, 绑定微博账号 参与抽奖. 5个小米移动电源等你拿.
活动地址: https://coding.net/u/cnsoft/p/superbomber/topic/12607
说说我遇到的坑:
-
director->getOpenGLView()->setDesignResolutionSize(480, 320, ResolutionPolicy::SHOW_ALL); 这行类似的话有没有. 有的话就去鸟. 不然你就会看到各种错位和扭曲…
-
iPhone6上有黑边? 十有八九是你少了那个LaunchImage 的图片. 没有 Defaul667h@2x.png 不会得到正确分辨率的。解决办法很简单啊：简单的令我吐血. 只需要add 一个符合尺寸的图片就行了。为什么会有这个问题呢,因为建的ios工程的时候还没有出iPhone6呢. 现在新版的cocos2dx 已经默认支持了.
最后奉上是3.3版本的cocos2dx 加载 cocostudio 导出的 ui 的 代码. 超简单的
//2014-12-23 将这段代码放到 Helloworld:init 函数里.
// on “init” you need to initialize your instance
bool HelloWorld::init()
{
…………
std::string jsonfile = “UIDemo2_1.json”;
auto m_layout = cocostudio::GUIReader::shareReader()->widgetFromJsonFile(jsonfile.c_str());
this->addChild(m_layout,100,100);
m_layout->setVisible(true);
Layout* layout = dynamic_cast<Layout*> ( this->getChildByTag(100) ) ;
Layout* _panel = dynamic_cast<Layout*> ( layout->getChildByName(“Panel_1″) );
//ensure the panel is loaded. Panel_1 is the name.
if (_panel)
CCLOG(” found model panel”);
}