Cocos2dx杂记：cocos2dx 文本布局UI
程序员文章站
2022-06-14 13:38:31
...
在开发游戏的过程中，UI布局是游戏必不可少的一部分。Cocos2dx游戏一般可以使用Cocostudio进行布局。简单的布局有时候可以采用文本方式。下面简单介绍下文本布局。
所谓的文本布局方式就是一个简单的Json文件，通过解析Json文件来进行调用。简单页面可以很快的实现，可以让代码和UI布局分离。
一、数据格式
解析的数据简单的分为：精灵“Sprite”，文本“Label”，菜单“Menu”等，可以根据需要进行自定义添加。
1、在“Sprite”中定义了基本的标签属性，如下所示
{
"Sprite": [
{
"frameCache": false,
"sprite": "chapter/chapter_btn_bg.png",
"anchorPoint": "{0.5, 0.5}",
"position": "{770, 680}",
"localZorder": 0,
"tag": "starBg",
"attachedTag": "null"
}
}frameCache：是否使用缓存
sprite：图片名称，当使用缓存的时候注意不用写路径
anchorPoint：锚点
position:图片在层中的位置
localZorder:层级关系
tag: 图片标签
attachedTag: 关联的标签，即该节点的父类是哪个节点
2、在”Label”中定义了基本的标签属性，如下所示
{
"Label": [
{
"labelSystemFont": "null",
"labelBMFont": "null",
"labelCharMap": "fonts/font_chapter_menu.png",
"fontsize": 30,
"fontWidth": 17,
"fontHeight": 25,
"startString": "/",
"anchorPoint": "{0.5, 0.5}",
"position": "{80, 17}",
"localZorder": 0,
"tag": "starNum",
"attachedTag": "starBg"
}
}labelSystemFont: 系统文字名称
labelBMFont: fnt文字名称
labelCharMap: CharMap名称
fontsize: 文字大小（系统文字使用）
fontWidth: 文字宽度（CharMap使用）
fontHeight: 文字高度（CharMap使用）
startString: 开始字符（CharMap使用）
anchorPoint：锚点
position:图片在层中的位置
localZorder:层级关系
tag: 图片标签
attachedTag: 关联的标签，即该节点的父类是哪个节点
3、在”Menu”中定义了基本的标签属性，如下所示
{
"Menu": [
{
"item1": "btn/addNormal.png",
"item2": "btn/addPressed.png",
"position": "{156, 17}",
"localZorder": 0,
"tag1": "itemImage1",
"tag2": "itemMenu1",
"attachedTag": "heartBg"
}
}item1: 按钮正常图片
item2: 按钮按下图片
position: 图片在层中的位置
localZorder: 层级关系
tag1: MenuItemImage标签
tag2: Menu标签
attachedTag: 关联的标签，即该节点的父类是哪个节点
4、如下是整个文本布局
{
"Sprite": [
{
"frameCache": false,
"sprite": "chapter/chapter_btn_bg.png",
"anchorPoint": "{0.5, 0.5}",
"position": "{770, 680}",
"localZorder": 0,
"tag": "starBg",
"attachedTag": "null"
},
{
"frameCache": false,
"sprite": "chapter/chapter_btn_bg.png",
"anchorPoint": "{0.5, 0.5}",
"position": "{960, 680}",
"localZorder": 0,
"tag": "heartBg",
"attachedTag": "null"
},
{
"frameCache": false,
"sprite": "chapter/chapter_btn_bg.png",
"anchorPoint": "{0.5, 0.5}",
"position": "{1170, 680}",
"localZorder": 0,
"tag": "diamondBg",
"attachedTag": "null"
},
{
"frameCache": false,
"sprite": "chapter/star.png",
"anchorPoint": "{0.5, 0.5}",
"position": "{2, 15}",
"localZorder": 0,
"tag": "star",
"attachedTag": "starBg"
},
{
"frameCache": false,
"sprite": "chapter/heart.png",
"anchorPoint": "{0.5, 0.5}",
"position": "{2, 15}",
"localZorder": 0,
"tag": "star",
"attachedTag": "heartBg"
},
{
"frameCache": false,
"sprite": "chapter/diamond.png",
"anchorPoint": "{0.5, 0.5}",
"position": "{2, 15}",
"localZorder": 0,
"tag": "star",
"attachedTag": "diamondBg"
}
],
"Label": [
{
"labelSystemFont": "null",
"labelBMFont": "null",
"labelCharMap": "fonts/font_chapter_menu.png",
"fontsize": 30,
"fontWidth": 17,
"fontHeight": 25,
"startString": "/",
"anchorPoint": "{0.5, 0.5}",
"position": "{80, 17}",
"localZorder": 0,
"tag": "starNum",
"attachedTag": "starBg"
},
{
"labelSystemFont": "null",
"labelBMFont": "null",
"labelCharMap": "fonts/font_chapter_menu.png",
"fontsize": 30,
"fontWidth": 17,
"fontHeight": 25,
"startString": "/",
"anchorPoint": "{0.5, 0.5}",
"position": "{80, 17}",
"localZorder": 0,
"tag": "heartNum",
"attachedTag": "heartBg"
},
{
"labelSystemFont": "null",
"labelBMFont": "null",
"labelCharMap": "fonts/font_chapter_menu.png",
"fontsize": 30,
"fontWidth": 17,
"fontHeight": 25,
"startString": "/",
"anchorPoint": "{0.5, 0.5}",
"position": "{80, 17}",
"localZorder": 0,
"tag": "diamondNum",
"attachedTag": "diamondBg"
}
],
"Menu": [
{
"item1": "btn/addNormal.png",
"item2": "btn/addPressed.png",
"position": "{156, 17}",
"localZorder": 0,
"tag1": "itemImage1",
"tag2": "itemMenu1",
"attachedTag": "heartBg"
},
{
"item1": "btn/addNormal.png",
"item2": "btn/addPressed.png",
"position": "{156, 17}",
"localZorder": 0,
"tag1": "itemImage2",
"tag2": "itemMenu2",
"attachedTag": "diamondBg"
},
{
"item1": "btn/returnNormal.png",
"item2": "btn/returnPressed.png",
"position": "{75, 60}",
"localZorder": 0,
"tag1": "itemImage3",
"tag2": "itemMenu3",
"attachedTag": "null"
},
{
"item1": "btn/shopNormal.png",
"item2": "btn/shopPressed.png",
"position": "{1200, 60}",
"localZorder": 0,
"tag1": "itemImage4",
"tag2": "itemMenu4",
"attachedTag": "null"
}
]
}二、调用方式
如果是纯静态页面布局，直接使用以下代码上面三行就可以了
如果要获得节点进行操作，则按照下面的方式获得。
//载入布局
UI *ui = new UI();
auto layer = ui->UICreate("ui/chapter_menu.txt");
this->addChild(layer, 10);
//获得文本标签
m_pLabelStar = (Label*)layer->getChildByName("starBg")->getChildByName("starNum");
m_pLabelHeart = (Label*)layer->getChildByName("heartBg")->getChildByName("heartNum");
m_pLabelDiamond = (Label*)layer->getChildByName("diamondBg")->getChildByName("diamondNum");
//获得按钮
auto menu1 = (Menu*)layer->getChildByName("heartBg")->getChildByName("itemMenu1");
auto menu2 = (Menu*)layer->getChildByName("diamondBg")->getChildByName("itemMenu2");
auto menu3 = (Menu*)layer->getChildByName("itemMenu3");
auto menu4 = (Menu*)layer->getChildByName("itemMenu4");
auto item1 = (MenuItemImage*)menu1->getChildByName("itemImage1");
auto item2 = (MenuItemImage*)menu2->getChildByName("itemImage2");
auto item3 = (MenuItemImage*)menu3->getChildByName("itemImage3");
auto item4 = (MenuItemImage*)menu4->getChildByName("itemImage4");
item1->initWithCallback(CC_CALLBACK_1(ChapterScene::onHeartBtnPressed, this));
item2->initWithCallback(CC_CALLBACK_1(ChapterScene::onDiamongBtnPressed, this));
item3->initWithCallback(CC_CALLBACK_1(ChapterScene::onReturnBtnPressed, this));
item4->initWithCallback(CC_CALLBACK_1(ChapterScene::onShopBtnPressed, this));三、资源下载