CocoStudio UI 编辑器的使用

最新推荐文章于 2024-08-09 11:35:30 发布
最新推荐文章于 2024-08-09 11:35:30 发布
阅读量251 收藏
点赞数
文章标签： ui 游戏 php
原文链接：http://www.cnblogs.com/hewei2012/p/3453208.html
版权

详细教程：http://www.cocoachina.com/bbs/read.php?tid=161567

 

./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 控件完成功能，其代码如下：
  1. // TestUI.cpp 文件内容
  2.  
  3. #include"TestUI.h"
  4.  
  5. CCScene*TestUI::scene(){
  6. CCScene* scene =CCScene::create();
  7. CCLayer* layer =TestUI::create();
  8. scene->addChild(layer);
  9. return scene;
  10. }
  11.  
  12. boolTestUI::init(){
  13. bool bRef =false;
  15. do{
  16. CC_BREAK_IF(!CCLayer::init());
  17.  
  18. // 初始化当前场景 UI 系统
  19. COCOUISYSTEM->resetSystem(this);
  21. // 加载 UI 资源文件，并添加到当前场景
  22. COCOUISYSTEM->getCurScene()->addWidget(COCOUISYSTEM->createWidgetFromFileWithAdapt_json("CsUi_1/CsUi_1.ExportJson",true, rue));
  24. // 获取按钮控件
  25. cs::CocoButton* button =(cs::CocoButton*)(COCOUISYSTEM->getWidgetByName("Button"));
  27. // 为按钮添加点击事件
  28. button->addReleaseEvent(this, coco_releaseselector(TestUI::coButtonCallback));
  29.  
  30. bRef =true;
  31. }while(0);
  32. return bRef;
  33. }
  34.  
  35. voidTestUI::coButtonCallback(CCObject* pSender){
  36. // 获取图片框控件
  37. cs::CocoImageView* image =(cs::CocoImageView*) COCOUISYSTEM->getWidgetByName("ImageView");
  38. // 我们将图片放大到 1.5 倍，以便观察效果
  39. image->setScale(1.5f);
  40. }
  41.  
  42. // ################ 补充说明 #################
  43. // 在 最新的 版本使用了新的 API 与调用方式，0.2 版本之后，新版重写 init 方法与回调函数如下
  44.  
  45.  
  46. boolTestUI::init(){
  47. bool bRef =false;
  49. do{
  50. CC_BREAK_IF(!CCLayer::init());
  52. UILayer* ul =UILayer::create();
  53. // 设置 UI 层的tag
  54. this->addChild(ul,0,100);
  55. ul->addWidget(CCUIHELPER->createWidgetFromJsonFile("CsUi_1/CsUi_1.ExportJson"));
  57. UIButton* btn =dynamic_cast<UIButton*>(ul->getWidgetByName("Button"));
  58. btn->addReleaseEvent(this, coco_releaseselector(TestUI::coButtonCallback));
  60. bRef =true;
  61. }while(0);
  62. return bRef;
  63. }
  64.  
  65. voidTestUI::coButtonCallback(CCObject* pSender){
  66. // 获取图片框控件
  67. UILayer* ul =dynamic_cast<UILayer*>(this->getChildByTag(100));
  68. UIImageView* image =dynamic_cast<UIImageView*>(ul->getWidgetByName("ImageView"));
  69. // 我们将图片放大到 1.5 倍，以便观察效果
  70. image->setScale(1.5f);
  71. }

如上代码运行，通过点击按钮，使得图片放大。 请注意不同版本之间的 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 控件状态控制，纹理缓存，以及非常重要的 “多分辨率适配” 方案。

（注：关于其它控件的使用，将会在后续文章介绍）

转载于:https://www.cnblogs.com/hewei2012/p/3453208.html

dianxixian1343
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CocoStudio(cocos2dx编辑器，集合动作，UI，等）
04-16
About CocoStudio is a game development tool kit based on Cocos2d-x. It breaks down tasks in game development into different roles, it includes: UI editor for UI graphic artists, Animation editor for graphic artists, Number cruncher for game data designers, Scene editor for game designers CocoStudio forms a complete game development solution. The UI editor The UI was designed to serve its only purpose: create UI for games. Its simple and intuitive interface allows graphic artists to focus on their expertise, without worrying about other aspects such as programming. Currently the UI editor has 12 different UI elements ready to be used in games, new UI elements will be added with each and every release of CocoStudio, Other key features that the UI editor supports are: Texture packaging - Automatically packs individual texture files into a single large sprite, which further saves memory and improves game performance. Multi-resolution adaption - Automatically adapts to multiple resolution sizes with relative UI positioning. Templating - Reuse the same UI layout across different games, swap out texture resources to give it a new look. The Animation editor The Animation editor was designed to feel like Adobe Flash, which makes graphic artists feel right at home. The Animation editor brings skeletal animation to Cocos2d-x. What advantage does skeletal animation holds against the traditional frame animation? Lower memory consumption - An animation with the traditional frame based solution could use dozens of individual textures, but with skeletal animation, only 1 set of body parts is required to make infinite number of different animations. Smaller file size - due to less number of assets. Animation blending - you can combine animations together to easily make new animation, for example, you could blend attacking animation with walk animation to create "attacking while walking animation". Animation reuse - you can share skeletal animations with another character with the same skeleton setup. Smooth interpolation - traditional frame based animation is very choppy especially in slow motion. Skeletal animation interpolates between 2 sets of key frames, so animation is always played at the same frame rate as the game. However Skeletal animation cannot replace the traditional frame based animation, for example, it cannot make isometric character, it cannot make explosion, that is why we did not forget frame based animation, we even made it better and simpler. You only have to drag and drop frame sequences to the work space, and the animation editor will automatically creates the frame animation for you. Other highlight of Animation editor includes: WYSIWYG collision box editing - editing collision box in wysiwyg way has never being easier and accurate. Reference point - enables characters to wield swords, mount horses, and attaching other objects easily. Texture packing - Automatically packs individual texture files into a single large sprite, which further saves memory and improves game performance. The Data Cruncher The data Cruncher imports excel tables and converts the data into a format readable by cocos2d-x, which can also be used as a component for the Scene editor. The Scene editor The scene editor pieces all the assets made by the UI editor, Animation editor, and the Data Cruncher into a game scene, it can then simulate the game inside the editor. The scene editor also supports many assets made from third party editors such as particle designer, tiled etc. The scene editor relies on the CocosStudio Framework. CocoStudio Framework CocoStudio Framework is an open source higher level framework on top of Cocos2d-x, it employes entity and component system, it is used to read the data saved from the scene editor. The Scene editor saves data in a MVC like fashion, it includes all entities and events used in the current scene, and exports to corresponding code template for the programmers. A programmer can then write the code in Javascript to bring the game alive. CocoStudio的安装 1.CocoStudio的运行平台是Windows操作系统，推荐使用Windows7操作系统。 2.安装CocoStudio之前，确保电脑中安装了.Net 4.0 Framework 3.安装目录尽量不要在C盘的Program Files文件夹下，可能会导致启动器无法启动编辑器。当然，通过“以管理员身份运行”的方式也可以打开软件 4.在Xp和Windows8的操作系统下，可能会出现的闪屏或无法运行的问题。这个问题会尽快修复
cocoStudio工具的使用-----UI编辑器
破茧
07-07 4954
～～～～我的生活，我的点点滴滴！！ 拖了好久才又开始写出这篇文章，
如何使用 CocoStudio UI 编辑器实现
郝辰涛的专栏
05-07 1096
Table of Contents 1 游戏中必不可少的 UI 元素 2 使用 CocoStudio UI 编辑器设计配置界面       2.1 首先建立主配置界面：       2.2 其次我们需要一个 “修改密码” 的二级 UI 界面： 3 编写代码控制页面逻辑   1游戏中必不可少的 UI 元素     一个成功的游戏离不
Cocos2dx之使用UI库结合cocostudio
世事，为之则易，不为则难！
06-13 1万+
使用cocostudio的UI编辑器编辑好UI界面，导出UI文件，直接在cocos2dx中使用，通过tag或者name来获取到UI控件 1、编辑ui界面，直接用模板然后拖几个控件过去 2、cocos2dx种加载这个编辑好的UI，必须先加载cocostudio库，具体操作参照： http://blog.csdn.net/yangxuan0261/article/deta
cocoStudio UI编辑器设置自定义字体
X_To_Y的博客
04-14 689
cocoStudio UI编辑器设置自定义字体；BMFONT导出fnt文件；cocoStudio 导入fnt文件时闪退原因。
CocoStudio 场景编辑器API使用手册
01-27
在《CocoStudio 场景编辑器API使用手册》中，我们将深入探讨这一主题，了解如何利用这些API实现游戏开发中的各种功能。 首先，场景编辑器API是基于Cocos2d-x框架的，因此理解Cocos2d-x的基本概念和结构对于使用API...
cocos2d-x3.1 Cocostudio 场景编辑器
09-15
《cocos2d-x3.1与Cocostudio场景编辑器详解》 在游戏开发领域，cocos2d-x3.1是一个广泛使用的2D游戏引擎，它为开发者提供了强大的功能，支持跨平台的游戏开发。Cocostudio是cocos2d-x生态系统中的一个重要组成部分...
cocos2dx3.0 读取cocostudio UI控件
10-23
CocosStudio是Cocos2d-x提供的一款可视化编辑工具，允许开发者设计UI界面和制作动画，而无需编写大量的代码。 在Cocos2d-x 3.0中读取CocosStudio创建的UI控件是开发过程中常见的需求。这通常涉及到以下几个关键知识...
cocostudio自定义图片工具
10-21
可以简单的制作出，cocos所需要的自定义图片
Cocos2d-x 3.0 开发（十）使用CocoStudio场景编辑器关联组件
11-08
我们有了UI交互、有了动画人物、有了物理模拟，还差最后一步...这次我们使用cocoStudio中的场景编辑器，将先前做过的所有东西都放到一个场景中去。相关博客：http://blog.csdn.net/fansongy/article/details/14544921
[cocos2dx笔记011]使用Cocostudio UI编辑器
过客2019
07-19 3650
本文地址：http://www.cppblog.com/zdhsoft/archive/2014/07/19/207715.html cocos2dx不仅是有框架，还提供了一个编辑器，可以对动画、UI、骨骼动画和场景编辑的功能。 使用这些工具，大大缩短了用cocos2dx开发周期。但总的来说，操作并不是很方便，但是有总比没有强！ 下载地址：http://cn.cocos2d-x.or
cocos2dx 3.0结合cocostudio创建界面UI以及特效
--厚德载物--
05-05 2306
一 创建UI
数据集标注工具
豪豪的博客
03-23 1万+
    在我们学习深度学习的时候，经常阅读大牛的论文，并从网上下载对应的数据集和代码，在自己运行网络并调节网路结构或者超参数中理解网络的运作。     但是我们始终无法接触到数据本身是怎么制作的~     随着对深度学习的不断深入探索，我们可能会有需要去加入到一个具体的项目中，该项目只会提供原始的数据，如果是图像分类任务还好，只需将不同类别的图像放到不同的文件夹中，并以数字标记即可。但是如果这...
CocoStudio 《UI编辑器》 教程(转)
kety2001的专栏
04-17 3701
转自: CocoStudio 《UI编辑器》 教程 http://bbs.cocostudio.org/forum.php?mod=viewthread&tid=153&fromuid=214 UI编辑器 视频地址： http://v.youku.com/v_show/id_XNTQzNjI4OTU2.html 大家好，非常感谢大家的支持，好啦
Cocos2d-x 3.0 开发（四）使用CocoStudio创建UI并载入到程序中
热门推荐
阿修罗道
10-15 7万+
CocoStudio的使用无疑是cocos2d-x 3.0的重要组成部分，接下来我们用它来创建一组UI，并将其读入到程序中显示出来。先上效果图：
【无标题】Unity Asset Hunter 插件
873149745
08-08 301
Asset Hunter PRO是Unity的一款插件，用于分析工程内的资源使用情况，资源大小，分析资源依赖关系，可以用来清理项目中未使用的资源。尤其是项目较大时，删除没有使用的资源很有帮助。首次打开，会提示创建buildinfo文件，需要build一次工程即出(exe,apk,xcode)等。打开Asset Hunter (Ctrl+H或Tools->Asset Hunter PRO–>Asset Hunter PRO)。对于项目UI图片修改次数过多时，这个分析图集中，没用的资源进行分析删除是非常好。
Win/Mac/Linux/Andriod/IOS界面UI设计 - pyside6 - 01 基础系统框架
最新发布
岳涛的博客
08-09 19
这是一个展示PySide6小例子的系列专题，建议创建单独的虚拟环境演示复现。建议复制到下载并安装MiniConda创建虚拟环境激活虚拟环境安装依赖当然您也可以使用您熟悉的工具和步骤，来实现同样的效果，我只是按个人习惯给您一点建议。
【Material-UI】Checkbox组件：受控模式详解
lph159的博客
08-08 632
在React中，表单组件（如inputselecttextarea等）可以分为受控组件和非受控组件。受控组件的值由React的状态（state）管理，表单控件的值会通过状态的变化而更新。受控组件的优势在于它们的行为完全受React组件逻辑控制，使得开发者可以更精细地管理用户输入和表单状态。在Material-UI中，Checkbox组件同样可以被配置为受控组件，这使得开发者能够通过React状态来精确控制复选框的选中与未选中状态。
工作助手C#研究笔记(5)
nianfen的博客
08-05 874
通过示例对C#程序的结构逻辑进行研究梳理，虽然通过阅读相关书籍，但是来的效果更慢。一下相关内容可能有误，请谨慎听取。
duilib ui编辑器
09-19
Duilib是一个被广泛使用的UI编辑器，它是根据DirectUI框架开发的。DirectUI是一个基于COM技术的Windows UI库，可以用于开发Windows应用程序的用户界面。 Duilib提供了一个可视化的图形界面编辑器，开发人员可以通过这个编辑器创建和编辑应用程序的用户界面。编辑器提供了丰富的控件库，包括按钮、文本框、列表框等常见的UI控件，还支持自定义控件的添加。通过简单的拖放操作，开发人员可以快速创建复杂的界面布局。 Duilib还提供了灵活的样式设置功能，开发人员可以通过编辑器自定义控件的颜色、字体、大小等外观属性。此外，开发人员还可以通过编辑器自定义控件的行为，例如设置按钮的点击事件、文本框的输入限制等。 Duilib的编辑器还支持多种资源的导入和管理，例如图片、音频、动画等。开发人员可以通过编辑器将这些资源添加到应用程序中，并在代码中进行引用和使用。 在编辑完成后，Duilib编辑器可以将界面文件保存为可执行的二进制文件，方便开发人员在应用程序中直接调用。此外，Duilib还提供了丰富的代码生成功能，可以将编辑的界面代码生成为C++代码，开发人员可以直接在代码中添加业务逻辑。 总的来说，Duilib是一个功能强大、易于使用的UI编辑器，它可以帮助开发人员快速创建和编辑用户界面，为应用程序的开发提供了很大的便利。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值