이번 포스트는 원래 effect들에 대해서 이야기 하려 하였으나, 그 이전에 Scene들을 전환할때의 효과를 주는 Transition Effect를 먼저 다루고 넘어가는 것이 좋을것 같아.  금번 포스트의 주제를 Transition Effect로 한정하여 이야기 하겠다.

사실 BlueOcean개발 당시에는 이런 효과들을 전혀 생각치 못하고 진행하는 바람에, 뭔가 Scene간 이동시에 허전한 느낌이 적지 않았는데, 이번에 정리하다보니 이런 좋은 기능이 있다는것을 발견하게 되었다.

cocos2d에서는 Scene들을 여러개 만들어서, 다른 Scene으로 전환할때  replaceScene이라는 메소드를 사용할수 있다.
이 때 위에서 말한 Transition을 지정하여 주면 다양한 효과를 줄 수 있다.

그러면 바로 소스코드를 들여다 보자.

Scene이동의 핵심은 다음 한줄에 다 표현가능하다.
 
[[CCDirector sharedDirectorreplaceScene:[CCTransitionXXXX transitionWithDuration:0.5 scene:[NewScene scene]]];
 

이전에 만들었던, 시계앱은 Scene이 하나 밖에 없으므로, 이번에는 하나의 Scene 에는 "HelloWorld"만 나오게 하고, 다른 Scene에서는 시간만 나오게 하여 두 Scene들을 터치입력시 이동하게 해보자.

 지금까지 사용하던 예제코드에서 파일 분리 작업이 필요한데, DateSceneLayer파일을 추가해서, 시간을 찍어주도록 하였다. 그리고 이전까지 사용하던 HelloWorldLayer는 초심으로 돌아가서, 진짜 문자열만 딱 찍어주는 코드로 다시 돌아갔다.
이번에는 소스가 변경되는 부분이 많지만, 핵심 부분인 위의 효과를 어떻게 쓰는지만 알면 앞으로필요한 효과를 찾아서 쓰기만 하면 된다.


 

//

//  DateSceneLayer.h

//  cocos2dTest



#import "cocos2d.h"



@interface DateSceneLayer : CCLayer {

    CCLabelTTF *label;

    

    int             _currentBg;

    NSMutableArray* _bgSpriteList;

    

}


+(CCScene *) scene;

@end

 


DateSceneLayer는 HelloWorldLayer의 파일을 조금만 수정해서 아래와 같이 init코드를 만들어주면 된다.
어떤 효과를 나타낼것인지 설명하는 문자열을 추가하돌고 하고, 터치입력을 받는 부분을 추가했다.
터치 입력은 CCLayer를 상속받은 경우,  init 시에 self.isTouchEnabled = YES; 만 추가해주면 된다.

그리고 각각 입력 시작, 움직임, 끝, 취소 등의 이벤트를 처리하는 아래 메소드들을 구현해주면 된다.HelloWorldLayer소스에 다 추가해두었음.

- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event;

- (void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event;

- (void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event; 
- (void)ccTouchCancelled:(UITouch *)touch withEvent:(UIEvent *)event; 

그리고, 터치 인벤트들을 어떻게 처리하는지에 대해서 아래와 같이 추가해주면 된다.

- (void) registerWithTouchDispatcher {

    [[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:0 swallowsTouches:YES];

}
 
터치처리에 대해서는 다음에 하나의 주제로 해서 다룰 계획이므로, 지금은 효과에 대해서만 집중하자. 

//

//  DateSceneLayer.m

//  

// on "init" you need to initialize your instance

-(id) init

{

    

    // always call "super" init

// Apple recommends to re-assign "self" with the "super" return value

if( (self=[super init])) {

        

        self.isTouchEnabled = YES;  

        label = [CCLabelTTF labelWithString:@" " fontName:@"AppleGothic" fontSize:32];

        // position the label on the center of the screen

        CGSize size = [[CCDirector sharedDirector] winSize];

label.positionccp( size.width /2 , size.height/4 );

// add the label as a child to this Layer

[self addChild: label z:2 tag:2];

        

        [self schedule:@selector(updateTime) interval:1];

    

    

        _bgSpriteList = [[NSMutableArray alloc] init];

    

        for(int i=0;i<3;i++)

        {

            CCSprite *sprite=[CCSprite spriteWithFile:[NSString stringWithFormat: @"scenario%02d.png",i]];

        

        

            [_bgSpriteList addObject:sprite];

        

        

            sprite.anchorPoint = CGPointZero;                        

            sprite.opacity=0;

            [sprite setPosition: ccp(0, 0)];

            [self addChild:sprite z:1 tag:1];

        }

        _currentBg=0

        [self bgControl];

    

        [self schedule:@selector(bgControl) interval:4];

    }

return self;

}

 

HelloWolrdLayer 전체 소스
 

//

//  HelloWorldLayer.m

//  



// Import the interfaces

#import "HelloWorldLayer.h"

#import "DateSceneLayer.h"

#define TRANSITION_DURATION 1.0f

#define TRANSITION_MAX      29


static int transitionIndex=0;


// HelloWorldLayer implementation

@implementation HelloWorldLayer

+(CCScene *) scene

{

// 'scene' is an autorelease object.

CCScene *scene = [CCScene node];

// 'layer' is an autorelease object.

HelloWorldLayer *layer = [HelloWorldLayer node];

// add layer as a child to scene

[scene addChild: layer];

// return the scene

return scene;

}

// on "init" you need to initialize your instance

-(void)updateText

{

    [self unschedule:@selector(updateText)];

    // create and initialize a Label

    

    // ask director the the window size

    CGSize size = [[CCDirector sharedDirector] winSize];

    CCLabelTTF* trasitionlabel=nil;

    switch (transitionIndex)

    {

        case 0:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionRotoZoom" fontName:@"AppleGothic" fontSize:32];

            break;

        

        case 1:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionJumpZoom" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 2:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionMoveInL" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 3:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionMoveInR" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 4:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionMoveInT" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 5:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionMoveInB" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 6:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionSlideInL" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 7:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionSlideInR" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 8:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionSlideInB" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 9:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionSlideInT" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 10:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionShrinkGrow" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 11:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionFlipX" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 12:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionFlipY" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 13:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionFlipAngular" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 14:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionZoomFlipX" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 15:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionZoomFlipY" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 16:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionZoomFlipAngular" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 17:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionFade" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 18:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionCrossFade" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 19:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionTurnOffTiles" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 20:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionSplitCols" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 21:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionSplitRows" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 22:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionFadeTR" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 23:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionFadeBL" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 24:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionFadeUp" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 25:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionFadeDown" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 26:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionRadialCCW" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 27:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionRadialCW" fontName:@"AppleGothic" fontSize:32];

            break;

            

        case 28:

            trasitionlabel= [CCLabelTTF labelWithString:@"CCTransitionPageTurn" fontName:@"AppleGothic" fontSize:32];

            break;

            

    }

    

    // position the label on the center of the screen

    if(trasitionlabel != nil)

    {

        trasitionlabel.positionccp( size.width /2 , size.height/2 );

    

        // add the label as a child to this Layer

        [self addChild: trasitionlabel z:2 tag:2];

    }

    

    CCLabelTTF* label= [CCLabelTTF labelWithString:@"coolkim.tistory.com" fontName:@"AppleGothic" fontSize:32];


    // position the label on the center of the screen

    label.positionccp( size.width /2 , size.height/4 );

    

    // add the label as a child to this Layer

    [self addChild: label z:2 tag:2];

    

}

-(id) init

{

// always call "super" init

// Apple recommends to re-assign "self" with the "super" return value

if( (self=[super init])) {       

        self.isTouchEnabled = YES;  

        [self schedule:@selector(updateText) interval:TRANSITION_DURATION];


}

return self;

}


// on "dealloc" you need to release all your retained objects

- (void) dealloc

{

// in case you have something to dealloc, do it in this method

// in this particular example nothing needs to be released.

// cocos2d will automatically release all the children (Label)

    

// don't forget to call "super dealloc"

[super dealloc];

}

- (void) registerWithTouchDispatcher {

    [[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:0 swallowsTouches:YES];

}


- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event {

    CGPoint location = [touch locationInView: [touch view]];

    

CGPoint convertedLocation = [[CCDirector sharedDirector] convertToGL:location];

NSLog(@"ccTouchBegan : %f , %f",convertedLocation.x ,convertedLocation.y);

    

    return YES;

   

}


- (void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event {

    CGPoint location = [touch locationInView: [touch view]];

    

CGPoint convertedLocation = [[CCDirector sharedDirector] convertToGL:location];

NSLog(@"ccTouchMoved  %f , %f",convertedLocation.x ,convertedLocation.y);

    

    


}


- (void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event {

    CGPoint location = [touch locationInView: [touch view]];

    

CGPoint convertedLocation = [[CCDirector sharedDirector] convertToGL:location];

NSLog(@"ccTouchEnded : %f , y : %f",convertedLocation.x ,convertedLocation.y);

    

    //touch up

    //replace scene 

    switch (transitionIndex)

    {

        case 0:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionRotoZoom transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 1:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionJumpZoom transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 2:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionMoveInL transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 3:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionMoveInR transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 4:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionMoveInT transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 5:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionMoveInB transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 6:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionSlideInL transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 7:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionSlideInR transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 8:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionSlideInB transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 9:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionSlideInT transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 10:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionShrinkGrow transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 11:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionFlipX transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 12:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionFlipY transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 13:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionFlipAngular transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 14:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionZoomFlipX transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 15:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionZoomFlipY transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 16:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionZoomFlipAngular transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 17:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionFade transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 18:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionCrossFade transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 19:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionTurnOffTiles transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 20:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionSplitCols transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 21:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionSplitRows transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 22:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionFadeTR transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 23:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionFadeBL transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 24:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionFadeUp transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 25:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionFadeDown transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 26:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionRadialCCW transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 27:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionRadialCW transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

        case 28:

            [[CCDirector sharedDirector] replaceScene:[CCTransitionPageTurn transitionWithDuration:TRANSITION_DURATION scene:[DateSceneLayer scene]]];

            break;

            

    }

    transitionIndex++;

    

    if(transitionIndex == TRANSITION_MAX)

        transitionIndex=0;

    


}


- (void)ccTouchCancelled:(UITouch *)touch withEvent:(UIEvent *)event {

    

}

@end


 

터치가 입력되면, 총 29개의 이펙트를 순차적으로 돌아가면서 하나씩 하나씩 해볼수 있게 구현하였다. 많은 이펙트들이 있는데, 직접 그 이펙트가 무엇인지 확인해보지 못하면, 언제 써야 될지 알수 없으므로, 위의 예제 코드를 실행시킨 아래 동영상을 보면 아 이놈이 이놈이구나 할수 있을것이다.


Scene두개를 만들어서 한번 위의 효과들을 적용해서 테스트 해보면, 금방 사용할수 있을것이다. 

저작자 표시
신고

+ Recent posts

티스토리 툴바