十三 手游开发神器 cocos2d-x editor 之选关滑动界面（ScrollView）

这一节，我将实现游戏的选关界面，游戏50关，每一屏15关，总共4屏，左滑动可切换到上一屏，右滑动可切换到下一屏；

 

效果如下；

开始进入选关界面；

 

滑动到最后一屏；

 

点击关卡，进入主界面；

 

代码下载：http://www.kuaipan.cn/file/id_25348935635745079.htm?source=1

 

 

首先新建，GameSelectLayer.ccbx,GameSelectLayer.js,指定控制器让两个文件关联；设计选关场景如下，调节参数

 

创建每个单元格关卡GameSelectItemSprite.ccbx，这是一个小精灵层，如下图；

 

 

设计完成后，打开MainLayer.js,编写如下：

 

[javascript]  view plain copy

 

1. GAME_LEVEL = 0;  
2. var GameSelectLayer = function () {  
3.     cc.log("GameSelectLayer");  
4.     this.levelScrollPanel = this.levelScrollPanel || {};  
5.     this.pageIndex = 0;  
6.     this.pageMax = 4;  
7.     this.dotNode = this.dotNode || {};  
8.     this.start = false;  
9.   
10. };  
11.   
12. GameSelectLayer.prototype.onDidLoadFromCCB = function () {  
13.     if (sys.platform == 'browser') {  
14.         this.onEnter();  
15.     }  
16.     else {  
17.         this.rootNode.onEnter = function () {  
18.             this.controller.onEnter();  
19.         };  
20.     }  
21.   
22.     this.rootNode.onExit = function () {  
23.         this.controller.onExit();  
24.     };  
25.   
26.   
27.     this.rootNode.onTouchesBegan = function (touches, event) {  
28.         this.controller.onTouchesBegan(touches, event);  
29.         return true;  
30.     };  
31.   
32.     this.rootNode.onTouchesMoved = function (touches, event) {  
33.         this.controller.onTouchesMoved(touches, event);  
34.         return true;  
35.     };  
36.     this.rootNode.onTouchesEnded = function (touches, event) {  
37.         this.controller.onTouchesEnded(touches, event);  
38.         return true;  
39.     };  
40.     this.rootNode.setTouchEnabled(true);  
41. };  
42.   
43. GameSelectLayer.prototype.onEnter = function () {  
44.     this.maxColumns = 3;  
45.     this.columnSize = 177;  
46.     this.maxRows = 5;  
47.     this.rowSize = 104;  
48.     cc.log("GameSelectLayer");  
49.   
50.     this.itemDatas = [];  
51.     var itemName = "";  
52.     var levelPan = cc.Layer.create();  
53.     var currentLevel = sys.localStorage.getItem("pb_level");  
54.     if (currentLevel == null) {  
55.         currentLevel = 0;  
56.     }  
57.   
58.     sys.localStorage.setItem("pb_level_score_1", "S");  
59.     currentLevel = 3;  
60.   
61.     for (var i = 0; i < 50; i++) {  
62.         var xIndex = Math.floor(i % 3) + Math.floor(i / 15) * 3;  
63.         var yIndex = Math.floor(i / 3 % 5);  
64.         var levelScore = "A"  
65.         if (i < currentLevel) {  
66.             levelScore = sys.localStorage.getItem("pb_level_score_" + i);  
67.             if (levelScore == null || levelScore == '') {  
68.                 levelScore = "A";  
69.             }  
70.             if ("S" == levelScore) {  
71.                 itemName = "GameSelectItemScoreS";  
72.             }  
73.             else {  
74.                 itemName = "GameSelectItemScore";  
75.             }  
76.         }  
77.         else if (i == currentLevel) {  
78.             itemName = "GameSelectItemLevel";  
79.         }  
80.         else {  
81.             itemName = "GameSelectItemLocked";  
82.         }  
83.         var itemData = {  
84.             xIndex: xIndex,  
85.             yIndex: yIndex,  
86.             index: i,  
87.             type: itemName,  
88.             onItemAction: function () {  
89.                 cc.log("onItemAction");  
90.                 var action = cc.ScaleBy.create(0.5, 0.8);  
91.                 this.rootNode.runAction(cc.Sequence.create(  
92.                     action, action.reverse(), cc.DelayTime.create(2)  
93.                     //  cc.CallFunc.create(this.onItemClicked())  
94.                 ));  
95.             },  
96.             onItemClicked: function () {  
97.                 cc.log("onItemClicked");  
98.                 GAME_LEVEL = (this.index + 1);  
99.                 require("MainLayer.js");  
100.                 cc.BuilderReader.runScene("", "MainLayer");  
101.             },  
102.             onLockOpened: function () {  
103.             }  
104.         };  
105.         var item = cc.BuilderReader.loadAsNodeFrom("", "GameSelectItemSprite", itemData);  
106.         if (item == null) {  
107.             continue;  
108.         }  
109.         item.setPosition(cc.p(this.columnSize * xIndex, this.rowSize * (4 - yIndex)));  
110.         item.setZOrder(11);  
111.         itemData.rootNode = item;  
112.         itemData.controller = this;  
113.         this.itemDatas.push(itemData);  
114.         itemData.levelNum.setString("" + (i + 1));  
115.         levelPan.addChild(item);  
116.     }  
117.     levelPan.setContentSize(cc.size(this.columnSize * 12, this.rowSize * 5));  
118.     this.levelScrollPanel.setTouchEnabled(false);  
119.     this.levelScrollPanel.setBounceable(true);  
120.     this.levelScrollPanel.setContainer(levelPan);  
121.     this.levelScrollPanel.setTouchPriority(-99999);  
122.   
123.     this.pageDots(0);  
124. }  
125.   
126. GameSelectLayer.prototype.onUpdate = function () {  
127.   
128. }  
129.   
130. GameSelectLayer.prototype.onExit = function () {  
131.   
132. }  
133.   
134. GameSelectLayer.prototype.onTouchesBegan = function (touches, event) {  
135.     cc.log("onTouchesBegan");  
136.     this.beganPosition = touches[0].getLocation();  
137. }  
138.   
139. GameSelectLayer.prototype.onTouchesMoved = function (touches, event) {  
140.     this.movePosition = touches[0].getLocation();  
141. }  
142.   
143. GameSelectLayer.prototype.onTouchesEnded = function (touches, event) {  
144.     cc.log("onTouchesEnded");  
145.     var loc = touches[0].getLocation();  
146.     var distanceX = this.beganPosition.x - loc.x;  
147.   
148.     var x = this.levelScrollPanel.getContentOffset().x;  
149.     var y = this.levelScrollPanel.getContentOffset().y;  
150.     this.levelScrollPanel.unscheduleAllCallbacks();  
151.   
152.     if (distanceX > 50) {  
153.         if (this.pageIndex < 4) {  
154.             this.pageIndex += 1;  
155.         }  
156.         this.pageDots(this.pageIndex);  
157.     }  
158.     else if (distanceX < -50) {  
159.         if (this.pageIndex > 0) {  
160.             this.pageIndex -= 1;  
161.         }  
162.         this.pageDots(this.pageIndex);  
163.     }  
164.     else {  
165.         this.onItemClicked(loc);  
166.     }  
167.     this.levelScrollPanel.setContentOffsetInDuration(cc.p(-this.columnSize * 3 * this.pageIndex, y), 0.5);  
168. }  
169.   
170. GameSelectLayer.prototype.onItemClicked = function (location) {  
171.     var x = location.x;  
172.     var y = location.y;  
173.   
174.     if (!isInScroll(location)) {  
175.         cc.log("out");  
176.         return;  
177.     }  
178.   
179.     var scrollPanelRect = this.levelScrollPanel.getBoundingBox();  
180.     var xIndex = Math.floor((x - 110) / this.columnSize) + this.pageIndex * 3;  
181.     var yIndex = 4 - Math.floor((y - 385) / this.rowSize);  
182.     cc.log("scrollX==" + scrollPanelRect.x + ",scrollY==" + scrollPanelRect.y);  
183.     cc.log("xIndex==" + xIndex + ",yIndex==" + yIndex);  
184.   
185.     for (var i = 0; i < this.itemDatas.length; i++) {  
186.         if (this.itemDatas[i].xIndex == xIndex && this.itemDatas[i].yIndex == yIndex) {  
187.             cc.log("click i=" + i);  
188.             this.itemDatas[i].onItemClicked();  
189.             break;  
190.         }  
191.     }  
192. }  
193.   
194. GameSelectLayer.prototype.pageDots = function (position) {  
195.     this.dotNode.removeAllChildren();  
196.     for (var i = 0; i < 4; i++) {  
197.         var dots = ["s_point.png", "s_point_s.png"];  
198.         var type = 0;  
199.         if (position == i) {  
200.             type = 1;  
201.         }  
202.         var dotSprite = cc.Sprite.createWithSpriteFrameName(dots[type]);  
203.         dotSprite.setAnchorPoint(cc.p(0, 1));  
204.         dotSprite.setPosition(cc.p(30 * i, 60));  
205.         dotSprite.setZOrder(100);  
206.         this.dotNode.addChild(dotSprite);  
207.     }  
208. }  
209.   
210. function isInScroll(location) {  
211.     var x = location.x;  
212.     var y = location.y;  
213.     if (x > 110 && x < (110 + 510) && y > 385 && y < (385 + 500)) {  
214.         return true;  
215.     }  
216.     return false  
217. }  

同时修改Main.js,加入，require("GameSelectLayer.js");;

 

然后修改StartLayer.js,让点击开始后跳转到GameSelectLayer.js;

 

[javascript]  view plain copy

 

1. //  
2. // CleanerScoreScene class  
3. //  
4. var StartLayer = function () {  
5.     cc.log("StartLayer")  
6. };  
7.   
8. StartLayer.prototype.onDidLoadFromCCB = function () {  
9. //    this.rootNode.onUpdate = function (dt)  
10. //    {  
11. //        this.controller.onUpdate();  
12. //    };  
13. //    this.rootNode.schedule(this.rootNode.onUpdate);  
14.   
15.     if (sys.platform == 'browser') {  
16.         this.onEnter();  
17.     }  
18.     else {  
19.         this.rootNode.onEnter = function () {  
20.             this.controller.onEnter();  
21.         };  
22.     }  
23.   
24.     this.rootNode.onExit = function () {  
25.         this.controller.onExit();  
26.     };  
27. };  
28.   
29. StartLayer.prototype.onEnter = function () {  
30. }  
31.   
32. StartLayer.prototype.onUpdate = function () {  
33.   
34. }  
35.   
36. StartLayer.prototype.onPlayClicked = function () {  
37.     cc.BuilderReader.runScene("", "GameSelectLayer");  
38. }  
39.   
40. StartLayer.prototype.onExit = function () {  
41.   
42. }  

完成后运行，ok，效果最上面；

 

下一篇文章 我会介绍cocos2d-x  editor的串联游戏流程    笔者（李元友）

资料来源：cocos2d-x  editor