实习小白::(转) Cocos2d-x 3.0 开发(四)使用CocoStudio创建UI并载入到程序中

1、概述

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

2、创建、编辑UI

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

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

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

3、导出

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

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

4、加载到程序中

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

[cpp] view plaincopyprint?

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

编译运行,就可以了。

5、总结

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

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

本篇博客出自阿修罗道,转载请注明出处,禁止用于商业用途:http://blog.csdn.net/fansongy/article/details/12757411

时间: 2024-11-07 19:56:19

实习小白::(转) Cocos2d-x 3.0 开发(四)使用CocoStudio创建UI并载入到程序中的相关文章

Senparc.Weixin.MP SDK 微信公众平台开发教程(二十一):在小程序中使用 WebSocket (.NET Core)

本文将介绍如何在 .NET Core 环境下,借助 SignalR 在小程序内使用 WebSocket.关于 WebSocket 和 SignalR 的基础理论知识不在这里展开,已经有足够的参考资料,例如参考 SignalR 的官方教程:https://docs.microsoft.com/zh-cn/aspnet/core/signalr/introduction?view=aspnetcore-2.1 我们先看一下完成本教程内容后,在小程序内实现的 WebSocket 效果: 私有及群发消息

【小白出错日记】【已解决】C语言简单的sum = a + b程序中遇到的错误

今天准备重新看一遍C语言的基础内容,编写了一个简单的求a与b之和的小程序.但是竟然返回的结果一直不对,源代码如下: #include<stdio.h> int main() { int a,b,sum; printf("请输入两个数的值,用逗号隔开\n"); scanf("%d,%d",&a,&b); sum = a + b; printf("\n两个数的和是%d",sum); } 然而运行结果并不是a与b的和,检查了

如何在Delphi中调用VC6.0开发的COM

上次写了如何在VC6.0下对Delphi写的COM进行调用,原本想马上写如何在Delphi中调用VC6.0开发的COM时,由于在写事例程序中碰到了个很怪的问题,在我机子上用VC写的接口程序编译能通过.但是调用就会出现问题,(在VC下调用也是一样的出现).但是用Delphi写的接口程序编译后,不管是在VC下还是在Delphi下调用都没有问题.后来我把VC开发的接口程序编译后,拷贝到其它机子上试,怪事,完全没有问题了.总结后才知道是我机子有点问题.我到现在还没有解决为什么在我的机子上不行,在其它机子

cocos2dx 3.0 学习笔记 引用cocostudio库 的环境配置

cocostudio创建UI并应用时须要引用cocostudio库,须要额外的环境配置: 之前已经搭配好了基础的开发环境,包含 1) JDK 2) Python 2.7 3) ant 4) visual Studio 2012 5) eclipse + ADT 这些都比較简单,然后也创建了project而且成功编译出了下面界面: 但之后尝试使用利用cocostudio做UI是发现还有非常多问题,环境仍然没有全然配置好. 研究好久最终攻克了: 右键项目 -> 属性 连接器->输入->附加依

实习小白::(转) Cocos2d-x 3.0 开发(十五)使用UILayout布局,制作对话界面

1.概述 上一篇我们在编辑器中设计了一个静态的UIScrollView,而通常我们都需要在程序中动态增加信息.插入元素的位置怎么确定?在3.0中UILayout已经实现了基本的布局,一起来看看吧: 2.编辑界面 打开CocoStudio的UIEditor 编辑一个界面,创建一个ScrollView和两个Button.因为ScrollView继承自UILayout,这里我们采用它.不太能搞定的童鞋可参考:Cocos2d-x 3.0 开发(十四)使用UIScrollView 实现大小不同物品拖动展示

实习小白::(转) Cocos2d-x 3.0 开发(十六)cocos2dx-3.0beta版建立新项目并加载CocoStudio导出文件

1.概述 与alpah版相比,beta版中更改了创建的脚本,可以自定义项目的目录,接下来我们看看.先上图: 2.项目创建 找到 cocos2dx根目录/tools/project-creator/create_project.py文件,双击运行即可.如果未安装python 环境,则需要下载安装.脚本运行起来,会显示一个图形界面,用以设置相应的项目名称.Android包名和文件路径.设置好后,点击下面的create按 钮创建项目,创建成功后会弹出如图所示提示框. 这样我们就成功创建了一个项目,找到

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

1.概述 帧事件也是新加入的功能.这篇中我们将看到如何使用它.我们将上篇中制作的动画稍加修改.有图为证: 2.用途与原理 首先介绍一下帧事件.正如其名:一个与帧相关联的事件. 为什么要这么做呢?首先没人想做一大堆碎动画,然后一点一点拼着播放吧.另外,有时候流程与事件控制最好关联到帧.比如一个攻击动作,有出刀和收刀两部 分.伤害自然是在刀所触到敌人时候产生的.做成两个动画比较麻烦,程序要管理大量的动画,而且美工也会很郁闷:不但给你们切图,还要给你们切动画.如果用 固定时间来做,也是会有问题.比如机

实习小白::(转) Cocos2d-x 3.0 开发(七)在程序中处理cocoStudio导出动画

1.概述 使用cocoStudio可以方便的制作动画,接下来的工作就是在我们的程序中使用制作的动画.这篇中,我将使用程序将两个动画连接起来.有图有真相: 2.制作动画 承接上一篇,我们再制作一个动画.制作动画的方法与之前没有差别,不太熟悉的同学可以看:Cocos2d-x 3.0开发(六)使用cocoStudio创建一个骨骼动画.在“动作列表”中右击,“添加动画”然后编辑就成. 我们新制作的动画的结束点,要与上一篇中制作动画的开始点重合,这样在连接的时候,画面就不会跳动. 制作好后我们将动画导出.

实习小白::(转) Cocos2d-x 3.0 开发(十)使用CocoStudio场景编辑器关联组件

1.概述 我们有了UI交互.有了动画人物.有了物理模拟,还差最后一步——将这些元素融合起来.这就要用到cocoStudio中的场景编辑器了.这次我们要将先前我们做过的所有东西都放到一个场景中去.这项工程比看起来是要简单.上图: 2.创建场景 运行CocoStudio,选择SceneEditor.进入后创建一个新的工程:MyScene. 然后找到先前我们制作的UI部分的导出资源.动画部分的导出资源,将其复制到这个场景工程的Resource文件夹下. 资源准备完成,我们就可以开始制作场景了. 制作比