适用版本：CocoStudio 1.4.0.1

我们知道，CocoStudio搭配Cocos2d-x开发是最省力的选择。但是，要想实现这一点，需要开发者对于示例工作Demo---TestCpp中几乎所有编码都要有细致的理解。

问题

在当前的CocoStudio版本中，要实现图像化显示数字的一种重要方法就是借助于UI编辑器提供的AtlasLabel控件。这个控件与示例工作Demo---TestCpp中的CCLabelAtlas控件基本是对应的。因此，理解了这里的CCLabelAtlas使用思路，则通过后台编码操纵CocoStudio的UI编辑器提供的AtlasLabel控件就非常容易了。

例如，我的UI编辑器提供的AtlasLabel控件设置如下图所示：

上述控件对应的图像文件为png格式（其中旋转的各个字符应该是等宽度的，以便下面使用各个参数获取之用）。内容为“0123456789”。其中几个重要参数含义如下：

标签首字符：要从图像文件中获取的第一个字符（其他的字符都以它为起点，因此，这个首字符的确定非常重要，其前面的字符将不会显示）

• 标签字符宽：每个图形字符的宽度

• 标签字符高：每个图形字符的高度

• 文本：以后使用控件时要显示的所有字符的集合（很可能是上述png文件字符内容集合中的一个子集）

技巧：

    在设置上面参数时，特别是调整“标签字符宽”时，要确保相应控件中要显示的所有图形字符都要显示出来（最好恰好），如上图心形上面的数字显示形式。这样一来，以后通过控件的后台代码给控件赋值时，才能保证数字标签内容正确显示。

也就是说，上面的参数化设置相当于使用如下后台代码初始化了上述控件（FROM FILE ‘UILabelAtlasTest.cpp’）：

        UILabelAtlas* labelAtlas = UILabelAtlas::create();
        labelAtlas->setProperty("1234567890", "cocosgui/labelatlas.png", 17, 22, "0");
        labelAtlas->setPosition(ccp((widgetSize.width) / 2, widgetSize.height / 2.0f));
        
        m_pUiLayer->addWidget(labelAtlas);

上述代码主要是初始化了控件，至于设置控件的实际文本数据则使用如下代码：

   //set string value for labelatlas.
    void setStringValue(const std::string& value);

对于我上面使用CocoStudio创建的UI控件，我使用了如下代码设置它的实际要显示的数字字符串值：

LabelAtlas* AtlasLabel_1 = static_cast<LabelAtlas*>(ul->getWidgetByName("AtlasLabel_1"));
AtlasLabel_1->setStringValue(CCString::createWithFormat("%d",500)->m_sString);

小结

正确理解UI编辑器中AtlasLabel控件的上述几个参数的含义至关重要；否则，可能引起后台代码的操作混乱，以致于无法正常显示要显示的数字串。

本文出自 “青峰” 博客，请务必保留此出处http://zhuxianzhong.blog.51cto.com/157061/1542076