cocos studio 各模块使用方法

淡淡的烟草味﹌ 2022-08-06 13:12 334阅读 0赞

**转载自：http://www.yxkfw.com/?p=9523**

**一、UI 框架的使用方法以及常用接口介绍**

**1. Cocos2d-x 使用UI框架的步骤**：  
1)Cocos2d-x 导入Cocos Studio的UI编辑器文件(json)  
2)创建控件：绑定控件、编码创建控件  
3)使用控件做逻辑处理：比如，按钮、listview、scrollview等等控件做响应事件。

注释:  json 文件(由 ui 编辑器导出生成)来初始化一个 ui 系统,ui 系统 同样会清除当前 ui 系统中的控件,并初始化成 json 文件中描述的 ui 控件。

**2.控件绑定**:

这里举个例子，如图：

![Cocos Studio教程GUI使用学习详解 - 第1张  | 游戏开发网-最好的游戏编程开发技术网站！][Cocos Studio_GUI_ - _1_ _ _-]

// equip root from json  
    Layout* equipe_root =dynamic_cast<Layout*>(GUIReader::shareReader()->widgetFromJsonFile("cocosgui/gui_examples/equip_1/equip_1.json"));  
    equipe_root->setTag(EQUIP_LAYOUT_TAG_ROOT);  
    m_pUILayer->addWidget(equipe_root);          
       
    // title layout  
    Layout* title_layout = dynamic_cast<Layout*>(equipe_root->getChildByName("title_panel"));  
    // close button  
    UIButton* close_btn = dynamic_cast<UIButton*>(title_layout->getChildByName("close_button"));  
    close_btn->setVisible(false);

接着就可以使用绑定的控件做事件处理。

注：这里要注意一点是，我使用的网上的样例，因Cocos2d-x引擎版本不同，需要更改下代码，基本思路都是一样的。  
**3.编码创建控件**:  
举个创建层的例子，代码如下:

//UILayer层  
    m_pUiLayer = UILayer::create();  
    addChild(m_pUiLayer);

**二、各个控件的使用方法**

**1.CocoButto**n

1.1  示例

![Cocos Studio教程GUI使用学习详解 - 第2张  | 游戏开发网-最好的游戏编程开发技术网站！][Cocos Studio_GUI_ - _2_ _ _-]  
1.2  实现代码  
HelloWorldScene.cpp

m_pUiLayer = UILayer::create();  
    addChild(m_pUiLayer);  
      
    m_pWidget = dynamic_cast<UILayout*>(GUIReader::shareReader()->widgetFromJsonFile("cocosgui/UITest/UITest.json"));  
       
    //m_pUiLayer->addWidget(m_pWidget);  
    CCSize widgetSize = m_pWidget->getSize();  
       
    //UILabel文字  
    m_pDisplayValueLabel = UILabel::create();  
    m_pDisplayValueLabel->setText("No Event");  
    m_pDisplayValueLabel->setFontName("Marker Felt");  
    m_pDisplayValueLabel->setAnchorPoint(ccp(0.5f, -1));  
    m_pDisplayValueLabel->setPosition(ccp(widgetSize.width / 2.0f, widgetSize.height / 1.5f));  
    m_pDisplayValueLabel->setColor(ccc3(159, 168, 176));  
    m_pUiLayer->addWidget(m_pDisplayValueLabel);  
       
    //按钮  
    UIButton* button = UIButton::create();  
    button->setTouchEnabled(true);  
    button->setScale9Enabled(true);//是否支持九宫  
    button->loadTextures("cocosgui/animationbuttonnormal.png", "cocosgui/animationbuttonpressed.png", "");  
    button->setPosition(ccp(widgetSize.width / 2.0f, widgetSize.height / 2.0f));  
    button->addTouchEventListener(this, toucheventselector(HelloWorld::touchEvent));  
       
    m_pUiLayer->addWidget(button);

点击事件

void HelloWorld::touchEvent(CCObject *pSender, TouchEventType type)  
    {  
        //按下、移动、结束、取消  
        switch (type)  
        {  
            case TOUCH_EVENT_BEGAN:  
                m_pDisplayValueLabel->setText(CCString::createWithFormat("Touch Down")->getCString());  
                break;  
                   
            case TOUCH_EVENT_MOVED:  
                m_pDisplayValueLabel->setText(CCString::createWithFormat("Touch Move")->getCString());  
                break;  
                   
            case TOUCH_EVENT_ENDED:  
                m_pDisplayValueLabel->setText(CCString::createWithFormat("Touch Up")->getCString());  
                break;  
                   
            case TOUCH_EVENT_CANCELED:  
                m_pDisplayValueLabel->setText(CCString::createWithFormat("Touch Cancelled")->getCString());  
                break;  
                   
            default:  
                break;  
        }  
    }

**2.UICheckBox**

2.1 示例

![Cocos Studio教程GUI使用学习详解 - 第3张  | 游戏开发网-最好的游戏编程开发技术网站！][Cocos Studio_GUI_ - _3_ _ _-]

2.2  代码

//单选按钮  
    UICheckBox* checkBox = UICheckBox::create();  
    checkBox->setTouchEnabled(true);  
    checkBox->loadTextures("cocosgui/check_box_normal.png",  
                           "cocosgui/check_box_normal_press.png",  
                           "cocosgui/check_box_active.png",  
                           "cocosgui/check_box_normal_disable.png",  
                           "cocosgui/check_box_active_disable.png");  
    checkBox->setPosition(ccp(widgetSize.width / 2.0f, widgetSize.height / 2.0f));  
    checkBox->addEventListenerCheckBox(this, checkboxselectedeventselector(HelloWorld::selectedStateEvent));  
    m_pUiLayer->addWidget(checkBox);

响应事件

void HelloWorld::selectedStateEvent(CCObject* pSender, CheckBoxEventType type)  
    {  
        switch (type)  
        {  
            case CHECKBOX_STATE_EVENT_UNSELECTED://取消  
                m_pDisplayValueLabel->setText(CCString::createWithFormat("Unselected")->getCString());  
                break;  
                   
            case CHECKBOX_STATE_EVENT_SELECTED: //选中  
                m_pDisplayValueLabel->setText(CCString::createWithFormat("Selected")->getCString());  
                break;  
                   
            default:  
                break;  
        }  
       
    }

**3.CocoImageView**

3.1  示例

![Cocos Studio教程GUI使用学习详解 - 第4张  | 游戏开发网-最好的游戏编程开发技术网站！][Cocos Studio_GUI_ - _4_ _ _-]

3.2  代码:

UIImageView* imageView = UIImageView::create();  
    //imageView->setScale9Enabled(true);   //是否支持九宫  
    imageView->loadTexture("cocosgui/ccicon.png");  
    imageView->setSize(CCSizeMake(200, 85));  
    imageView->setPosition(ccp(widgetSize.width / 2.0f, widgetSize.height / 2.0f + imageView->getSize().height / 4.0f));  
    m_pUiLayer->addWidget(imageView);

**4.Label**

4.1 标签类型  
CocoLabel 是文本标签,通常用语表示一行文字。

CocoTextArea 是文本区,用于显示文本,于 CocoLabel 不同的是,label 只能 显示一行文 字,而 CocoTextArea 可以将文字显示在一个区域内,并可以换行。

CCLabelBMFont  是文字渲染标签类，相当于每次改变只改变了图片坐标，而CCLabelTTF要重新渲染.这个类使用之前，需要添加好字体文件，包括一个图片文件 (\*\*.png) 和一个 字体坐标文件 （\*\*.fnt）。

4.2  示例

![Cocos Studio教程GUI使用学习详解 - 第5张  | 游戏开发网-最好的游戏编程开发技术网站！][Cocos Studio_GUI_ - _5_ _ _-]

//UILabel文字  
    m_pDisplayValueLabel = UILabel::create();  
    m_pDisplayValueLabel->setText("No Event");  
    m_pDisplayValueLabel->setFontName("Marker Felt");  
    m_pDisplayValueLabel->setAnchorPoint(ccp(0.5f, -1));  
    m_pDisplayValueLabel->setPosition(ccp(widgetSize.width / 2.0f, widgetSize.height / 1.5f));  
    m_pDisplayValueLabel->setColor(ccc3(159, 168, 176));  
    m_pUiLayer->addWidget(m_pDisplayValueLabel);  
       
    //LabelAtlas示例  
    UILabelAtlas* labelAtlas = UILabelAtlas::create();  
    labelAtlas->setProperty("0987654321", "cocosgui/labelatlas.png", 17, 22, "0");  
    labelAtlas->setPosition(ccp((widgetSize.width) / 2, widgetSize.height / 2.0f));  
    m_pUiLayer->addWidget(labelAtlas);  
     
    //labelBMFont示例  
    UILabelBMFont* labelBMFont = UILabelBMFont::create();  
    labelBMFont->setFntFile("cocosgui/bitmapFontTest2.fnt");  
    labelBMFont->setText("BMFont");  
    labelBMFont->setPosition(ccp(widgetSize.width / 2, widgetSize.height / 4.0f + labelBMFont->getSize().height / 8.0f));  
    m_pUiLayer->addWidget(labelBMFont);

**5.滚动条**

5.1  示例

![Cocos Studio教程GUI使用学习详解 - 第6张  | 游戏开发网-最好的游戏编程开发技术网站！][Cocos Studio_GUI_ - _6_ _ _-]

5.2  代码:

//滑动条  
    UISlider* slider = UISlider::create();  
    slider->setTouchEnabled(true);  
    slider->loadBarTexture("cocosgui/sliderTrack2.png");  
    slider->loadSlidBallTextures("cocosgui/sliderThumb.png", "cocosgui/sliderThumb.png", "");  
    slider->loadProgressBarTexture("cocosgui/slider_bar_active_9patch.png");  
    slider->setScale9Enabled(true);  //是否支持九宫  
    slider->setCapInsets(CCRectMake(0, 0, 0, 0));  
    slider->setSize(CCSizeMake(250, 10));  
    slider->setPosition(ccp(widgetSize.width / 2.0f, widgetSize.height / 2.0f));  
    //        slider->setPosition(ccp(widgetSize.width / 2.0f, widgetSize.height / 2.0f + slider->getSize().height * 2));  
    slider->addEventListenerSlider(this, sliderpercentchangedselector(HelloWorld::sliderEvent));  
    m_pUiLayer->addWidget(slider);

处理事件

void HelloWorld::sliderEvent(CCObject *pSender, SliderEventType type)  
    {  
        switch (type)  
        {  
            case ::cocos2d::gui::SLIDER_PERCENTCHANGED:  
            {  
                UISlider* slider = dynamic_cast<UISlider*>(pSender);  
                int percent = slider->getPercent();  
                 m_pDisplayValueLabel->setText(CCString::createWithFormat("Percent %d", percent)->getCString());        }  
                break;  
                   
            default:  
                break;  
        }  
    }

**6.加载进度条**

6.1  示例

![Cocos Studio教程GUI使用学习详解 - 第7张  | 游戏开发网-最好的游戏编程开发技术网站！][Cocos Studio_GUI_ - _7_ _ _-]

6.2  代码

scheduleUpdate();  
    UILoadingBar* loadingBar = UILoadingBar::create();  
    loadingBar->setName("LoadingBar");  
    loadingBar->loadTexture("cocosgui/sliderProgress.png");  
    loadingBar->setPercent(0);  
       
    //LoadingBarTypeLeft 从左向右,LoadingBarTypeRight  从右向左  
    loadingBar->setDirection(LoadingBarTypeRight);  
    loadingBar->setPosition(ccp(widgetSize.width / 2.0f, widgetSize.height / 2.0f + loadingBar->getSize().height / 4.0f));  
    m_pUiLayer->addWidget(loadingBar);

定时器监听

void HelloWorld::update(float delta)  
    {  
        m_nCount++;  
        if (m_nCount > 100)  
        {  
            //unscheduleUpdate();  
            m_nCount = 0;  
        }  
           
        UILoadingBar* loadingBar = dynamic_cast<UILoadingBar*>(m_pUiLayer->getWidgetByName("LoadingBar"));  
        loadingBar->setPercent(m_nCount);  
    }

**7.滚动视图**

7.1  示例

![Cocos Studio教程GUI使用学习详解 - 第8张  | 游戏开发网-最好的游戏编程开发技术网站！][Cocos Studio_GUI_ - _8_ _ _-]

7.2  代码

UIScrollView* scrollView = UIScrollView::create();  
    scrollView->setDirection(SCROLLVIEW_DIR_BOTH);  
    scrollView->setTouchEnabled(true);  
    scrollView->setBounceEnabled(true);  
    scrollView->setSize(CCSizeMake(280, 150));  
    CCSize backgroundSize = m_pUiLayer->getContentSize();  
    scrollView->setPosition(ccp((widgetSize.width - backgroundSize.width) / 2 +  
                                (backgroundSize.width - scrollView->getSize().width) / 2,  
                                (widgetSize.height - backgroundSize.height) / 2 +  
                                (backgroundSize.height - scrollView->getSize().height) / 2));  
    m_pUiLayer->addWidget(scrollView);  
       
    UIImageView* imageView = UIImageView::create();  
    imageView->loadTexture("cocosgui/ccicon.png");  
       
    float innerWidth = scrollView->getSize().width;  
    float innerHeight = scrollView->getSize().height + imageView->getSize().height;  
       
    scrollView->setInnerContainerSize(CCSizeMake(innerWidth, innerHeight));         //显示范围  
       
    UIButton* button = UIButton::create();  
    button->setTouchEnabled(true);  
    button->loadTextures("cocosgui/animationbuttonnormal.png", "cocosgui/animationbuttonpressed.png", "");  
    button->setPosition(ccp(innerWidth / 2, scrollView->getInnerContainerSize().height - button->getSize().height / 2));  
    button->addTouchEventListener(this, toucheventselector(HelloWorld::touchEvent));  
    scrollView->addChild(button);  
       
    UIButton* titleButton = UIButton::create();  
    titleButton->setTouchEnabled(true);  
    titleButton->loadTextures("cocosgui/backtotopnormal.png", "cocosgui/backtotoppressed.png", "");  
    titleButton->setTitleText("Title Button");  
    titleButton->setPosition(ccp(innerWidth / 2, button->getBottomInParent() - button->getSize().height));  
    scrollView->addChild(titleButton);  
       
    UIButton* button_scale9 = UIButton::create();  
    button_scale9->setTouchEnabled(true);  
    button_scale9->setScale9Enabled(true);  
    button_scale9->loadTextures("cocosgui/button.png", "cocosgui/buttonHighlighted.png", "");  
    button_scale9->setSize(CCSizeMake(100, button_scale9->getContentSize().height));  
    button_scale9->setPosition(ccp(innerWidth / 2, titleButton->getBottomInParent() - titleButton->getSize().height));  
    scrollView->addChild(button_scale9);  
       
    imageView->setPosition(ccp(innerWidth / 2, imageView->getSize().height / 2));  
    scrollView->addChild(imageView);

注:  scrollView->setDirection(SCROLLVIEW\_DIR\_BOTH);  //设置滚动方向

参数如下：

![Cocos Studio教程GUI使用学习详解 - 第9张  | 游戏开发网-最好的游戏编程开发技术网站！][Cocos Studio_GUI_ - _9_ _ _-]

**8.listView**

8.1  示例

![Cocos Studio教程GUI使用学习详解 - 第10张  | 游戏开发网-最好的游戏编程开发技术网站！][Cocos Studio_GUI_ - _10_ _ _-]

8.2  代码

//滚动列表  
    CCArray *m_array = CCArray::create();  
    CC_SAFE_RETAIN(m_array);  
    for (int i = 0; i < 20; ++i)  
    {  
        CCString* ccstr = CCString::createWithFormat("listview_item_%d", i);  
        m_array->addObject(ccstr);  
    }  
    // Create the list view  
    UIListView* listView = UIListView::create();  
    CCSize backgroundSize = m_pUiLayer->getContentSize();  
    // set list view direction  
    listView->setDirection(SCROLLVIEW_DIR_BOTH);  
    listView->setTouchEnabled(true);  
    listView->setBounceEnabled(true);  
    listView->setBackGroundImage("cocosgui/green_edit.png");  
    listView->setBackGroundImageScale9Enabled(true);  
    listView->setSize(CCSizeMake(240, 130));  
    listView->setPosition(ccp((widgetSize.width - backgroundSize.width) / 2 +  
                              (backgroundSize.width - listView->getSize().width) / 2,  
                              (widgetSize.height - backgroundSize.height) / 2 +  
                              (backgroundSize.height - listView->getSize().height) / 2));  
    listView->addEventListenerListView(this, listvieweventselector(HelloWorld::selectedItemEvent));  
    m_pUiLayer->addWidget(listView);  
       
    // create model  
    UIButton* default_button = UIButton::create();  
    default_button->setName("TextButton");  
    default_button->setTouchEnabled(true);  
    default_button->loadTextures("cocosgui/backtotoppressed.png", "cocosgui/backtotopnormal.png", "");  
       
    Layout* default_item = Layout::create();  
    default_item->setTouchEnabled(true);  
    default_item->setSize(default_button->getSize());  
    default_button->setPosition(ccp(default_item->getSize().width / 2, default_item->getSize().height / 2));  
    default_item->addChild(default_button);  
       
      // set model  
    listView->setItemModel(default_item);  
    int count = m_array->count();  
    for (int i = 0; i < count / 4; ++i)  
    {  
        listView->pushBackDefaultItem();  
    }  
    // insert default item  
    for (int i = 0; i < count / 4; ++i)  
    {  
        listView->insertDefaultItem(0);  
    }  
       
    // add custom item  
    for (int i = 0; i < count / 4; ++i)  
    {  
        UIButton* custom_button = UIButton::create();  
        custom_button->setName("TextButton");  
        custom_button->setTouchEnabled(true);  
        custom_button->loadTextures("cocosgui/button.png", "cocosgui/buttonHighlighted.png", "");  
        custom_button->setScale9Enabled(true);  
        custom_button->setSize(default_button->getSize());  
           
        Layout *custom_item = Layout::create();  
        custom_item->setSize(custom_button->getSize());  
        custom_button->setPosition(ccp(custom_item->getSize().width / 2, custom_item->getSize().height / 2));  
        custom_item->addChild(custom_button);  
           
        listView->pushBackCustomItem(custom_item);  
    }  
       
    // insert custom item  
    CCArray *items = listView->getItems();  
    int items_count = items->count();  
    for (int i = 0; i < count / 4; ++i)  
    {  
        UIButton* custom_button = UIButton::create();  
        custom_button->setName("TextButton");  
        custom_button->setTouchEnabled(true);  
        custom_button->loadTextures("cocosgui/button.png", "cocosgui/buttonHighlighted.png", "");  
        custom_button->setScale9Enabled(true);  
        custom_button->setSize(default_button->getSize());  
           
        Layout *custom_item = Layout::create();  
        custom_item->setSize(custom_button->getSize());  
        custom_button->setPosition(ccp(custom_item->getSize().width / 2, custom_item->getSize().height / 2));  
        custom_item->addChild(custom_button);  
           
        listView->insertCustomItem(custom_item, items_count);  
    }  
       
    // set item data  
    items_count = items->count();  
    for (int i = 0; i < items_count; ++i)  
    {  
        UIWidget *item = listView->getItem(i);  
        UIButton *button = static_cast<UIButton*>(item->getChildByName("TextButton"));  
        int index = listView->getIndex(item);  
        button->setTitleText(static_cast<CCString*>(m_array->objectAtIndex(index))->getCString());  
    }  
       
    // remove last item  
    listView->removeLastItem();  
       
    // remove item by index  
    items_count = items->count();  
    listView->removeItem(items_count - 2);  
       
    // set all items layout gravity  
    listView->setGravity(LISTVIEW_GRAVITY_CENTER_VERTICAL);

注:  
listView->setGravity(LISTVIEW\_GRAVITY\_CENTER\_VERTICAL);  //设置列表重心，我个人理解是对齐方式  
listView->setDirection(SCROLLVIEW\_DIR\_BOTH);     //滚动方向

![Cocos Studio教程GUI使用学习详解 - 第11张  | 游戏开发网-最好的游戏编程开发技术网站！][Cocos Studio_GUI_ - _11_ _ _-]

**9.页面切换**

9.1  示例:

![Cocos Studio教程GUI使用学习详解 - 第12张  | 游戏开发网-最好的游戏编程开发技术网站！][Cocos Studio_GUI_ - _12_ _ _-]

9.2  代码:

UIPageView* pageView = UIPageView::create();  
    pageView->setTouchEnabled(true);  
    pageView->setSize(CCSizeMake(240, 130));  
    CCSize backgroundSize = m_pUiLayer->getContentSize();  
    pageView->setPosition(ccp((widgetSize.width - backgroundSize.width) / 2 +  
                              (backgroundSize.width - pageView->getSize().width) / 2,  
                              (widgetSize.height - backgroundSize.height) / 2 +  
                              (backgroundSize.height - pageView->getSize().height) / 2));  
       
    for (int i = 0; i < 3; ++i)  
    {  
        UILayout* layout = UILayout::create();  
        layout->setSize(CCSizeMake(240, 130));  
           
        UIImageView* imageView = UIImageView::create();  
        imageView->setTouchEnabled(true);  
        imageView->setScale9Enabled(true);  
        imageView->loadTexture("cocosgui/scrollviewbg.png");  
        imageView->setSize(CCSizeMake(240, 130));  
        imageView->setPosition(ccp(layout->getSize().width / 2, layout->getSize().height / 2));  
        layout->addChild(imageView);  
           
        UILabel* label = UILabel::create();  
        label->setText(CCString::createWithFormat("page %d", (i + 1))->getCString());  
        label->setFontName("Marker Felt");  
        label->setFontSize(30);  
        label->setColor(ccc3(192, 192, 192));  
        label->setPosition(ccp(layout->getSize().width / 2, layout->getSize().height / 2));  
        layout->addChild(label);  
           
        pageView->addPage(layout);  
    }  
    pageView->addEventListenerPageView(this, pagevieweventselector(HelloWorld::pageViewEvent));  
       
    m_pUiLayer->addWidget(pageView);

事件响应：

void HelloWorld::pageViewEvent(CCObject *pSender, PageViewEventType type)  
    {  
        switch (type)  
        {  
            case PAGEVIEW_EVENT_TURNING:  
            {  
                UIPageView* pageView = dynamic_cast<UIPageView*>(pSender);  
                   
                m_pDisplayValueLabel->setText(CCString::createWithFormat("page = %d", pageView->getCurPageIndex() + 1)->getCString());  
            }  
                break;  
                   
            default:  
                break;  
        }  
    }

本人参考cocos2d-x 2.2.2 testcpp的例子实现，有关绑定控件实现也是类似的。

[Cocos Studio_GUI_ - _1_ _ _-]: /images/20220806/6d70acf8178344fcb3c021178b6edfa8.png
[Cocos Studio_GUI_ - _2_ _ _-]: /images/20220806/2e53022735944e829c228410cc997c2e.png
[Cocos Studio_GUI_ - _3_ _ _-]: /images/20220806/738c419adce14db1baacf535dc7085e9.png
[Cocos Studio_GUI_ - _4_ _ _-]: /images/20220806/8f1140a26b264afe9408e5e763b9adde.png
[Cocos Studio_GUI_ - _5_ _ _-]: /images/20220806/52733e6cf2a04c75a2ac99f6fcb4a0e5.png
[Cocos Studio_GUI_ - _6_ _ _-]: /images/20220806/321b3c3dc20c487eb0f81d96fa05d91c.png
[Cocos Studio_GUI_ - _7_ _ _-]: /images/20220806/050d981b196344ef958b6ee7f958e248.png
[Cocos Studio_GUI_ - _8_ _ _-]: /images/20220806/dd51f2a304574b3f8793fb6cce7df691.png
[Cocos Studio_GUI_ - _9_ _ _-]: /images/20220806/62bb6c1b009047a68c630fdb8fb068b2.png
[Cocos Studio_GUI_ - _10_ _ _-]: /images/20220806/2c49a12f2437412fa688b61ebfef7386.png
[Cocos Studio_GUI_ - _11_ _ _-]: /images/20220806/f6bbe2a85aae4608bc4bef5c1442742d.png
[Cocos Studio_GUI_ - _12_ _ _-]: /images/20220806/cd235bbeaf434134a80ac89dd0306574.png