编辑器工具,Cocos2d-x

如何使用 CocoStudio UI 编辑器实现《乱斗堂》设置界面

1 游戏中必不可少的 UI 元素



./cocostudioUI/image04.png

一个成功的游戏离不开友好的用户体验,而用户体验则取决于功能是否合理,界面是否美观等因素,除了游戏的核心玩法之外,游戏中的各种“配置功能”也是必不可缺的,更准确的说,游戏中存在那么些必不可少的 UI 元素。

上图所示是近期非常火爆的游戏《乱斗堂》的截图,内容是其“配置界面”,如果要实现这样一个“配置界面”,如果是你,你该从何下手!首先要有素材(当然请美工制作了),然后我们编写代码,这样一个界面我们可以用一个层来实现,加载各种图片素材,逐一添加至层。其实,这都没什么,只是你需要手动设置坐标,不断的运行调试,才能达到最终想要的效果而已。效果出来了,实现具体的功能,点击操作该如何实现,如果所有显示的图片都是精灵,那么你需要做触摸处理,判断点击有效否,然后可能需要修改精灵图片(不同的点击效果),聪明一点的做法是实用 CCMenu 来实现点击功能,但如此可能会引入其它问题,CCMenu 的触摸优先级别很高,以至于多层 UI 的情况,处理起来变得繁杂。而更聪明一点的做法,就是设计一套 UI 系统,来满足各种需求!

我们在编写游戏之前还需要实现一套自己的 UI 系统?当然不是,即便是 Cocos2d 的第一个 python 版本,也不是一夕而就的,而是开发多个游戏之后总结、规范、封装重用之后的框架,而 UI 系统也符合这么个客观规律。都是为了解决实际开发过程中遇到的问题,重用相同的功能。简化我们的开发。

下面介绍如何使用 CocoStudio 的 UI 编辑器来帮助我们实现这样一个“配置界面”,并且实现其配置功能。

2 使用 CocoStudio UI 编辑器设计配置界面

2.1 首先建立主配置界面:

  1. 安装好 CocoStudio 程序,并准备好所需要的素材
    QQ截图20130724172821
  2. 建立新的项目,命名“ChaosFight”,设置分辨率(根据实际需要),这里手动填写分辨率。
  3. 导入游戏的素材到项目,在界面添加图片框控件,显示背景./cocostudioUI/image06.png
  4. 根据需要添加控件,在这个主界面上我们添加了,一个图片框,下面四个文本按钮,再下面一排四个图片按钮,最下面是两个文本按钮和一个文本框(文本域)。
    ./cocostudioUI/image07.png
  5. 在编辑时,我们需要注意以下几点:
    • 设置图片按钮之时,可以设置禁用时显示的图片。所有的可点击操作的控件,需要启用“交互”属性。
    • 设置按钮属性 默认图片 与 点击效果图 的图片相同(或者不同,按下效果图如果不设置,实际操作按下也不显示,空白)

    QQ截图20130724172132
  6. 导出各部分资源文件

2.2 其次我们需要一个 “修改密码” 的二级 UI 界面:

  1. 新建立项目,并导入相关资源。
  2. 设计界面,如下图所示:
    ./cocostudioUI/image02.png
    这里我们添加了三组密码框。而在设计这样三个类似控件集的时候,有个技巧,我们首先局部好一个个控件区域,如上“旧密码”区域,然后我们将相关的控件树结构,统一在一起,如图:
    ./cocostudioUI/image01.pngQQ截图20130724171717
    点击右侧对象结构,我们可以复制整个树枝“节点”,然后粘贴到树中,如上图,“新密码”区域,我们将相关的控件集合在“新密码”节点,然后拖动此节点,可以很好的完成内部元素的相对位置。
  3. 修改相关属性,命名规范并导出资源

以上时设计界面的简单步骤,所有的都是可视化操作,所见即所得,已经提供了常用的控件,并且还在不断添加完善。

3 编写代码控制页面逻辑

  1. 建立新的工程,引入 CocoGUILIB 扩展库,和 UI 编辑器导出的资源文件(工程建立步骤请实时关注官方说明,不同版本操作步骤不同,这里使用的时 2.1.4e 版本,请下载最新的版本库,以使用最简单的方法配置环境等。)
  2. 创建一个新的场景类,用于加载我们的 UI 资源,并编写相关逻辑,其关键代码如下(实现加载,跳转逻辑控制功能) 所有代码即工程资源:
            // 加载 UI 资源
            // 加载 UI 资源
            UILayer* ul = UILayer::create();
            this->addChild(ul, 0, 100);
            ul->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFight_1/ChaosFight_1.json"));
    
            // 获得各个控件,并添加点击事件
            UITextButton* tbChangePwd = dynamic_cast(ul->getWidgetByName("tbChangePwd"));
            tbChangePwd->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbChangePwdCallback));
    
    // 主界面按钮点击回调函数
    void ChaosFightUI::tbChangePwdCallback(cocos2d::CCObject *pSender){
        // 创建加载修改密码界面 ulPwd 作为类成员属性,以便重用
        ulPwd = UILayer::create();
        ulPwd->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFightPassword_1/ChaosFightPassword_1.json"));
        this->addChild(ulPwd);
    
        // 获取点击确定按钮
        tbOk = dynamic_cast(ulPwd->getWidgetByName("tbOk"));
        tbOk->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbOkCallback));
    }
    
    void ChaosFightUI::tbOkCallback(cocos2d::CCObject *pSender){
        // 获取文本框值,并且打印
        UITextField* tfOldPwd = dynamic_cast(ulPwd->getWidgetByName("tfOldPwd"));
        CCLog(tfOldPwd->getStringValue());
    }
  3. 最后运行效果如下:./cocostudioUI/image03.png二级 UI 界面:./cocostudioUI/image00.png文本输入框控件:./cocostudioUI/image05.png

CocoStudio UI 编辑器的使用

./images/cocostudio-ui-1.png



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 创建 Cocos2d-x 序列帧和骨骼动画一样,可以参考。

./images/cocostudio-ui-2.png

在编辑器中创建界面步骤:

  1. 打开 CocoStudio UI 编辑器,创建一个新的项目(例:CsUi 项目)
  2. 在新项目默认显示一个层,我们在在左侧拖动所需要的控件,添加到层上
  3. 这里我们选择了一图片框与一个按钮(根据自己的实际需要选择添加控件)
  4. 选择按钮控件,并在属性视图中,设置属性启用“交互”选项
  5. 导出我们的 UI 界面资源
  6. 导出了几个资源文件在项目 “CsUi”目录的 Export/CsUi_1 中,包含三个导出的资源文件 :CsUi_1.ExportJson, CsUi0.plist, CsUi0.png

在上面的操作中,我们使用了 UI 编辑器编辑创建了一个 UI 界面,接下来便是将其添加到我们的项目中去并使用。 在程序中使用界面资源文件:

  1. CocoGUILIB 将集成在 Cocos2d-x 2.1.4 之后的版本内, 这里 可以下载最新的版本使用,使用方式同 extensions 的其它扩展同样,具体见 TestCpp 例子。
  2. 我们创建了一个项目,并且导入了 CocoGUILIB 源代码,将导出的 UI 资源文件夹 "CsUi_1" 加入项目资源目录: Resources/CsUi_1
  3. 编写测试场景,使用 UI 控件完成功能,其代码如下:
// TestUI.cpp 文件内容

#include "TestUI.h"

CCScene* TestUI::scene(){
    CCScene* scene = CCScene::create();
    CCLayer* layer = TestUI::create();
    scene->addChild(layer);
    return scene;
}

bool TestUI::init(){
    bool bRef = false;
    
    do{
        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;
}

void TestUI::coButtonCallback(CCObject* pSender){
    // 获取图片框控件
    cs::CocoImageView* image = (cs::CocoImageView*) COCOUISYSTEM->getWidgetByName("ImageView");
    // 我们将图片放大到 1.5 倍,以便观察效果
    image->setScale(1.5f);
}

// ################ 补充说明 #################
// 在 最新的 版本使用了新的 API 与调用方式,0.2 版本之后,新版重写 init 方法与回调函数如下


bool TestUI::init(){
    bool bRef = false;
    
    do{
        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(ul->getWidgetByName("Button"));
        btn->addReleaseEvent(this, coco_releaseselector(TestUI::coButtonCallback));
        
        bRef = true;
    }while(0);
    return bRef;
}

void TestUI::coButtonCallback(CCObject* pSender){
    // 获取图片框控件
    UILayer* ul = dynamic_cast(this->getChildByTag(100));
    UIImageView* image = dynamic_cast(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_pInputLayer;' 属性; , 由 InputLayer 统一接受触摸事件并处理,这样做的好处显而易见,通过内部控制灵活的处理各控件的点击操作,添加各种判断等都可以在此统一完成。

2 CocoUI 框架



以上简单的例子,只是简单的介绍了 CocoUI 的使用方法和其运行机制。当然,在 CocoUI 中还提供了很多功能更为丰富的控件,可以关注官方的 "UI CocoGUI使用方法手册"http://bbs.cocostudio.org/forum.php?mod=viewthread&tid=732 ,在这里非常详细的介绍了各个控件的使用方法及其注意事项,包括添加事件,内存管理,UI 动画使用,UI 控件状态控制,纹理缓存,以及非常重要的 “多分辨率适配” 方案。

(注:关于其它控件的使用,将会在后续文章介绍)

[cocos2dx开发技巧2]工具CocosBuilder的使用--集成

本文出自 “stalendp” 博客,请务必保留此出处 http://blog.csdn.net/stalendp/article/details/8756467

本文主要侧重于CocosBuilder在cocos2dx中的集成。对CocosBuilder使用的介绍比较简单。详细的使用请参考官方教程
CocosBuilder部分
1)创建工程

首先创建Cocos2dx工程“ShootTheApple”,然后在其Resources目录下新建ccb,并在ccb中创建CocosBuilder工程。目录结构如下图:

阅读全文»

从零开始学习CocosBuilder

本文由 杨世玲 (泰然教程组)原创,转载请注明出处并通知泰然!!
CocosBuilder是Cocos2d系列的配套开源工具,最新的版本是3.0a, 也是我们这个文章所采用的版本.CocosBuilder目前只有OS X版本, 没有Windows的版本, 而且开发语言是Objective-c, 估计移植难度会比较大. 我想这个也是其不够流行的原因吧.

如果你是CocosBuilder的熟客,那么你一定会记得CocosBuilder v2.x以前版本附带的例子(以下我们提到例子即为这个例子).[http://cocosbuilder.com/?page_id=11] 而CocosBuilder v3.0采用了一个叫做CocosDragonJS的例子, 主要是展示CocosBuilder 的Javascript的调用能力.我虽然很喜欢JS, 但是正在学习2d-x, 又很想学好, 所以还是打好基础, 学好原滋原味的2d-x才好, 以后换用无论是Html5, 还是JS, Lua, 心里才会觉得踏实.我无论C++,还是2d-x都是新手,又是第一次想正儿八经的写文章, 难免有很多错误, 还望各位看客踊跃拍砖.

对CocosBuilder不熟悉的朋友, 可以先去CocosBuilder网站看下其例子, 或者运行下cocos2d-x源代码目录下sample/TestCpp项目, 可以在ExtensionsTest里面找到CocosBuilderTest这个例子.

这次的目的是基本实现原来v2.0中的例子. 我采用的2d-x的版本是:cocos2d-2.1beta3-x-2.1.0, 以OS X版本为主, 以sample目录下的HelloCpp为基础改进. CocosBuilder 的版本是v3.0alpha0.

(一)
万事开头难,我们先来建立基本的开发环境, 保证最基本的运行.

我们需要一份cocos2d-2.1beta3-x-2.1.0的源代码, 并将其sample/HelloCpp目录重命名为sample/CocosBuilderTest. 打开CocosBuilder, 在sample/CocosBuilderTest/ccb-source/目录中创建一个新的CocosBuilder项目. 将CocosBuilder官方例子中的图片等资源文件复制到该目录. 我们对该目录下的文件结构做了一些调整, 以便于使用. 具体可以参见我打包后的整体项目文件.

阅读全文»

图文并茂使用CocosBuilder制作Cocos2D游戏

本文由Zynga 工程师原创,翻译:Iven,张作宸,Butterfly

手把手教你使用CocosBuilder一次性导出Cocos2d-html5,Cocos2d-x和Cocos2d-iPhone的游戏资源文件。这个游戏90%的工作量是用工具完成。

这篇教程将会展示如何使用 CocosBuildercocos2d-iphone制作游戏的动作,地图场景和界面。CocosBuilder 已经被Zynga 使用在游戏Dream PetHouse 和 Zynga Slots开发中。目前,由于若干游戏使用CocosBuilder,Zynga 索性将其开源出来(MIT License)。未来必定有更多的游戏在开发中使用该工具。
这篇文章是建立在你很熟悉object-c以及cocos2d-iphone或者cocos2d-x的基础上的。如果你希望学习cocos2d,泰然也有很多文章推荐给你。
在开始本文之前,确保你下载并安装了CocosBuilder 的最新版(本教程基于2.1beta版本)并且升级cocos2d2.0或cocos2d-x的2.03版本以上。

The Game

我们将创造游戏主角

Cocos Dragon。Cocos Dragon

有一对很小的翅膀因此他飞不高,所以我们需要让他触碰金币来给他加速上升直到碰到炸弹为止。你可以到youtube看这个游戏的视屏:youtube

阅读全文»

如何使用CocosBuilder2.1结合cocos2d-x2.0.3创建动画场景

本为由泰然教程组成员 浅底 原创,作为一位经验丰富的游戏开发人员,这次浅底将CocosBuilder经验分享给大家,希望大家喜欢,欢迎拍砖!!转载请注明出处!!

在使用Cocos2d框架开发iOS游戏的时候,对于每一个场景(CCScene)的编辑是比较麻烦的,好在有外国的牛人提供了非常棒的场景编辑器----CocosBuilder。

作为可视化编辑的补充,cocosBuilder成为cocos2D-iphone和cocos2D-x最流行的可视化编辑器。cocos2D-x从2.0版本开始支持cocosBuilder,同样cocosBuilder也是2.0版本与之对应 , 可以通过cocosBuilder的官方网站http://cocosbuilder.com/下载cocosBuilder 。


阅读全文»

?>