在Cocos2d中实现能够惯性拖动的选择界面
苹果的应用讲究用户体验
有的时候仔细想想
的确，很多细节决定了用户体验
比如说惯性拖动
可以说之前没有任何一家厂商能把触摸惯性拖动做的像苹果的UI那么流畅
Cocos2D中实现能够惯性拖动的选择界面
完成的效果：
制作一个简单的图层，通过传入许多的节点，图层自动将节点排版，并能够通过物理拖拽来选择其中的某一个节点，并通知节点的代理来处理
首先新建一个cocos2d项目，我用的版本是2.0,命名为SimplePhysicsDragSelectorTest
新建一个objective-c class，我这里命名为SZSimplePhysicsDragSelector
在SimplePhysicsDragSelector.h文件里添加以下代码：
#import "cocos2d.h" @class SZSimplePhysicsDragSelector; @protocol SZSimplePhysicsDragSelectorDelegate <NSObject> @optional // call when the selected icon changes -(void)onSelectedIconChanged:(SZSimplePhysicsDragSelector*)selector; @end @interface SZSimplePhysicsDragSelector : CCLayer { CCNode *s_content;//所有节点图标的父节点 NSMutableArray *s_icons;//节点图标清单 CCNode *s_selectedIcon;//选定的节点 BOOL isDragging;//是否在拖拽状态 CGPoint lastTouchPoint;//上一个触摸点 float lastx;//上一个图层内容x坐标 float xvel;//内容在x轴上的速度 int maxX;//内容可以自然移动到的最大极限x坐标 int minX;//内容可以自然移动到的最小极限x坐标 float acceleration;//加速度 float f;//合外力 id<SZSimplePhysicsDragSelectorDelegate> s_delegate;//代理 } @property (nonatomic, readonly) NSMutableArray *Icons; @property (nonatomic, readonly) CCNode *SelectedIcon; @property (nonatomic, assign) id<SZSimplePhysicsDragSelectorDelegate> Delegate; - (id)initWithIcons:(NSArray*)icons; @end
这里声明了SZSimplePhysicsDragSelector需要使用到的变量和方法，同时声明了SZSimplePhysicsDragSelector代理的方法
变量的作用如注释里描述的，后面将会详细说到
解释下代理方法：
-(void)onSelectedIconChanged:(SZSimplePhysicsDragSelector*)selector;
在图层选择的节点发生改变时将会发送此消息给代理，如果改变为没有选择节点也会发送此消息
初始化
在SZSimplePhysicsDragSelector.m文件中添加以下代码：
@implementation SZSimplePhysicsDragSelector @synthesize Delegate = s_delegate; @synthesize Icons = s_icons; @synthesize SelectedIcon = s_selectedIcon; - (id)initWithIcons:(NSArray *)icons { self = [super init]; if (self) { s_icons = [[NSMutableArray alloc] initWithArray:icons]; s_content = nil; s_selectedIcon = nil; isDragging = NO; lastTouchPoint = CGPointZero; lastx = 0.0f; xvel = 0.0f; minX = 0; maxX = 0; acceleration = 0.0f; f = 0.0f; self.isTouchEnabled = true;// 启用接收触摸事件 s_delegate = nil; } return self; } - (void)dealloc { [s_icons release]; [super dealloc]; } #pragma mark Override methods -(void) onEnter { [super onEnter]; s_content = [[CCSprite alloc]init]; [self addChild:s_content]; [self scheduleUpdate];//开启计时器 } -(void) onExit { [self unscheduleUpdate];//关闭计时器 [self removeChild:s_content cleanup:YES]; [s_content release]; s_content = nil; s_selectedIcon = nil; [super onExit]; } @end
以上代码实现了初始化&内存释放以及onEnter和onExist方法
在选择器被添加到某一个节点中时，将会自动创建一个内容节点s_content，用来存放所有的节点，并一起移动
布局节点
在onEnter方法中布局视图,并实现layout方法-(void) onEnter
-(void) onEnter { [super onEnter]; s_content = [[CCSprite alloc]init]; [self addChild:s_content]; [self layout]; [self scheduleUpdate]; } -(void) layout { int i = 1; for (CCNode *icon in s_icons) { CGPoint position = ccp((i-1) * 180, 0); float distance = fabsf(icon.position.x)/100; icon.position = position; if (![s_content.children containsObject:icon]) { [s_content addChild:icon]; } i++; } s_selectedIcon = [s_icons lastObject]; if ([s_delegate respondsToSelector:@selector(onSelectedIconChanged:)]) { [s_delegate onSelectedIconChanged:self]; } minX = - (i-1) * 180 - 100; maxX = 100; }
解释下layout方法
将180pt作为每两个节点之间的间距，同时第一个节点在s_content中的位置应该是(0,0)所以计算得出位置的公式（间距和初始位置可以根据需要更改）
position = ccp((i-1) * 180, 0)
之后添加节点到s_content，并且设置最后一个为初始选定的节点，最后通知代理选定节点发生更改
关于极限位置(minX,maxX)是这样设定的，前面说到180作为间距，(0,0)为初始节点位置，所以最后一个节点的x坐标为(i-1) * 180（i为节点个数），当需要选择右边的节点时实际上是将s_content的位置向左移动，所以选择到最后一个节点时s_content的位置应该是－(i-1) * 180，同理第一个选择到第一个节点时s_content的位置应该是(0,0)，此外我希望极限位置能够比头尾节点位置的范围稍大，所以最终我设定
minX = - (i-1) * 180 - 100;
maxX = 100;
触摸记录
布局完成，接下来我们需要实现触摸事件消息来记录数据供模拟物理使用
在SZSimplePhysicsDragSelector.m文件中添加以下代码：
- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; { s_selectedIcon = nil; if ([s_delegate respondsToSelector:@selector(onSelectedIconChanged:)]) { [s_delegate onSelectedIconChanged:self]; } UITouch *touch = [touches anyObject]; CGPoint position = [self convertTouchToNodeSpace:touch]; lastTouchPoint = position; isDragging = true; } - (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event; { UITouch *touch = [touches anyObject]; CGPoint position = [self convertTouchToNodeSpace:touch]; CGPoint translate = ccpSub(position, lastTouchPoint); translate.y = 0; s_content.position = ccpAdd(s_content.position, translate); lastTouchPoint = position; } - (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event; { isDragging = false; } - (void)ccTouchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event; { isDragging = false; }
这里分开说下4个触摸事件
- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
在方法中我们清空了选择的节点并通知代理选择的节点改变，标记自身状态为拖拽中
- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;
在方法中根据此刻触摸点与上一次触摸点的位置差，来移动s_content的位置，从而使内容跟随触摸移动，最后在记录下此刻的位置为上一次触摸位置，供下一次计算使用
- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;
标记自身状态为未拖拽
- (void)ccTouchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event;
标记自身状态为未拖拽
这样我们已经能够辨别自身是否在拖拽状态以及正确拖拽内容
模拟物理计算
首先说明一下思路：
我们在udpate方法中我们需要检测图层的状态：
若图层在被拖拽状态，则不需要模拟物理，只需要计算出用户触摸拖拽内容在x轴上的速度
若图层在未拖拽状态，则根据已经记录下的x轴移动速度，和通过受力计算出的加速度，改变x轴移动速度，最后在根据计算出的移动速度来计算实际位移
在SZSimplePhysicsDragSelector.m文件中添加以下代码：
-(void) update:(ccTime)dt; { [self updateMove:dt]; } - (void) updateMove:(ccTime)dt { if ( !isDragging ) { // *** CHANGE BEHAVIOR HERE *** // float F1 = 0.0f; float F2 = 0.0f; float F3 = 0.0f; CGPoint pos = s_content.position; //F1 // friction F1 = - xvel * 0.1; //F2 // prevent icons out of range if ( pos.x < minX ) { F2 = (minX - pos.x); } else if ( pos.x > maxX ) { F2 = (maxX - pos.x); } //F3 // suck planet if (fabsf(xvel) < 100 && !s_selectedIcon) { CCNode *nearestIcon = nil; for (CCNode *icon in s_icons) { if (nearestIcon) { CGPoint pt1 = [icon.parent convertToWorldSpace:icon.position]; float distance1 = fabsf(pt1.x - [CCDirector sharedDirector].winSize.width/2); CGPoint pt2 = [nearestIcon.parent convertToWorldSpace:nearestIcon.position]; float distance2 = fabsf(pt2.x - [CCDirector sharedDirector].winSize.width/2); if (distance1 < distance2) { nearestIcon = icon; } } else { nearestIcon = icon; } } if (nearestIcon) { s_selectedIcon = nearestIcon; if ([s_delegate respondsToSelector:@selector(onSelectedIconChanged:)]) { [s_delegate onSelectedIconChanged:self]; } } } if (s_selectedIcon) { CGPoint pt = [s_selectedIcon.parent convertToWorldSpace:s_selectedIcon.position];; float distance = pt.x - [CCDirector sharedDirector].winSize.width/2; F3 = - distance; } //CALCULATE f = F1 + F2 + F3; acceleration = f/1; xvel += acceleration; pos.x += xvel*dt; s_content.position = pos; } else { xvel = ( s_content.position.x - lastx ) / dt; lastx = s_content.position.x; } }
在onEnter方法中，我们已经启用了计时器，所以udpate方法将会在每个最小时间间隔被调用
其他就如同刚才整理的那样，没什么问题，主要使这个受力问题，这个受力是我经过了好多数值的尝试后，得出的比较能符合要求的效果
内容受到的力分为
F1阻力：方向与内容移动速度方向相反，大小与移动速度快慢呈正比
F1 = - xvel * 0.1;
F2超出边界的额外受力：方向与超出边界的方向相反，大小与超出边界的距离呈正比
F2 = (minX - pos.x);或者F2 = (maxX - pos.x);
F3将选定节点吸至屏幕中央的吸力：方向从选定节点指向屏幕中央，大小与选定节点到屏幕中央的距离呈正比：
F3 = - distance;
此外有个细节，如果我们不断的施加吸力，会出现一种情况：很难将选定的节点拖拽出去，因为吸力太大了，所以在代码中添加了一个条件
fabsf(xvel) < 100，当移动速度小于100时，才产生吸力，这样你会发现拖拽顺畅多了，并且也能够在选定了节点后短时间内变为静止
还有什么？
最后在添加一个随着移动而变化节点大小的效果，让拖拽看起来更加舒服
在原有代码内添加以下内容：
-(void) layout { int i = 1; for (CCNode *icon in s_icons) { CGPoint position = ccp((i-1) * 180, 0); float distance = fabsf(icon.position.x)/100; float scale = 1/(1+distance); icon.position = position; icon.scale = scale;//初始化缩放比例 if (![s_content.children containsObject:icon]) { [s_content addChild:icon]; } i++; } s_selectedIcon = [s_icons lastObject]; if ([s_delegate respondsToSelector:@selector(onSelectedIconChanged:)]) { [s_delegate onSelectedIconChanged:self]; } minX = - (i-1) * 180 - 100; maxX = 100; } -(void) update:(ccTime)dt; { [self updateMove:dt]; [self updateScale:dt];//更新缩放比例
} -(void) updateScale:(ccTime)dt; { for (CCNode *icon in s_icons) { CGPoint pt = [self convertToNodeSpace:[icon.parent convertToWorldSpace:icon.position]]; float distance = fabsf(pt.x)/100; icon.scale = 1/(1+distance); } }
测试
好了，代码完成了，接下来测试一下效果
把HelloWorldLayer的初始化方法替换为以下代码：
// create and initialize a Label
CCLabelTTF *label = [CCLabelTTF labelWithString:@"Sawyer's Test" fontName:@"Marker Felt" fontSize:64];
// ask director for the window size
CGSize size = [[CCDirector sharedDirector] winSize];
// position the label on the center of the screen
label.position = ccp( size.width /2 , size.height/2 );
// add the label as a child to this Layer
[self addChild: label];
// add the test selector to the layer
NSMutableArray *icons = [NSMutableArray array];
int i = 10;
while (i) {
[icons addObject:[CCSprite spriteWithFile:@"Icon@2x.png"]];
i--;
}
SZSimplePhysicsDragSelector *selector = [[[SZSimplePhysicsDragSelector alloc] initWithIcons:icons] autorelease];
selector.position = self.anchorPointInPoints;
selector.Delegate = self;
[self addChild:selector];
运行ios模拟器，你应该看到以下效果：
还算满意，希望大家能够用到各位的游戏中
测试代码
测试代码可以在以下链接下载
SimplePhysicsDragSelectorTest.zip
