[cocos2d-x]#5 UI에 대해 알아보자2.

 

지난 시간에는 Menu와 MenuItem 그리고 Label에 대해 알아보았다.

이번 시간에는 Cocos2dx에서 지원하는 나머지 UI들, Button,Checkbox,Loading Bar,Slider,Textfield에 대해 알아보겠다.

 

Button

auto button = ui::Button::create("button.png", "button.png", "button.png");
button->setTitleText("Button Text");

button->addClickEventListener([=](Ref* sender) {
    auto btn = static_cast<ui::Button*>(sender);

    btn->setTitleText("Click");
    CCLOG("Beautiful Spring");
    });


button->setPosition(centerPos);

addChild(button);

ui네임스페이스에 속하기 때문에 ui::를 해주어야 한다.

이게 귀찮다면 using문을 활용하여 줄일수 있다.

using Button = ui::Button;

cocos2dx에서는 이런 using문을 쓸때 USING_NS_CC보다 위에 가지 않도록 주의 해줘야 한다.

 

 

 만약 USING_NS_CC보다 위에 쓰고 싶다면

using Button = cocos2d::ui::Button;

앞에 cocos2dx::이런걸 붙여줘야 한다.

 

다시 Button클래스로 돌아와서 설명해주자면

Button도 MenuItem처럼 선택된 기본 상태와 선택 상태가 존재 하며 추가로 비활성화 된 상태가 존재한다.

때문에 각각의 상태에 맞는 이미지를 지정해 주어야 하는데, 비활성화 되면 titleText는 그대로 존재 하기 때문에 버튼이 아예 보이지 않는것을 원한다면 추가로 설정을 해주어야 한다.

 

비활성화 상태일때는 callback들이 실행되지 않는다.

 

Checkbox

CheckBox는 플레이어에게 예/아니요와 같은 상태를 받을 때 유용하게 사용할수 있다.

이는 유니티의 Toggle과 유사하다.

 

CheckBox는 Create할때 총5개의 이미지가 필요하다.

CheckBox* CheckBox::create(const std::string& backGround,
                           const std::string& backGroundSelected,
                           const std::string& cross,
                           const std::string& backGroundDisabled,
                           const std::string& frontCrossDisabled,
                           TextureResType texType)

다음과 같은 순서로만 넣어주어야 제대로 작동한다.

 

Checkbox를 만든 코드이다.

넣어주어야 할값들이 많은 만큼 코드가 더러워지기 쉽다.

auto checkbox = ui::CheckBox::create(
    "CheckBox_Normal.png",     
    "CheckBox_Press.png",         
    "CheckBoxNode_Normal.png",       
    "CheckBox_Disable.png",
    "CheckBoxNode_Disable.png"
);


checkbox->addClickEventListener([=](Ref* sender) {
    bool isChecked = checkbox->isSelected();

    if (!isChecked) {
        CCLOG("CheckBox is selected");
    }
    else {
        CCLOG("CheckBox is not selected");
    }
    });

checkbox->setPosition(centerPos);

addChild(checkbox);

 

Checkbox의 값을 가져올때는 isSelected()를 이용해 가져올수 있다.

 

LoadingBar

게임을 하면서 바가 점점 채워지는것을 본 경험을 많은것이다.

당연히 cocos2dx에서도 이를 지원해준다.

    auto loadingBar = ui::LoadingBar::create("LoadingBar.png");
    loadingBar->setDirection(ui::LoadingBar::Direction::RIGHT);

    loadingBar->setPosition(centerPos);
    loadingBar->setPercent(100);

    addChild(loadingBar);

이렇게 만들수 있으며 SetPercent() 함수로 진행률을 조절할수 있다.

진행률은 최대가 100이고 최소가 0이다.

 

0일때는 로딩바가 아에 보이지 않는다.

 

void LoadingBar::setPercent(float percent)
{
    if (percent > 100)
    {
        percent = 100;
    }
    if (percent < 0)
    {
        percent = 0;
    }
    if (_percent == percent)
    {
        return;
    }
     _percent = percent;
    
    if (_totalLength <= 0)
    {
        return;
    }
    
    this->updateProgressBar();
}

 

이게 로딩바 Percent()의 내부 코드인데 100을 초과하면 100으로 만들고 0미만이면 0으로 만들기 때문에 0~100사이의 숫자가 아니면 사실 의미가 없다.

 

그리고 다음 코드는 로딩바가 진행될 방향을 지정하는 코드이다.

   loadingBar->setDirection(ui::LoadingBar::Direction::RIGHT);

 

Direction은 LEFT와 RIGHT 2개만 존재한다.

 

왠지 모르겠는데 RIGHT를 하면 왼쪽부터 사라지고 LEFT를 하면 오른쪽부터 사라지는데 Cocos2dx오류인가?싶당.

 

그리고 LoadingBar는 정말 말그대로 이미지를 100개로 쪼개서 해당퍼센트를 보여주는거기 때문에 굳이 bar형태가 아니더라도 LoadingBar이미지로 사용할수 있다.

이렇게 말이당

 

SliderBar

게임을 하는 유저가 Loading bar를 건드려야 하는 순간이 있다.

설정창에서 오디오를 조절하거나 기타 설정들을 건드려야 할때 말이다.

 

그때 사용할수 있는게 Cocos2dx의 SliderBar이다.

    auto slider = ui::Slider::create();
    slider->loadBarTexture("Slider_Back.png");
    slider->loadSlidBallTextures("SliderNode_Normal.png", "SliderNode_Press.png", "SliderNode_Disable.png");
    slider->loadProgressBarTexture("Slider_PressBar.png");
    
    slider->setPosition(centerPos);
    
    addChild(slider);

 

Create할때 이미지를 지정할수도 있지만,5개의 이미지를 넣다보면 실수할수도 있기 때문에 이렇게 각각에 해당하는 부분을 따라따로 넣는것도 좋은 방법이다.

 

    slider->setMaxPercent(500);
    slider->getMaxPercent();

    slider->getPercent();

 

Slider는 최대 Percent를 지정할수있고 가져올수도 있고 현재 Percent를 가져올수도 있다.

 

TextField

만약 유저가 정보를 입력해야 할때는 어떻게 해야할까?

그때 사용할수 있는게 바로 TextField이다.

   auto textField = ui::TextField::create("is here", "LineSpeed.ttf", 30);

   textField->addTouchEventListener([&](Ref* sender, ui::Widget::TouchEventType type) 
   {
       
   });
   textField->setPosition(centerPos);


   this->addChild(textField);

 

첫번째 string에는 textField가 아무것도 적혀있지 않을때 나올 text이고,두번째 string에는 사용할 폰트를 적어주면 지정해주면 된다.

마지막 매개변수에는 textField의 크기를 지정해 주면된다.

입력한 글자당

 

근데 만약 textField에 입력할때 비밀번호 처럼 민감한 정보를 입력해야 하면 어떡할까?

또는 입력받을 글자수에 제한을 두고 싶다면 어떻게 해야할까?

 

고맙게도 Cocos2dx에서는 이러한 기능들이 다 내장되어 있다.

textField->setPasswordEnabled(true);

textField->setMaxLength(10);

이렇게 간단한 함수 하나로 설정할수 있다니 이 얼마나 간편한가..!!

 

오늘까지 해서 Cocos2dx의 모든 UI들을 알아봤다.

정말 긴 시간이었던거 같당.

 

다음 시간부터는 NodeType에 대해 알아보도록 하겠다.

긴글 읽어줘서 고맙당.