关于cocos2d-JS开发看过两本书,《Cocos2d-JS开发之旅》和《Cocos2d-x实战-JS卷》,两本书都不错,各有特点,但是在实际开发中,有很多关于常用的控件这两本书并没有详细的阐述,因此,在接下来的开发中,我会把一些常用的控件,比如TableView和CollectionView之类的使用技巧和说明,会不断更新在此文章中。
1、Cocos Studio ListView 控件监听
if(!cc.Layer.prototype.init.call(this)) { return false; } var objView = ccs.csLoader.createNode(res.StageInfo_Json); this.addChild(objView);
this._tableViewItem1 = ccui.helper.seekWidgetByName(objView,"Tablelist_Item1"); this._tableViewItem1.setScrollBarEnabled(false); this._tableViewItem1.addEventListener(this.onSelectedItemEvent.bind(this),this); this._tableViewItem2 = ccui.helper.seekWidgetByName(objView,"Tablelist_Item2"); this._tableViewItem2.setScrollBarEnabled(false); this._tableViewItem2.addEventListener(this.onSelectedItemEvent.bind(this),this);
onSelectedItemEvent: function (sender,type) { switch (type) { case ccui.ListView.EVENT_SELECTED_ITEM: break; case ccui.ListView.ON_SELECTED_ITEM_END: // alert(sender.getName() + " " + sender.getCurSelectedIndex()); this.showDetail(sender.getCurSelectedIndex()); break; default: break; } }说明:很多时候使用Cocos Studio工具生成的控件,仅仅使用一个坐标而已。
var listView = ccui.helper.seekWidgetByName(objView,"Tablelist"); listView.setScrollBarEnabled(false); this._tableView = new cc.TableView(this,listView.getContentSize()); this._tableView.x = listView.x; this._tableView.y = listView.y; this._tableView.setDelegate(this); this.addChild(this._tableView); numberOfCellsInTableView: function (table) { return this._players.length; },tableCellSizeForIndex: function (table,idx) { return this._cellSize; },tableCellAtIndex: function (table,idx) { var att = this._players[idx]; var cell = table.dequeueCell(); if(cell == null) { cell = new FightListCell(); } cell._player = att; cell._labelName.setString(att.Name); cell._labelFight.setString("战斗力:" + DataManager.getNumberText(att.Fight)); cell._labelReward.setString(DataManager.getNumberText(att.PresentRes.Amount)); cell._TGAmount = this._res.TGAmount; cell._res = this._res; var url = NetProxy.HostBaseUrl + att.IconId; cell._imgIcon.setScale(0.8); DataManager.loadUrlImage(url,cell._imgIcon); var sprite = cc.Sprite.create("res/gui/PlayerBox.png"); sprite.setPosition(cell._imgIcon.getPosition()); cell.addChild(sprite); return cell; },tableCellTouched:function (table,cell) { }
如果需要多行多列显示,那么就得用CollectionView了:
var listView = ccui.helper.seekWidgetByName(objView,"Tablelist");
listView.setScrollBarEnabled(false);
this.m_tableView = new cc.CollectionView(this,cc.size(listView.getContentSize().width,listView.getContentSize().height));
this.m_tableView.setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL);
this.m_tableView.x = listView.getPositionX();
this.m_tableView.y = listView.getPositionY();
this.m_tableView.setDelegate(this);
this.addChild(this.m_tableView);
tableCellSizeForIndex: function (table,idx) { if(this.m_type == 3 && (idx > this.m_flag-5 && idx <= this.m_flag)) { return cc.size(110,25); } return this.m_cellSize; },numberOfCellsInTableView: function () { if(!this.m_items){ return 0; } return this.m_items.length; },cellSizeForTable: function (table) { // return table.getContentSize(); return cc.size(580,130); },idx) { var itemAtt = this.m_items[idx]; var cell = null; // var cell = table.dequeueCell(); if(!cell){ cell = new InventoryCell(); } cell.m_inventory = itemAtt; if(itemAtt.Id != 0){ //空行的Id==0 var pic = ""; if(this.m_type == 1) { cell.m_level.setString("Lv." + itemAtt.Level); pic = "res/pic/Equip/" + itemAtt.IconId + ".png"; } else if(this.m_type == 2) { cell.m_level.setString(itemAtt.Amount); pic = "res/pic/Gems/" + itemAtt.IconId + ".png"; } else if(this.m_type == 3) { if(idx < this.m_gemsNoEquip.length) { cell.m_level.setString(itemAtt.Amount); } else { cell.m_level.setString(itemAtt.EqpAmount); } pic = "res/pic/Gems/" + itemAtt.IconId + ".png"; } else if(this.m_type == 4) { cell.m_level.setString(itemAtt.Amount); pic = "res/pic/Gems/" + itemAtt.IconId + ".png"; } } else { if(idx == this.m_flag-4) { cell = new CombatCell(); cell._Time.setVisible(false); cell._Info.setString(" ------已装备宝石------") } else { cell.m_level.setVisible(false); cell.m_image.setVisible(false); // cell.m_Box.setVisible(false); } return cell; } // this.changeNodeTexture2(pic,"image_Equipment",cell); this.createImage2(this.createIcon(itemAtt.IconId),cell); return cell; },tableCellTouched: function (table,cell) { if(cell.m_inventory.Id != 0){ if(this.m_type == 1) { // SceneManager.addLayer(cc.LAYER_EQUIPUI,cell.m_inventory); var ui = SceneManager.addLayer(cc.LAYER_EQUIPUI,null,true,cc.LAYER_ANI_NONE,true); if (ui) { //替换装备与装备相关操作 ui.initEquipUI(null,cell.m_inventory); } } else if(this.m_type == 3) { SceneManager.addLayer(cc.LAYER_GEMINFO,cell.m_inventory); } else { SceneManager.addLayer(cc.LAYER_ITEMINFO,cell.m_inventory); } } }CollectionView比TableView需要多实现一个方法,CellSizeForTable return table.getContentSize(); 但这样写,我这里出现bug,刷新列表时,即
this.m_tableView.reloadData(),会出现所有行都重叠到第一行中的bug,debug发现table.getContentSize的值为(0,0)所致。所以索性直接传入 return cc.size(580,130);
2、TableView实现可拖动的地图
/** *世界地图 */ WorldMapCell = cc.TableViewCell.extend({ _btnStage: [],_imgPath: [],_wordMap: null,_imgPosition: null,ctor: function () { this._super(); this.init(); },init: function () { this._super(); var cell = ccs.csLoader.createNode(res.WorldMapCell_Json); this.addChild(cell); for(var i = 0; i < 30; i++) { this._btnStage[i] = ccui.helper.seekWidgetByName(cell,"btnStage" + (i+1)); this._btnStage[i].setVisible(false); this._btnStage[i].addTouchEventListener(this.onButtonClick,this); if(i < 29) { this._imgPath[i] = ccui.helper.seekWidgetByName(cell,"WorldMap_Path" + (i+1)); this._imgPath[i].setVisible(false); } } this._imgPosition = ccui.helper.seekWidgetByName(cell,"PlayerMarker"); this._imgPosition.setScale(0.4); return true; },onButtonClick: function (sender,type) { switch (type) { case ccui.Widget.TOUCH_ENDED: if(sender.getName().substr(0,8) == "btnStage") { SceneManager.addLayer(cc.LAYER_STAGEINFO,sender.getName().substr(8)); } break; default: break; } } }) WorldMapUI = BaseUI.extend({ _Prompt0:null,_Prompt1:null,_TCoinNum:null,_labelSweep:null,_size: null,_cellSize: null,_worldMap1: null,_worldMap2: null,_worldMap3: null,_scrollView: null,_btnExit: null,_btnAdd: null,_layer: null,_dots: null,_listener: null,ctor:function() { this._super(); this._dots = new Array(); var cell = ccs.csLoader.createNode(res.WorldMapCell_Json); this._cellSize = cell.getContentSize(); var Main= ccs.csLoader.createNode(res.WorldMapUI_Json); this.addChild(Main); this._size = cc.director.getWinSize(); this._btnExit = ccui.helper.seekWidgetByName(Main,"btnReturn"); this._btnExit.addTouchEventListener(this.onMainMenuClick,this); this._btnAdd = ccui.helper.seekWidgetByName(Main,"btnAdd00"); this._btnAdd.addTouchEventListener(this.onMainMenuClick,this); this._labelSweep = ccui.helper.seekWidgetByName(Main,"label_NuSweep"); this._scrollView = ccui.helper.seekWidgetByName(Main,"Tablelist_WorldMap"); this._scrollView.setScrollBarEnabled(false); this._scrollView.setDirection(ccui.ScrollView.DIR_BOTH); this._scrollView.setInnerContainerSize(cell.getContentSize()); this._scrollView.setInertiaScrollEnabled(true); var item = new ccui.Layout(); // var cell = ccs.csLoader.createNode(res.WorldMapCell_Json); var cell = new WorldMapCell(); cell._wordMap = this; item.setContentSize(cell.getContentSize()); // var currentPveBig = DataManager.playerAtt.PveId; var currentPveBig = 1; var currentPve = 3; this.getCellPoints(cell._btnStage,currentPveBig); for(var i = 0; i < this._dots.length - currentPve; i ++) { cell.addChild(this._dots[i]); } for(var i = 0; i < currentPveBig; i++) { cell._btnStage[i].setVisible(true); if(i < currentPveBig-1){ cell._imgPath[i].setVisible(true); } } cell._imgPosition.setPosition(this._dots[this._dots.length - currentPve].getPosition()); item.addChild(cell); this._scrollView.addChild(item); },bindData:function(json) { return true; },onMainMenuClick:function(sender,type) { switch (type) { case ccui.Widget.TOUCH_ENDED: if (sender.getName() == "btnReturn") { SceneManager.removeLayer(cc.LAYER_WORLDMAP); } else if (sender.getName() == "btnAdd00") { alert("购买扫荡次数"); } break; default: break; } },getCellPoints: function (btns,index) { for(var i = 0; i < btns.length - 1; i++) { if(i >= index) { break; } this.createDot(btns[i].getPositionX(),btns[i].getPositionY(),btns[i+1].getPositionX(),btns[i+1].getPositionY()); } },createDot: function (x1,y1,x2,y2) { var xA = (x2-x1)/6; var yA = (y2-y1)/6; for(var i = 0; i < 5; i++) { var dot = new cc.Sprite("res/gui/WorldMap_pic04.png"); dot.x = x1 += xA; dot.y = y1 += yA; this._dots.push(dot); } },}); WorldMapUI.create = function() { return new WorldMapUI(); };
3、特效播放
/** * 单抽获得 * Created by xj on 2017/1/16. */ DrawUI = BaseUI.extend({ m_size: null,m_confirm: null,m_drawAgain: null,m_img: null,m_name: null,m_type: null,//抽卡类型:1,免费单抽;2,免费十连;3,钻石单抽;4、钻石十连 m_json: null,m_labelConfirm: null,m_labelDraw: null,m_armature: null,m_btnItem: null,ctor: function () { BaseUI.prototype.ctor.call(this); this.init(); },init: function () { if(!cc.Layer.prototype.init.call(this)) { return false } this.m_size = cc.director.getWinSize(); var drawDode = new cc.DrawNode(); this.addChild(drawDode); drawDode.drawRect(cc.p(0,0),cc.p(this.m_size.width,this.m_size.height),cc.color(0,210)); var objView = ccs.csLoader.createNode(res.DrawUI_Json); this.addChild(objView); this.m_confirm = ccui.helper.seekWidgetByName(objView,"btnConfirm"); this.m_drawAgain = ccui.helper.seekWidgetByName(objView,"btnDrawAgain"); this.m_img = ccui.helper.seekWidgetByName(objView,"image_Reward"); this.m_name = ccui.helper.seekWidgetByName(objView,"label_NameNumber"); this.m_labelConfirm = ccui.helper.seekWidgetByName(objView,"label_Confirm"); this.m_labelDraw = ccui.helper.seekWidgetByName(objView,"label_DrawAgain"); this.m_btnItem = ccui.helper.seekWidgetByName(objView,"btnItem"); this.m_confirm.addTouchEventListener(this.onButtonClick,this); this.m_drawAgain.addTouchEventListener(this.onButtonClick,this); this.m_btnItem.addTouchEventListener(this.onButtonClick,this); this.hideWidget(); return true; },bindData: function (type) { this.m_type = type; if(type == 1) { ShopApi.Lottery(1,this,this.callbackLottery); } else { ShopApi.Lottery(3,this.callbackLottery); } },hideWidget: function () { this.m_img.setVisible(false); this.m_name.setVisible(false); this.m_drawAgain.setVisible(false); this.m_labelDraw.setVisible(false); this.m_confirm.setVisible(false); this.m_labelConfirm.setVisible(false); },callbackLottery: function (target,json) { this.m_json = json; //特效 ccs.armatureDataManager.addArmatureFileInfo(res.Draw_ExportJson); this.m_armature = new ccs.Armature("SingleCardE"); this.m_armature.getAnimation().play("PLAY1",-1,0); //不循环 this.m_armature.setPosition(this.m_img.getPosition()); this.m_armature.getAnimation().setMovementEventCallFunc(this.showReward,this); this.addChild(this.m_armature); DataManager.postNotification(cc.NOTIFICATION_REFRESHSHOP,null); },showReward: function () { this.m_img.setVisible(true); this.m_name.setVisible(true); var rewards = this.m_json.Content; // this.changeNodeTexture(this.getTextureFullPath(rewards[0].IconId),"image_Reward"); this.createImage(this.createIcon(rewards[0].IconId),"image_Reward"); this.m_name.setString(rewards[0].Name + " x" + rewards[0].Amount); this.schedule(this.showBtn,0.6); },showBtn: function () { this.m_labelDraw.setVisible(true); this.m_labelConfirm.setVisible(true); this.m_drawAgain.setVisible(true); this.m_confirm.setVisible(true); this.unschedule(this.showBtn); },type) { switch (type) { case ccui.Widget.TOUCH_ENDED: if(sender.getName() == "btnConfirm") { SceneManager.removeLayer(cc.LAYER_DRAW); } else if(sender.getName() == "btnDrawAgain") { if(this.m_type == 1) { this.hideWidget(); ShopApi.Lottery(1,this.callbackLottery); } else { ShopApi.Lottery(3,this.callbackLottery); } } else if(sender.getName() == "btnItem") { SceneManager.addLayer(cc.LAYER_ITEMINFO,this.m_json.Content[0]); } break; default: break; } } }) DrawUI.create = function () { return new DrawUI(); }