Cocos2D实现RPG队伍菜单任意调整角色顺序的效果

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处.
如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;)

可以看到我们在将角色Panda从队列头部移至第3位后,地图上角色队列也立即发生了改变.

首先打开SpriteBuilder,将界面调整如下:

注意左侧竖排4个按钮每个上面都有一个对应的sprite和label对象.

为了实现在游戏界面上任务的拖拽,我们有很多方法,我这里使用了UIKit中UIButton可以添加手势的特点.在每个UIButton中添加一个长按手势.但是CCButton默认是不支持手势添加的,所以我们必须动态添加4个UIButton按钮,So,Let’s Do it!!!

在Xcode中添加initUIBtns方法:

-(void)initUIBtns{
    UIButton *uiBtn;
    CCButton *btn;
    for (int i = 0; i < _btns.count; i++) {
        uiBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        btn = _btns[i];
        CGRect rect = btn.boundingBox;
        CGPoint pos = [_peopleLayoutBox convertToWindowSpace:rect.origin];
        pos.y -= btn.boundingBox.size.height;
        rect.origin = pos;
        uiBtn.frame = rect;
        [[CCDirector sharedDirector].view addSubview:uiBtn];
        [_uiBtns addObject:uiBtn];

        [uiBtn addTarget:self action:@selector(uiBtnCallback:) forControlEvents:UIControlEventTouchDown];
        uiBtn.tag = i;

        UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(btnLongPress:)];
        longPress.minimumPressDuration = 0.8;
        [uiBtn addGestureRecognizer:longPress];
    }
}

代码主要功能如下:
1.依次读取每个CCButton的位置
2.在该位置处新建一个”透明”的UIButton
3.给该按钮添加手势识别器和press回调方法

在press回调方法中手动调用原CCButton的回调方法,这个比较简单,然后在手势识别器长按的回调中处理角色sprite的拖拽功能:

-(void)btnLongPress:(UILongPressGestureRecognizer*)gr{
    CGPoint location = [gr locationInView:[CCDirector sharedDirector].view];
    UIButton *uiBtn = (UIButton*)gr.view;
    NSInteger idx = uiBtn.tag;
    CCSprite *bg = _bgs[idx];

    CCSprite *bgNode = [bg children][0];
    bgNode.opacity = 0.5;
    if (gr.state == UIGestureRecognizerStateBegan) {
        CCLOG(@"%@ began!!!",NSStringFromSelector(_cmd));
    }else if (gr.state == UIGestureRecognizerStateEnded) {
        CCLOG(@"%@ ended!!!",NSStringFromSelector(_cmd));
        NSValue *v = _bgPositions[idx];
        NSInteger otherIdx = [self getBgInside2:bg.position];
        if (otherIdx == 0 || otherIdx == idx + 1) {

            bg.position = v.CGPointValue;

        }else{
            CCLOG(@"otherIdx is %ld",(long)otherIdx);
            CCSprite *otherBg = _bgs[otherIdx-1];
            GameCharacter *otherGC = [otherBg children][0];
            GameCharacter *gc = [bg children][0];
            [otherGC removeFromParentAndCleanup:NO];
            [gc removeFromParentAndCleanup:NO];
            [otherBg addChild:gc];
            [bg addChild:otherGC];
            bg.position = v.CGPointValue;
            GameData *gd = [GameData sharedInstance];
            [gd switchPlayerAtIndex:idx andAtIndex:otherIdx-1];
            [self switchLabelStringAtIndex:idx andIndex:otherIdx-1];
        }
        bgNode.opacity = 1.0f;
    }else{
        location = [[CCDirector sharedDirector] convertToGL:location];
        location = [self convertToNodeSpace:location];
        CGRect boundary = self.boundingBox;
        if (CGRectContainsPoint(boundary, location)) {
            bg.position = location;
        }else{
            NSValue *v = _bgPositions[idx];
            bg.position = v.CGPointValue;
            bgNode.opacity = 1.0f;
        }
    }
}

以上代码首先转换坐标类型,然后找到长按对应的按钮,从而取得对应的sprite.接着在触摸拖动时判断是否移出了当前界面的范围,如果是则sprite归位,否则sprite跟随触摸一起移动.最后当长按完成时判断是否发生sprite之间的交换,如果是则完成交换功能,否则sprite同样回到原来的位置.

在交换功能中,我们同样要修改内部的数据结构已完成数据的修改,就像MVC机制一样.最后在界面层关闭时,我们重新给游戏队伍在大地图上排序,因为你可能修改了队伍的顺序,所以我们也要修改地图中显示的顺序.

这样一个重排序的功能就完成了,是不是很有成就感呢 ;)