关闭

Cocos2d-x 3.0 开发(四)使用CocoStudio创建UI并载入到程序中

422人阅读 评论(0) 收藏 举报
分类:

1、概述

    CocoStudio的使用无疑是cocos2d-x 3.0的重要组成部分,接下来我们用它来创建一组UI,并将其读入到程序中显示出来。先上效果图:




2、创建、编辑UI

    首先,运行CocoStudio,选择UI Editer(第二个)。进入后,从“文件”->“新建项目”->输入相应的项目名称和路径。创建好的新项目应该是这样:




    接下来就是大家随意发挥啦。在旁边的ToolBar控件随便拽一些上去,看看都是些什么功能,具体我就不细说了。可以在画布列表中重命名画布,这将影响导出的文件名称,我的项目将其改为testUI。资源的话,放到CocosStudio目录中的Resource文件夹中即可。

    另外注意一点,如果这个按钮是有交互效果的,在 属性 –> 常规 -> 交互 的选项要勾选,否则没有点击效果。如图:

 


3、导出

    在导出之前,最好先创建一个新的工程。运行我们的脚本文件,给新工程起名为:HelloStudio。编译运行,保证它没问题。

    回到CocoStudio中,点选 文件 –> 导出项目 。在导出资源的位置,选择“导出使用大图”。同时将目录改为我们项目文件的Resource目录。



4、加载到程序中

 切换到VS2012中更改HelloWorld类中的init()方法:


  1. bool HelloWorld::init()  
  2. {  
  3.     //////////////////////////////  
  4.     // 1. super init first  
  5.     if ( !Layer::init() )  
  6.     {  
  7.         return false;  
  8.     }  
  9.   
  10.     /////////////////////////////////  
  11.     UILayer* uiLayer = UILayer::create();  
  12.     auto myLayout = dynamic_cast<Layout*>(CCUIHELPER->createWidgetFromJsonFile("testUI.ExportJson")); //alpha0中使用  
  13.         auto myLayout = cocostudio::GUIReader::shareReader()->widgetFromJsonFile("testUI.ExportJson")); //alpha1中使用  
  14.     uiLayer->addWidget(myLayout);  
  15.     this->addChild(uiLayer);  
  16.       
  17.     return true;  
  18. }  

编译运行,就可以了。


5、总结

    通过CocoStudio进行可视化编辑,然后将编辑好的文件导出成Json格式的配置文件,在程序中加载这个文件来创建一个UIWidget,实现图形化界面到程序的完整关联。相应Demo 可以在下面下载:


Demo下载: http://download.csdn.net/detail/fansongy/6404989 

0
0
查看评论

Cocos2d-x 3.0 开发(四)使用CocoStudio创建UI并载入到程序中

CocoStudio的使用无疑是cocos2d-x 3.0的重要组成部分,接下来我们用它来创建一组UI,并将其读入到程序中显示出来。先上效果图:
  • fansongy
  • fansongy
  • 2013-10-15 22:32
  • 68869

cocos2dx 3.0结合cocostudio创建界面UI以及特效

一 创建UI
  • lxd211
  • lxd211
  • 2014-05-05 18:05
  • 1483

Cocos2d-x3.0游戏实例之《别救我》第五篇——使用Cocostudio UI编辑器创建操作界面

这一篇内容其实很简单,已经对Cocostudio比较熟悉的朋友就可以随便扫一下了~(小若:熟悉Cocostudio的人谁还有空看你的基础教程呢)
  • musicvs
  • musicvs
  • 2014-05-06 17:42
  • 18398

cocos2d-x & CocoStudio UI使用

1.添加头文件和引用 #include "CocosGUI.h" #include "cocostudio/CocoStudio.h" using namespace gui; using namespace cocostudio; 备注: 需要引用na...
  • wangbole
  • wangbole
  • 2013-12-22 14:45
  • 4219

加载Cocostudio的UI之后,下方按钮无法点击的解决方法

Cocostudio的UI从某个版本开始,默认会屏蔽下方的触摸事件,换句话说,当我们加载了某个UI之后,UI下面的东西(按钮、图片等等)都无法响应点击。 其实这没什么神奇的,只不过是UI默认有一个画布,画布也是一个控件,类似Layer,它也会监听触摸事件,并且是吞并模式的。 一旦UI获取...
  • x1426096761
  • x1426096761
  • 2016-02-09 17:57
  • 766

cocos2d-x + lua获取CocoStudio中导入json文件中控件的两种方法:

1.C++获取:方法一: auto myLayout = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("testUI.json"); this->addChild(myLayout)...
  • freshstraw
  • freshstraw
  • 2017-02-16 16:27
  • 522

【cocosStudio】查看官方示例--调用cocoStudio控件

打开官方示例: 打开CMDCD到D:\cocos2d-x-3.3rc0\tests\cpp-tests\执行cocos run -p win32命令 将class下所有的文件全部放到Sublime Text 3中: 查找文件CTRL+P:CocoStudio.h发现底下有个:#...
  • ns2250225
  • ns2250225
  • 2014-12-16 16:05
  • 12109

Cocos2d-x 3.0开发(六)使用cocoStudio创建一个骨骼动画

概述:虽然我们已经会使用静态的UI控件了,但还远远不够,接下来我们再研究一下动画的使用...... 先上图:
  • fansongy
  • fansongy
  • 2013-10-18 21:40
  • 41270

cocos2d-x的lua脚本如何加载Cocostudio制作的UI文件

以cocos2d-x-2.2.2和cocostudio1.2.0.1版本为例 第一步,使用cocostudio的UI编辑器编辑好UI。 第二步,将编辑好的UI文件导出到工程的resources目录下面(例:d:/cocos2d-x2.2.2/projects/demo1/resources) 第三...
  • oracleot
  • oracleot
  • 2014-02-17 23:21
  • 11937

Cocos2d-x 3.0开发(十三)使用CocoStudio编辑帧事件并关联到程序

帧事件指的是一个与帧相关联的事件。作为新加入的功能,它会给开发带来很多便利。这篇中我们将看到如何使用它。我们将上篇中制作的动画稍加修改。有图有真相...
  • fansongy
  • fansongy
  • 2013-11-27 19:56
  • 28283
    个人资料
    • 访问:334553次
    • 积分:6037
    • 等级:
    • 排名:第4985名
    • 原创:241篇
    • 转载:196篇
    • 译文:5篇
    • 评论:27条
    最新评论