1621人阅读
cocos2d-x（36）
cocostudio3.10 已经帮我们做好了TextField控件，提供了触摸事件和一些常用API，已经不用向原来自己写一个TextFied了，但是还没有实现光标，下面我们在这个控件的基础上面来加入光标的功能。
CursorTextField .h
#ifndef CursorTextField_h
#define CursorTextField_h
#include"cocos2d.h"
#include"cocostudio/CocoStudio.h"
#include"ui/CocosGUI.h"
using namespace cocos2d;
using namespace
using namespace
class CursorTextField :public Node
CursorTextField();
static Node* createWithTextField(TextField *text,const std::string &TTFpath,int fontSize);
bool init(TextField *text, const std::string &TTFpath, int fontSize);
void initTextField(TextField *text, const std::string &TTFpath, int fontSize);
void purge();
void addCursorSprite();
void textFiledEvent(Ref *pSender, TextField::EventType type);
int getContentWidth();
TextField* m_textF
std::string m_ttfP
int m_FontS
Sprite* m_cursorS
Action* m_cursorA
CursorTextField .cpp
#include"CursorTextField.h"
CursorTextField()
m_textField = NULL;
m_cursorSprite = NULL;
m_cursorAction = NULL;
Node* CursorTextField(TextField *text, const std &TTFpath, int fontSize)
auto ref = new CursorTextF
if (ref &&ref-&init(text, TTFpath, fontSize))
ref-&autorelease();
else CC_SAFE_DELETE(ref);
bool CursorTextField(TextField *text, const std &TTFpath, int fontSize)
initTextField(text, TTFpath, fontSize);
addCursorSprite();
m_textField-&addEventListener(CC_CALLBACK_2(CursorTextField,this));
return true;
void CursorTextField(TextField *text, const std &TTFpath, int fontSize)
m_textField =
m_ttfPath = TTF
m_FontSize = fontS
int CursorTextField()
auto label = Label(m_textField-&getString(), m_ttfPath, m_FontSize);
auto width = label-&getContentSize().
return m_textField-&getPosition().x+
void CursorTextField(Ref *pSender, TextField type)
switch (type)
case TextField:
m_cursorSprite-&setVisible(true);
m_cursorSprite-&setPositionX(getContentWidth());
case TextField:
m_cursorSprite-&setVisible(false);
case TextField:
m_cursorSprite-&setVisible(true);
m_cursorSprite-&setPositionX(getContentWidth());
case TextField:
m_cursorSprite-&setVisible(true);
m_cursorSprite-&setPositionX(getContentWidth());
void CursorTextField()
int column = 2;
int height = 20;
int pData[50][2];
for (int i = 0; i & i++)
for (int j = 0; j & j++)
pData[i][j] = 0
Texture2D* texture = new Texture2D();
//指针，指针长度，像素类型，像素宽度，高度，内容大小
texture-&initWithData(pData, 20, Texture2D::PixelFormat::RGB888, 1, m_textField-&getFontSize(),CCSizeMake(column, height));
m_cursorSprite = Sprite::createWithTexture(texture);
m_cursorSprite-&setPositionY(m_textField-&Node::getPositionY()+2);
texture-&autorelease();
addChild(m_cursorSprite);
m_cursorSprite-&setVisible(false);
m_cursorAction = RepeatForever::create(Sequence::create(FadeOut::create(0.7f), FadeIn::create(0.7f),NULL));
m_cursorSprite-&runAction(m_cursorAction);
m_TextUsernameField= CursorTextField(m_TextUsername, "fonts/kaiti.ttf", m_TextUsername-&getFontSize());
addChild(m_TextUsernameField);
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：27054次
排名：千里之外
原创：41篇
(1)(1)(1)(2)(1)(3)(3)(1)(5)(5)(3)(2)(13)(5)标签：至少1个，最多5个
目前正在和实训的小组成员一起做一款手机2D游戏，我们采用了Cocos2d-x进行开发。之前虽然早有耳闻，这次却是第一次认真地学习和使用Cocos2d-x。最开始的几天就是在不停的看文档和爬坑。其中一个坑就是Cocostudio这货。官网的文档滞后而且不够详细，为了弄清楚，借鉴了很多博客，也阅读了示例代码。
本人Cocos2d-x的版本是3.1，Cocostudio的版本是1.5.
Cocostudio目前的功能包括UI编辑器、动画编辑器、场景编辑器和数据编辑器。数据编辑器没有涉及到，就不说了。剩下三者中主要讲下导入UI编辑器的资源。
UI编辑器导出的文件包括一个.ExportJson文件，一个.plist文件和一个.png文件。Cocostudio中文官网中说的是TouchGroup，英文官网中是UILayer，可是都已经不存在了。UILayer变成了Layer，现在也可以不创建Layer，直接加到场景上面。所以代码可以这样：
Node *pNode = GUIReader::getInstance()-&widgetFromJsonFile("test.ExportJson");
this-&addChild(pNode);
下面就可以用getChildByTag来获取组件了。不过getChildByTag貌似只能按照树的结构一层层照下来，显得很麻烦，而且不能按照名字来取。所以，现在可以用ui中的Helper直接从树中获取组件，用name或者tag。但seekWidgetByTag和seekWidgetByName的第一个参数是Widget类型，需要将pNode转成Widget类型。（从.ExportJson文件可以看出来，pNode本来就是一个Widget类型的树）
Button *button = (Button*)(ui::Helper::seekWidgetByName(pNode, "button"));
顺便附上绑定事件监听的代码，使看到的人免去寻找之苦。
button-&addTouchEventListener(CC_CALLBACK_2(MainScene::touchEvent, this));
touchEvent是自己写的方法。这个方法大致是如下用法，注意pSender和type的使用。
void SingleMenuScene::selectEvent(Ref *pSender, Widget::TouchEventType type)
switch(type)
case Widget::TouchEventType::ENDED:
GameSetting::Map map = GameSetting::Map::DEFAULT;
if(pSender == defaultBtn)
map = GameSetting::Map::DEFAULT;
else if(pSender == snowBtn)
map = GameSetting::Map::SNOW;
Scene *game = BattleScene::createScene(map);
TransitionScene *transition = TransitionFade::create(0.5, game);
Director::getInstance()-&replaceScene(transition);
导入动画编辑器的动画的代码如下：
CCArmatureDataManager::sharedArmatureDataManager()-&addArmatureFileInfo("Animation0.png","Animation0.plist","Animation.ExportJson");
CCArmature *armature = CCArmature::create("Animation");
armature-&getAnimation()-&playByIndex(0);
armature-&setScale(0.5f);
armature-&setPosition(ccp(visibleSize.width * 0.5, visibleSize.height * 0.5));
this-&addChild(armature);
导入场景编辑器的场景的代码如下：
Node* pNode = SceneReader::getInstance()-&createNodeWithSceneFile("scene.ExportJson");
this-&addChild(pNode);
这个读出的Node貌似不能转成Widget，因为它不仅包括UI组件还有动画等资源。获取组件和绑定事件监听可以这样写：
ComRender *render = (ComRender*)(pNode-&getChildByTag(10010)-&getComponent("GUIComponent"));
Widget *widget = (Widget*)(render-&getNode());
widget-&addTouchEventListener(CC_CALLBACK_2(MainScene::touchEvent, this));
3 收藏&&|&&2
你可能感兴趣的文章
3 收藏，1.8k
分享到微博？
技术专栏，帮你记录编程中的点滴，提升你对技术的理解收藏感兴趣的文章，丰富自己的知识库
明天提醒我
我要该，理由是：&&&&&&&&&&&
详细教程：
Table of Contents
1&游戏中的 UI
CocoStudio 是专门针 对 Cocos2d-x 而设计的一套可视化编辑工具，它能与Cocos2d-x 无缝的集成。对美工而言，可以使用它来设计界面，对开发者而言，可以通过后台编写代码处理复杂的游戏逻辑，使得游戏 UI 的界面与逻辑相分离，从而提高开发效率。
1.1&基于 Cocos2d-x 的 UI 使用现状分析
过去！在 Cocos2d-x 中使用控件我们需要根据自己的实际情况一个个封装，因此也&积累&并重用了一些基本控件，一个以 CCControl 为基本的控件集，之所以说是控件集，是因为里面所实现的控件都是独立的，之间并没有关联，每个控件都是一个层，这种管理方式与 Cocos2d-x 本身基于 CCNode 的管理方式，并没有明显区别，也因此，就 &UI控件& 来说，它们少了一个基本且必要的 &特性&。
没有统一的关系结构设计与层次关系
没有统一的触摸实现机制，从而导致，在复杂 UI 情况下，处理触摸变得异常麻烦，如多个控件的依赖于遮挡关系，依赖关系可以表现为：我们的父控件或层隐藏了，但仍然能接收到触摸事件，而遮挡关系则表现为：由于控件直接只是处理自己的逻辑，而不能判断是否在它的上层，已经存在接受触摸事件的操作，从而导致一些逻辑上的处理错误
缺少一些常用控件，如复选框等基本功能
以上都是在我们在开发中所遇到的实际问题，由于 CCControl 机制的限制，也导致了在实际使用过程中的不便，而在 CocoStudio 中，解决了先前所言的各种不便，重新设计了一套独立的 UI 系统，自己的架构，自己的管理方式，并且提供了丰富的基本控件且易于使用。
1.2&如何在游戏中使用 CocoStudio UI 框架
我们将使用 CocoStudio UI 编辑器完成一个简单的功能：设计一个界面，并在其上放置两个控件，一个按钮，一个图片框，通过点击按钮去控制图片框的放大显示。
UI 编辑器使用的是当前的最新版本 0.2.4，你可以从&&获取最新的安装文件（包括了所有需要的文件，并且提供了相应的例子程序，集成在 TestCpp 中）。 工具新建工程与导出资源文件同一样，可以参考。
在编辑器中创建界面步骤：
打开 CocoStudio UI 编辑器，创建一个新的项目（例：CsUi 项目）
在新项目默认显示一个层，我们在在左侧拖动所需要的控件，添加到层上
这里我们选择了一图片框与一个按钮（根据自己的实际需要选择添加控件）
选择按钮控件，并在属性视图中，设置属性启用&交互&选项
导出我们的 UI 界面资源
导出了几个资源文件在项目 &CsUi&目录的 Export/CsUi_1 中，包含三个导出的资源文件 ：CsUi_1.ExportJson, CsUi0.plist, CsUi0.png
在上面的操作中，我们使用了 UI 编辑器编辑创建了一个 UI 界面，接下来便是将其添加到我们的项目中去并使用。 在程序中使用界面资源文件：
CocoGUILIB 将集成在 Cocos2d-x 2.1.4 之后的版本内,&&可以下载最新的版本使用，使用方式同 extensions 的其它扩展同样，具体见 TestCpp 例子。
我们创建了一个项目，并且导入了 CocoGUILIB 源代码，将导出的 UI 资源文件夹 &CsUi_1&P 加入项目资源目录： Resources/CsUi_1
编写测试场景，使用 UI 控件完成功能，其代码如下：
// TestUI.cpp 文件内容
#include"TestUI.h"
CCScene*TestUI::scene(){
CCScene* scene =CCScene::create();
CCLayer* layer =TestUI::create();
scene-&addChild(layer);
return scene;
boolTestUI::init(){
bool bRef =false;
CC_BREAK_IF(!CCLayer::init());
// 初始化当前场景 UI 系统
COCOUISYSTEM-&resetSystem(this);
// 加载 UI 资源文件，并添加到当前场景
COCOUISYSTEM-&getCurScene()-&addWidget(COCOUISYSTEM-&createWidgetFromFileWithAdapt_json("CsUi_1/CsUi_1.ExportJson",true, rue));
// 获取按钮控件
cs::CocoButton* button =(cs::CocoButton*)(COCOUISYSTEM-&getWidgetByName("Button"));
// 为按钮添加点击事件
button-&addReleaseEvent(this, coco_releaseselector(TestUI::coButtonCallback));
bRef =true;
}while(0);
return bRef;
voidTestUI::coButtonCallback(CCObject* pSender){
// 获取图片框控件
cs::CocoImageView* image =(cs::CocoImageView*) COCOUISYSTEM-&getWidgetByName("ImageView");
// 我们将图片放大到 1.5 倍，以便观察效果
image-&setScale(1.5f);
// ################ 补充说明 #################
// 在 最新的 版本使用了新的 API 与调用方式，0.2 版本之后，新版重写 init 方法与回调函数如下
boolTestUI::init(){
bool bRef =false;
CC_BREAK_IF(!CCLayer::init());
UILayer* ul =UILayer::create();
// 设置 UI 层的tag
this-&addChild(ul,0,100);
ul-&addWidget(CCUIHELPER-&createWidgetFromJsonFile("CsUi_1/CsUi_1.ExportJson"));
UIButton* btn =dynamic_cast&UIButton*&(ul-&getWidgetByName("Button"));
btn-&addReleaseEvent(this, coco_releaseselector(TestUI::coButtonCallback));
bRef =true;
}while(0);
return bRef;
voidTestUI::coButtonCallback(CCObject* pSender){
// 获取图片框控件
UILayer* ul =dynamic_cast&UILayer*&(this-&getChildByTag(100));
UIImageView* image =dynamic_cast&UIImageView*&(ul-&getWidgetByName("ImageView"));
// 我们将图片放大到 1.5 倍，以便观察效果
image-&setScale(1.5f);
如上代码运行，通过点击按钮，使得图片放大。&请注意不同版本之间的 API 的改变。包括后文的说明，与官方使用手册
1.3&CocoUI 框架基本组成
通过上面的例子，我们能通过 CocoStudio 提供的 UI 编辑器设计界面，并通过后台处理代码编写游戏逻辑。在 CocoUI 框架中，使用 &CocoWidget& 作为基本组成元素，其功能正如在 Cocos2d-x 中的 CCNode，所有的控件都继承自 &CocoWidget& ，而这所有的 widget 都由 &UIScene& 作为根，由他开始管理，我们可以通过 &COCOUISYSTEM-&getCurScene()& 获取到当前的 UIScene，当然在使用之前需要通过 &COCOUISYSTEM-&resetSystem(this);& 进行初始化工作。得到了 UIScene，我们就能在其中添加 widget 了。COCOUISYSTEM 同样为我们提供了从 UI 编辑器资源导入 widget 的功能，这使得 UI 界面的设计与逻辑相分离。 而 &COCOUISYSTEM& (这是一个宏，展开为 &cs::UISystem::shareSystem()&)作为 CocoUI 框架的管理者，返回 &UISystem& 对象 ，它不仅管理着 &UIScene&，还包含着其它必要的特性，比如触摸机制的实现，在 UISystem 中定义了 &InputLayer* m_pInputL& 属性; , 由 InputLayer 统一接受触摸事件并处理，这样做的好处显而易见，通过内部控制灵活的处理各控件的点击操作，添加各种判断等都可以在此统一完成。
2&CocoUI 框架
以上简单的例子，只是简单的介绍了 CocoUI 的使用方法和其运行机制。当然，在 CocoUI 中还提供了很多功能更为丰富的控件，可以关注官方的 &UI CocoGUI使用方法手册&&，在这里非常详细的介绍了各个控件的使用方法及其注意事项，包括添加事件，内存管理，UI 动画使用，UI 控件状态控制，纹理缓存，以及非常重要的 &多分辨率适配& 方案。
（注：关于其它控件的使用，将会在后续文章介绍）
阅读(...) 评论()主题 : Cocos Studio 编辑器中 控件 Text 和TextField 不显示内容
级别: 新手上路
可可豆: 47 CB
威望: 47 点
在线时间: 3(时)
发自: Web Page
Cocos Studio 编辑器中 控件 Text 和TextField 不显示内容&&&
其他的显示正常，就文本和文本框 内容显示不出来，在真机上测试可以显示，就是编辑器和自带的模拟器里，怎么解决    Text就是个点，TextField就是个透明的框，Button就只有按钮也不显示上面的文本内容，也不是我设置的问题，默认托进去就是这样，也没有把它调整成不可见，更换内容也不行，试了studio 2.2.1 、 v2.1.5 、 v2.1 都试了，都是这样，还是我的Mac有问题，可是Fnt Text Label就没问题，也能显示   可以看到，当我给Text或者TextField 导入一个ttf字体文件的话，它就立马能显示出来了，可是我不能每添加一个Text控件就添加一次字体文件吧，我看很多视频上也是直接拖进去就显示的，这说明可能默认字体文件缺失了，Fnt Text Label就没问题，拉进去也有默认的字体资源，可是我重装好多次还是这个样子，不知道是不是我的Mac哪里字体或者语言文件的问题？求助啊，急啊，求帮忙 
图片:1.jpg
图片:2.jpg
图片:3.jpg
图片:4.jpg
级别: 新手上路
可可豆: 47 CB
威望: 47 点
在线时间: 3(时)
发自: Web Page
快来人啊，急急急啊
级别: 天使
UID: 432850
发帖: 34758
可可豆: 335461 CB
威望: 335459 点
在线时间: 1063(时)
发自: Web Page
回 1楼(LoadingSong) 的帖子
你是就拖了一个text控件，没有修改其他的吗，例如：可见性？
论坛关注较少，若还有后续疑问请去提问
级别: 新手上路
可可豆: 47 CB
威望: 47 点
在线时间: 3(时)
发自: Web Page
回 2楼(DDDigua) 的帖子
没有，默认就是这样
级别: 新手上路
可可豆: 206 CB
威望: 206 点
在线时间: 121(时)
发自: Web Page
回 3楼(LoadingSong) 的帖子
你需要修改控件的属性
级别: 天使
UID: 432850
发帖: 34758
可可豆: 335461 CB
威望: 335459 点
在线时间: 1063(时)
发自: Web Page
回 3楼(LoadingSong) 的帖子
你把工程传给我
论坛关注较少，若还有后续疑问请去提问
级别: 新手上路
UID: 502877
可可豆: 7 CB
威望: 5 点
在线时间: 3(时)
发自: Web Page
同求！！！如何解决
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版