Cocos2dx杂记：cocos2dx 文本布局UI

在开发游戏的过程中，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));

三、资源下载

资源下载