raylib:flappybird:메인메뉴를_키보드로_조작하기 [법학위키]

메인메뉴를 키보드로 조작하기
이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
{{:raylib:raylib버튼을키보드로선택하기.png?600|Raylib 버튼을 키보드로 선택하기}} 

~~stoggle_buttons~~

===== 스타팅 파일 =====

  * [[raylib:flappybird:flappy_bird_에_사운드를_입히기|플래피 버드에 사운드 입히기]]에서 이어진다. 
  * {{ :raylib:flappybird_5.zip |플래피 버드에 사운드 입히기}}파일이 시작할 프로젝트이다. 


===== 메뉴 상태 열거자 만들기 =====

==== 1. 개념 ==== 

마우스와 달리 키보드로 메뉴를 조작하려면 현재 메뉴가 몇 번째에 있는지를 알아야 한다. 마우스로는 화면에 그려진 메뉴의 위치 값을 전달받아 입력하는 것이라면, 키보드는 화살표키로 조작을 하면 몇번째 메뉴인지를 컴퓨터가 알아야 하기 때문이다. 따라서 열거자를 만들어서 현재 메뉴의 위치를 저장해야 한다. 


==== 2. 열거형 클래스 만들기 ==== 

menu.h에 다음과 같이 열거형 클래스를 만들고 선언할 것이다. 

=== 가. 열거형 선언 === 

맨위에 다음과 같이 열거형을 선언한다. 

<code raylib>
enum class menuEnum 
{
    game = 0, scoreboard, exit
};
</code>

=== 나. 별수로 선언 === 

menu클래스의 priavate 항목에 다음과 같이 변수로 선언한다. 

<code raylib>
    private: 
        menuEnum menuState;
</code>


===== GUI 클래스 수정하기 =====

우리는 기존에 버튼을 isChecked 불리언 변수를 이용하여 선택된 상태인지를 확인하였다. 

이렇게 isChecked를 클래스 밖에서 설정해줄 필요가 생겼다. 따라서 다음과 같이 public 클래스를 만들자. 

gui.cpp의 코드는 다음과 같다. 

<code raylib>
void GUI::Checked()    // 현재 버튼이 체크된 상태로 하기 
{
    isChecked = true;
    SetMousePosition(x + width / 2, y+height/2);  // 마우스 커서를 현재 버튼의 정중앙에 넣기 
}

void GUI::UnChecked()  // 현재 버튼이 체크 해제된 상태로 하기 
{
    isChecked = false;
}
</code>  

만약 버튼이 체크된 상태라면 마우스 커서도 현재 버튼의 정 중에 놓이도록 함수를 짜주었다. 


===== menu.cpp 구현하기 =====

==== 1. 초기화 하기 ==== 

Init()함수에서 제일 처음의 menuState를 설정한 후, 선태된 버튼만 체크된 상태로 보여주게 해준다. 

<code raylib>
    // 메뉴 스테이트 선언
   menuState = menuEnum::game;

    KeyboardButtonCheck();  // 키보드 상태를 현재 메뉴스테이트에 따라 달리 설정해 주기
</code> 

==== 2. KeyboardButtonCheck()함수 ==== 

for문을 돌려서 체크된 버튼만 isChecked가 true로 되게 만들면 된다. 

<code raylib>
// 현재 메뉴 상태에 따라 키보드 모양을 달리 정해줌
void Menu::KeyboardButtonCheck()
{
        for (int i = 0; i < 3; i++)
        {
            if (i == (int)menuState) 
                button[i].Checked(); 
            else 
                button[i].UnChecked();
        }
}
</code>


==== 3. KeyboardInputCheck() 문 ==== 

이제 업데이트 루프에서 키보드 입력을 받을 것이다. 

업데이트 문에는 KeyboardInputCheck()란 함수를 넣은 후 이를 따로 빼내어서 작성하였다. 

<code raylib>
// 키보드 인풋
void Menu::KeyboardInputCheck()
{
    //  키보드 입력  
    if (IsKeyPressed(KEY_UP)) 
    {
        int mI = (int)menuState;  
        mI--; 
        if (mI < 0) mI = 2; 
        menuState = menuEnum(mI); 

        KeyboardButtonCheck();
    }

    if (IsKeyPressed(KEY_DOWN))
    {
        int mI = (int)menuState;  
        mI++; 
        if (mI >=  3) mI = 0; 
        menuState = menuEnum(mI); 

        KeyboardButtonCheck();
    } 

    // 선택 키를 눌렀을 때 로직, (엔터키 또는 E키)
    if (IsKeyPressed(KEY_ENTER) || IsKeyPressed(KEY_E))
    {
          switch (menuState) 
          {
            case menuEnum::game :
                menuManager->scene = Scene::game; 
                break;
            case menuEnum::scoreboard : 
                menuManager->scene = Scene::scoreScene; 
                break;
            case menuEnum::exit :
                menuManager->gameExit = true;
                break;
            default : 
                menuManager->scene = Scene::game; 
                break;
          }
    }
}
</code> 

enum형인 메뉴스테이트는 int로 변환할 수 있다. 만약 키보드 위키를 누르면 숫자를 줄어들게 하고, 키보드 아래화살표키를 누르면 숫자를 늘어나게 한다음에 그 숫자를 다음 enum으로 변환하면 키보드 입력에 따라 선택된 버튼을 바꿀 수 있는 것이다.

현재는 3개 밖에 버튼이 없으므로 버튼이 0, 1, 2의 범위를 벗어나면 다시 순환하도록 하기 위해 숫자의 범위를 지정해 주었다. 


그리고 엔터키나 E키를 누르면 현재 선택된 버튼에 따라 일정한 작업을 수행하게 하였다. 

그리 어려운 부분은 없어 보인다. 


===== 결론 ===== 

==== 1. 참고 ==== 

gui.cpp에서 Draw부분을 다음과 같이 살짝 수정하여 버튼을 좀 더 시인성있게 해주었다. 하얀색 반투명 박스를 올려넣은 것이다.

<code raylib>
void GUI::Draw()
{
    DrawRectangle(x, y, width, height, DARKGREEN);   // 버튼을 그린다. 
    
    Vector2 length = MeasureTextEx(font, title.c_str(), 32, 5); // 글자의 포인트는 32으로 가정할 것이다.  32으로 가정한 글자의 가로 픽셀 크기를 구한다. 

    // 텍스트 출력
    Vector2 pos = {(float)x  + (width / 2) - (length.x / 2), (float)y + (height /2) - (length.y / 2)};     // 글자를 가로 및 세로 가운데 정렬한다. 
    DrawTextEx(font, title.c_str(), pos, 32, 5, DARKBROWN);  

    if (isChecked)
    {
        // 버튼 꾸미기
        DrawRectangle(x, y, width, height, Color{255, 255, 255, 85});   // 버튼을 그린다. 
        DrawRectangleLinesEx(rect, 4, Fade(BLACK, 0.3f));
    }
}
</code>


==== 2. 결론 ==== 

{{:raylib:raylib버튼을키보드로선택하기.png?400|Raylib 버튼을 키보드로 선택하기}}


지금까지의 소스파일은 다음과 같다.


{{ :raylib:flappybird_6.zip |플래피버드 메인메뉴를 키보드로 조작하기}}

다음번에는 [[raylib:flappybird:스프라이트로_애니메이션_구현하기|애니메이션]]을 해보도록 하자