在本篇博客中，我们将通过一个在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 密码：wuq7LoginScene.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);
}
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。