适用版本：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’）：
|
1
2
3
4
5
|
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);
|
上述代码主要是初始化了控件，至于设置控件的实际文本数据则使用如下代码：
|
1
2
|
//set string value for labelatlas.
void
setStringValue(
const
std::string& value);
|
对于我上面使用CocoStudio创建的UI控件，我使用了如下代码设置它的实际要显示的数字字符串值：
|
1
2
|
LabelAtlas* AtlasLabel_1 =
static_cast
<LabelAtlas*>(ul->getWidgetByName(
"AtlasLabel_1"
));
AtlasLabel_1->setStringValue(CCString::createWithFormat(
"%d"
,500)->m_sString);
|
小结
正确理解UI编辑器中AtlasLabel控件的上述几个参数的含义至关重要；否则，可能引起后台代码的操作混乱，以致于无法正常显示要显示的数字串。
