[cocos2d-x 3.0] ParallaxNode

[cocos2d-x 3.0] ParallaxNode

cocos2d-x 2.0.4에서도 정상동작한다. (클래스명에 앞에 CC 붙여주고.. 조금 수정해야함)

ParallaxNode, 패럴랙스 노드는 간단히 말해, 배경을 스크롤 해주는 클래스이다.

만약, 게임에서 하나의 배경 이미지만 있고, 그걸 스크롤? 또는 이동시킬 필요가 있다면 그냥 스프라이트 하나를 이용해서 이동시켜주면 될것이다.

그럼, 패럴랙스노드가 뻘짓인가??? 아니.. 패럴랙스노드는 여러겹?의 배경이미지를 스크롤시킬 때 그 진가를 발휘한다.

여러개의 배경 이미지를 서로 다른 속도로 스크롤을 해 줄 수 있다.

예를 들어보면....

자동차를 타고 달리면서 차창 밖을 보면, 가까이 있는 사물은 휙휙 빠르게 지나가지만, 멀리 보이는 들판, 산들은 천천히 움직이는 것을 볼 수 있다.

이렇게 배경이 되는 사물들의,  거리 차이때문에 발생하는 이동 속도의 차이를 패럴랙스 노드를 이용해서 구현할 수 있다.

그럼..간단한 코드 쪼가리를 보자.

배경에 붙일 스프라이트들을 준비하고 아래처럼 패럴랙스노드를 준비할 수 있다.

    ParallaxNode* paraNode = ParallaxNode::create();

        

    Sprite* bg1 = Sprite::create("bg-1.png");

    bg1->setAnchorPoint(Point(0,0));

    Sprite* tree1 = Sprite::create("tree-1.png");

    tree1->setAnchorPoint(Point(0,0));

    

    paraNode->addChild(bg1, Z_BG, Point(0.0, 1.0), Point(0,0));    

    paraNode->addChild(tree1, Z_TREE, Point(0.0, 2.0), Point(0,0));

    

    paraNode->setTag(TAG_PARALLAX);

    

    this->addChild(paraNode, Z_BG);

Z_BG 는 배경이미지의 z order 고 Z_TREE는 더 가까운 배경의 z order 다. 당연 가까운 녀석이 더 큰 값을 가져야한다.

빨간 색으로 표시한 1.0과 2.0이 보이지? 

Point 에서 Y 자리에 설정한 건 Y 축 스크롤을 만들고 있기 때문이다.

bg1 이미지는 Y 값이 1.0.. 기본 속도라고 하자. 

tree1은 2.0으로 세팅했는데, 이렇게 하면, (더 가까이 있는) tree1 은 배경, bg1보다 두배 빠르게 스크롤된다.

여기까지는 준비고. 실제 게임로직에서 paraNode를 setPosition으로 변경해주면 설정해준 비율만큼 다르게 이동됨을 확인할 수 있다.

void PlayLayer::update(float dt)

{

   CCNode* paraNode = this->getChildByTag(TAG_PARALLAX);

    paraNode->setPosition(Point(paraNode->getPosition().x,paraNode->getPosition().y-3));

}

위 예는 게임 루프가 업데이트될 때마다 패럴랙스노드를 y축 방향으로 3픽셀씩 아래로 이동시키고 있다. 실제 실행시켜보면, tree 이미지가 배경이미지보다 더 빨리 아래로 이동하는 것을 볼 수 있다.

출처: http://zzaps.tistory.com/156