Fade, 이미지(CCSprite)를 점점 흐려지게 혹은 점점 진해지게 만들어 주는 액션이다.

 

※ 미리 선행되어야 할 작업 : setOpacity( 0~255가능 ) 메소드를 통해 Opacity값을 지정해주어야 함


■ FadeIn   : 현재의 opacity부터 최대opacity 255까지 지정한 duration 시간동안 점점 어두워짐 

                   ex) CCFadeIn*     in = CCFadeIn::actionWithDuration(1);

■ FadeOut : 현재의 opacity부터 최저 opacity 0까지 지정한 duration 시간동안 점점 밝아짐

                   ex) CCFadeOut* out = CCFadeOut::actionWithDuration(2);

■ FadeTo   : 현재의 opacity부터 내가 지정한 opacity까지 밝거나 혹은 어두워짐
                   ex) CCFadeTo* fadeto = CCFadeTo::actionWithDuration(3150);

 

   나는 메뉴가 선택되었을 때 팝업이 뜨면서 그 뒷 배경들은 점점 어두워지는 느낌을 표현하고 싶었다. 

   즉, 팝업은 FadeOut으로 밝아지고- 배경은 FadeIn으로 어두워지는것!

   그런데 내 생각과 다르게 FadeIn 메소드는 점점 어두워지면서 아예 까만색으로 아랫 노드를 완전히 가려버리는 문제가 있었다. 나는 뒤에 있는 배경을 반투명하게 가리고 싶은 건데 말이지. 알고보니 특정 Opacity까지만 내려가도록 설정해주는 FadeTo 라는 기특한 메소드가 있다. 현재의 opcity값과 메소드에 파라매터로 주어지는 Opacity값 중 어느 쪽이 크고 작냐에 따라 혼자서 FadeIn/Out 양쪽을 다 소화해낸다. 0 → 150 으로 Opacity를 주니 뒷 배경을 적절하게 가려주어서 만족.

 

   아래는 소스코드.

   쇼 팝업/ 하이드 팝업 메소드를 만들어 주고, 터치이벤트에서 해당 함수들을 호출하도록 한다. 배경을 반쯤 어둡게 덮는 레이어(alphaLayer)는 어두워지고, 팝업(popupbox)은 밝아진다. 랄까 팝업은 최초 Opacitiy가 0이라 더 밝아질 것도 없어서 '점점 밝아지는' 느낌은 안 나는데, 그런게 필요하다면 Opacity값을 수정하면 되겠다.

 

[팝업 컨트롤]

void XXX::showPopupBox(int menu) 
{

    alphaLayer->setIsVisible(true);

    popupBox->setIsVisible(true);

    
     // init에서 0값을 주었다고 여기에서 opacity셋팅을 빼먹으면

     // 처음 한 번만 페이드효과가 먹고, 그 이후부터는 페이드없이 바로 나타나는 불상사 발생 

    alphaLayer->setOpacity(0);

    popupBox ->setOpacity(0);

      

    CCFadeTo*  fadeto = CCFadeTo::actionWithDuration(2150);

    CCFadeIn*   fadein = CCFadeIn::actionWithDuration(2);   

  

    alphaLayer->runAction(fadeto);

    popupBox ->runAction(fadein);

}


void XXX::hidePopupBox() 
{

    popupBox->setIsVisible(false);

    alphaLayer->setIsVisible(false);

    // 이론적으로 opacty를 여기에서 0으로 주면 감춰져서 보이지 않을 것으로 생각했는데 그렇게 안 된다.

    // 왜일까- 잘 모르겠지만 우선 show와 hide에 각각 setIsVisible설정

}

 

[팝업 Sprite생성]

void XXX::init()
{ 

    ////////// Pop-up

   //////////////////////////////////////////////////////////////////////////////////////////

    popupBox = new CCSprite();

    popupBox->init();

    popupBox->setPosition(ccp(0,0));

    

    CCSprite* bgBox = CCSprite::spriteWithFile("pop_box.png");

    bgBox->setScale(0.7);

    bgBox->setPosition(ccp((float)screenSize.width/2, (float)screenSize.height/2));

    popupBox->addChild(bgBox,  10);

    

    btnCancle = CCMenuItemImage::itemFromNormalImage("btn_cancle.png","btn_cancle.png",

                                                                                this,menu_selector(EbookHome::popupCancleCallback) );

    btnCancle->setPosition(ccp((float)screenSize.width/2+210, (float)screenSize.height/2+80));

    

    btnRestart = CCMenuItemImage::itemFromNormalImage("btn_start.png","btn_start.png",

                                                                                this,menu_selector(EbookHome::popupRestartCallback) );

    btnRestart->setPosition(ccp((float)screenSize.width/2-100, (float)screenSize.height/2-40));

    

    btnResume = CCMenuItemImage::itemFromNormalImage("btn_resume.png","btn_resume.png",

                                                                                 this,menu_selector(EbookHome::popupResumeCallback) );

    btnResume->setPosition(ccp((float)screenSize.width/2+100, (float)screenSize.height/2-40));

    

    CCMenu* popupBtns = CCMenu::menuWithItems(btnCanclebtnRestartbtnResumeNULL);

    popupBtns->setPosition(ccp(0,0));

    popupBox->setOpacity(0);

    popupBox->addChild(popupBtns, 11);

    this->addChild(popupBox10);

    

    alphaLayer = new CCLayerColor();

    alphaLayer->initWithColor(ccc4f(0,0,0,0));

    alphaLayer->setOpacity(0);

    this->addChild(alphaLayer9);

    

    hidePopupBox();

}


출처 : http://deng-i.net/category/%EA%B3%B5%EB%B6%80%ED%95%98%EB%8A%94%20%EA%B0%9C%EB%B0%9C%EC%9E%90/Cocos%202d-x%20

+ Recent posts