发布网友 发布时间:2022-04-19 19:42
共1个回答
热心网友 时间:2022-04-11 21:36
1CocoStudio场景编辑器前面的文章《使用CocoStudio创建Cocos2d-x序列帧和骨骼动画》《如何使用CocoStudioUI编辑器实现《乱斗堂》设置界面》,其中介绍了如何使用动画编辑器创建动画与使用UI编辑器创建游戏配置界面,而本文将集两者之大成,使用CocoStudio场景编辑器来创建游戏场景,其中包含游戏UI与动画,来定制一个游戏主界面。2使用CocoStudio完成《魔卡幻想》场景编辑对于环境的搭建使用,请参考之前的文章,或者实时关注官方最新版本的安装使用方法。2.1UI编辑器制作游戏主界面创建项目(项目名称: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项目工程都可以在这里查看。