【步兵 cocos2d-x】教你快速拼界面

【步兵 cocos2d-x】教你快速拼界面 by EOS.

可能实际开发中，一些繁琐的工作浪费了我们很多时间，其中之一恐怕就是对坐标。

下面我分享一下我的一些经验。

一、9点对齐

实际代码中，可能出现大量的这样的代码。

xxx->addChild(node)
auto size = xxx->getContentSize();
node->setAnchorPoint(Vec2(1, 0));
node->setPosition(Vec2(size.width, 0));

每次都这么写，无疑会浪费大量的时间，所以我们应该把它封装一下，

来节省我们的时间，也可以使代码更加清晰。

void es::addNodeTo(Node* node, Node* parent, int type)
{
parent->addChild(node);
auto anp = Vec2(0.5, 0.5);
auto size = parent->getContentSize();
switch(type){
//通过枚举 改变 anp 的值，
//枚举用起来更方便些，如at_BL就是左下这样
}
node->setAnchorPoint(anp);
node->setPosition(Vec2(size.width*anp.x, size.height*anp.y));
}

可能也会遇到要求左下角，在parent的中心啊，这种需求。

在单独封装手动输入锚点的，这样就做到快捷而不是全面~

这里我就不贴出来了。

二、坐标调整

开发中，可能经常会遇到这种情况。

node->setPositionX(node->getPositionX()+xxx);

乍一看可能觉得，没什么问题。但是实际操作起来呗，

可能要噼里啪啦的敲半天，所以我封装了来提高效率。

void es::cpx(Node* node, float px)
{
node->setPositionX(node->getPositionX()+px);
}
//还有 cpy 和 cpxy 这里就不一一写出来了。
//常用函数要经可能的短~ 省力嘛~

这么一搞就发现，敲的也少了，可读性也强了，看着也舒服了，

代码都优雅了，整个人都高雅了~

三、深度搜索

如果界面是美术拼的，那你是不是经常被美术坑呢，

可能美术不经意间的一个操作，给就变了层级。

比如之前是 root->aaa,现在变成了root->bbb->aaa。

如果直接getChildByName的话，层级一变，那么就找不到了，

导致你的程序要崩溃了，如果用下面的方法你就不必再烦恼了。

Node* es::deepFind(Node* root, const std::string& name)
{
const auto& Children = root->getChildren();
for (auto& subChild : Children)
{
if (subChild->getName() == name)
{
return subChild;
}
else
{
auto ret = deepFind(subChild, name);
if (ret != nullptr)
{
return ret;
}
}
}
return nullptr;
}

四、宽高适配

可能经常弄一些顶部条、底部栏啊、侧边窗啊之类的，资源和屏幕尺寸不符，那么就要

做屏幕的适配，这也算比较常用的功能了，所以我也封装了一下，再配合9点对齐，

ui布局，搞的飞起，有木有~

弹出窗口一般都是居中适配的，所以常用的只有屏幕适配，

如果你有窗口适配，这种需求的话自己完善一下就可以了。

static float _fitW = 0;
static float _fitH = 0;
void es::fitWidth(Node* node)
{
if (_fitW == 0)
{
_fitW = ScreenSize.width/ResSize.width;
}
node->setScale(_fitW*node->getScale());
}

void es::fitHeight(Node* node)
{
if (_fitH == 0)
{
_fitH = ScreenSize.height/ResSize.height;
}
node->setScale(_fitH*node->getScale());
}

五、Panel使用技巧

Panel也就是CocosStudio里面的基础容器，我现在已经爱上这个东西了，

有了这个东西呢，我们就用可视化的方式拖动，然后就不用调代码来改变位置了。

这里我说一下，我的使用技巧，不一定是最好的，可是希望有大家可以借鉴的地方~

一般我回吧panel设置成绿色，半透，然后在上面放一个text设置红色，

说明一下这个panel的作用，比如是个列表，显示人物属性之类，

然后在获取panel的时候去掉上面属性和文本信息，让它变成一个透明框。

这样就可以在不影响美术而且减少美术对程序的干扰的情况下，更开心的搞了~

然后最终要的是什么呢？是要告诉美术，看到没，红配绿，你改界面的时候，

不要碰，懂没？改界面的时候隐藏掉。敢动，放学就别走了！

（ps: 美术：好配色，你喜欢就好~ ）

然后比如，之前是人物在上属性在下，要改成，人物在左属性在右。

我们就可以直接愉快的将红配绿框框拖过去就ok了。

如果要改成 人物在中间属性在两边，这时候你就要买一些兵器了。

咳咳，开玩笑，这点变动怎么可以去打策划呢，是不是，我们可以轻松应对的！

我们可以把框框拉大一点罩住人物，然后左对齐，右对齐，然后在拖拖位置。

over~ 哈哈，机智如我啊！！！（干货篇强行吹水）

题外话

当然我这里还有一些不常用的封装，比如让一个node设置方向指向某一点，

又或者 把一排node放到一个node上中心是几个node的中点啊之类的。

大家想一想其实实现起来不难，主要还是要多想多试多创新。

比如一个套路，你用的很熟了觉得很快，那么又一个更方便的套路出现时，

你会不会去接受和去适应它，说不定你熟悉了新的套路，会比你以前快几倍呢。

这里我不是说的想法都是好的，我主要想说的就是。。。全是套路啊~

反正多多封装，益处多多，如果你遇到一个功能已经重复出现三次了，

那么就赶紧封装一下吧，因为第四次马上就要来了。（我称之为“三封原则”=、=）

好了就到这里。

See Again~

之前

真爱无价，欢迎打赏~