【玩转cocos2d-x之十五】关卡选择的设计

原创作品，转载请标明：http://blog.csdn.net/jackystudio/article/details/12966993

这节介绍一下游戏中帮助界面和关卡选择的设计，其实都是一样的，关键在于美工。这里采用自定义TableView层来实现。

1.导入头文件和设定空间

因为TableView相关的类是在扩展包里面，所以必须先声明

[cpp] view plaincopy

1. #include "cocos-ext.h"
2. USING_NS_CC_EXT;

2.继承的实现

自定义TableView继承于CCLayer，因此可以捕获触摸，同时继承于扩展包的CCTableViewDataSource和CCTableViewDelegate。前者是TableView的数据源，包含了一系列和TableView数据单元相关的操作，后者则是继承于CCScrollViewDelegate抽象类，声明了一些和滚动，放大，触摸回调之类的接口，然后在内部包含了一个CCTableView，这用起来有点像Android的Adapter。当然分别继承几个类使用也是一样的。

先看一下要实现的接口吧。

[cpp] view plaincopy

1. class TableViewTestLayer : public cocos2d::CCLayer, public cocos2d::extension::CCTableViewDataSource, public cocos2d::extension::CCTableViewDelegate
2. {
3. public:
4. virtual bool init();
6. CREATE_FUNC(TableViewTestLayer);
8. virtual void scrollViewDidScroll(cocos2d::extension::CCScrollView* view){}//滚动时调用，空实现，因为继承了抽象类所以必须重写
9. virtual void scrollViewDidZoom(cocos2d::extension::CCScrollView* view){}//缩放时调用，空实现，同上
10. virtual void tableCellTouched(cocos2d::extension::CCTableView* table, cocos2d::extension::CCTableViewCell* cell);//触摸单元时回调
11. virtual cocos2d::CCSize tableCellSizeForIndex(cocos2d::extension::CCTableView *table, unsigned int idx);//设定单元所占大小
12. virtual cocos2d::extension::CCTableViewCell* tableCellAtIndex(cocos2d::extension::CCTableView *table, unsigned int idx);//设定单元内容
13. virtual unsigned int numberOfCellsInTableView(cocos2d::extension::CCTableView *table);//返回单元数
14. };

当然还有一些其他功能，如高亮，循环，看情况重载。

3.自定义TabView层各模块的实现

3.1.初始化函数init

[cpp] view plaincopy

1. CCSize winSize = CCDirector::sharedDirector()->getWinSize();
2. CCTableView* tableView = CCTableView::create(this, winSize);//创建一个CCTableView
3. tableView->setDirection(kCCScrollViewDirectionHorizontal);//设置方向
4. tableView->setPosition(ccp(0,winSize.height/2-50));
5. tableView->setDelegate(this);//这句话很重要，把taleView和当前类绑到一起，所以后面的调用主体都是tableView
6. this->addChild(tableView);
7. tableView->reloadData();

3.2.触摸回调tableCellTouched[cpp] view plaincopy

1. void TableViewTestLayer::tableCellTouched(CCTableView* table, CCTableViewCell* cell)
2. {
3. CCLOG("cell touched at index: %i", cell->getIdx());//cell为当前选择单元
4. }

3.3.单元大小tableCellSizeForIndex[cpp] view plaincopy

1. CCSize TableViewTestLayer::tableCellSizeForIndex(CCTableView *table, unsigned int idx)
2. {
3. //if (idx == 2) {
4. // return CCSizeMake(100, 100);//第2个大小为100，100
5. //}
6. return CCSizeMake(120, 120);其余为120，120
7. }

3.4.设置数据源tableCellAtIndex

[cpp] view plaincopy

1. CCTableViewCell* TableViewTestLayer::tableCellAtIndex(CCTableView *table, unsigned int idx)
2. {
3. CCString *string = CCString::createWithFormat("%d", idx);
4. CCTableViewCell *cell = table->dequeueCell();
5. if (!cell) {
6. cell = new CCTableViewCell();//创建单元，如果要自定义单元效果，需继承CCTableViewCell，并重载draw函数
7. cell->autorelease();
8. CCSprite *sprite = CCSprite::create("HelloWorld.png");
9. sprite->setScale(0.2f);
10. sprite->setPosition(ccp(60, 60));
11. sprite->setTag(123);
12. cell->addChild(sprite);//添加到cell
13. CCLabelTTF *label = CCLabelTTF::create(string->getCString(), "Helvetica", 20.0);
14. label->setPosition(ccp(60,10));
15. label->setTag(456);
16. cell->addChild(label);//添加到cell
17. }
18. else
19. {
20. CCLabelTTF *label = (CCLabelTTF*)cell->getChildByTag(456);
21. label->setString(string->getCString());
22. }
23. return cell;
24. }

3.5.单元数numberOfCellsInTableView

[cpp] view plaincopy

1. unsigned int TableViewTestLayer::numberOfCellsInTableView(CCTableView *table)
2. {
3. return 20;//直接返回设定单元数
4. }

4.效果图

5.源码下载地址

http://download.csdn.net/detail/jackyvincefu/6422401

3楼Zcoming昨天 22:49

哦，我以为是楼主自己代码实现的控件呐

2楼Zcoming昨天 22:05

自己写的空间吗？

1楼Zcoming昨天 22:01

控件？

Re: jackyvincefu昨天 22:01

回复Zcomingn也可以算控件吧。。。 CCTableView是自带的。