cocos studio 各模块使用方法

最新推荐文章于 2022-03-29 16:51:08 发布

harryptter

最新推荐文章于 2022-03-29 16:51:08 发布

阅读量4.3k

点赞数

分类专栏： cocos2dx 文章标签： cocos2d-x

cocos2dx 专栏收录该内容

80 篇文章 1 订阅

订阅专栏

转载自：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张 | 游戏开发网-最好的游戏编程开发技术网站！

// 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.CocoButton

1.1 示例

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张 | 游戏开发网-最好的游戏编程开发技术网站！

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张 | 游戏开发网-最好的游戏编程开发技术网站！

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张 | 游戏开发网-最好的游戏编程开发技术网站！

//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张 | 游戏开发网-最好的游戏编程开发技术网站！

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张 | 游戏开发网-最好的游戏编程开发技术网站！

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张 | 游戏开发网-最好的游戏编程开发技术网站！

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张 | 游戏开发网-最好的游戏编程开发技术网站！

8.listView

8.1 示例

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张 | 游戏开发网-最好的游戏编程开发技术网站！

9.页面切换

9.1 示例:

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的例子实现，有关绑定控件实现也是类似的。