Cocos2d-JS中使用CocosStudio资源——登录界面_app

概述在本篇博客中，我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的登录界面资源的例子，来简要介绍以下内容：Button控件，TextField输入框，CheckBox等控件的使用。一、CocosStudio准备第一步：从官网下载相应的示例，login。效果图如下：第二步：修改其中的一些控件的名称，方便寻找获取，如：将“Login”按钮的名称改为：login。在按钮的基本

在本篇博客中，我们将通过一个在Cocos2d-Js中使用从Cocosstudio导出的登录界面资源的例子，来简要介绍以下内容：button控件，TextFIEld输入框，CheckBox等控件的使用。

一、Cocosstudio准备

第一步：从官网下载相应的示例，login。效果图如下：

第二步：修改其中的一些控件的名称，方便寻找获取，如：

将“Login”按钮的名称改为：login。在按钮的基本属性中进行相应的修改。
类似的修改还有，对logout按钮，两个输入框等。

第三步：发布资源。注意发布设置中应该将数据格式改为JsON格式，发布位置你可以选择Cocos Code IDE中所创建的项目的res文件夹即可，当然，也可以另选其他文件夹。具体发布设置如下图：

二、Cocos Code IDE *** 作

第一步：创建Cocos2d-Js项目，并将Cocos Studio发布的资源res，拷贝到项目的res文件夹下或直接发布到项目的res文件夹下。项目结构大致如下：

PS:创建项目的时候，分辨率默认640 x 960就可以了，方向选择竖向。

第二步：修改project.Json文件，在modules中添加cocostudio。在JsList中添加LoginScene.Js和resource.Js。具体代码如下：

{  "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文件中指定所需的各种资源，以备后期加载使用。具体代码如下：

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文件，将其中的：cc.vIEw.setDesignResolutionSize(960,640,cc.ResolutionPolicy.SHOW_ALL);改为cc.vIEw.setDesignResolutionSize(640,960,cc.ResolutionPolicy.SHOW_ALL);。

虽然，我们选择的方向是竖向，但是不知道为什么，当创建项目的时候宽高还是为960,640。而，竖向的时候宽高应该为640,960。所以，要进行相应的修改才能正常运行。如果你想看不该的效果，可以尝试一下，会有惊喜哦。

main.Js的具体代码如下：

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();

三、使用Cocosstudio资源

走到这里，终于到我们的重头戏（LoginScene.Js）了，下面，我们将要来学习如何获取Cocosstudio中导出的资源等。

第一步：加载login界面的JsON资源分析，并获取loginscene对象。将loginscene对象加入到layer中。具体代码如下：

//加载login界面的JsON资源分析，并获取loginscene对象。        loginScene = ccs.load(res.login_Json).node;        //将loginscene对象加入到layer中。        this.addChild(loginScene);        //从loginScene中获取控件并注册监听事件。

第二步：从loginScene中查找相应的控件对象，包括button控件，TextFIEld控件，CheckBox控件等，查找方法相似。具体代码如下：

//Loginbutton控件        loginbutton = ccui.helper.seekWidgetByname(loginScene,"login");        //nameTextFIEld输入框控件        nameTextFIEld = ccui.helper.seekWidgetByname(loginScene,"name");        //passwordTextFIEld输入框        passwordTextFIEld = ccui.helper.seekWidgetByname(loginScene,"password");        //checkBox控件        saveCheckBox = ccui.helper.seekWidgetByname(loginScene,"save");

第三步：添加事件监听，方法类似，具体代码如下：

//Loginbutton控件        loginbutton.addtouchEventListener(this.buttontouchEvent);        //nameTextFIEld输入框控件        nameTextFIEld.addCCSEventListener(this.textFIEldEvent);        //passwordTextFIEld输入框        passwordTextFIEld.addCCSEventListener(this.textFIEldEvent);        //checkBox控件        saveCheckBox.addCCSEventListener(this.selectedStateEvent);

第四步：定义相应监听事件的具体处理信息，具体代码如下：

CheckBox控件触发的事件处理

selectedStateEvent: function (sender,type) {        switch (type) {        case ccui.CheckBox.EVENT_SELECTED:            cc.log("Event Selected");            break;        case ccui.CheckBox.EVENT_UNSELECTED:            cc.log("Event Unselected");            break;        default:            break;        }    }

TextFIEld控件触发的事件处理

textFIEldEvent:function(sender,type){ //根据触发事件的类型进行分情况处理，从控制台输出cc.log(); switch (type) { case ccui.TextFIEld.EVENT_ATTACH_WITH_IME: cc.log("TextFIEld Event Attach With Ime"); break; case ccui.TextFIEld.EVENT_DETACH_WITH_IME: cc.log("TextFIEld Event Detach With Ime"); break; case ccui.TextFIEld.EVENT_INSERT_TEXT: cc.log("TextFIEld Event Insert Text"); break; case ccui.TextFIEld.EVENT_DELETE_BACKWARD: cc.log("TextFIEld Event Delete Backward"); break; default: break; }    },

button控件触发的事件处理，在这个事件处理里面，我们会展示游戏设计中常用的获取TextFIEld控件中的用户输入，获取用户是否勾选CheckBox等 *** 作。具体代码如下：

buttontouchEvent:function(sender,type){        //根据触发事件的类型进行分情况处理，从控制台输出cc.log();        switch (type) {        case ccui.Widget.touch_BEGAN:            cc.log("loginbutton touch Began");            //获取用户在name和password输入框的输入。使用getString()方法获得内容。            cc.log("username : " + nameTextFIEld.getString());            cc.log("password : " + passwordTextFIEld.getString());            //获取用户是否勾选CheckBox，使用isSelected()方法获取，返回boolean。            cc.log("saveState : " + saveCheckBox.isSelected());            break;        case ccui.Widget.touch_MOVED:            cc.log("loginbutton touch Moved");            break;        case ccui.Widget.touch_ENDED:            cc.log("loginbutton touch Ended");            break;        case ccui.Widget.touch_CANCELED:            cc.log("loginbutton touch Canceled");            break;        default:            break;        }    }

代码简介：

上面的代码都有注释，也都很简单。这里就简单介绍一下：对于每个控件的使用，从JsON资源加载，到获取控件对象，再到设置事件监听，大都是一样的。唯一不同的可能就在于每个控件可以触发不同的事件，比如：CheckBox比较简单，就有两个事件，一个是选中，一个是取消选中。而Textfiled则有四个事件，获得焦点，失去焦点，插入数据，删除数据。但是这四个事件还是比较好理解的。

button的四个事件比较重要，也比较难分辨。这四个事件分别为：开始点击(began)，点击状态下移出了按钮的有效范围（moved）,点击后在按钮的有效范围内释放（ended），点击后在按钮的有效范围外释放（canceled）。

不知道你有没有听明白，没听明白也别怕。自己去尝试一下，应该就明白了。对于button，TextFIEld，CheckBox其他的使用方法请去官网查阅相应的api文档，当然你也可以留言，我会尽力帮你解决的。

四、运行效果

到这里，对于login界面的分析和使用就介绍完毕了。你可以运行一下。我的部分运行效果如下：

五、补充说明

为了方便大家学习研究，下面提供本教程项目文件的百度网盘下载链接：
链接：http://pan.baidu.com/s/1sjkci8t 密码：wuq7

LoginScene.Js的完整源码如下：

var LoginLayer = cc.Layer.extend({    loginScene:null,loginbutton:null,nameTextFIEld:null,passwordTextFIEld:null,saveCheckBox:null,name:null,password:null,ctor:function () {        //////////////////////////////        // 1. super init first        this._super();        /////////////////////////////        // 2. add a menu item with "X" image,which is clicked to quit the program        // you may modify it.        //加载login界面的JsON资源分析，并获取loginscene对象。        loginScene = ccs.load(res.login_Json).node;        //将loginscene对象加入到layer中。        this.addChild(loginScene);        //从loginScene中获取控件并注册监听事件。        this.dealWidgets();        return true;    },//从loginScene中获取控件并注册监听事件。    dealWidgets:function(){        //Loginbutton控件        loginbutton = ccui.helper.seekWidgetByname(loginScene,"login");        loginbutton.addtouchEventListener(this.buttontouchEvent);        //nameTextFIEld输入框控件        nameTextFIEld = ccui.helper.seekWidgetByname(loginScene,"name");        nameTextFIEld.addCCSEventListener(this.textFIEldEvent);        //passwordTextFIEld输入框        passwordTextFIEld = ccui.helper.seekWidgetByname(loginScene,"password");        passwordTextFIEld.addCCSEventListener(this.textFIEldEvent);        //checkBox控件        saveCheckBox = ccui.helper.seekWidgetByname(loginScene,"save");        saveCheckBox.addCCSEventListener(this.selectedStateEvent);    },//CheckBox控件触发的事件处理    selectedStateEvent: function (sender,type) {        switch (type) {        case ccui.CheckBox.EVENT_SELECTED:            cc.log("Event Selected");            break;        case ccui.CheckBox.EVENT_UNSELECTED:            cc.log("Event Unselected");            break;        default:            break;        }    },//TextFIEld控件触发的事件处理    textFIEldEvent:function(sender,type){        //根据触发事件的类型进行分情况处理，从控制台输出cc.log();        switch (type) {        case ccui.TextFIEld.EVENT_ATTACH_WITH_IME:            cc.log("TextFIEld Event Attach With Ime");            break;        case ccui.TextFIEld.EVENT_DETACH_WITH_IME:            cc.log("TextFIEld Event Detach With Ime");            break;        case ccui.TextFIEld.EVENT_INSERT_TEXT:            cc.log("TextFIEld Event Insert Text");            break;        case ccui.TextFIEld.EVENT_DELETE_BACKWARD:            cc.log("TextFIEld Event Delete Backward");              break;        default:            break;        }    },//button控件触发的事件处理    buttontouchEvent:function(sender,type){        //根据触发事件的类型进行分情况处理，从控制台输出cc.log();        switch (type) {        case ccui.Widget.touch_BEGAN:            cc.log("loginbutton touch Began");            //获取用户在name和password输入框的输入。使用getString()方法获得内容。            cc.log("username : " + nameTextFIEld.getString());            cc.log("password : " + passwordTextFIEld.getString());            //获取用户是否勾选CheckBox，使用isSelected()方法获取，返回boolean。            cc.log("saveState : " + saveCheckBox.isSelected());            break;        case ccui.Widget.touch_MOVED:            cc.log("loginbutton touch Moved");            break;        case ccui.Widget.touch_ENDED:            cc.log("loginbutton touch Ended");            break;        case ccui.Widget.touch_CANCELED:            cc.log("loginbutton touch Canceled");            break;        default:            break;        }    }});var LoginScene = cc.Scene.extend({    onEnter:function () {        this._super();        var layer = new LoginLayer();        this.addChild(layer);    }});