Question

如何使用 CocoStudio 场景编辑器制作《魔卡幻想》主界面

Answer 1

　　使用 CocoStudio 场景编辑器制作《魔卡幻想》主界面
　　1 CocoStudio 场景编辑器
　　使用 CocoStudio 场景编辑器来创建游戏场景，其中包含游戏 UI 与动画，来定制一个游戏主界面。
　　2 使用 CocoStudio 完成《魔卡幻想》场景编辑
　　对于环境的搭建使用，请参考之前的文章，或者实时关注 官方 最新版本的安装使用方法。
　　2.1 UI 编辑器制作游戏主界面
　　创建项目(项目名称：MysticalCard)，并导入项目 UI 资源，添加 一图片框设定背景图片。注意在工具拦设置 “画布” 的大小（如果需要），这将决定着你的设计分辨率，在运行时还需要注意屏幕的适配问题，如放大缩小，位置偏移等，视具体情况而定。
　　为界面添加 UI 元素，图片框等，请根据自己的需要定制
　　实践过程中的注意事项
　　添加控件时注意必要的属性设置
　　控件的命名规范，这有助于我们今后在后台编写代码获取界面元素
　　可交互的控件的 “可交互属性” 开启
　　2.2 建立关键帧动画
　　除了主界面一些必要的 UI 控件，我们还需要一个 “对话框指示” 的动画效果。这是一个帧动画。
　　准备工作。

　　打开 CocoStudio ,启动 动画编辑器
　　创建一个新的项目，后导入资源（在 “资源窗口” 中，点击 “文件” 或者 “文件夹” 标示，添加需要的素材资源）
　　在 “资源窗口中” 点击关键帧动画的守帧图片，拖动至 “渲染窗口”
　　将第一关键帧拖动至 “渲染窗口” 中心。 可以使用工具栏，快速定位至窗口中心，使图片显示在正中间，可以让动画更好的定位。
　　添加其它帧图片，注意，我们需要选中剩余图片，然后 “拖动” 到 “对象结构” 视图中的 “第一关键帧” 所在的对象，如下图所示。
　　关键帧 与 骨骼动画操作区别：在使用骨骼动画的时候，我们将骨骼中的各部分元素，直接拖动添加到 “渲染窗口”，以摆放各骨骼的位置关系，而在 “对象结构” 视图中则表现为，一个列表，标示着每一块骨骼对象，不同帧所改变的是各个骨骼对象的位置，以达到骨骼动画效果。
　　而在关键帧动画中，它的对象结构只有一个，而在每一帧修改的不是其位置，而是其显示内容。这是两者之间的区别，那操作方式也有所不同。而对于它们所导出的 资源 则是相同，用法也是同样。
　　剩余帧添加之后，我们看见在 “关键帧” 视图中，已经有了多帧动画，可以播放动画，查看效果，并可以通过修改 “速率” 来控制动画的播放速度。
　　导出动画资源，导出的资源文件可以被我们在 Cocos2d-x 中以代码的方式直接加载，然后播放其动画，也可以作为 场景编辑器中的一个元素，被添加在场景编辑器里，后面的内容就是使用 场景编辑器来加载一个动画的方式。
　　2.3 场景编辑器的 资源“整合”
　　使用 CocoStudio 可以很好的帮助游戏开发过程中 分工合作。动画编辑器 和 UI 编辑器可以由多个人进行编辑，最后再由一个人统合资源，这也就是场景编辑器的优点了，它除了能支持 CocoStudio 本身所自带的动画编辑器，UI 编辑器，它还能支持，Tmx 地图资源，粒子编辑器的粒子效果资源，声音资源等～并且不断扩展中。以下将给出如何在 场景编辑器整合我们之前所创建的动画与 UI 界面的资源，来实现我们一个场景的运行效果。它的步骤如下：
　　1.启动场景编辑器，新建一个场景项目。并设置 “画布” 大小。画布大小要适量。
　　2.我们拖动一个 UI 控到画布之上，它作为我们之前导出的 UI 资源的承载。