在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// frictionF1 = - xvel * 0.1;//F2// prevent icons out of rangeif ( pos.x < minX ){F2 = (minX - pos.x);}else if ( pos.x > maxX ){F2 = (maxX - pos.x);}//F3// suck planetif (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;}//CALCULATEf = 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 LabelCCLabelTTF *label = [CCLabelTTF labelWithString:@"Sawyer's Test" fontName:@"Marker Felt" fontSize:64];// ask director for the window sizeCGSize size = [[CCDirector sharedDirector] winSize];// position the label on the center of the screenlabel.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 layerNSMutableArray *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