cocos2d 배경화면 무제한 스크롤링 하기

동일한 이미지 한 장을 사용해서 무제한으로 도는 것 처럼 보이게 만들 것이다. 

Note:

`CCParallaxNode`를 사용하면 배경화면을 마치 달리는 기차에서 창 밖을 바라보면 가까이 있는 것은 빠르게 움직이고 멀리있는 것은 느리게 움직이는 효과를 줄 수 있다.

header 파일에 아래 프로퍼티를 추가한다. 

@property (nonatomic, weak) CCSprite *backgroundImage1;

@property (nonatomic, weak) CCSprite *backgroundImage2;

implement 파일에 아래 코드를 추가한다. 

- (void)initBackground{

    //배경에 사용할 1번 이미지를 생성 후, 화면에 꽉 차게 이동 시킨다.

    _backgroundImage1 = [CCSprite spriteWithFile:@"01.png"];

    _backgroundImage1.anchorPoint = CGPointZero;

    [self addChild:_backgroundImage1 z:-1];

    

    //배경에 사용할 2번 이미지를 생성 후, 1번 이미지 위로 이동 시킨다.

    _backgroundImage2 = [CCSprite spriteWithFile:@"01.png"];

    _backgroundImage2.anchorPoint = CGPointZero;

    _backgroundImage2.position = ccp(0, [_backgroundImage2 boundingBox].size.height);

    [self addChild:_backgroundImage2 z:-1];

}

- (void)update:(ccTime)dt {

    // 배경화면 움직이는 속도, 현재 위치에 이동할 위치를 ccpAdd로 더하는 방식

    CGPoint backgroundScrollVel = ccp(0, -100);

    // 현재 이미지1의 위치 값을 불러온다.

    CGPoint currentPos = [_backgroundImage1 position];

    // 1번 이미지가 스크롤 되서 사라지고, 2번 이지미가 1번 이미지의 초기 위치에 오면 최초위치로 이동

    if (currentPos.y < -winSize.height) {

        [_backgroundImage1 setPosition: CGPointZero];

        currentPos = ccp(0, [_backgroundImage2 boundingBox].size.height);;

        [_backgroundImage2 setPosition: currentPos];

    //현재 위치에서 backgroundScrollVel을 더 한다.

    } else{

        _backgroundImage1.position = ccpAdd(ccpMult(backgroundScrollVel, dt), _backgroundImage1.position);

        _backgroundImage2.position = ccpAdd(ccpMult(backgroundScrollVel, dt), _backgroundImage2.position);

    }

}

한 장의 동일한 이미지를 두 개를 위, 아래로 붙여서 세로로 길게 늘여 놓은 다음에 아래 이미지가 스크롤 되어서 화면역영을 벗어나면, 즉 위의 이미지가 아래 이미지 초기 위치에 오게 되면 다시 원래 위치로 되돌린다. 이렇게 계속해서 반복하면 무제한으로 스크롤링 되는 것 처럼 보인다. 

cocos2d에서 뭔가 제공해 줄 것 같은데 내가 잘 못 찾아서 그런지 없어서... 누군가 잘 아시는분이 계시면 리플로 알려주세요~!