原创力文档- 1、本文档共8页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
游戏开发引擎—Cocos2d-JS中使用Cocos Studio资源02：登录界面
本文检索关键词：游戏引擎，游戏开发引擎，cocos引擎html5游戏开发
本文我们将通过一个在Cocos2d-JS中使用从Cocos Studio导出的登录界面资源的例子，来简要介绍以下内容：Button控件，TextField输入框，CheckBox等控件的使用。
一、Cocos Studio准备
第一步：从官网下载相应的示例，login。效果图如下：
第二步：修改其中的一些控件的名称，方便寻找获取，如：
将“Login”按钮的名称改为：login。在按钮的基本属性中进行相应的修改。?类似的修改还有，对logout按钮，两个输入框等。
第三步：发布资源。注意发布设置中应该将数据格式改为JSON格式，发布位置你可以选择Cocos Code IDE中所创建的项目的res文件夹即可，当然，也可以另选其他文件夹。具体发布设置如下图：
二、Cocos Code IDE操作
第一步：创建Cocos2d-JS项目，并将Cocos Studio发布的资源res，拷贝到项目的res文件夹下或直接发布到项目的res文件夹下。项目结构大致如下：（PS:创建项目的时候，分辨率默认640*960就可以了，方向选择竖向。）
第二步：修改project.json文件，在modules中添加cocostudio。在jsList中添加LoginScene.js和resource.js。具体代码如下：
1
2
3
4
5
6
7
8
9
10
11
12 {
??project_type:?javascript,
??debugMode:?1,
??showFPS:?true,
??frameRate:?60,
??id:?gameCanvas,
??renderMode:?0,
??engineDir:?frameworks/cocos2d-html5,
??modules:?[????cocos2d,????cocostudio
??],
??jsList:?[????src/resource.js,????src/LoginScene.js
??]} 第三步：在resource.js文件中指定所需的各种资源，以备后期加载使用。具体代码如下：
1
2
3
4
5
6
7
8
9
10 var?res?=?{
????????png1:res/Login/LI01.png,
????????png2:res/Login/LI02.png,
????????png3:res/Login/LI07.jpg,
????????png4:res/Login/BaS31.png,
????????png5:res/Login/BaS32.png,
????????png6:res/Login/Frd11.png,
????????login_json:res/Login.json};var?g_resources?=?[];for?(var?i?in?res)?{
????g_resources.push(res[i]);
} 第四步：非常非常重要的一步，你需要修改main.js文件，将其中的：
1 cc.view.setDesignResolutionSize(960,640,cc.ResolutionPolicy.SHOW_ALL); 改为
1 cc.view.setDesignResolutionSize(640,?960,?cc.ResolutionPolicy.SHOW_ALL); 虽然，我们选择的方向是竖向，但是不知道为什么，当创建项目的时候宽高还是为960,640。而，竖向的时候宽高应该为640,960。所以，要进行相应的修改才能正常运行。如果你想看不该的效果，可以尝试一下，会有惊喜哦。
main.js的具体代码如下：
1
2
3
4
5
6
7
8 cc.game.onStart?=?function(){
????cc.view.adjustViewPort(true);
????cc.view.setDesignResolutionSize(640,?960,?cc.ResolutionPolicy.SHOW_ALL);
????cc.view.resizeWithBrowserSize(true);
????//load?resources
????cc.LoaderScene.preload(g_resources,?function?()?{
????????cc.director.runScene(new?LoginScene());
????},?this);};cc.game.run();
三、使用Cocos Studio资源
走到这里，终于
文档评论（0）