如何使用 Cocos Studio 场景编辑器制作《魔卡幻想》主界面_百度知道
如何使用 Cocos Studio 场景编辑器制作《魔卡幻想》主界面
我有更好的答案
1 cocostudio 场景编辑器
2 使用 cocostudio 完成《魔卡幻想》场景编辑
2.1 UI 编辑器制作游戏主界面
2.2 建立关键帧动画
2.3 场景编辑器的 资源“整合”
3 在 cocos2d-x 中加载场景资源 并运行之
3.1 加载场景内容
3.2 在场景中播放动画
3.3 对场景的一些编码说明
1.cocostudio 场景编辑器
前面的文章 《使用 cocostudio 创建 cocos2d-x 序列帧和骨骼动画》《如何使用 cocostudio UI 编辑器实现《乱斗堂》设置界面》，其中介绍了如何使用动画编辑器创建动画与使用 UI 编辑器创建游戏配置界面，而本文将集两者之大成，使用 cocostudio 场景编辑器来创建游戏场景，其中包含游戏 UI 与动画，来定制一个游戏主界面。
2.使用 cocostudio 完成《魔卡幻想》场景编辑
对于环境的搭建使用，请参考之前的文章...
其他类似问题
为您推荐：
编辑器的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁| 超级果粉
热度:9120℃
内容列表1 CocoStudio 场景编辑器2 使用 CocoStudio 完成《魔卡幻想》场景编辑2.1 UI 编辑器制作游戏主界面2.2 建立关键帧动画2.3 场景编辑器的 资源&整合&3 在 Cocos2d-x 中加载场景资源 并运行之3.1 加载场景内容3.2 在场景中播放动画3.3 对场景的一些编码说明&1.CocoStudio 场景编辑器前面的文章 《如何使用 CocoStudio UI 编辑器实现《乱斗堂》设置界面》，其中介绍了如何使用动画编辑器创建动画与使用 UI 编辑器创建游戏配置界面，而本文将集两者之大成，使用 CocoStudio 场景编辑器来创建游戏场景，其中包含游戏 UI 与动画，来定制一个游戏主界面。&2.使用 CocoStudio 完成《魔卡幻想》场景编辑对于环境的搭建使用，请参考之前的文章，或者实时关注 最新版本的安装使用方法。&2.1 UI 编辑器制作游戏主界面a.创建项目(项目名称：MysticalCard)，并导入项目 UI 资源，添加 一图片框设定背景图片。注意在工具拦设置 &画布& 的大小（如果需要），这将决定着你的设计分辨率，在运行时还需要注意屏幕的适配问题，如放大缩小，位置偏移等，视具体情况而定。b.为界面添加 UI 元素，图片框等，请根据自己的需要定制.c.实践过程中的注意事项& & & & & 添加控件时注意必要的属性设置& & & & & 控件的命名规范，这有助于我们今后在后台编写代码获取界面元素& & & & & 可交互的控件的 &可交互属性& 开启&2.2 建立关键帧动画除了主界面一些必要的 UI 控件，我们还需要一个 &对话框指示& 的动画效果。这是一个帧动画。&a.准备工作。& & & & & 打开 CocoStudio ,启动 动画编辑器& & & & & 创建一个新的项目，后导入资源（在 &资源窗口& 中，点击 &文件& 或者 &文件夹& 标示，添加需要的素材资源）& & & & & 在 &资源窗口中& 点击关键帧动画的守帧图片，拖动至 &渲染窗口&如下图所示：&&b.将第一关键帧拖动至 &渲染窗口& 中心。 可以使用工具栏，快速定位至窗口中心，使图片显示在正中间，可以让动画更好的定位。c.添加其它帧图片，注意，我们需要选中剩余图片，然后 &拖动& 到 &对象结构& 视图中的 &第一关键帧& 所在的对象，如下图所示。&关键帧 与 骨骼动画操作区别：在使用骨骼动画的时候，我们将骨骼中的各部分元素，直接拖动添加到 &渲染窗口&，以摆放各骨骼的位置关系，而在 &对象结构& 视图中则表现为，一个列表，标示着每一e.块骨骼对象，不同帧所改变的是各个骨骼对象的位置，以达到骨骼动画效果。&而在关键帧动画中，它的对象结构只有一个，而在每一帧修改的不是其位置，而是其显示内容。这是两者之间的区别，那操作方式也有所不同。而对于它们所导出的 资源 则是相同，用法也是同样。d.剩余帧添加之后，我们看见在 &关键帧& 视图中，已经有了多帧动画，可以播放动画，查看效果，并可以通过修改 &速率& 来控制动画的播放速度。导出动画资源，导出的资源文件可以被我们在 Cocos2d-x 中以代码的方式直接加载，然后播放其动画，也可以作为 场景编辑器中的一个元素，被添加在场景编辑器里，后面的内容就是使用 场景编辑器来加载一个动画的方式。&2.3 场景编辑器的 资源&整合&使用 CocoStudio 可以很好的帮助游戏开发过程中 分工合作。动画编辑器 和 UI 编辑器可以由多个人进行编辑，最后再由一个人统合资源，这也就是场景编辑器的优点了，它除了能支持 CocoStudio 本身所自带的动画编辑器，UI 编辑器，它还能支持，Tmx 地图资源，粒子编辑器的粒子效果资源，声音资源等～并且不断扩展中。&以下将给出如何在 场景编辑器整合我们之前所创建的动画与 UI 界面的资源，来实现我们一个场景的运行效果。它的步骤如下：&a.启动场景编辑器，新建一个场景项目。并设置 &画布& 大小。画布大小要适量。&b.我们拖动一个 UI 控件到画布之上，它作为我们之前导出的 UI 资源的承载。c.我们将之前的 UI 编辑器所导出的资源，导入到当前场景项目中来，导入方式与 UI 编辑器导入资源方式同样，如下图：.d.为 UI 控件的 &文件& 属性赋值：我们在资源视图中找到 UI 编辑器所导出的 UI 资源，其目录下包含 json 文件资源（如这里的 &MysticalCard_1.json&）,将其拖动到 UI 控件的文件 属性中去，如下图所示：e.前面的步骤已经将 UI 资源导入场景之内，现在需要添加之前所创建的动画资源。& & & & & 我们以相同的方式导入动画编辑器所导出的动画资源文件。& & & & & 拖动一个骨骼控件至场景界面，如下图所示。& & & & & 为骨骼控件的 &文件& 属性赋值，其值为 动画资源中的 ExportJson（或者 json 文件，这取决于动画资源的导出方式） 文件。&&f.运行效果：当我们建立好场景之后，可以通过工具栏运行按钮，点击查看效果，这意味着你不用将所有的资源文件，手动以代码的方式添加到 Cocos2d-x 中，便能看到效果。在运行效果中，所有的控件都是可操作的，如下图，但这里只有点击效果，如果需要实现其逻辑，那么现在需要将其加载到 Cocos2d-x 项目中，编写后台代码实现。&3.在 Cocos2d-x 中加载场景资源 并运行之3.1 加载场景内容前面那么多步骤，使用 CocoStudio 来创建了 UI，动画，还有一个场景，而要将其运行在实际的项目中，就非常的简单与方便了，只需几行代码，就能够将其加载到项目中去，当然在这之前我们需要将场景编辑器的资源（场景项目目录中 &Resources& 目录，其中将包含一个 json 文件）复制到项目资源目录中去：//&加载场景资源&CCNode&*pNode&=&CCJsonReader::sharedJsonReader()-&createNodeWithJsonFile(&McScene.json&);&this-&addChild(pNode);&通过 CCJsonReader 来读取解析 json，从而获得场景中的节点内容，直接添加到当前的场景就能运行。&3.2 在场景中播放动画默认加载的场景资源 动画 组件是没有播放的，需要手动获取动画组件对象，然后调用其播放方法，当然这个步骤也是非常简单的：&//&pNode&为&之前所获取的场景资源根节点，通过此节点获取到动画对象，获取方式根据在场景编辑其中设置的层次关系而定&CCComRender&*pLoadRender&=&(CCComRender*)(pNode-&getChildByTag(1)-&getChildByTag(1)-&getComponent(&CCArmature&));&CCArmature*&armLoad&=&(CCArmature*)(pLoadRender-&getRender());&&&//&播放动画&armLoad-&getAnimation()-&playByIndex(0);&&&3.3 对场景的一些编码说明使用 CocoStudio 就是为了帮助我们快速的建立 UI 原型，然后通过编码可以获取到里面的任意一个元素对象，并修改其属性值，调用其方法，正如上面所示播放一个动画的方法同样。其步骤如下：&& & & & 通过 CCJsonReader 类读取 json 文件，将会自动解析构建对象，返回一个节点 CCNode& & & & 任何元素都能通过这个 CCNode 节点，获取到，它其实就是一个树，所不同的是层级关系（树节点的位置）& & & & 找到需要对象所在的 &树枝&，后通过 getComponent 方法获取 所在的 CCComRender 对象& & & & 通过 CCComRender 的 getRender 方法获取最终对象& & & & 得到我们所需要的具体对象之后，我们就能够对齐进行草，设置属性，调用方法等，诸如此类&本文中所有的源码示例 和 CocoStudio 项目工程都可以在
查看。&来源：&&作者：一叶
爱派实验室
开发者交流群：3467414
(加群请输入:来自苹果i派党)
开发者服务如何使用Cocos Studio UI编辑器_百度知道
如何使用Cocos Studio UI编辑器
提问者采纳
先建议在场景里加，一个场景里可以有很多UI，场景就是用浮护蹿教讷寄寸犀丹篓于管理UI的。
另外如果想在UI编辑器里加可以通过导入模板方法实现
电子产品技术支持
其他类似问题
为您推荐：
编辑器的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁怎样制作基于Cocos2d-x的SLG游戏－第3章 | 泰然网
460 次浏览 |
文章目录原创:
经过前面两章的学习，我们已经可以掌握了地图的创建和加载，并且可以对它进行缩放，移动等基本的操作了。那么在本章，我们将通过Cocos Studio编辑器快速地制作一款能自动适应多分辨率的UI系统，享受一下Cocos2d-x的GUI系统和Cocos Studio所带来的便捷。
一直以来，如何快速地制作UI是开发游戏中不得不遭遇的一个问题，Cocos2d-x一路经历了1.0时期的固定位置和2.0的相对位置，一直到现在3.0中全新的GUI机制。尽管3.0版本引擎中引进了全新的，且功能强大的GUI机制，但如果要手动编码实现相关GUI的显示和布局问题，这还是将会是一件特别繁琐的事情。好在Cocos Studio对Cocos2d-x新的GUI系统进行了全面的支持，我们可以很方便的利用它来实现UI系统的设计。
本章的目标是实现如上图所示的效果（高清截图臣妾做不到，猿媛们请见谅）。选择左下角的购物车按钮会弹出一个购物滚动列表，下面就让我们一起来学习吧。
制作UI界面
开始之前，首先还是简单介绍下Cocos Studio，扫扫盲。Cocos Studio是一套基于Cocos2d-x的免费游戏开发工具集，它能帮助开发者快速创建游戏资源，将大部分繁琐的游戏开发工作使用编辑器来快速制作，进一步帮助游戏开发者减短开发周期、提高开发效率。
由于各个版本的Cocos Studio功能上略有不同，所以开发项目时最好采用对应的版本进行学习。本教程中采用的是Windows版本的Cocos Studio 1.5.0.1，其下载地址可在http://cn.cocos2d-x.org/download中找到。
下载安装好Cocos Studio以后，运行应用程序你将发现Windows版本Cocos Studio中核心的四个编辑器：UI编辑器、动画编辑器、场景编辑器和数据编辑器，它们分别用于处理游戏中的UI界面、动画资源、游戏场景和游戏数据。但因为我们只需要使用Cocos Studio来完成UI界面的制作，所以打开Cocos Studio后，选择UI Editor（UI编辑器）项，新建一个UI工程。下面就让我们一起来创建UI界面吧。
1）首先，因为我们的UI资源是按着1136 640的分辨率来制作的，所以先在快捷菜单栏中设置画布大小为1136 640。如下：
2）接着选择 文件->导入资源 导入所需的资源文件，也可直接将资源拷入UI工程的Resources文件夹目录下，然后刷新资源面板。本教程所使用的资源已共享，可点击下载。
3）此时对象结构面板中只有如下的一个根节点。
我们需要设置一下根节点的属性，如下图所示：
其中，Cocos Studio的子控件布局的方式有四种，在图中依次排开，它们分别是：
绝对布局：子控件的位置由其坐标决定，其优点是布局灵活性大，缺点是在做全屏多分辨率的情况下不太适用。
相对布局：子控件的位置由其相对于父控件的纵横两个方向的位置决定，它还允许子控件相对于父控件的位置做偏移。
线性横向布局：线性布局的一种，子控件在父控件上呈平行结构依次排列。
线性纵向布局：线性布局的一种，子控件在父控件上呈垂直结构依次排列。
因为我们需要制作一款能自动适应多分辨率的界面，所以绝对布局是不可行的，这里需要把子控件布局设置为相对布局，也就是上图中所选择的第二个布局选项。
再者，去掉“交互”项的√勾选，因为UI将位于地图背景的上层，如果我们勾选了交互项，那么地图背景层的触摸事件就将遭到拦截，我们就无法对它做拖动和缩放操作了。交互项的意思简单点说就是此控件是否拦截输入、触摸等消息。
最后，将背景颜色调为无颜色，并勾选“自适应分辨率”项，这样整个根节点大小就会随着屏幕大小的变化而变化了。
4）接下来向场景中拖入一个图片控件，以它为例，我们来看看如何设置子控件的属性，如下图所示：
因为我们需要让图片的大小随着分辨率的变化而变化，所以把尺寸的模式从Auto修改为了Custom，并把图片的尺寸设为它原始尺寸大小（280 82）。这样在1136 640的分辨率下就显示了原始大小。
勾选百分比选框，这样在其他分辨率下，比如480 320下，图片显示的尺寸就变成了((480 / 1136 280） (320 / 640 82))的大小，保证了显示效果的一致性。但需要说明的是，如果非1136 * 640比例的分辨率下，图片难免会出现拉伸。
将名字属性修改为便于识别的名称，养成良好的习惯。
在控件布局中选择其横向布局为左边，纵向布局为上边，这样图片就会紧贴根节点的左上角了。调整边缘属性可改变图片相对于左上角的位置坐标。
5）同样的方法添加其他控件，注意层级关系，并一定要勾选百分比项。
6）下面我们来制作按下购物车按钮所弹出的商店部分。
首先，向场景中拖入一层容器，命名为panel_shop，控件布局时让它停靠在购物车按钮（button_shop）的左侧，因为shop_button本身就在屏幕的最左下角，所以新建的panel_shop位于屏幕渲染区域之外的。如下图所示：
向panel_shop中添加一个滚动层控件，设置其属性，如下图所示：
这里我们把滚动层的大小设置为了panel_shop的2/3，仅仅时为了后面在程序中好控制它们的显示。把滚动层的布局方式设置为线性纵向布局，同时勾选“交互”项，这样做的原因为了让我们能滚动该滚动层。滚动区域的大小应该比滚动层本身大，这样才能让滚动层滚动起来。所以我们把滚动区域的高调整为800。
接着在滚动层内创建一个如下的panel，并为其添加如下的子控件。
快速复制上图控件并调整位置，清理滚动层的背景颜色，将滚动层的颜色设置为“无颜色”，将panel_shop层的颜色设为白色。
7）这时，改变画布大小试试，如果一切正常，那么这个画布里的几乎所有内容都会根据当前的分辨率进行适配。
你也看到啦，我们说的是几乎，那还有什么不能进行适配啦？比如：字体大小，滚动层滚动区域大小等等，它们对并勾选“自适应分辨率”项是不敏感的，这让人有点头疼，这可能是Cocos Studio存在的一个bug吧。所以为了避免一些不必要的问题，我们把画布大小改为程序中所设置的design resolution，既480*320，同时把滚动层滚动区域大小调整为一个比较合适的大小。
制作完成后勾选滚动层的“裁剪”属性，这样滚动层超出自身区域的内容将不会显示。
8）打开导出对话框，选择导出路径，按默认配置导出资源。
代码中加载
Cocos2d-x 使用UI框架的步骤：
1)Cocos2d-x 导入Cocos Studio的UI编辑器文件(json和资源)
2)编码获取/创建控件，绑定控件
3)使用控件做逻辑处理：比如，按钮、ScrollView等等控件的响应事件。
打开GameScene.cpp添加头文件
#include &cocostudio/CCSGUIReader.h&
#include &ui/CocosGUI.h&
编写initUI函数，先简单初始化下游戏UI，如下列代码所示：
void GameScene::initUI()
playerLayout = static_cast&Layout&(cocostudio::GUIReader::getInstance()-&widgetFromJsonFile(&Ui/Ui_1.json&));
addChild(playerLayout, 10);
// 获取商店层和购物车按钮
panel_shop = dynamic_cast&Layout&(playerLayout-&getChildByName(&panel_shop&));
shop_btn = dynamic_cast&Button&(playerLayout-&getChildByName(&button_shop&));
// 为购物车按钮绑定TouchEvent回调
shop_btn-&addTouchEventListener(CC_CALLBACK_2(GameScene::menuShopCallback, this));
// comeOut控制商店层和购物车按钮是否弹出
按钮是要有响应函数的，又由于它是Widget的一个子类，所以采用的TouchEvent的回调方式。这里所说的TouchEvent响应主要是使用在Widget上的，可以将其看做是函数回调的一个扩展，为更多的响应处理提供可能。下面是按钮回调的实现：
void GameScene::menuShopCallback(cocos2d::Ref* pSender, Widget::TouchEventType type)
Size winSize = Director::getInstance()-&getWinSize();
switch (type)
case Widget::TouchEventType::BEGAN:
// 按下按钮
// 为shop_btn添加一个缩放效果
shop_btn-&runAction( EaseElasticInOut::create(Sequence::create( ScaleBy::create(0.1f, 2),ScaleBy::create(0.2f, 0.5f), NULL), 0.5f));
case Widget::TouchEventType::MOVED:
// 移动按钮
case Widget::TouchEventType::ENDED:
// 放开按钮
if(comeOut == false)
// 为panel_shop和shop_btn添加一个弹性的移动效果，移动的距离是(panel_shop-&getContentSize().width / 3 * 2, 0)个单位。
panel_shop-&runAction( EaseElasticOut::create(MoveBy::create(1, Vec2(panel_shop-&getContentSize().width / 3 * 2, 0)), 0.5f));
shop_btn-&runAction( EaseElasticOut::create(MoveBy::create(1, Vec2(panel_shop-&getContentSize().width / 3 * 2, 0)), 0.5f));
else if(comeOut == true) // 缩回
panel_shop-&runAction( EaseElasticOut::create(MoveBy::create(1, Vec2(-panel_shop-&getContentSize().width / 3 * 2, 0)), 0.5f));
shop_btn-&runAction( EaseElasticOut::create(MoveBy::create(1, Vec2(- panel_shop-&getContentSize().width / 3 * 2, 0)), 0.5f));
case Widget::TouchEventType::CANCELED:
// 取消点击
当商店层和购物车按钮弹出时，如果触碰到了它们范围之外的区域，它们应该缩回。所以，在onTouchesBegan函数中需要添加如下的一段代码。
void GameScene::onTouchesBegan(const std::vector&Touch&&touches, Event
Size winSize = Director::getInstance()-&getWinSize();
if(comeOut == true)
panel_shop-&runAction( EaseElasticOut::create(MoveBy::create(1, Vec2(-panel_shop-&getContentSize().width / 3 * 2, 0)), 0.5f));
shop_btn-&runAction( EaseElasticOut::create(MoveBy::create(1, Vec2(- panel_shop-&getContentSize().width / 3 * 2, 0)), 0.5f));
好的，现在我们已经简单的实现了UI的显示了。下一章我们将替换滚动层中的商品项和信息，并拖动商品到地图。
没有个人说明
泰然正式启动，欢迎各位前来投稿！
5 4 2 2 2 1 1 1 1 1
9888 7173 7059 6506 5980 5923 5548 4816 3865 3595