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

来源：互联网发布：nginx 配置路径编辑：程序博客网时间：2024/06/06 01:13

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

7 0