首页 > 代码库 > Cocos2d-x 3.2 学习笔记（十四）保卫萝卜之界面UI
Cocos2d-x 3.2 学习笔记（十四）保卫萝卜之界面UI
保卫萝卜~上一篇说了使用CocoStudio制作主界面，这里来完善主界面动画及后续界面（主题界面ThemeUI、场景选择界面SelectMapUI），主要涉及的控件PageView。
学习要写笔记，记录自己的步骤（练手作）。
一、主界面动画
上一篇的主界面是静态的，这样很不好看。如果有玩过保卫萝卜就知道它的主界面是动的，云啊、叶子啊都在动，OK加几行代码来实现。
先看效果图：
加入如下代码：
bool MenuScene :: init(){ if ( !Layer :: init() ) { return false ; } cocos2d ::ui :: Widget* layout = cocostudio ::GUIReader :: getInstance()-> widgetFromJsonFile ("MainUi.json" ); this ->addChild ( layout); Button * btnAdventure = ( Button*) layout ->getChildByName ( "btnAdventure"); Button * btnBossHome = ( Button*) layout ->getChildByName ( "btnBossHome"); Button * btnBoss = ( Button*) layout ->getChildByName ( "btnBoss"); btnAdventure ->addTouchEventListener ( this, toucheventselector (MenuScene :: btnClick)); btnBossHome ->addTouchEventListener ( this, toucheventselector (MenuScene :: btnClick)); btnBoss ->addTouchEventListener ( this, toucheventselector (MenuScene :: btnClick)); ImageView * cloud1 = ( ImageView*) layout ->getChildByName ( "cloud1"); ImageView * cloud2 = ( ImageView*) layout ->getChildByName ( "cloud2"); Vec2 size = Director ::getInstance ()-> getVisibleSize(); cloud1 ->runAction ( RepeatForever:: create (Sequence :: create( MoveBy ::create ( 10, Vec2 (size . x+ cloud1 ->getCustomSize (). width, 0 )),Place :: create( Vec2 (0 , cloud1-> getPositionY ())),nullptr ))); cloud2 ->runAction ( RepeatForever:: create (Sequence :: create( MoveBy ::create ( 20, Vec2 (size . x+ cloud2 ->getCustomSize (). width, 0 )),Place :: create( Vec2 (0 , cloud2-> getPositionY ())),nullptr ))); ImageView * bird = ( ImageView*) layout ->getChildByName ( "bird"); bird ->runAction ( RepeatForever:: create ( Sequence ::create ( MoveBy ::create ( 1, Vec2 (0 , 50)), MoveBy ::create ( 1, Vec2 (0 ,- 50)), nullptr ))); ImageView * leaf2 = ( ImageView*) layout ->getChildByName ( "leaf2"); ImageView * leaf3 = ( ImageView*) layout ->getChildByName ( "leaf3"); RotateTo * rotateTo = RotateTo:: create (0.1f , 20); RotateTo * rotateTo2 = RotateTo:: create (0.1f , 0); leaf2 ->runAction ( RepeatForever:: create ( Sequence ::create ( Repeat ::create ( Sequence:: create (rotateTo , rotateTo2, nullptr ),2 ), DelayTime ::create ( 5), nullptr ))); leaf3 ->runAction ( RepeatForever:: create ( Sequence ::create ( DelayTime ::create ( 8), Repeat ::create ( Sequence:: create (rotateTo , rotateTo2, nullptr ),2 ), DelayTime ::create ( 4), nullptr ))); return true ;}
OK，加入动作表现之后界面利马生动起来。
二、主题选择
1、场景UI制作
菜单部分使用PageView控件，这个控件是翻页效果，先看效果：
在CocoStudio中创建ThemeUI并使用PageView控件如：
2、加入舞台
这里有五个页面，分别是
天际主题、森林主题、沙漠主题、海底主题、未开放的极地，
每个页面下面的sign标签是通关数和总关卡数，这里是需要变动的。
PageView控件可以使用手指滑动，也要有按钮的互动，因此有两个左右按钮，点击左上角的home会返回主界面。
首先，把导出的json文件加至舞台，添加事件以及默认页：
cocos2d::ui::Widget* layout = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("ThemeUI/ThemeUI.json"); this->addChild(layout); Button* btnMenu = (Button*)layout->getChildByName("btnMenu"); _btnLeft = (Button*)layout->getChildByName("btnLeft"); _btnRight = (Button*)layout->getChildByName("btnRight"); btnMenu->addTouchEventListener(this,toucheventselector(ThemeScene::btnClickMenu)); _btnLeft->addTouchEventListener(this,toucheventselector(ThemeScene::btnClickLeft)); _btnRight->addTouchEventListener(this,toucheventselector(ThemeScene::btnClickRight)); _pageView = (PageView*)layout->getChildByName("pageView"); _pageView->addEventListenerPageView(this,pagevieweventselector(ThemeScene::pageEvent)); int index = _pageView->getPages().size(); while (index-->0) { Layout* pageIndex = (Layout*)_pageView->getPage(index); pageIndex->setUserData((int*)index); pageIndex->addTouchEventListener(this,toucheventselector(ThemeScene::layputEvent)); } changePage( 0 );
这里有两个事件 1、PageView的翻动事件。2、点击PageView子页的事件
这里有两个注意点
1、翻动PageView要与按钮对应，首页左向按钮消失，尾页右向按钮消失
2、点击按钮翻动PageView
void ThemeScene::btnClickLeft(Button* btn, TouchEventType eventType){ if( eventType == TOUCH_EVENT_ENDED ) { auto nextPage = _pageView->getCurPageIndex() - 1; changePage( nextPage ); }}void ThemeScene::btnClickRight(Button* btn, TouchEventType eventType){ if( eventType == TOUCH_EVENT_ENDED ) { auto nextPage = _pageView->getCurPageIndex() + 1; changePage( nextPage ); }}void ThemeScene::changePage( int index ){ auto totalPage = _pageView->getPages().size(); _btnLeft->setVisible( index != 0 ); _btnRight->setVisible( index != ( totalPage-1 ) ); if( index == _pageView->getCurPageIndex() ) return; if( index >= 0 && index <= totalPage-1 ) { _pageView->scrollToPage( index ); }}void ThemeScene::pageEvent(Ref* page,PageViewEventType type){ log("EventType"); changePage( _pageView->getCurPageIndex() );}
这样不管是按钮还是触摸都可以正确的显示按钮状态。
3、场景选择处理
在初始化PageView子页的时候加入了标记数据UserData，这个数据表示我们选择的场景类型
enum MapType{ Sky_Type, Forest_Type, Desert_Type, Seabed_Type, Max_Type};
这里的场景类型在后面的逻辑中是非常重要的数据，因此要找个地方去存储。
选择主题事件触发
void ThemeScene::layputEvent(Layout* layout, TouchEventType eventType){ if( eventType == TOUCH_EVENT_ENDED ) { int sign = (int)layout->getUserData(); log("layputEvent %d",(int)layout->getUserData()); if( sign >= 0 && sign < MapType::Max_Type ) { auto type = MapType((int)layout->getUserData()); SelectMapModel::getInstance()->setmapType(type); Director::getInstance()->replaceScene(SelectMapUI::createScene()); } else { log("not open"); } }}
Ok这样就没有任何问题了。目前关于数据记录的方法还没有完全想好，所以子页的sign显示就是默认的。
三、地图选择
1、场景UI制作
场景类型MapType对应【1、2、3、6】
这里也有一个PageView，这里面我只做了一个pageItem，所有的地图子页都是一样的，可以用代码clone一下。当然每个场景的资源名字都是一样的，根据地图类型进行了区分。
OK，看下效果吧:
2、初始化地图
首先，Json文件加入舞台，然后加入事件，初始化PageView。先拿到一个PageView子页，然后去初始化子页再clone添加至PageView
_pageView = (PageView*)layout->getChildByName("panelSky")->getChildByName("pageView"); Layout* item = (Layout*)_pageView->getChildByName("pageItem"); item->removeFromParent(); _pageView->removeAllPages(); int count = SelectMapModel::getInstance()->getMapCount(SelectMapModel::getInstance()->getmapType()); for (int idx = 1; idx <= count; idx++) { createOnlyPage(_pageView,item,idx); }void SelectMapUI::createOnlyPage(PageView* page,Layout* item, int idx){ std::string url = SelectMapModel::getInstance()->getMapResPath(SelectMapModel::getInstance()->getmapType()); ImageView* mapImg = (ImageView*)item->getChildByName("mapImg"); ImageView* towers = (ImageView*)item->getChildByName("towers"); mapImg->loadTexture(url+StringUtil::combination("ss_map%02d.png",idx)); towers->loadTexture(url+StringUtil::combination("ss_towers_%02d.png",idx)); page->addPage((Layout*)item->clone());}
其中自写StringUtil::combination是字符组合类，图片的路径都是通过MapType类决定的，根据选择不同的主题来决定地图数及图片路径。
”开始“按钮，根据选择的地图来决定战斗场景的初始化。
void SelectMapUI::btnClick(Button* btn, TouchEventType eventType){ if( eventType == TOUCH_EVENT_ENDED ) { log("click btn is %s",btn->getName().c_str()); int sceneID = _pageView->getCurPageIndex() + 1; SceneMgr::getInstance()->replaceScene(sceneID); }}
四、最新进度
目前，数据库、场景都已构架完毕，可以看下效果了。（地图太多了……时间不充裕目前只做了一个场景）
Cocos2d-x 3.2 学习笔记（十四）保卫萝卜之界面UI
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。