CCParallaxNode를 이용하여 배경 이미지를 스크롤 해보자.
cocos2d-2.0-x-2.0.4/samples/TestCpp/Resources/Images에서 background.png를 복사한다.
CCParallaxNode를 생성하여 스프라이트 추가시(addChild)에 parallaxRatio로 속도를 지정 한다.
CCParallaxNode의 스크롤은 runAction으로 제어한다.
1. 패럴렉스노드 생성
2. 배경 이미지 로딩
3. 또 다른 배경 이미지 로딩(버튼 이미지를 벽으로 생각한다)
4. 사이드 스크를 액션 생성
5. 팰럴렉스에 액션 추가
6. 레이어에 패럴렉스 노드 추가
2개의 배경 이미지가 속도가 다르게(시차를 두고) 움직이고 있다.
( 바탕이 되는 숲 이미지와 여기서는 버튼을 배경 이미지2로 사용 하였다.)
단계별로 알아 보자.
1. 패럴렉스노드 생성
배경 이미지를 추가 할 수 있도록 CCParallaxNode를 생성한다.
CCParallaxNode *parallaxNode = CCParallaxNode::create()
2. 배경 이미지 로딩
스프라이트 이미지를 로딩하여 패럴렉스노드에 추가 한다.
두 번째 인자 parallaxRatio는 속도 비율이다. 캐릭터와 같은 속도라면 1로 준다.
parallaxNode->addChild(background, -1, ccp(1, 0), CCPointZero)
3. 또 다른 배경 이미지 로딩(버튼 이미지를 벽으로 생각한다)
버튼 스프라이트 이미지는 X축으로 10배나 빠르게 움직이도록 하였다.
parallaxNode->addChild(wall, 0, ccp(10, 0), ccp(300, 100))
4. 사이드 스크를 액션 생성
좌, 우 반복된 횡스크롤 액션을 작성한다.
CCActionInterval *go = CCMoveBy::create(3, ccp( -100, 0));
CCActionInterval *goBack = go->reverse();
CCFiniteTimeAction *seq = CCSequence::create( go, goBack, NULL);
CCAction *act = CCRepeatForever::create(( CCActionInterval*) seq);
5. 팰럴렉스에 액션 추가
횡스크롤 반복 액션을 실행한다.
parallaxNode->runAction( act)
6. 레이어에 패럴렉스 노드 추가
레이어에 최종적으로 추가해야 화면에서 볼수 있다.
this->addChild( parallaxNode, 0)
CCParallaxNode *parallaxNode = CCParallaxNode::create();
//배경 이미지 로딩
CCSprite *background = CCSprite::create("Images/background.png");
background->setAnchorPoint( CCPointZero);
parallaxNode->addChild(background, -1, ccp(1, 0), CCPointZero);
//또 다른 배경 이미지 로딩(버튼 이미지를 벽으로 생각한다)
CCSprite *wall = CCSprite::create("Images/btn-highscores-normal.png");
wall->setAnchorPoint( CCPointZero);
parallaxNode->addChild(wall, 0, ccp(10, 0), ccp(300, 100));
//사이드 스크를 액션 생성
CCActionInterval *go = CCMoveBy::create(3, ccp( -100, 0));
CCActionInterval *goBack = go->reverse();
CCFiniteTimeAction *seq = CCSequence::create( go, goBack, NULL);
CCAction *act = CCRepeatForever::create(( CCActionInterval*) seq);
//팰럴렉스에 액션 추가
parallaxNode->runAction( act);
//레이어에 패럴렉스 노드 추가
this->addChild( parallaxNode, 0);
참고 )
큰 배경 스크롤
디바이스에 따라 너무 큰 이미지를 처리 못 할 수도 있다.
이때는, 이미지를 분할하여 스크롤 하면 된다.
두 개의 이미지로 분리 했을 때 이미지의 크기이다.
이미지1 : 287 X 376
이미지2 : 277 X 376
CCParallaxNode에 스프라이트 이미지를 추가 할 때(addChild) 세 번째 인수 positionOffset에서 이미지의 위치를 준다.
즉, 두 번째 이미지 추가시에 X축의 offset을 287로 준다.
CCSprite *background = CCSprite::create("Images/min1.png");
background->setAnchorPoint( CCPointZero);
parallaxNode->addChild(background, -1, ccp(1, 0), CCPointZero);
//또 다른 배경 이미지 로딩(버튼 이미지를 벽으로 생각한다)
CCSprite *wall = CCSprite::create("Images/min2.png");
wall->setAnchorPoint( CCPointZero);
parallaxNode->addChild(wall, -1, ccp(1, 0), ccp(287, 0));
혹시라도 이미지가 만나는 부분에 검은 자국이 생긴다면 Anti-Aliasing을 끈다.
wall->getTexture()->setAliasTexParameters();