如何使用 CocoStudio 场景编辑器制作《魔卡幻想》主界面
2018-06-28 · 知道合伙人数码行家
关注
展开全部
使用 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 资源的承载。
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 资源的承载。
2015-10-10
展开全部
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询