Cocos2d-JS studio基础控件的使用

Posted 2020-09-02

在studio里把几个基础控件往场景文件一拖，然后导出json格式的资源文件

 

逻辑代码如下：

  1 var HelloWorldLayer = cc.Layer.extend({
  2     sprite:null,
  3     value : 90,
  4    // self : this,
  5     ctor:function () {
  6         //////////////////////////////
  7         // 1. super init first
  8         this._super();
  9 
 10         /////////////////////////////
 11         // 2. add a menu item with "X" image, which is clicked to quit the program
 12         //    you may modify it.
 13         // ask the window size
 14         var size = cc.winSize;
 15 
 16         this.initUI();
 17 
 18         return true;
 19     },
 20 
 21     //init ui
 22     initUI : function(){
 23         var mainscene = ccs.load(res.MainScene_json);
 24         this.addChild(mainscene.node);
 25 
 26         var self = this;
 27         //   btn.addClickEventListener(this.btnClick);
 28         //   addTouchEventListener(this.backEvent,this);
 29 
 30         var btn = ccui.helper.seekWidgetByName(mainscene.node, "Button_9");
 31         btn.addClickEventListener(function(){
 32                 cc.log("btn_9 click: %d", self.value);
 33             });
 34 
 35 
 36         var checkBox = ccui.helper.seekWidgetByName(mainscene.node, "CheckBox_2");
 37         this.checkBox = checkBox;
 38         checkBox.addEventListener(this.selectedStateEvent, this);
 39 
 40         //slider addClickEventListener、addTouchEventListener 事件在鼠标松开时才触发 //
 41         // addEventListener 在按住并有移动时（值不一定有改变）就触发 //
 42         var slider = ccui.helper.seekWidgetByName(mainscene.node, "Slider_2");
 43         this.slider = slider;
 44         slider.addClickEventListener(function(){
 45             var percent = slider.getPercent();
 46             cc.log("addClickEventListener   %d", percent);
 47         });
 48 
 49         slider.addTouchEventListener(function(){
 50             var percent = slider.getPercent();
 51             cc.log("addTouchEventListener   %d", percent);
 52         });
 53 
 54         slider.addEventListener(this.sliderEvent,this);
 55 
 56 
 57         var textField = ccui.helper.seekWidgetByName(mainscene.node, "TextField_3");
 58         this.textFiel = textField;
 59         textField.addEventListener(this.textFieldEvent,this);
 60 
 61         var loadingBar = ccui.helper.seekWidgetByName(mainscene.node, "LoadingBar_2");
 62         this.loadingBar = loadingBar;
 63        // loadingBar.addTouchEventListener();
 64 
 65         var label = ccui.helper.seekWidgetByName(mainscene.node, "Text_2");
 66         this.label = label;
 67 
 68         var image = ccui.helper.seekWidgetByName(mainscene.node, "Image_1");
 69         this.image = image;
 70 
 71     },
 72 
 73     selectedStateEvent: function (sender, type) {
 74         switch (type) {
 75             case ccui.CheckBox.EVENT_SELECTED:
 76                 //this._topDisplayText.setString("Selected");
 77                 cc.log("checkbox select");
 78                 this.image.setVisible(true);
 79                 break;
 80             case ccui.CheckBox.EVENT_UNSELECTED:
 81                 //this._topDisplayText.setString("Unselected");
 82                 cc.log("checkbox unselect");
 83                 this.image.setVisible(false);
 84                 break;
 85 
 86             default:
 87                 break;
 88         }
 89     },
 90 
 91     sliderEvent: function (sender, type) {
 92         switch (type) {
 93             case ccui.Slider.EVENT_PERCENT_CHANGED:
 94                 var slider = sender;
 95                 var percent = slider.getPercent();
 96                // this._topDisplayText.setString("Percent " + percent.toFixed(0));
 97                 cc.log("addEventListener   %f", percent);
 98                 this.label.setString(Math.floor(percent));//setString(percent) 会在后面多一个点， 如 123.
 99                 break;
100             default:
101                 break;
102         }
103     },
104 
105     textFieldEvent: function (sender, type) {
106 
107         switch (type) {
108             //get focus
109             case ccui.TextField. EVENT_ATTACH_WITH_IME:
110                 cc.log("attach with IME");
111                 break;
112             //lost focus
113             case ccui.TextField. EVENT_DETACH_WITH_IME:
114                 cc.log("detach with IME");
115                 break;
116             //insert word
117             case ccui.TextField. EVENT_INSERT_TEXT:
118                 var text = sender.getString();
119                 var percent = parseInt(text);
120                 this.loadingBar.setPercent(percent);
121               //  cc.log(text);
122                 break;
123             //delete word
124             case ccui.TextField. EVENT_DELETE_BACKWARD:
125                 //cc.log("delete word");
126                 var text = sender.getString();
127                 var percent = parseInt(text);
128                 this.loadingBar.setPercent(percent);
129                 break;
130             default:
131                 break;
132         }
133     }
134 
135 });