Rampage - Dear ImGui를 이용한 시뮬레이터 UI(4)

UI에 원하는 모습을 렌더링할 수 있게 된 뒤, 임시로 UI를 만들어보며 Dear ImGui의 사용법을 익혔다.

 

이 UI에서 세부 설정을 제외하고 최대한 비슷하게 만드는 것이 목표이다.

일단 좌측 상단에 보여주고자 하는 모습을 렌더링한다. 이미지를 렌더링을 하는 것은 이미 했으니 적절하게 크기를 정해 렌더링할 수 있게 하면 바로 할 수 있다.

 

Dear ImGui에서 UI를 설정하기 위해서는 ImGui::Begin() 함수를 호출 한 뒤에 ImGui::ColorEdit3(), ImGui::Button, ImGui::Image() 등 띄우고자 하는 UI를 적절히 배치한 뒤, 끝으로 ImGui::End() 함수를 호출하면 된다.

 

메인화면을 렌더링하는 코드이다.

ImGui:: SetNextWindowPos()를 통해 렌더링할 UI 윈도우의 위치를 정한다. 나는 메인 윈도우 화면에서 XY가 25 픽셀 떨어진 지점으로 설정했다. ImGui:: SetNextWindowSize()는 렌더링할 UI 윈도의 크기를 설정하는 함수이다. 적절히 설정해주었다. 이후 ImGui::Begin() 함수를 호출 하는데 세번째 인자로 넘기는 ImGuiWindowFlags에 ImGuiWindowFlags_NoResize를 설정하도록 넘겨주었다. ImGuiWindowFlags_NoResize는 생성한 UI의 가로 세로 사이즈를 조절할 수 없게하는 flag이다. 이후 ImGui::Image()를 통해 메인씬과 같은 화면을 렌더링하게 하였다.

 

다음으로 타격감 설정 메뉴를 렌더링하는 코드이다.

타격감 설정 메뉴는 우측으로 쏠려있는 상태이다. 이를 구현하기 위해 시작할 때, 최초의 커서 위치를 구한 뒤 커서 위치에서 적절한 값 만큼 이동 -> UI 렌더링, 이동 -> UI 렌더링을 반복하게 해서 UI를 띄우게 했다. 아래는 타격감 설정 메뉴를 렌더링하는 코드이다.

 

다음으로 모션 선택 버튼이다.

버튼은 ImGui::Button() 호출을 통해 띄울 수 있다. 적절한 위치를 설정해 버튼을 띄울 수 있게 했다.

ImGui::SameLine()은 줄바꿈을 하지 않고 같은 줄에 다음 UI를 띄우는 함수이다.

 

이렇게 해서 띄운 초기 UI은 다음과 같다.