www.91084.com

GVKun编程网logo

Cocos2dx:cocostudio 2.0 Text文本控件(cocos2dx文档)

24

对于Cocos2dx:cocostudio2.0Text文本控件感兴趣的读者,本文将提供您所需要的所有信息,我们将详细讲解cocos2dx文档,并且为您提供关于(7)cocos2dx自定义动画和使用c

对于Cocos2dx:cocostudio 2.0 Text文本控件感兴趣的读者,本文将提供您所需要的所有信息,我们将详细讲解cocos2dx文档,并且为您提供关于(7) cocos2dx 自定义动画 和 使用cocostudio动画、Cocos Studio和Cocos2d-x版本对应关系 附1.6Cocostudio版本下载地址、Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大全Cocos2d-x3.2使用、cocos2d-x – Cocos2dx:Sprite3D不会渲染到纹理的宝贵知识。

本文目录一览:

Cocos2dx:cocostudio 2.0 Text文本控件(cocos2dx文档)

Cocos2dx:cocostudio 2.0 Text文本控件(cocos2dx文档)

头文件很重要:


#include "cocos2d.h"
#include "cocostudio/CocoStudio.h"
#include "ui/CocosGUI.h"

这个也很重要,我喜欢开头就这样,后面就不用继续写引用头了。


using namespace cocostudio;
using namespace ui;


核心:
auto rootNode = csloader::createNode("test.csb");
this->addChild(rootNode);
auto text = (Text*)rootNode->getChildByName("Text"); //获取到文本控件节点
text->setString("This is test");


这样,我们就可以修改控件内容了。

(7) cocos2dx 自定义动画 和 使用cocostudio动画

(7) cocos2dx 自定义动画 和 使用cocostudio动画

// getContentSize函数来获得节点原始的大小。只是逻辑尺寸,不是像素,若是DesignResolutionSize跟屏幕尺寸一样大,则getVisibleSize便是getWinSize。

// getContentSizeInPixels获得的是像素点大小

// 像素点和逻辑点关系:逻辑点大小 = 像素大小/contentScaleFactor.

// getVisibleOrigin:获得可视区域的出发点坐标,在处理相对位置时,确保节点在不同分辨率下的位置一致。

auto winSize = Director::getInstance()->getVisibleSize();

// hero

auto hero = Sprite::create(bird_hero);

hero->setPosition(winSize.width / 3,winSize.height*0.8);

hero->setVisible(false);

hero->setTag(TAG_HERO);

this->addChild(hero,1);

Animation* an = Animation::create();

an->addSpriteFrameWithFileName(bird_hero);

an->addSpriteFrameWithFileName(bird_hero2);

an->addSpriteFrameWithFileName(bird_hero3);

an->setDelayPerUnit(0.5f / 3.0f); //必须设置否则不会动态播放

an->setLoops(-1); //重复次数 (-1:无限循环)

Animate* anim = Animate::create(an);

hero->runAction(anim);


使用cocostudio动画

cocostudio::ArmatureDataManager::getInstance()->addArmatureFileInfo("tauren0.png","tauren0.plist","tauren.ExportJson");

armature = cocostudio::Armature::create("tauren");

armature->getAnimation()->playByIndex(0);

armature->setScale(1.0f);

armature->setPosition(Vec2(x.asInt()+50,y.asInt()));

this->addChild(armature);

Cocos Studio和Cocos2d-x版本对应关系 附1.6Cocostudio版本下载地址

Cocos Studio和Cocos2d-x版本对应关系 附1.6Cocostudio版本下载地址


cocosstudio 2.X 对应的cocos2d-x 版本

wKioL1XsD9_Q0Ao_AAIRfPZ16eo927.jpg



cocosstudio 1.X 对应的cocos2d-x 版本


wKiom1XsDbeT-byjAAIV6BxLj_Q643.jpg


cocoStudio 1.6 版本下载地址:

http://cocostudio.download.appget.cn/CocosStudio/v1.6.0.0/CocosStudio_v1.6.0.0.exe

2.x 版本官网都有,国内官网地址:http://cn.cocos2d-x.org/

Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大全Cocos2d-x3.2使用

Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大全Cocos2d-x3.2使用

Cocosstudio UI组件


按钮UIButton
复选框UICheckBox
滑块UiSlider
图片UIImageView
进度条UILoadingBar
纹理文本 UITextAtlas
字体文本 UIText
图片字体文本 UITextBMFont
文本区域 UITextField
布局组件 UILayout
滚动组件 UIScrollView
页面切换组件 UIPageView
列表组件 UIListView
所有控件都继承 UIWidget
可以通过addChild()添加UIWidget类型的节点
可以通过addRender()添加CCNode类型的节点
一、使用方法
1.1 在解决方案中添加项目并添加引用
libCocostudio
libGui
libExtensions
1.2 在项目中引用以下2个头文件
#include "extensions/cocos-ext.h"
#include "ui/CocosGUI.h"
USING_NS_CC;
using namespace ui;
1.3 使用Cocosstudio UI编辑器或直接通过代码定义组件对象
二、各组件使用详解
2.1.UIButton
2.1.1 按钮对象的创建
// 创建按钮 button
Button* button = Button::create("cocosui/animationbuttonnormal.png",
"cocosui/animationbuttonpressed.png");
//设置坐标
button->setPosition(Point(widgetSize.width / 2.0f,widgetSize.height / 2.0f));
//添加事件
button->addTouchEventListener(this,toucheventselector(UIButtonTest::touchEvent));
//添加到图层
_uiLayer->addChild(button);
2.1.2 事件处理方法:
void UIButtonTest::touchEvent(Ref *pSender,TouchEventType type)
{ switch (type)
{ case TOUCH_EVENT_BEGAN:
_displayValueLabel->setText(String::createWithFormat("Touch Down")->getCString());
break;
case TOUCH_EVENT_MOVED:
_displayValueLabel->setText(String::createWithFormat("Touch Move")->getCString());
case TOUCH_EVENT_ENDED:
_displayValueLabel->setText(String::createWithFormat("Touch Up")->getCString());
case TOUCH_EVENT_CANCELED:
_displayValueLabel->setText(String::createWithFormat("Touch Cancelled")->getCString());
break;
default:
}

}
2.1.3 使用9Path图片
// Create the button
Button* button = Button::create("cocosui/button.png","cocosui/buttonHighlighted.png");
// open scale9 render
button->setScale9Enabled(true);
button->setCapInsets(Rect(5,5,15,15));
button->setSize(Size(150,70)); 2.1.4 实现pressedAction效果
// Create the button pressed.png");
button->setpressedActionEnabled(true); pressedAction::touchEvent));
2.1.5 实现TitleButton
// Create the button with title
Button* button = Button::create("cocosui/backtotoppressed.png","cocosui/backtotopnormal.png");
button->setTitleText("Title Button"); 2.2.UICheckBox
2.2.1 添加CheckBox
// Create the checkBox
CheckBox* checkBox = CheckBox::create("cocosui/check_Box_normal.png",51); font-family:Arial; font-size:14px; line-height:26px"> "cocosui/check_Box_normal_press.png",51); font-family:Arial; font-size:14px; line-height:26px"> "cocosui/check_Box_active.png",51); font-family:Arial; font-size:14px; line-height:26px"> "cocosui/check_Box_normal_disable.png",51); font-family:Arial; font-size:14px; line-height:26px"> "cocosui/check_Box_active_disable.png");
checkBox->setPosition(Point(widgetSize.width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px">
checkBox->addEventListenerCheckBox(this,checkBoxselectedeventselector(UICheckBoxTest::selectedEvent));
_uiLayer->addChild(checkBox);
2.2.2 处理用户选中事件
void UICheckBoxTest::selectedEvent(Ref* pSender,CheckBoxEventType type)
{
switch (type)
{
case CHECKBox_STATE_EVENT_SELECTED:
_displayValueLabel->setText(String::createWithFormat("Selected")->getCString());

case CHECKBox_STATE_EVENT_UNSELECTED:
_displayValueLabel->setText(String::createWithFormat("Unselected")->getCString());
}
2.3.UiSlider
2.3.1
// Create the slider
Slider* slider = Slider::create();
slider->loadBarTexture("cocosui/sliderTrack.png");
slider->loadSlidBallTextures("cocosui/sliderThumb.png","cocosui/sliderThumb.png","");
slider->loadProgressBarTexture("cocosui/sliderProgress.png");
slider->setPosition(Point(widgetSize.width / 2.0f,widgetSize.height / 2.0f/* + slider->getSize().height * 2.0f*/));
slider->addEventListenerSlider(this,sliderpercentchangedselector(UiSliderTest::sliderEvent));
_uiLayer->addChild(slider);
2.3.2
void UiSliderTest::sliderEvent(Ref *pSender,SliderEventType type)
{
if (type == SLIDER_PERCENTCHANGED)
Slider* slider = dynamic_cast<Slider*>(pSender);
int percent = slider->getPercent();
_displayValueLabel->setText(String::createWithFormat("Percent %d",percent)->getCString());
}
2.3.3
// Create the slider
slider->loadBarTexture("cocosui/sliderTrack2.png");
slider->loadProgressBarTexture("cocosui/slider_bar_active_9patch.png");
slider->setScale9Enabled(true);
slider->setCapInsets(Rect(0,0));
slider->setSize(Size(250.0f,19)); iSliderTest_Scale9::sliderEvent));
2.4.UIImageView
2.4.1 // Create the imageview
ImageView* imageView = ImageView::create("cocosui/ccicon.png");
imageView->setPosition(Point(widgetSize.width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> widgetSize.height / 2.0f));
_uiLayer->addChild(imageView);
2.4.2
// Create the imageview
ImageView* imageView = ImageView::create("cocosui/buttonHighlighted.png");
imageView->setScale9Enabled(true);
imageView->setSize(Size(300,115));
2.5.UILoadingBar
2.5.1创建进度条
// Create the loading bar
LoadingBar* loadingBar = LoadingBar::create("cocosui/sliderProgress.png");
loadingBar->setTag(0);
loadingBar->setPosition(Point(widgetSize.width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> widgetSize.height / 2.0f + loadingBar->getSize().height / 4.0f));
_uiLayer->addChild(loadingBar);
2.5.2 修改进度条的长度
void UILoadingBarTest_Left::update(float delta)
_count++;
if (_count > 100)
_count = 0;
LoadingBar* loadingBar = static_cast<LoadingBar*>(_uiLayer->getChildByTag(0));
loadingBar->setPercent(_count);
}
2.5.3 修改进度条的方向
// Create the loading bar
loadingBar->setDirection(LoadingBarTypeRight);
2.5.4 scale9
LoadingBar* loadingBar = LoadingBar::create("cocosui/slider_bar_active_9patch.png");
loadingBar->setScale9Enabled(true);
loadingBar->setCapInsets(Rect(0,51); font-family:Arial; font-size:14px; line-height:26px"> loadingBar->setSize(Size(300,13));
widgetSize.height / 2.0f + loadingBar->getSize().height / 4.0f));
2.6.UITextAtlas
TextAtlas* textAtlas = TextAtlas::create("1234567890","cocosui/labelatlas.png",17,22,"0");
textAtlas->setPosition(Point((widgetSize.width) / 2,51); font-family:Arial; font-size:14px; line-height:26px"> _uiLayer->addChild(textAtlas);
2.7.UIText
2.7.1
// Create the text
Text* text = Text::create("Text","AmericanTypewriter",30);
text->setPosition(Point(widgetSize.width / 2.0f,widgetSize.height / 2.0f + text->getSize().height / 4.0f));
_uiLayer->addChild(text);
2.7.2
// Create the line wrap
Text* text = Text::create("Text can line wrap",32);
text->ignoreContentAdaptWithSize(false);
text->setSize(Size(280,150));
text->setTextHorizontalAlignment(TextHAlignment::CENTER); 2.7.3 create with ttf
Text* alert = Text::create("Text line wrap","fonts/Marker Felt.ttf",51); font-family:Arial; font-size:14px; line-height:26px"> alert->setColor(Color3B(159,168,176));
alert->setPosition(Point(widgetSize.width / 2.0f,widgetSize.height / 2.0f - alert->getSize().height * 1.75f));
_uiLayer->addChild(alert);
2.8.UITextBMFont
// Create the TextBMFont
TextBMFont* textBMFont = TextBMFont::create("BMFont","cocosui/bitmapFontTest2.fnt");
textBMFont->setPosition(Point(widgetSize.width / 2,widgetSize.height / 2.0f + textBMFont->getSize().height / 8.0f));
_uiLayer->addChild(textBMFont);
2.9.UITextField
2.9.1
// Create the textfield
TextField* textField = TextField::create("input words here",51); font-family:Arial; font-size:14px; line-height:26px">
textField->setPosition(Point(widgetSize.width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> textField->addEventListenerTextField(this,textfieldeventselector(UITextFieldTest::textFieldEvent));
_uiLayer->addChild(textField);
2.9.2
void UITextFieldTest::textFieldEvent(Ref *pSender,TextFiledEventType type)
case TEXTFIELD_EVENT_ATTACH_WITH_IME:
{
TextField* textField = dynamic_cast<TextField*>(pSender);
Size screenSize = CCDirector::getInstance()->getWinSize();
textField->runAction(CCMoveto::create(0.225f,51); font-family:Arial; font-size:14px; line-height:26px"> Point(screenSize.width / 2.0f,screenSize.height / 2.0f + textField->getContentSize().height / 2.0f)));
_displayValueLabel->setText(String::createWithFormat("attach with IME")->getCString());
}
case TEXTFIELD_EVENT_DETACH_WITH_IME:
textField->runAction(CCMoveto::create(0.175f,Point(screenSize.width / 2.0f,screenSize.height / 2.0f)));
_displayValueLabel->setText(String::createWithFormat("detach with IME")->getCString());
case TEXTFIELD_EVENT_INSERT_TEXT:
_displayValueLabel->setText(String::createWithFormat("insert words")->getCString());
case TEXTFIELD_EVENT_DELETE_BACKWARD:
_displayValueLabel->setText(String::createWithFormat("delete word")->getCString());
textField->setMaxLengthEnabled(true);
textField->setMaxLength(3);
2.9.3
textField->setPasswordEnabled(true);
textField->setPasswordStyleText("*");
2.9.4
textField->ignoreContentAdaptWithSize(false);
textField->setSize(Size(240,160));
textField->setTextHorizontalAlignment(TextHAlignment::CENTER);
textField->setTextVerticalAlignment(TextVAlignment::CENTER);
2.10.UILayout
2.10.1
// Create the layout
Layout* layout = Layout::create();
layout->setSize(Size(280,51); font-family:Arial; font-size:14px; line-height:26px"> Size backgroundSize = background->getSize();
layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
(backgroundSize.width - layout->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (widgetSize.height - backgroundSize.height) / 2.0f +
(backgroundSize.height - layout->getSize().height) / 2.0f));
_uiLayer->addChild(layout);//将Layout添加到场景
2.10.2在Layout中添加组件
button->setPosition(Point(button->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> layout->getSize().height - button->getSize().height / 2.0f));
layout->addChild(button);
Button* titleButton = Button::create("cocosui/backtotopnormal.png","cocosui/backtotoppressed.png");
titleButton->setTitleText("Title Button");
titleButton->setPosition(Point(layout->getSize().width / 2.0f,layout->getSize().height / 2.0f));
layout->addChild(titleButton);
Button* button_scale9 = Button::create("cocosui/button.png",51); font-family:Arial; font-size:14px; line-height:26px"> button_scale9->setScale9Enabled(true);
button_scale9->setSize(Size(100.0f,button_scale9->getVirtualRendererSize().height));
button_scale9->setPosition(Point(layout->getSize().width - button_scale9->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> button_scale9->getSize().height / 2.0f));
layout->addChild(button_scale9);
2.10.3
layout->setBackGroundColorType(LAYOUT_COLOR_SOLID);
layout->setBackGroundColor(Color3B(128,128,128));
2.10.4
layout->setBackGroundColorType(LAYOUT_COLOR_GRADIENT);
layout->setBackGroundColor(Color3B(64,64,64),Color3B(192,192,192));
2.10.5
layout->setClippingEnabled(true);
layout->setBackGroundImage("cocosui/Hello.png");
2.10.6
layout->setBackGroundImageScale9Enabled(true);
layout->setBackGroundImage("cocosui/green_edit.png");
2.10.7
// Create the layout
layout->setLayoutType(LAYOUT_LINEAR_VERTICAL); _uiLayer->addChild(layout);
LinearLayoutParameter* lp1 = LinearLayoutParameter::create();
button->setLayoutParameter(lp1);
lp1->setGravity(LINEAR_GraviTY_CENTER_HORIZONTAL);
lp1->setMargin(Margin(0.0f,5.0f,0.0f,10.0f));
LinearLayoutParameter* lp2 = LinearLayoutParameter::create();
titleButton->setLayoutParameter(lp2);
lp2->setGravity(LINEAR_GraviTY_CENTER_HORIZONTAL);
lp2->setMargin(Margin(0.0f,10.0f,51); font-family:Arial; font-size:14px; line-height:26px"> LinearLayoutParameter* lp3 = LinearLayoutParameter::create();
button_scale9->setLayoutParameter(lp3);
lp3->setGravity(LINEAR_GraviTY_CENTER_HORIZONTAL);
lp3->setMargin(Margin(0.0f,51); font-family:Arial; font-size:14px; line-height:26px">2.10.8
// Create the layout
layout->setLayoutType(LAYOUT_LINEAR_HORIZONTAL);
lp1->setGravity(LINEAR_GraviTY_CENTER_VERTICAL);
lp2->setGravity(LINEAR_GraviTY_CENTER_VERTICAL);
lp3->setGravity(LINEAR_GraviTY_CENTER_VERTICAL);
2.10.9
layout->setLayoutType(LAYOUT_RELATIVE);
layout->setBackGroundColor(Color3B::GREEN);
(backgroundSize.width - layout->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (widgetSize.height - backgroundSize.height) / 2.0f +
(backgroundSize.height - layout->getSize().height) / 2.0f));
// top left
Button* button_TopLeft = Button::create("cocosui/animationbuttonnormal.png",51); font-family:Arial; font-size:14px; line-height:26px"> "cocosui/animationbuttonpressed.png");
layout->addChild(button_TopLeft);
RelativeLayoutParameter* rp_TopLeft = RelativeLayoutParameter::create();
rp_TopLeft->setAlign(RELATIVE_ALIGN_PARENT_TOP_LEFT);
button_TopLeft->setLayoutParameter(rp_TopLeft);
// top center horizontal
Button* button_TopCenter = Button::create("cocosui/animationbuttonnormal.png",51); font-family:Arial; font-size:14px; line-height:26px"> "cocosui/animationbuttonpressed.png");
layout->addChild(button_TopCenter);
RelativeLayoutParameter* rp_TopCenter = RelativeLayoutParameter::create();
rp_TopCenter->setAlign(RELATIVE_ALIGN_PARENT_TOP_CENTER_HORIZONTAL);
button_TopCenter->setLayoutParameter(rp_TopCenter);
// top right
Button* button_TopRight = Button::create("cocosui/animationbuttonnormal.png",51); font-family:Arial; font-size:14px; line-height:26px"> layout->addChild(button_TopRight);
RelativeLayoutParameter* rp_TopRight = RelativeLayoutParameter::create();
rp_TopRight->setAlign(RELATIVE_ALIGN_PARENT_TOP_RIGHT);
button_TopRight->setLayoutParameter(rp_TopRight);
// left center
Button* button_LeftCenter = Button::create("cocosui/animationbuttonnormal.png",51); font-family:Arial; font-size:14px; line-height:26px"> layout->addChild(button_LeftCenter);
RelativeLayoutParameter* rp_LeftCenter = RelativeLayoutParameter::create();
rp_LeftCenter->setAlign(RELATIVE_ALIGN_PARENT_LEFT_CENTER_VERTICAL);
button_LeftCenter->setLayoutParameter(rp_LeftCenter);
// center
Button* buttonCenter = Button::create("cocosui/animationbuttonnormal.png",51); font-family:Arial; font-size:14px; line-height:26px"> "cocosui/animationbuttonpressed.png");
layout->addChild(buttonCenter);
RelativeLayoutParameter* rpCenter = RelativeLayoutParameter::create();
rpCenter->setAlign(RELATIVE_CENTER_IN_PARENT);
buttonCenter->setLayoutParameter(rpCenter);
// right center
Button* button_RightCenter = Button::create("cocosui/animationbuttonnormal.png",51); font-family:Arial; font-size:14px; line-height:26px"> "cocosui/animationbuttonpressed.png");
layout->addChild(button_RightCenter);
RelativeLayoutParameter* rp_RightCenter = RelativeLayoutParameter::create();
rp_RightCenter->setAlign(RELATIVE_ALIGN_PARENT_RIGHT_CENTER_VERTICAL);
button_RightCenter->setLayoutParameter(rp_RightCenter);
// left bottom
Button* button_LeftBottom = Button::create("cocosui/animationbuttonnormal.png",51); font-family:Arial; font-size:14px; line-height:26px"> layout->addChild(button_LeftBottom);
RelativeLayoutParameter* rp_LeftBottom = RelativeLayoutParameter::create();
rp_LeftBottom->setAlign(RELATIVE_ALIGN_PARENT_LEFT_BottOM);
button_LeftBottom->setLayoutParameter(rp_LeftBottom);
// bottom center
Button* button_BottomCenter = Button::create("cocosui/animationbuttonnormal.png",51); font-family:Arial; font-size:14px; line-height:26px"> layout->addChild(button_BottomCenter);
RelativeLayoutParameter* rp_BottomCenter = RelativeLayoutParameter::create();
rp_BottomCenter->setAlign(RELATIVE_ALIGN_PARENT_BottOM_CENTER_HORIZONTAL);
button_BottomCenter->setLayoutParameter(rp_BottomCenter);
// right bottom
Button* button_RightBottom = Button::create("cocosui/animationbuttonnormal.png",51); font-family:Arial; font-size:14px; line-height:26px"> layout->addChild(button_RightBottom);
RelativeLayoutParameter* rp_RightBottom = RelativeLayoutParameter::create();
rp_RightBottom->setAlign(RELATIVE_ALIGN_PARENT_RIGHT_BottOM);
button_RightBottom->setLayoutParameter(rp_RightBottom);
2.10.10
// Create the layout
ImageView* imageView_Center = ImageView::create("cocosui/scrollviewbg.png");
layout->addChild(imageView_Center);
RelativeLayoutParameter* rp_Center = RelativeLayoutParameter::create();
rp_Center->setRelativeName("rp_Center");
rp_Center->setAlign(RELATIVE_CENTER_IN_PARENT);
imageView_Center->setLayoutParameter(rp_Center);
// above center
ImageView* imageView_AboveCenter = ImageView::create("cocosui/switch-mask.png");
layout->addChild(imageView_AboveCenter);
RelativeLayoutParameter* rp_AboveCenter = RelativeLayoutParameter::create();
rp_AboveCenter->setRelativetoWidgetName("rp_Center");
rp_AboveCenter->setAlign(RELATIVE_LOCATION_ABOVE_CENTER);
imageView_AboveCenter->setLayoutParameter(rp_AboveCenter);
// below center
ImageView* imageView_BelowCenter = ImageView::create("cocosui/switch-mask.png");
layout->addChild(imageView_BelowCenter);
RelativeLayoutParameter* rp_BelowCenter = RelativeLayoutParameter::create();
rp_BelowCenter->setRelativetoWidgetName("rp_Center");
rp_BelowCenter->setAlign(RELATIVE_LOCATION_BELOW_CENTER);
imageView_BelowCenter->setLayoutParameter(rp_BelowCenter);
ImageView* imageView_LeftCenter = ImageView::create("cocosui/switch-mask.png");
layout->addChild(imageView_LeftCenter);
rp_LeftCenter->setRelativetoWidgetName("rp_Center");
rp_LeftCenter->setAlign(RELATIVE_LOCATION_LEFT_OF_CENTER);
imageView_LeftCenter->setLayoutParameter(rp_LeftCenter);
ImageView* imageView_RightCenter = ImageView::create("cocosui/switch-mask.png");
layout->addChild(imageView_RightCenter);
rp_RightCenter->setRelativetoWidgetName("rp_Center");
rp_RightCenter->setAlign(RELATIVE_LOCATION_RIGHT_OF_CENTER);
imageView_RightCenter->setLayoutParameter(rp_RightCenter);
2.11.UIScrollView
2.11.1 创建垂直滚动UI
// Create the scrollview by vertical
ui::ScrollView* scrollView = ui::ScrollView::create();
scrollView->setSize(Size(280.0f,150.0f));
Size backgroundSize = background->getContentSize();
scrollView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
(backgroundSize.width - scrollView->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (widgetSize.height - backgroundSize.height) / 2.0f +
(backgroundSize.height - scrollView->getSize().height) / 2.0f));
_uiLayer->addChild(scrollView);
float innerWidth = scrollView->getSize().width;
float innerHeight = scrollView->getSize().height + imageView->getSize().height;
scrollView->setInnerContainerSize(Size(innerWidth,innerHeight));
button->setPosition(Point(innerWidth / 2.0f,scrollView->getInnerContainerSize().height - button->getSize().height / 2.0f));
scrollView->addChild(button);
titleButton->setPosition(Point(innerWidth / 2.0f,button->getBottomInParent() - button->getSize().height));
scrollView->addChild(titleButton);
button_scale9->setPosition(Point(innerWidth / 2.0f,titleButton->getBottomInParent() - titleButton->getSize().height));
scrollView->addChild(button_scale9);
imageView->setPosition(Point(innerWidth / 2.0f,imageView->getSize().height / 2.0f));
scrollView->addChild(imageView);
2.11.2
// Create the scrollview by horizontal
scrollView->setBounceEnabled(true);
scrollView->setDirection(SCROLLVIEW_DIR_HORIZONTAL); scrollView->setInnerContainerSize(scrollView->getSize());
(backgroundSize.width - scrollView->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (widgetSize.height - backgroundSize.height) / 2.0f +
(backgroundSize.height - scrollView->getSize().height) / 2.0f));
float innerWidth = scrollView->getSize().width + imageView->getSize().width;
float innerHeight = scrollView->getSize().height; scrollView->getInnerContainerSize().height - button->getSize().height / 2.0f));
titleButton->setPosition(Point(button->getRightInParent() + button->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> button->getBottomInParent() - button->getSize().height / 2.0f));
button_scale9->setPosition(Point(titleButton->getRightInParent() + titleButton->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> titleButton->getBottomInParent() - titleButton->getSize().height / 2.0f));
scrollView->addChild(button_scale9);

imageView->setPosition(Point(innerWidth - imageView->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> button_scale9->getBottomInParent() - button_scale9->getSize().height / 2.0f));
scrollView->addChild(imageView);
2.11.3
// Create the dragpanel
scrollView->setDirection(SCROLLVIEW_DIR_BOTH);
scrollView->setTouchEnabled(true);
scrollView->setBounceEnabled(true);//反弹
scrollView->setBackGroundImageScale9Enabled(true);
scrollView->setBackGroundImage("cocosui/green_edit.png");
scrollView->setSize(Size(210,122.5));
ImageView* imageView = ImageView::create("Hello.png");
scrollView->addChild(imageView);
scrollView->setInnerContainerSize(imageView->getContentSize());
Size innerSize = scrollView->getInnerContainerSize();
imageView->setPosition(Point(innerSize.width / 2.0f,innerSize.height / 2.0f));
2.11.4
ui::ScrollView* sc = ui::ScrollView::create();
sc->setBackGroundColor(Color3B::GREEN);
sc->setBackGroundColorType(LAYOUT_COLOR_SOLID);
sc->setDirection(SCROLLVIEW_DIR_BOTH);
sc->setInnerContainerSize(Size(480,320));
sc->setSize(Size(100,100));
sc->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
(backgroundSize.width - sc->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (backgroundSize.height - sc->getSize().height) / 2.0f));
//减速
sc->scrollToPercentBothDirection(Point(50,50),1,true);
ImageView* iv = ImageView::create("cocosui/Hello.png");
iv->setPosition(Point(240,51); font-family:Arial; font-size:14px; line-height:26px"> sc->addChild(iv);
_uiLayer->addChild(sc);
2.12.UIPageView
// Create the page view
PageView* pageView = PageView::create();
pageView->setSize(Size(240.0f,130.0f));
pageView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
(backgroundSize.width - pageView->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (backgroundSize.height - pageView->getSize().height) / 2.0f));
for (int i = 0; i < 3; ++i)
Layout* layout = Layout::create();
layout->setSize(Size(240.0f,51); font-family:Arial; font-size:14px; line-height:26px"> ImageView* imageView = ImageView::create("cocosui/scrollviewbg.png");
imageView->setScale9Enabled(true);
imageView->setSize(Size(240,130));
imageView->setPosition(Point(layout->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> layout->addChild(imageView);
Text* label = Text::create(StringUtils::format("page %d",(i+1)),51); font-family:Arial; font-size:14px; line-height:26px"> label->setColor(Color3B(192,51); font-family:Arial; font-size:14px; line-height:26px"> label->setPosition(Point(layout->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> layout->addChild(label);
pageView->addPage(layout);
pageView->addEventListenerPageView(this,pagevieweventselector(UIPageViewTest::pageViewEvent));
_uiLayer->addChild(pageView);
2.12.2
void UIPageViewTest::pageViewEvent(Ref *pSender,PageViewEventType type)
case PAGEVIEW_EVENT_TURNING:
PageView* pageView = dynamic_cast<PageView*>(pSender);
_displayValueLabel->setText(CCString::createWithFormat("page = %ld",pageView->getCurPageIndex() + 1)->getCString());
}

2.13.UIListView
2.13.1
// create list view ex data
_array = Array::create();
CC_SAFE_RETAIN(_array);
for (int i = 0; i < 20; ++i)
__String* ccstr = __String::createWithFormat("listview_item_%d",i);
_array->addobject(ccstr);
// Create the list view ex
ListView* listView = ListView::create();
// set list view ex direction
listView->setDirection(SCROLLVIEW_DIR_VERTICAL);
listView->setTouchEnabled(true);
listView->setBounceEnabled(true);
listView->setBackGroundImage("cocosui/green_edit.png");
listView->setBackGroundImageScale9Enabled(true);
listView->setSize(Size(240,51); font-family:Arial; font-size:14px; line-height:26px"> listView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f +
(backgroundSize.width - listView->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (backgroundSize.height - listView->getSize().height) / 2.0f));
listView->addEventListenerListView(this,listvieweventselector(UIListViewTest_Vertical::selectedItemEvent));
_uiLayer->addChild(listView);
// create model
Button* default_button = Button::create("cocosui/backtotoppressed.png",51); font-family:Arial; font-size:14px; line-height:26px"> default_button->setName("Title Button");
Layout* default_item = Layout::create();
default_item->setTouchEnabled(true);
default_item->setSize(default_button->getSize());
default_button->setPosition(Point(default_item->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> default_item->getSize().height / 2.0f));
default_item->addChild(default_button);
// set model
listView->setItemmodel(default_item);
// add default item
ssize_t count = _array->count();
for (int i = 0; i < count / 4; ++i)
listView->pushBackDefaultItem();
// insert default item
listView->insertDefaultItem(0);
// add custom item
Button* custom_button = Button::create("cocosui/button.png",51); font-family:Arial; font-size:14px; line-height:26px"> custom_button->setName("Title Button");
custom_button->setScale9Enabled(true);
custom_button->setSize(default_button->getSize());
Layout *custom_item = Layout::create();
custom_item->setSize(custom_button->getSize());
custom_button->setPosition(Point(custom_item->getSize().width / 2.0f,custom_item->getSize().height / 2.0f));
custom_item->addChild(custom_button);
listView->pushBackCustomItem(custom_item);
// insert custom item
Vector<Widget*>& items = listView->getItems();
ssize_t items_count = items.size();
listView->insertCustomItem(custom_item,items_count);
// set item data
items_count = items.size();
for (int i = 0; i < items_count; ++i)
Widget* item = listView->getItem(i);
Button* button = static_cast<Button*>(item->getChildByName("Title Button"));
ssize_t index = listView->getIndex(item);
button->setTitleText(static_cast<__String*>(_array->getobjectAtIndex(index))->getCString());
// remove last item
listView->removeLastItem();
// remove item by index
listView->removeItem(items_count - 1);
// set all items layout gravity
listView->setGravity(LISTVIEW_GraviTY_CENTER_VERTICAL);
// set items margin
listView->setItemsMargin(2.0f);
2.13.2
void UIListViewTest_Vertical::selectedItemEvent(Ref *pSender,ListViewEventType type)
case cocos2d::ui::LISTVIEW_ONSELECTEDITEM_START:
ListView* listView = static_cast<ListView*>(pSender);
CC_UNUSED_ParaM(listView);
cclOG("select child start index = %ld",listView->getCurSelectedindex());
case cocos2d::ui::LISTVIEW_ONSELECTEDITEM_END:
cclOG("select child end index = %ld",51); font-family:Arial; font-size:14px; line-height:26px">2.13.3
listView->setDirection(SCROLLVIEW_DIR_HORIZONTAL);
2.14.UIRichText
_richText = RichText::create();
_richText->ignoreContentAdaptWithSize(false);
_richText->setSize(Size(100,51); font-family:Arial; font-size:14px; line-height:26px"> RichElementText* re1 = RichElementText::create(1,Color3B::WHITE,255,"This color is white. ","Helvetica",10);
RichElementText* re2 = RichElementText::create(2,Color3B::YELLOW,"And this is yellow. ",51); font-family:Arial; font-size:14px; line-height:26px"> RichElementText* re3 = RichElementText::create(3,Color3B::BLUE,"This one is blue. ",51); font-family:Arial; font-size:14px; line-height:26px"> RichElementText* re4 = RichElementText::create(4,Color3B::GREEN,"And green. ",51); font-family:Arial; font-size:14px; line-height:26px"> RichElementText* re5 = RichElementText::create(5,Color3B::RED,"Last one is red ",51); font-family:Arial; font-size:14px; line-height:26px"> RichElementimage* reimg = RichElementimage::create(6,"cocosui/sliderballnormal.png");
cocostudio::ArmatureDataManager::getInstance()->addArmatureFileInfo("cocosui/100/100.ExportJson");
cocostudio::Armature *pAr = cocostudio::Armature::create("100");
pAr->getAnimation()->play("Animation1");
RichElementCustomNode* recustom = RichElementCustomNode::create(1,pAr);
RichElementText* re6 = RichElementText::create(7,Color3B::ORANGE,"Have fun!! ",51); font-family:Arial; font-size:14px; line-height:26px"> _richText->pushBackElement(re1);
_richText->insertElement(re2,1);
_richText->pushBackElement(re3);
_richText->pushBackElement(re4);
_richText->pushBackElement(re5);
_richText->insertElement(reimg,2);
_richText->pushBackElement(recustom);
_richText->pushBackElement(re6);
_richText->setPosition(Point(widgetSize.width / 2,widgetSize.height / 2));
_richText->setLocalZOrder(10);
_widget->addChild(_richText);
三、在Cocosstudio的UI编辑器中获取组件对象
3.1使用UI编辑器
3.2导出UI文件
3.3在Cocos2d-x中加载UI文件
3.4获取UI层中的子对象
四、UI组件详解
4.1使用UIButton
4.1.1 载入UIButton文件
bool UIButtonTest_Editor::init()
if (UIScene_Editor::init())
_layout = static_cast<Layout*>(cocostudio::GUIReader::getInstance()->widgetFromJsonFile("cocosui/UIEditorTest/UIButton_Editor/UIButton_Editor_1.json"));
_touchGroup->addChild(_layout);
Size screenSize = CCDirector::getInstance()->getWinSize();
Size rootSize = _layout->getSize();
_touchGroup->setPosition(Point((screenSize.width - rootSize.width) / 2,51); font-family:Arial; font-size:14px; line-height:26px"> (screenSize.height - rootSize.height) / 2));
Layout* root = static_cast<Layout*>(_layout->getChildByName("root_Panel"));
Text* back_label = static_cast<Text*>(Helper::seekWidgetByName(root,"back"));
back_label->addTouchEventListener(this,toucheventselector(UIScene_Editor::toGUIEditorTestScene));
_sceneTitle = static_cast<Text*>(Helper::seekWidgetByName(root,"UItest"));
Button* button = static_cast<Button*>(Helper::seekWidgetByName(root,"Button_123")); Button* title_button = static_cast<Button*>(Helper::seekWidgetByName(root,"Button_126"));
title_button->addTouchEventListener(this,51); font-family:Arial; font-size:14px; line-height:26px"> Button* scale9_button = static_cast<Button*>(Helper::seekWidgetByName(root,"Button_129"));
scale9_button->addTouchEventListener(this,51); font-family:Arial; font-size:14px; line-height:26px"> _displayValueLabel = Text::create();
_displayValueLabel->setFontName("fonts/Marker Felt.ttf");
_displayValueLabel->setFontSize(30);
_displayValueLabel->setText("No event");
_displayValueLabel->setPosition(Point(_layout->getSize().width / 2,51); font-family:Arial; font-size:14px; line-height:26px"> _layout->getSize().height - _displayValueLabel->getSize().height * 1.75f));
_touchGroup->addChild(_displayValueLabel);
return true;
return false;
void UIButtonTest_Editor::touchEvent(Ref *pSender,51); font-family:Arial; font-size:14px; line-height:26px"> case TOUCH_EVENT_BEGAN:
_displayValueLabel->setText("Touch Down");
_displayValueLabel->setText("Touch Moved");
_displayValueLabel->setText("Touch Ended");
_displayValueLabel->setText("Touch Canceled");
}

cocos2d-x – Cocos2dx:Sprite3D不会渲染到纹理

cocos2d-x – Cocos2dx:Sprite3D不会渲染到纹理

我使用RenderTexture将包含其所有节点的图层渲染到纹理,然后在该纹理上应用OpenGL着色器以创建后期处理效果.除Sprite3D和Billboard节点外,它的工作正常.它已在他们的论坛上被问过几次而没有任何回应.我想知道是否有人让这个工作.

这是一个例子:

Layer* gameLayer = Layer::create();
this->addChild(gameLayer,0);

auto dir = Director::getInstance()->getWinSize();
Camera *camera = Camera::createPerspective(60,(GLfloat)dir.width / dir.height,1,1000);
camera->setPosition3D(Vec3(0,100,100));
camera->lookAt(Vec3(0,0),Vec3(0,0));
gameLayer->addChild(camera); //add camera to the scene

// You''ll get a NULL camera inside BillBoard::calculateBillbaordTransform() function
// if you call visit()
/*auto billboard = BillBoard::create("cocos2d-x.png",BillBoard::Mode::VIEW_POINT_ORIENTED);
billboard->setPosition(Vec2(VisibleRect::center().x,VisibleRect::center().y));
gameLayer->addChild(billboard,100);*/

// This one won''t render into the texture
Sprite3D* sprite3D = Sprite3D::create("blend_test/character_3_animations_test.c3b");
sprite3D->setScale(5.0f); //sets the object scale in float
sprite3D->setRotation3D(Vec3(0.0f,0.0f,0.0f));
//sprite3D->setPosition3D(Vec3(VisibleRect::center().x,VisibleRect::center().y,0.0f)); //sets sprite position
sprite3D->setPosition(Vec2(VisibleRect::center().x,VisibleRect::center().y));
gameLayer->addChild(sprite3D,1); //adds sprite to scene,z-index: 1

// This one works just fine and appears black and white as expected
// in the resulting texture
Sprite* sprite2D = Sprite::create("cocos2d-x.png");
sprite2D->setPosition(Vec2(VisibleRect::center().x,VisibleRect::center().y));
gameLayer->addChild(sprite2D);

// Black and white OpenGL shader
GLProgram* glProgram = GLProgram::createWithFilenames("shaders/gray.vert","shaders/gray.frag");
glProgram->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_COLOR,GLProgram::VERTEX_ATTRIB_POSITION);
glProgram->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_POSITION,GLProgram::VERTEX_ATTRIB_COLOR);
glProgram->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_TEX_COORD,GLProgram::VERTEX_ATTRIB_TEX_COORD);
glProgram->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_TEX_COORD1,GLProgram::VERTEX_ATTRIB_TEX_COORD1);
glProgram->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_TEX_COORD2,GLProgram::VERTEX_ATTRIB_TEX_COORD2);
glProgram->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_TEX_COORD3,GLProgram::VERTEX_ATTRIB_TEX_COORD3);
glProgram->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_norMAL,GLProgram::VERTEX_ATTRIB_norMAL);
glProgram->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_BLEND_WEIGHT,GLProgram::VERTEX_ATTRIB_BLEND_WEIGHT);
glProgram->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_BLEND_INDEX,GLProgram::VERTEX_ATTRIB_BLEND_INDEX);
glProgram->link();
glProgram->updateUniforms();

RenderTexture* renderTexture = RenderTexture::create(VisibleRect::width(),VisibleRect::height());
renderTexture->retain();

Sprite* ppSprite = Sprite::createWithTexture(renderTexture->getSprite()->getTexture());
ppSprite->setTextureRect(Rect(0,ppSprite->getTexture()->getContentSize().width,ppSprite->getTexture()->getContentSize().height));
ppSprite->setAnchorPoint(Point::ZERO);
ppSprite->setPosition(Point::ZERO);
ppSprite->setFlippedY(true);
ppSprite->setGLProgram(glProgram);
this->addChild(ppSprite,100);

renderTexture->beginWithClear(0.0f,0.0f);
auto renderer = _director->getRenderer();
auto& parentTransform = _director->getMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
gameLayer->visit(renderer,parentTransform,true);
//gameLayer->visit();
renderTexture->end();

ppSprite->setTexture(renderTexture->getSprite()->getTexture());

解决方法

Cocos2d-x v3.11.1(本文截至本文)及以下版本不能正确支持带Sprite3D的RenderTextures,因为有明显的深度缓冲区错误.

这个bug有一个GitHub issue.但现在存在一种解决方法:

...
sprite3D->setForce2DQueue(true); // puts your Sprite3D on same render queue as the RenderTexture. More info below.
...
auto rt = RenderTexture::create(1280,720,Texture2D::PixelFormat::RGBA8888,GL_DEPTH24_STENCIL8); // By default a depth buffer isn''t created
rt->setKeepMatrix(true); // required
...
...
rt->beginWithClear(0,1); // required,clears the depth buffer

此外,需要对RenderTexture.cpp进行更改.这修复了Cocos2d-x中的清除深度缓冲区错误.

void RenderTexture::onClear()
{
    // save clear color
    GLfloat oldClearColor[4] = {0.0f};
    GLfloat oldDepthClearValue = 0.0f;
    GLint oldStencilClearValue = 0;
    GLboolean oldDepthWrite = GL_FALSE;

    // backup and set
    if (_clearFlags & GL_COLOR_BUFFER_BIT)
    {
        glGetFloatv(GL_COLOR_CLEAR_VALUE,oldClearColor);
        glClearColor(_clearColor.r,_clearColor.g,_clearColor.b,_clearColor.a);
    }

    if (_clearFlags & GL_DEPTH_BUFFER_BIT)
    {
        glGetFloatv(GL_DEPTH_CLEAR_VALUE,&oldDepthClearValue);
        glClearDepth(_clearDepth);

        glGetBooleanv(GL_DEPTH_WRITEMASK,&oldDepthWrite);
        glDepthMask(true);
    }

    if (_clearFlags & GL_STENCIL_BUFFER_BIT)
    {
        glGetIntegerv(GL_STENCIL_CLEAR_VALUE,&oldStencilClearValue);
        glClearStencil(_clearStencil);
    }

    // clear
    glClear(_clearFlags);

    // restore
    if (_clearFlags & GL_COLOR_BUFFER_BIT)
    {
        glClearColor(oldClearColor[0],oldClearColor[1],oldClearColor[2],oldClearColor[3]);
    }
    if (_clearFlags & GL_DEPTH_BUFFER_BIT)
    {
        glClearDepth(oldDepthClearValue);
        glDepthMask(oldDepthWrite);
    }
    if (_clearFlags & GL_STENCIL_BUFFER_BIT)
    {
        glClearStencil(oldStencilClearValue);
    }
}

有关详细信息,请参见the issue.我还做了一个example gist的解决方法.截图如下.

我不确定广告牌,但这种解决方法也可能解决它.

Example gist screenshot

有关Cocos2d-x渲染队列的信息:

Sprite3D需要与RenderTexture位于同一渲染队列中. Cocos2d-x(截至v3.7左右)现在有5个渲染队列:

>全球Z订单< 0
> 3D不透明
> 3D透明
>全球Z订单== 0(2D默认)
>全球Z订单> 0

您可以使用setGlobalZOrder(1)将Sprite3D和RenderTexture放在最后一个队列中,或者只使用sprite3D-> setForce2DQueue(true)将Sprite3D放入2D队列中.

我们今天的关于Cocos2dx:cocostudio 2.0 Text文本控件cocos2dx文档的分享已经告一段落,感谢您的关注,如果您想了解更多关于(7) cocos2dx 自定义动画 和 使用cocostudio动画、Cocos Studio和Cocos2d-x版本对应关系 附1.6Cocostudio版本下载地址、Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大全Cocos2d-x3.2使用、cocos2d-x – Cocos2dx:Sprite3D不会渲染到纹理的相关信息,请在本站查询。

本文标签: