大佬教程收集整理的这篇文章主要介绍了cocos2d-x 2.0版本中CCScrollView的用法,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
cocos2d-x 2.0版本之后提供了许多控件,其中就包括ScrollView,之前总结过一个简单的ScrollView,但是问题很多,比如必须是全屏,不能是一块区域,而cocos2d-x 2.0中提供的CCScrollView中,是可以设定区域的,CCScrollView做了区域的裁剪
ScrollView一般用在游戏的关卡选择这种类似的场景(比如愤怒的小鸟和割绳子的关卡选择),当然,也可以用在道具店等等一些选择菜单的场景。
滑动,浏览不同关卡菜单;点击不同的菜单精灵,处理不同的事件。
(1) 首先需要一个创建一个CCScrollView的对象和一个“Container”(可以是CCLayer或者CCNode的对象,用来存放CCScrollView中的内容),我这里放置了两个精灵菜单选项
为了使ScrollView显示更灵活,CCScrollView提供了一个显示区域的设置方法,我这里设置显示区域480x320,总的大小为960x320(假设有两屏需要显示)
(3) 补充,其实到这里就基本实现了CCScrollView最基本的用法,如果需要监听滑动的事件,可以继承CCScrollViewDelegate委托,实现以下两个方法
这里会有一个问题,那就是当滑动结束时,经常是在两页之间,也就是图2的情况,这种体验不太好,我简单看了一下CCScrollView的源码,发现并没有相关的设置,想必是作者考虑到无法定义每页的大小尺寸,所以没有提供吧!所以,如果需要,我们要额外加一段校对的代码
所以在HelloWorld这层,继承了触摸事件的响应方法,并在ccTouchEnded()方法中校对
这里需要注意的是必须要先关闭CCScrollView的schedule方法,因为CCScrollView在最左边和最右边做了校对,但是对中间的部分没有做校对!
(1) 如果需要校对这一步,HelloWorld层是需要实现触摸方法的,而触摸的优先级一定要大于CCScrollView对象(也就是说要CCScrollView对象先响应触摸事件,然后在由HelloWorld层响应),而CCScrollView默认设置的优先级是0,所以HelloWorld需要设置为大于0的值
版权声明:本文为博主原创文章,未经博主允许不得转载。
上文来自:http://blog.csdn.net/onerain88/article/details/7775569/
在游戏和应用中经常要实现左右滑动展示游戏帮助、以列表显示内容的UI效果,就像android中的Gallery和ListView。本文通过CCScrollView和CCTableView分别来实现这两个效果,基于cocos2d-x 2.0.4版本。
首先来简单了解一下这两个东东,CCScrollView本身是一个CCLayer,而CCTableView是CCScrollView的子类,这是引擎已经帮我们封装好了的,CCTableView可以设置成横向和纵向,用它可以实现类似于Gallery和ListView的效果。
1. 首先实现游戏帮助界面
(1) 创建头文件GalleryLayer.h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@H_464_489@
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
#ifndef GALLERY_LAYER_H
#define GALLERY_LAYER_H
#include "cocos2d.h"
#include "SimpleAudioENGIne.h"
#include "cocos-ext.h"
USING_NS_Cc;
USING_NS_CC_EXT;
class
GalleryLayer :
public
cocos2d::CCLayer,
CCScrollViewDelegate
:
CREATE_FUNC(GalleryLayer);
:
//scrollview滚动的时候会调用
scrollViewDidScroll(CCScrollView* view);
//scrollview缩放的时候会调用
scrollViewDidZoom(CCScrollView* view);
onExit();
ccTouchBegan(CCTouch *pTouch,CCEvent *pEvent);
ccTouchMoved(CCTouch *pTouch,CCEvent *pEvent);
ccTouchEnded(CCTouch *pTouch,CCEvent *pEvent);
ccTouchCancelled(CCTouch *pTouch,CCEvent *pEvent);
private
:
//根据手势滑动的距离和方向滚动图层
CCScrollView *m_pScrollView;
CCPoint m_touchPoint;
int
m_nCurPage;
};
#endif
|
类GalleryLayer继承了CCScrollViewDelegate,实现了它的两个纯虚函数,主要是为了当scrollview滚动和缩放时回调这两函数,这样我们就可以在这两函数中做相关操作了。
(2) 看源文件GalleryLayer.cpp
#include "GalleryLayer.h"
#include "ListViewLayer.h"
using
namespace
cocos2d;
cocos2d::extension;
bool
GalleryLayer::init()
do
CC_BREAK_IF( !CCLayer::init() );
@H_907_619@m_nCurPage = 1;
CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
CCLayer *pLayer = CCLayer::create();
for
(
i = 1; i <= 3; ++ i)
@H_49_1056@memset
(Helpstr,153)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-weight:bold!important; min-height:inherit!important; BACkground:none!important">sizeof
(Helpstr));
pSprite->setPosition(ccp(visibleSize.width * (i-0.5f),visibleSize.height / 2));
pLayer->addChild(pSpritE);
}
pLayer->setContentSize(CCSizeMake(960*3,640));
->addChild(m_pScrollView);
CCSpriteFrameCache *pCache = CCSpriteFrameCache::sharedSpriteFrameCache();
i = 1; i <= 3; ++ i)
pPoint->setTag(i);
pPoint->setPosition(ccp( origin.x + (visibleSize.width - 3 * pPoint->getContentSize().width)/2 + pPoint->getContentSize().width * (i-1),origin.y + 30));
->addChild(pPoint);
}
CCSprite *pPoint = (CCSprite *)
->getChildByTag(1);
pPoint->setDisplayFrame(pCache->spriteFrameByName(
));
bRet =
true
;
return
bRet;
}
}
GalleryLayer::scrollViewDidScroll(cocos2d::extension::CCScrollView *view)
}
GalleryLayer::scrollViewDidZoom(cocos2d::extension::CCScrollView *view)
"zoom"
);
}
GalleryLayer::onEnter()
CCLayer::onEnter();
CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(
);
}
GalleryLayer::onExit()
CCDirector::sharedDirector()->getTouchDispatcher()->removeDelegate(
);
CCLayer::onExit();
CCSpriteFrameCache::sharedSpriteFrameCache()->removeUnusedSpriteFrames();
}
GalleryLayer::ccTouchBegan(CCTouch *pTouch,CCEvent *pEvent)
return
true
;
}
GalleryLayer::ccTouchMoved(CCTouch *pTouch,CCEvent *pEvent)
}
GalleryLayer::ccTouchEnded(CCTouch *pTouch,CCEvent *pEvent)
distance = endPoint.x - m_touchPoint.x;
adjustScrollView(distancE);
}
}
GalleryLayer::ccTouchCancelled(cocos2d::CCTouch *pTouch,cocos2d::CCEvent *pEvent)
distance = endPoint.x - m_touchPoint.x;
(distancE) > 50)
adjustScrollView(distancE);
}
}
GalleryLayer::adjustScrollView(
offset)
CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
CCSpriteFrameCache *pCache = CCSpriteFrameCache::sharedSpriteFrameCache();
->getChildByTag(m_nCurPagE);
));
(offset<0)
@H_907_619@m_nCurPage ++;
else
@H_907_619@m_nCurPage --;
}
(m_nCurPage <1)
@H_907_619@m_nCurPage = 1;
}
(m_nCurPage > 3)
CCLayer *pLayer = ListViewLayer::create();
CCScene *pScene = CCScene::create();
pScene->addChild(pLayer);
}
else
pPoint = (CCSprite *)
->getChildByTag(m_nCurPagE);
));
@H_907_619@m_pScrollView->setContentOffset(adjustPos,monospace!important; font-size:1em!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; BACkground:none!important">);
}
}
|
@H_197_729@
这里一共有三张图,是从捕鱼达人中拿出来的背景图,当滚完三张图时就跳转到ListViewLayer场景去,上面的代码比较容易懂。
首先创建一个CCLayer,包含三张背景图,设置CCLayer的ContentSize,并设置三张图片的位置
然后设置CCLayer为CCScrollview的内容,并设置CCScrollView的显示区域。
最后根据用户滑动的方向和距离,通过设置scrollview的setContentOffset,滚动视图。
CCScrollview.h文件中封装了一个枚举类型,一共有四个方向,常用横向和纵向,这里使用了横向。
下面来看看这部分的效果:
2. 现在来实现列表展示(ListView)的效果
(1)创建ListViewLayer.h
#ifndef LISTVIEW_LAYER_H
#define LISTVIEW_LAYER_H
#include "cocos-ext.h"
ListViewLayer :
cocos2d::extension::CCTableViewDatasource,monospace!important; font-size:1em!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; BACkground:none!important"> cocos2d::extension::CCTableViewDelegate
:
init();
scrollViewDidScroll(cocos2d::extension::CCScrollView* view);
scrollViewDidZoom(cocos2d::extension::CCScrollView* view);
//处理触摸事件,可以计算点击的是哪一个子项
tableCellTouched(cocos2d::extension::CCTableView* table,cocos2d::extension::CCTableViewCell* cell);
@H_103_618@
//每一项的宽度和高度
virtual
cocos2d::CCSize cellSizeForTable(cocos2d::extension::CCTableView *tablE);
//生成列表每一项的内容
cocos2d::extension::CCTableViewCell* tableCellATindex(cocos2d::extension::CCTableView *table,unsigned
idX);
//一共多少项
CREATE_FUNC(ListViewLayer);
};
ListViewLayer继承了CCTableViewDatasource和CCTableViewDelegate。这两个抽象类封装了几个有用的函数,我们在下面的源码中将实现它们。 |