如何使用Cocos Studio UI编辑器

启动，新建一个项目： 这样就完成项目的创建。 在编辑之前，需要先给项目提供资源，一种是把资源拖到右边的资源列表或都在资源列表打开选择资源对话框。 插入结果 其它资源依此类推。 项目创建会默认创建一个画布和一个容器panel： 在正式编辑UI

开发环境与新建项目

如果没用过Cocos2d-JS的朋友们，可以到cocos官网上去下载，此处我们用的是30final，或者，我们可以下载Lite版本的Cocos2d-JS，lite版本可以很方便的根据需求去下载所需要的模块，可以很大的减少代码的体积，可在此下载，我们需要用到的模块有coreactionsmenuprogress-timer，在该页面中选择Customized Version然后勾选上述几个模块，并点击下载。

此处我们使用cocos 命令行来创建新的工程

$cd cocos2d-js/tools/cocos2d-console/bin $/cocos new weChat -l js --no-native $cd weChat/ $/cocos run -p web

环境搭建并不是这篇文章的重点，更详细的信息可以参考：《搭建 Cocos2d-JS 开发环境》。

主界面及其页面切换框架的实现

程序的入口代码在mainjs中，用编辑器打开并修改为下面的代码。

ccgameonStart = function () { ccviewadjustViewPort(true); ccviewenableAutoFullScreen(false); var mode = ccsysisMobile && windownavigatoruserAgentindexOf("MicroMessenger") != -1 ccResolutionPolicyFIXED_HEIGHT : ccsysisMobile ccResolutionPolicyFIXED_WIDTH : ccResolutionPolicySHOW_ALL; ccviewsetDesignResolutionSize(640, 831, mode); //load resources ccLoaderScenepreload(g_resources, function () { ccdirectorrunScene(new MainScene()); }, this);};ccgamerun();

关键点解析如下：

1设置浏览器meta来适配屏幕，引擎内部会根据屏幕大小来设置meta的viewport值，会达到更好的屏幕适配效果。

2针对手机浏览器和PC浏览器启用不同的分辨率适配策略。

3预加载声音等资源。 ccLoaderScenepreload会生成一个“加载中 x％”的界面，等待资源加载结束后，调用第二个参数传入的匿名函数。 对于基于html的游戏，页面是放在服务器端供浏览器下载的，为了获得流畅的用户体验，ccLoaderScenepreload让浏览器先把远程服务器的资源缓存到本地。需要预加载的资源定义在src/Resourcesjs文件中。

4启动游戏的第一个场景。

主界面分为2个部分，第一个部分是不随着屏幕移动而移动的向上箭头和音乐按钮，第二个部分是根据用户滑动屏幕而改变的场景。

我们先根据需要，构建出需要的函数，并一一实现他，这里我们使用ccSceneextend()来扩展出一个scene，并在这个scene中构建出我们需要功能，并一一实现他。

由引擎提供的ccSceneextend方法，让js能实现高级面向对象语言的继承特性。 onEnter方法是场景初始化完成即将展示的消息回调，在onEnter中必须调用this_super();来确保Scene被正确的初始化。

用于初始化UI的函数 initUI()

用于初始化touch事件的函数 initTouch()。

用于切换页面的函数changePage()和记录当前页面的参数currentIndex

用于控制箭头显示隐藏的函数toggleArrow()

用于控制音乐按钮回调的函数

var MainScene = ccSceneextend({ listener: null, accelListener: null, currentIndex: 0, sceneList: [], ctor: function () { this_super(); ccspriteFrameCacheaddSpriteFrames(resfirstPage_plist); }, onEnter: function () { this_super(); thisinitUI(); thisaddTouch(); }, initUI: function () { }, toggleMusicCallback: function (sender) { }, togleArrow: function (status) { }, addTouch: function () { }, changePage: function (index, next) { } });

接下来我们一一来实现。

首先，我们来实现音乐按钮与箭头，我们在initUI()中添加如下代码。

var bg = new ccSprite(resbackground_png); bganchorX = 0; bganchorY = 0; bgscaleX = ccwinSizewidth / bgwidth; bgscaleY = ccwinSizeheight / bgheight; thisaddChild(bg, 0); thisarrow = new ccSprite("#arrowpng"); thisarrowsetPosition(ccpAdd(ccvisibleRectbottom, ccp(0, 50))); var posY = thisarrowy; var arrowAction = ccrepeatForever(ccsequence(ccspawn(ccmoveTo(08, ccp(thisarrowx, posY + 30))easing(cceaseIn(05)), ccfadeOut(1)), ccdelayTime(08), cccallFunc(function () { thisarrowy = thisarrowy - 30; thisarrowopacity = 255; }, this))); thisarrowrunAction(arrowAction); thisaddChild(thisarrow, 1); thismenuItemToggle = new ccMenuItemToggle(new ccMenuItemImage("#musicpng"), new ccMenuItemImage("#music_selpng"), thistoggleMusicCallback, this); thismenuItemTogglesetPosition(ccpAdd(ccvisibleRectright, ccp(-thismenuItemTogglewidth / 2 - 30, 140))); var togglemenu = new ccMenu(thismenuItemToggle); togglemenuanchorX = 0; togglemenuanchorY = 0; togglemenux = 0; togglemenuy = 0; thisaddChild(togglemenu, 1);

我们在屏幕中，添加了一个背景的sprite，并且，将这个背景进行缩放，以让其在各种情况下都布满屏幕,并且我们为箭头设置了一系列动画，让其能够循环播放，Cocos2d-JS，为了方便广大开发者，提供了丰富多彩的动画(actions)。下面，我们先简单的介绍一下几个常用的action的API。

ccrepeatForever(action) 无限循环某个action

ccsequence(action1,action2,)顺序执行括号里面的action

ccspawn(action1,action2,)同时执行括号里面的action

ccmoveTo(duration,targetPoint)从当前位置在duration(秒)时间内移动到点targetPosition的action

cceaseIn(rate) 以rate为ease参数执行easeIn的action，一般是这样使用的actioneasing(cceaseIn(rate))

fadeOut(duration) 在duration时间内从屏幕淡出的action

ccdelayTime(duration) 延时duration时间的action，通常用于等待一段时间后再播放某个action

cccallFunc(function) 用于执行action的回调，通常在某个action结束后需要执行某段函数的话，可以使用它。

通过上述的简单介绍，是不是对action有了一个初步的了解了呢，我们实际来 *** 作一下：

我们需要一个箭头，往上走并慢慢减速和透明，最终消失，然后在原来的位置出现重复下去，所以我们可以归纳为，移动+淡出-->回到初始位置-->移动+淡出。这样我们很清晰就归纳出如何去写这个action了，我们使用ccspawn(ccmoveTo(),ccfadeOut())就构建出了移动+淡出这个效果，然后使用cccallFunc()设置了这次action播放完毕要修改的位置回到初始位置，接着我们使用ccsequence()来顺序执行这两个action，这样一来，一次action就编写完成了，最后我们只需要将这个action使用ccrepeatForever()就完成了我们需要的重复播放。

细心的读者可能会问了，代码中的位置设置，为什么是ccpAdd(ccvisibleRectright,ccp())？这是cocos为了让大家更方便的做屏幕适配所定义的9个点，这9个点会根据不同屏幕大小来动态设定，例如ccvisibleRectcenter，这个点的位置，无论在什么分辨率的屏幕下，都是在屏幕的正中央，这样我们就可以根据这个点的位置来做相对布局，已达到适配屏幕的目的，例如上面的代码thisarrowsetPosition(ccpAdd(ccvisibleRectbottom, ccp(0, 50)));就是将arrow这个sprite，放在屏幕的底部的正中央，然后再在y轴上加50个像素，这样，无论屏幕的大小，都能保持在屏幕的底部的正中央向上50个像素。这也是我们做相对布局的基础。后续的布局，我们都会根据这些点的坐标来设置。

随着智能手机和平板电脑的普及，手游已经成为全民娱乐的首选方式之一，不同类型的移动游戏如雨后春笋般涌现。然而，随着手游产品生命周期的缩短，手游市场产品同质化现象日渐严重。作为游戏产业链的上游，触控科技走在时代前端，推出免费、开源的cocos游戏引擎，打造游戏开发一站式解决方案，重新定义无缝工作流，助力开发者高效完成游戏开发，从容应对移动互联网时代手游市场的风云变幻，引导了一场游戏开发引擎的变革。

触控科技cocos游戏引擎

Cocos打造完善工作流，提升效率降低成本

Cocos游戏引擎的前身是Cocos 2d-x，这款被媒体誉为“千万级手游摇篮”的产品在全球被超过50万开发者使用，据不完全统计，约有两万多款精品游戏基于cocos引擎开发，曾孕育了十多款累计流水破十亿的游戏。

Cocos游戏引擎坚持“为手游而生”的宗旨，将Cocos 2d-x及其配套的跨平台游戏开发工具Cocos Studio编辑器和专为Cocos 2d-x Lua & JavaScript 开发人员准备的Cocos Code IDE代码编辑调试器等多款产品整合，用统一的入口解决了cocos产品分散和工作流不够清晰的问题。

同时，cocos游戏引擎加入了全新的Cocos Store资源商店，连接全球开发者，打造了一个分享和获得插件、资源、工具、素材等丰富资源的强大平台，从而使cocos游戏引擎无缝覆盖了手游制作的完整流程，涵盖了从前期设计、资源制作、开发调试到打包上线的全套解决方案，一方面有效提升了戏开发铁三角——策划、美术、程序的工作协同性，一方面增强了游戏开发的灵活性和便捷度。

使用cocos游戏引擎，开发者可实现一次制作，多终端平台共享成果，节约了游戏开发过程中后期移植的时间和人力成本，其UI布局可适配所有手机屏幕，在testin适配率高达9937%，超unity。多年来，cocos始终执行Windows和Mac *** 作系统的同步发布更新政策，有效降低了游戏开发的硬件成本。

搭建开发者平台，推动手游行业发展进步

Cocos游戏引擎持续关注手游行业的发展动向，以手游行业的发展为导向，不断调整完善coocs的核心服务，搭建了cocos开发者平台，接入Cocos play微端手游方案、AnySDK游戏自动打包方案和畅思广告平台等产品，全方位助力开发者完成游戏开发，并实现盈利。

Chance广告具有广告嵌入流程简单，结算单价高等优势，Cocos Play模式可提升新用户转化率3倍以上，AnySDK则解决了打包问题，提供了快速灵活的渠道包输出路径……

此外，cocos游戏引擎提供了全方位技术支持服务，开发者可随时通过技术交流QQ群、反馈平台、技术交流邮箱等方式，获得coocs技术团队专业、迅速的服务。

显而易见，cocos游戏引擎所引导的是一场基于重新定义手游开发工作流的全新变革，简短清晰、成本可控的“All in One”工作流无疑将使更多开发者专注于打造精品手游，为改变手游市场产品同质化严重的现状提供了可行性突破路径，切实推动了手游行业的发展和进步。

启动 Cocos Creator 并使用 Cocos 开发者帐号登录以后，就会打开 Dashboard 界面，在这里你可以新建项目、打开已有项目或者获得帮助信息。

界面总览



上图所示的就是 Cocos Creator 的 Dashboard 界面，包括以下几种选项卡：

最近打开项目: 列出最近打开项目，第一次运行 Cocos Creator 时，这个列表是空的，会提示 新建项目 的按钮。

新建项目: 选择这个选项卡，会进入到 Cocos Creator 新项目创建的指引界面。

打开其他项目: 如果你的项目没有在最近打开的列表里，你也可以点击这个按钮来浏览和选择你要打开的项目。

帮助: 帮助信息，一个包括各种新手指引信息和文档的静态页面。

下面我们来依次介绍这些分页面。

最近打开项目

你可以通过 最近打开项目 选项卡快速访问近期打开过的项目。第一次运行 Cocos Creator 时，这个列表是空的，在界面上会显示 新建项目 的按钮。你可以在创建了一些项目后回来，并看到你新建的项目出现在列表里。



当你的鼠标悬停在一个最近打开项目的条目上时，会显示出可以对该项目进行 *** 作的行为：

点击 打开 在 Cocos Creator 编辑器中打开该项目

点击 关闭 将该项目从最近打开项目列表中移除，这个 *** 作不会删除实际的项目文件夹。

此外，当鼠标点击选中或悬停在项目上时，你能够在 Dashboard 下方的状态栏看到该项目所在路径。



新建项目

你可以在 新建项目 选项卡里创建新的 Cocos Creator 项目。

在 新建项目 页面，我们首先需要选择一个项目模板，项目模板会包括各种不同类型的游戏基本架构，以及学习用的范例资源和脚本，来帮助你更快进入到创造性的工作当中。

注意：早期的 Cocos Creator 版本中还没有很多可选择的项目模板，我们会随着 Cocos Creator 功能逐渐完整持续添加更多模板为用户提供方便。

点击选择一个模板，你可以在页面下方看到该模板的描述。



在页面下方你可以看到项目名称和项目存放地址。可以在项目路径输入框手动输入项目存放路径和项目名称，路径的最后一节就是项目名称。

你也可以点击 浏览 按钮，打开浏览路径对话框，在你的本地文件系统中选择一个位置来存放新建项目。

一切都设置好后，点击 新建项目 按钮来完成项目的创建。Dashboard 界面会被关闭，然后新创建的项目会在 Cocos Creator 编辑器主窗口中打开。

打开其他项目

如果你在 最近打开项目 页面找不到你的项目，或者刚刚从网上下载了一个从未打开过的项目时，你可以通过 打开其他项目 选项卡按钮在本地文件系统浏览并打开项目。

点击 打开其他项目 后，会d出本地文件系统的选择对话框，在这个对话框中选中你的项目文件夹，并选择打开就可以打开项目。

注意：Cocos Creator 使用特定结构的文件夹来作为合法项目标识，而不是使用工程文件。选择项目时只要选中项目文件夹即可。

帮助

你可以通过 帮助 页面访问 Cocos Creator 用户手册和其他帮助文档。

以上就是关于如何使用Cocos Studio UI编辑器全部的内容，包括:如何使用Cocos Studio UI编辑器、如何用Cocos2d-JS制作一个微信报名宣传页、游戏开发引擎变革的引导者——cocos游戏引擎等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！