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

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了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。具体代码如下：

  1. {
  2.   "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. var res = {
  2.         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"
  3. };
  4.  
  5. var g_resources = [];
  6. for (var i in res) {
  7.     g_resources.push(res[i]);
  8. }

第四步：非常非常重要的一步，你需要修改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的具体代码如下：

  1. cc.game.onStart = function(){
  2.     cc.view.adjustViewPort(true);
  3.     cc.view.setDesignResolutionSize(640,960,cc.ResolutionPolicy.SHOW_ALL);
  4.     cc.view.resizeWithBrowserSize(true);
  5.     //load resources
  6.     cc.LoaderScene.preload(g_resources,function () {
  7.         cc.director.runScene(new LoginScene());
  8.     },this);
  9. };
  10. cc.game.run();

三、使用CocosStudio资源

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

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

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

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

  1. //LoginButton控件
  2.         loginButton = ccui.helper.seekWidgetByName(loginScene,"login");
  3.         //nameTextField输入框控件
  4.         nameTextField = ccui.helper.seekWidgetByName(loginScene,"name");
  5.         //passwordTextField输入框
  6.         passwordTextField = ccui.helper.seekWidgetByName(loginScene,"password");
  7.         //checkBox控件
  8.         saveCheckBox = ccui.helper.seekWidgetByName(loginScene,"save");

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

  1. //LoginButton控件
  2.         loginButton.addTouchEventListener(this.buttonTouchEvent);
  3.         //nameTextField输入框控件
  4.         nameTextField.addCCSEventListener(this.textFieldEvent);
  5.         //passwordTextField输入框
  6.         passwordTextField.addCCSEventListener(this.textFieldEvent);
  7.         //checkBox控件
  8.         saveCheckBox.addCCSEventListener(this.selectedStateEvent);

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

CheckBox控件触发的事件处理

  1. selectedStateEvent: function (sender,type) {
  2.         switch (type) {
  3.         case ccui.CheckBox.EVENT_SELECTED:
  4.             cc.log("Event Selected");
  5.             break;
  6.         case ccui.CheckBox.EVENT_UNSELECTED:
  7.             cc.log("Event Unselected");
  8.             break;
  9.         default:
  10.             break;
  11.         }
  12.     }

TextField控件触发的事件处理

  1. 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; }
  2.     },

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

  1. buttonTouchEvent:function(sender,type){
  2.         //根据触发事件的类型进行分情况处理，从控制台输出cc.log();
  3.         switch (type) {
  4.         case ccui.Widget.TOUCH_BEGAN:
  5.             cc.log("loginButton Touch Began");
  6.             //获取用户在name和password输入框的输入。使用getString()方法获得内容。
  7.             cc.log("username : " + nameTextField.getString());
  8.             cc.log("password : " + passwordTextField.getString());
  9.             //获取用户是否勾选CheckBox，使用isSelected()方法获取，返回boolean。
  10.             cc.log("saveState : " + saveCheckBox.isSelected());
  11.             break;
  12.         case ccui.Widget.TOUCH_MOVED:
  13.             cc.log("loginButton Touch Moved");
  14.             break;
  15.         case ccui.Widget.TOUCH_ENDED:
  16.             cc.log("loginButton Touch Ended");
  17.             break;
  18.         case ccui.Widget.TOUCH_CANCELED:
  19.             cc.log("loginButton Touch Canceled");
  20.             break;
  21.         default:
  22.             break;
  23.         }
  24.     }

代码简介：

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

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

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

四、运行效果

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

五、补充说明

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

LoginScene.js的完整源码如下：

  1. var LoginLayer = cc.Layer.extend({
  2.     loginScene:null,loginButton:null,nameTextField:null,passwordTextField:null,saveCheckBox:null,name:null,password:null,ctor:function () {
  3.         //////////////////////////////
  4.         // 1. super init first
  5.         this._super();
  6.  
  7.         /////////////////////////////
  8.         // 2. add a menu item with "X" image,which is clicked to quit the program
  9.         // you may modify it.
  10.  
  11.         //加载login界面的JSON资源分析，并获取loginscene对象。
  12.         loginScene = ccs.load(res.login_json).node;
  13.         //将loginscene对象加入到layer中。
  14.         this.addChild(loginScene);
  15.         //从loginScene中获取控件并注册监听事件。
  16.         this.dealWidgets();
  17.         return true;
  18.     },//从loginScene中获取控件并注册监听事件。
  19.     dealWidgets:function(){
  20.         //LoginButton控件
  21.         loginButton = ccui.helper.seekWidgetByName(loginScene,"login");
  22.         loginButton.addTouchEventListener(this.buttonTouchEvent);
  23.         //nameTextField输入框控件
  24.         nameTextField = ccui.helper.seekWidgetByName(loginScene,"name");
  25.         nameTextField.addCCSEventListener(this.textFieldEvent);
  26.         //passwordTextField输入框
  27.         passwordTextField = ccui.helper.seekWidgetByName(loginScene,"password");
  28.         passwordTextField.addCCSEventListener(this.textFieldEvent);
  29.         //checkBox控件
  30.         saveCheckBox = ccui.helper.seekWidgetByName(loginScene,"save");
  31.         saveCheckBox.addCCSEventListener(this.selectedStateEvent);
  32.     },//CheckBox控件触发的事件处理
  33.     selectedStateEvent: function (sender,type) {
  34.         switch (type) {
  35.         case ccui.CheckBox.EVENT_SELECTED:
  36.             cc.log("Event Selected");
  37.             break;
  38.         case ccui.CheckBox.EVENT_UNSELECTED:
  39.             cc.log("Event Unselected");
  40.             break;
  41.         default:
  42.             break;
  43.         }
  44.     },//TextField控件触发的事件处理
  45.     textFieldEvent:function(sender,type){
  46.         //根据触发事件的类型进行分情况处理，从控制台输出cc.log();
  47.         switch (type) {
  48.         case ccui.TextField.EVENT_ATTACH_WITH_IME:
  49.             cc.log("TextField Event Attach With Ime");
  50.             break;
  51.         case ccui.TextField.EVENT_DETACH_WITH_IME:
  52.             cc.log("TextField Event Detach With Ime");
  53.             break;
  54.         case ccui.TextField.EVENT_INSERT_TEXT:
  55.             cc.log("TextField Event Insert Text");
  56.             break;
  57.         case ccui.TextField.EVENT_DELETE_BACKWARD:
  58.             cc.log("TextField Event Delete Backward");  
  59.             break;
  60.         default:
  61.             break;
  62.         }
  63.     },//Button控件触发的事件处理
  64.     buttonTouchEvent:function(sender,type){
  65.         //根据触发事件的类型进行分情况处理，从控制台输出cc.log();
  66.         switch (type) {
  67.         case ccui.Widget.TOUCH_BEGAN:
  68.             cc.log("loginButton Touch Began");
  69.             //获取用户在name和password输入框的输入。使用getString()方法获得内容。
  70.             cc.log("username : " + nameTextField.getString());
  71.             cc.log("password : " + passwordTextField.getString());
  72.             //获取用户是否勾选CheckBox，使用isSelected()方法获取，返回boolean。
  73.             cc.log("saveState : " + saveCheckBox.isSelected());
  74.             break;
  75.         case ccui.Widget.TOUCH_MOVED:
  76.             cc.log("loginButton Touch Moved");
  77.             break;
  78.         case ccui.Widget.TOUCH_ENDED:
  79.             cc.log("loginButton Touch Ended");
  80.             break;
  81.         case ccui.Widget.TOUCH_CANCELED:
  82.             cc.log("loginButton Touch Canceled");
  83.             break;
  84.         default:
  85.             break;
  86.         }
  87.     }
  88. });
  89.  
  90. var LoginScene = cc.Scene.extend({
  91.     onEnter:function () {
  92.         this._super();
  93.         var layer = new LoginLayer();
  94.         this.addChild(layer);
  95.     }
  96. });

猜你在找的Cocos2d-x相关文章

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签