如何使用 CocoStudio 场景编辑器制作《魔卡幻想》主界面 | 泰然网
1028 次浏览 |
Table of Contents
1 CocoStudio 场景编辑器
前面的文章 《》《》，其中介绍了如何使用动画编辑器创建动画与使用 UI 编辑器创建游戏配置界面，而本文将集两者之大成，使用 CocoStudio 场景编辑器来创建游戏场景，其中包含游戏 UI 与动画，来定制一个游戏主界面。
2 使用 CocoStudio 完成《魔卡幻想》场景编辑
对于环境的搭建使用，请参考之前的文章，或者实时关注
最新版本的安装使用方法。
2.1 UI 编辑器制作游戏主界面
创建项目(项目名称：MysticalCard)，并导入项目 UI 资源，添加 一图片框设定背景图片。注意在工具拦设置 “画布” 的大小（如果需要），这将决定着你的设计分辨率，在运行时还需要注意屏幕的适配问题，如放大缩小，位置偏移等，视具体情况而定。
为界面添加 UI 元素，图片框等，请根据自己的需要定制
实践过程中的注意事项
添加控件时注意必要的属性设置
控件的命名规范，这有助于我们今后在后台编写代码获取界面元素
可交互的控件的 “可交互属性” 开启
2.2 建立关键帧动画
除了主界面一些必要的 UI 控件，我们还需要一个 “对话框指示” 的动画效果。这是一个帧动画。
准备工作。
打开 CocoStudio ,启动 动画编辑器
创建一个新的项目，后导入资源（在 “资源窗口” 中，点击 “文件” 或者 “文件夹” 标示，添加需要的素材资源）
在 “资源窗口中” 点击关键帧动画的守帧图片，拖动至 “渲染窗口”
如下图所示：
将第一关键帧拖动至 “渲染窗口” 中心。 可以使用工具栏，快速定位至窗口中心，使图片显示在正中间，可以让动画更好的定位。
添加其它帧图片，注意，我们需要选中剩余图片，然后 “拖动” 到 “对象结构” 视图中的 “第一关键帧” 所在的对象，如下图所示。
关键帧 与 骨骼动画操作区别：在使用骨骼动画的时候，我们将骨骼中的各部分元素，直接拖动添加到 “渲染窗口”，以摆放各骨骼的位置关系，而在 “对象结构” 视图中则表现为，一个列表，标示着每一块骨骼对象，不同帧所改变的是各个骨骼对象的位置，以达到骨骼动画效果。
而在关键帧动画中，它的对象结构只有一个，而在每一帧修改的不是其位置，而是其显示内容。这是两者之间的区别，那操作方式也有所不同。而对于它们所导出的 资源 则是相同，用法也是同样。
剩余帧添加之后，我们看见在 “关键帧” 视图中，已经有了多帧动画，可以播放动画，查看效果，并可以通过修改 “速率” 来控制动画的播放速度。
导出动画资源，导出的资源文件可以被我们在 Cocos2d-x 中以代码的方式直接加载，然后播放其动画，也可以作为 场景编辑器中的一个元素，被添加在场景编辑器里，后面的内容就是使用 场景编辑器来加载一个动画的方式。
2.3 场景编辑器的 资源“整合”
使用 CocoStudio 可以很好的帮助游戏开发过程中 分工合作。动画编辑器 和 UI 编辑器可以由多个人进行编辑，最后再由一个人统合资源，这也就是场景编辑器的优点了，它除了能支持 CocoStudio 本身所自带的动画编辑器，UI 编辑器，它还能支持，Tmx 地图资源，粒子编辑器的粒子效果资源，声音资源等～并且不断扩展中。以下将给出如何在 场景编辑器整合我们之前所创建的动画与 UI 界面的资源，来实现我们一个场景的运行效果。它的步骤如下：
启动场景编辑器，新建一个场景项目。并设置 “画布” 大小。画布大小要适量。
我们拖动一个 UI 控件到画布之上，它作为我们之前导出的 UI 资源的承载。
我们将之前的 UI 编辑器所导出的资源，导入到当前场景项目中来，导入方式与 UI 编辑器导入资源方式同样，如下图：
为 UI 控件的 “文件” 属性赋值：我们在资源视图中找到 UI 编辑器所导出的 UI 资源，其目录下包含 json 文件资源（如这里的 “MysticalCard_1.json”）,将其拖动到 UI 控件的文件 属性中去，如下图所示：
前面的步骤已经将 UI 资源导入场景之内，现在需要添加之前所创建的动画资源。
我们以相同的方式导入动画编辑器所导出的动画资源文件。
拖动一个骨骼控件至场景界面，如下图所示。
为骨骼控件的 “文件” 属性赋值，其值为 动画资源中的 ExportJson（或者 json 文件，这取决于动画资源的导出方式） 文件。
运行效果：当我们建立好场景之后，可以通过工具栏运行按钮，点击查看效果，这意味着你不用将所有的资源文件，手动以代码的方式添加到 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 项目工程都可以在
没有个人说明
5 4 2 2 2 1 1 1 1 1
9650 6974 6883 6307 5805 5804 5421 4694 3818 3499
115 麦田守望者如何使用 Cocos Studio 场景编辑器制作《魔卡幻想》主界面_百度知道
如何使用 Cocos Studio 场景编辑器制作《魔卡幻想》主界面
我有更好的答案
基本需求：安装JDK。Windows用户需要选择正确的版本，比如，你如果下载的IDE是64位版本，那么你的JDK也需要是64位的版本。Windows用户安装Python 2.7。Mac OS X已经集成了python 2.7，所以可以跳过这一步。请下载Cocos2d-x 3.2来开发Cocos2d-x Lua游戏。请下载Cocos2d-JS 3.0-RC2来开发Cocos2d-x JavaScript游戏。注意:Cocos Code IDE是在Cocos2d-x 3.x/Cocos2d-JS 3.x的基础上开发的，因此，老版本的引擎(Cocos2d-x 2.x)不能在IDE上正常使用。当前版本(1.0.0-RC1)适配了最新的引擎版本(Cocos2d-x 3.2和Cocos2d-JS 3.0 RC2)并且能够向前兼容旧的3.x版本，为了更好的使用IDE，请下载兼容的引擎版本。引擎和所创建的工程所在的路径都不能包含非英文字符，即路径中不能包含中文。附加需求：在iOS的模拟器上调试确定...
其他类似问题
为您推荐：
编辑器的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁1048人阅读
CocosStudio UI编辑器（1.6.0）使用调研 （基于cocos2dx-3.2)
1. 游戏使用的分辨率适配模式
核心设计区域960*640, 对于宽屏使用fix height 640, 对于方屏（如ipad)使用fix width 960, 保证任意屏幕设计分辨率至少为960*640
例如： iphone5 设计分比率为 ， ipad为960*720
因此，UI需要在水平/竖直两个方向上自适应
ps: 之所以没统一采用fix height，是因为ipad在fix height 640的情况下，design width只有853, 美术设计的核心区域被压缩，难于设计且在宽屏上效果不好。
2. CocosStudio UI编辑器对于自适应的处理
2.1 官方提供的功能
在根节点上勾选“自适应分辨率”，且使用百分比坐标/尺寸。
对于UI控件的位置，是可以自适应的，但是对于需要动态调整大小的控件，如九宫格图片，百分比尺寸只能在两个方向上同时起作用，
不能只延伸一个方向，另一个方向保持不变。
而当我们想用代码去调整九宫格尺寸，在代码中取得控件的坐标并计算出合适的位置和尺寸时，发现了另外一个问题：在“自适应分辨率”情况下，用代码获得的控件坐标是和导出时使用的画布的尺寸相关的！这导致无法使用代码进行自适应的调整。
结论是：如果游戏完全不使用代码去调整控件尺寸和位置，所有的坐标和尺寸都只在编辑器中设置，官方提供的“自适应分辨率”功能是可以用的。但是实际肯定会有用代码调整的需求，所以我们不能使用这个方案。
2.2 我们使用的方案
画布使用和核心设计区域一致的固定尺寸 960*640。
保证核心区域整体处于屏幕中心，通过代码调整一些控件的位置和尺寸，在水平和竖直两个方向上做自适应调整。
例如以下代码是讲编辑器制作的UI载入，并居中显示：
local root = ccs.GUIReader:getInstance():widgetFromJsonFile(&xx.json&)
self:addChild(root)
root:setAnchorPoint(cc.p(0.5,0.5))
root:setPosition(cc.p(design_width/2, design_height/2))
以下代码为将全屏背景图做一个等比缩放，使得铺面全屏：
function scaleBg(bg)
&&& local visibleSize = cc.Director:getInstance():getVisibleSize()
&&& local bgSize = bg:getContentSize()
&&& local scalex = visibleSize.width/bgSize.width
&&& local scaley = visibleSize.height/bgSize.height
&&& local scale = scalex
&&& if scalex&scaley then scale = scaley end
&&& bg:setScale(scale)
注意：这相当于cocos的no border模式，因此会有部分背景图出屏，因此要根据最宽和最方的设备分辨率，计算出背景图的尺寸和核心显示区域，保证所有重要内容不出屏。
以下代码为调整上下两个九宫格长条背景图的尺寸和位置，使得宽度适应屏幕，但高度保持不变，同时调整y坐标使得图上下贴边：
&&& local bgTop = ccui.Helper:seekWidgetByName(root, &bgTop&)
&&& local bgBottom = ccui.Helper:seekWidgetByName(root, &bgBottom&)
&&& local dy = (design_height - 640)/2&&& -- 640为核心设计分辨率高度
&&& bgTop:setPositionY(bgTop:getPositionY()+dy)&&&&&& --由于核心区域是居中的，bgTop本来就是贴核心区域的上边的，此时加上分辨率高度的差值，使其向上贴边到实际的屏幕上边
&&& bgBottom:setPositionY(bgBottom:getPositionY()-dy)
&&& -- 单方向调整九宫格图的宽度
&&& local function setScale9BgWidth(scale9Bg,width)
&& &&& &local h = scale9Bg:getContentSize().height
&& &&& &scale9Bg:setContentSize(width,h)
&&& setScale9BgWidth(bgTop, design_width) &
&&& setScale9BgWidth(bgBottom, design_width)
&以下代码为手工设置一个控件居中于屏幕，由于编辑器里面锚点有问题，所以有时候必须在代码里面设置：
&local panTab = ccui.Helper:seekWidgetByName(root, &panTab&)
&panTab:setAnchorPoint(0.5,0)
&panTab:setPositionX(design_width/2)
&总结：如果控件需要针对实际设计分辨率调整尺寸和坐标，则需要使用代码设置。虽然麻烦一些，但能达到想要的效果。
&而核心分辨率之内的控件，则可以使用编辑器摆放，可以使用绝对坐标，相对坐标（layout)，使用绝对坐标时可使用锚点和百分比，但锚点有bug下面会说。
&绝对坐标和相对坐标可混合使用，注意只有容器才支持layout，layout的好处之一是可以停靠在兄弟控件上，对于控件尺寸可变的布局比较方便。
3 使用UI编辑器对于资源的处理
如果一开始就打算使用编辑器，则可以让美术出散图，使用编辑器导出plist。
如果已经有了美术做好的plist和单张背景，则要把做好的plist资源和图片资源拷贝到编辑器的资源目录中，并在导出时要选择使用小图导出，编辑器还是会将小图导出到export目录，但这些图和plist是和之前一样的，因此不需要再拷贝过去，只需要把导出的json拷贝到游戏资源目录。
4 UI编辑器的一些坑
最大的坑：游戏中以原点为原点，而编辑器中以锚点为原点。这导致当编辑器中锚点不在(0,0)时，编辑器的效果和游戏中是不一样的。我们只能尽量避免使用非(0,0)的锚点，而一定要使用时，只能牺牲编辑器的预览效果，以游戏效果为准。（即在编辑器中位置看起来是错的）
列表不刷新：各种列表都有可能不刷新，比如资源列表，控件列表，停靠列表，这种直接无视或多刷几次。
控件列表里面调整控件顺序后，画布上的控件绘制顺序有可能不改变。必须关闭项目再次打开才行。
颜色选取不支持吸色，这不算是坑，但是应该有。
5 UI编辑器的一些优点
支持跨画布的复制粘贴。这个当然应该是必备的。
cocos2d-x 3.x的Widget控件还是比较好用的，且编辑器里面支持的都是Widget控件，并不支持以前的node控件。
layout布局在某些局部panel里面，有时很好用。
lua绑定比以前要方便了，使用seekWidgetByName可以很方便的查找到控件。
编辑器虽然有一些坑，但是可以绕过。虽然要写一些代码去做自适应，但是并不是很多。总体还是可以用的。
使用编辑器可以有效减少代码量。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：362877次
积分：5513
积分：5513
排名：第2039名
原创：165篇
转载：12篇
评论：296条
(1)(1)(3)(1)(2)(4)(1)(1)(2)(1)(3)(1)(2)(2)(2)(2)(1)(1)(13)(7)(3)(2)(1)(2)(2)(1)(2)(4)(2)(5)(7)(1)(1)(1)(3)(4)(4)(2)(1)(1)(3)(1)(1)(1)(1)(1)(2)(2)(3)(1)(1)(1)(3)(4)(3)(2)(2)(1)(1)(2)(3)(11)(1)(4)(4)(6)(1)(1)(5)(5)(2)Cocos2d-x 多分辨率适配完全解析 | 泰然网
2980 次浏览
文章目录u0u0（）原创，首发于泰然，转载请著名出处。
从Cocos2d-x 2.0.4开始，Cocos2d-x提出了自己的多分辨率支持方案，废弃了之前的retina相关设置接口，提出了design resolution概念。
有以下相关接口：
CCEGLView::sharedOpenGLView()-&setDesignResolutionSize() //设计分辨率大小及模式
CCDirector::sharedDirector()-&setContentScaleFactor() //内容缩放因子
CCFileUtils::sharedFileUtils()-&setResourceDirectory() //deprecated
CCFileUtils::sharedFileUtils()-&setSearchPaths() //资源搜索路径
CCEGLView::sharedOpenGLView()-&getFrameSize() //屏幕分辨率
CCDirector::sharedDirector()-&getWinSize() //设计分辨率
CCDirector::sharedDirector()-&getVisibleSize() //设计分辨率可视区域大小
CCDirector::sharedDirector()-&getVisibleOrigin() //设计分辨率可视区域起点
从cocos2d-2.1beta3-x-2.1.1开始，
CCFileUtils::sharedFileUtils()-&setResourceDirectory()
CCFileUtils::sharedFileUtils()-&setSearchPaths(searchPath)
从Cocos2d-x 2.1.3开始，新加入了两种ResolutionPolicy（kResolutionFixedHeight， kResolutionFixedWidth），共5中模式。
官方分别在和 有介绍。
本文从引擎使用者角度分析Cocos2d-x的多分辨率适配技术。
从Retina 到 design resolution
在Cocos2d-x 2.0.4之前，有Retina的概念，这个是从cocos2d-iphone过来的概念。
cocos2d-iphone为了支持Retina iphone 设备，使用了-hd等后缀来区分iphone和Retine iphone的图片资源。在设计游戏的时候，使用point 坐标系，而非真正的pixel坐标系。这点和iOS native应用开发提出的point概念一至，不用修改代码，就能在640×960的设备上跑之前320×480的程序，只是图片会看起来模糊，一旦加入@2x的图片，iOS自动加载@2x的图片，实现对Retna iphone的支持。
point坐标系，在一定范围内能解决多分辨率支持的问题。但是当iphone5，ipad 3出来以后，iOS总共有5个分辨率需要支持，如果做一个universal的程序，是相当痛苦的。point坐标系并不能完全解决问题，android上的分辨率情况更加复杂。
design resolution应该是从point坐标系进化过来的概念，目的是屏蔽设备分辨率，精灵坐标都在design resolution上布局，但要实现这个目标并不简单。Cocos2d-x提供了一组相关的接口和5种分辨率适配策略，哪种策略才是我们需要的，下面我们一同探寻。
资源分辨率，设计分辨率，屏幕分辨率
Resources width 以下简写为RW，Resources height 以下简写为RH
Design width 以下简写为DW，Design height 以下简写为DH
Screen width 以下简写为SW，Screen height 以下简写为SH
在SDK的samples中有个HelloCpp项目。展示了如何使用多分辨率方案。
以下以HelloCpp的AppMacros.h配置基本相同，但是交换了宽高的数值，以竖屏游戏为例子。
Cocos2d-x图片显示有下面两个逻辑过程。
资源布局到 到 设计分辨率，设计分辨率 布局到 屏幕。
如下图所示：
接口setContentScaleFactor()和setSearchPaths()控制着第一个转换过程。
而setDesignResolutionSize()控制第二个过程。两个过程结合在一起，影响最终的显示效果。
从资源分辨率到设计分辨率
setSearchPaths()需要根据当前屏幕分辨率做恰当的设置，HelloCpp展示了一套简单方案，但可能不是最佳的。
setContentScaleFactor()决定了图片显示到屏幕的缩放因子，但是这个接口的参数不是通过资源图片的宽、高比屏幕宽、高得来。Cocos2d-x引擎设计试图屏蔽游戏开发者直接去关注屏幕，所以这个因子是资源宽、高比设计分辨率宽、高。
setContentScaleFactor()通常有两个方式来设置参数。
RH/DH或RW/DW，不同的因子选择有不同的缩放负作用。
先看一张图:
用高度比作为内容缩放因子，保证了背景资源的垂直方向在设计分辨率范围内的全部显示。
用宽度比作为内容缩放因子，保证了背景资源的水平方向在设计分辨率范围内的全部显示。
从设计分辨率到屏幕分辨率
setDesignResolutionSize(DW, DH, resolutionPolicy)
有三个参数，设计分辨率宽，设计分辨率高，分辨率策略。
前两个很好理解，复杂点在分辨率策略的选择上。
先来看kResolutionExactFit，kResolutionNoBorder，kResolutionShowAll这三种情况，2.1.3新加入的策略稍后分析。
三种策略的设计分辨率都是传入值，内部不做修正。
先看一张图：
kResolutionShowAll
屏幕宽、高分别和设计分辨率宽、高计算缩放因子，取较(小)者作为宽、高的缩放因子。保证了设计区域全部显示到屏幕上，但可能会有黑边。
kResolutionExactFit
屏幕宽 与 设计宽比 作为X方向的缩放因子，屏幕高 与 设计高比 作为Y方向的缩放因子。保证了设计区域完全铺满屏幕，但是可能会出现图像拉伸。
kResolutionNoBorder
屏幕宽、高分别和设计分辨率宽、高计算缩放因子，取较(大)者作为宽、高的缩放因子。保证了设计区域总能一个方向上铺满屏幕，而另一个方向一般会超出屏幕区域。
kResolutionNoBorder是之前官方推荐使用的方案，他没有拉伸图像，同时在一个方向上撑满了屏幕，但是2.1.3新加入的两种策略将撼动kResolutionNoBorder的地位。
kResolutionFixedHeight和kResolutionFixedWidth都是会在内部修正传入设计分辨率，以保证屏幕分辨率到设计分辨率无拉伸铺满屏幕。
kResolutionFixedHeight
保持传入的设计分辨率高度不变，根据屏幕分辨率修正设计分辨率的宽度。
kResolutionFixedWidth
保持传入的设计分辨率宽度不变，根据屏幕分辨率修正设计分辨率的高度。
结合两个过程
第一过程有两种情况，第二过程有5种情况，在一个分辨率下会有10种可能的方案组合。
如何选择自己需要的？
我们需要作出选择，是牺牲效果还是牺牲部分显示区域。
这里我们选者牺牲一个方向的显示区域为例，结果说明两个过程。
在我的游戏里面，背景图的高需要全部显示，而宽方向可以裁减。
要实现这个目的，需要保证两个过程都是在宽方向裁减。
第一过程选择 setContentScaleFactor(RH/DH)
第二过程有两个选择：kResolutionNoBorder和kResolutionFixedHeight
为了说明两者的区别，需要结合VisibleOrigin和VisibleSize。
kResolutionNoBorder情况下，设计分辨率并不是可见区域，我们布局精灵需要根据VisibleOrigin和VisibleSize来做判断处理。
而kResolutionFixedHeight则不同，设计分辨率就是可见区域，VisibleOrigin总是(0,0)
getVisibleSize() = getWinSize()，kResolutionFixedHeight达到了同样的目的，但是却简化了代码。
kResolutionFixedHeight和kResolutionFixedWidth是kResolutionNoBorder的进化，新项目中建议立即开始使用这两种方式。
kResolutionFixedHeight
适合高方向需要撑满，宽方向可裁减的游戏，结合setContentScaleFactor(RH/DH)使用。
kResolutionFixedWidth
适合宽方向需要撑满，高方向可裁减的游戏，结合setContentScaleFactor(RW/DW)使用。
tip:正确设置AppMacros.h里面的宽高，注意横屏游戏和竖屏游戏的不同。
keep young!
5 4 2 2 2 1 1 1 1 1
9650 6974 6883 6307 5805 5804 5421 4694 3818 3499
115 麦田守望者