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

在本篇博客中，我们将通过一个在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);
    }
});