게임 UI 해상도 변환

게임 UI 해상도 변환

 

 

(1024 * 768)

크기와 비율은 맞게 변환이 되었으나,

기본 UI를 와이드 해상도로 작업해서, 논와이드 해상도에서는 좁아져 보이게 되었습니다.

흐음, 이것은 별도로 처리가 필요할듯

 

 

 

 

 

(1280 * 720)

 

 

 

 

(1920 * 1080)

 

 

 

 

 

 

기본 게임 작업뷰를 1280 * 720 으로 작업을 하고 있었는데,

이러다보니,

1920 * 1080 으로 해상도를 변경하면,

UI 사이즈가 변환되지 않아, 큰 해상도에서는 작아보이는 현상이 있었습니다.

많이 비어 보이고, 뭔가 모자라 보였지만,

그냥 뭐 대충, 어느 해상도에서나 크게 이상하게 보이지 않을만큼,

디폴트한 위치나 크기로 제작을 하면 되겠지라고

신경을 안쓰고 있었었지요.

 

그러다 몇개 상용게임을 테스트해보니,

어라,

해상도별로 완벽하게 비율이 조정되어 항상 같은 위치와 크기를 유지하고 있더군요.

하긴 테스트한 게임들은 좋은 엔진을 사용한 게임들이긴 했습니다.

비싼 엔진들이 이런것도 처리가 안되면 돈값을 못하는 것이죠, ㅎㅎ

 

어쨋든,

그냥 대충 할까 하다가,

아무리 쳐다보고 있어도 도무지 마음에 들지를 않아서,

해상도를 변경하더라도, 항상 작업한 UI 크기와 위치를 유지하려면 어떻게 하면 될까?

라고 고민을 하고, 인터넷도 뒤져보고 하다가,

후후

해결을 하였습니다.

 

물론 전의 프로젝트 때에도, 이것저것 UI 작업을 해보았지만,

해상도 변경 관련해서 엔진에서 지원한다던지,  

팀장으로 있을때는, 주로 메인 시스템 작업, 3D작업을 위주로 하고,

UI 작업은 주로 팀원들이 맡아서 작업을 했기 때문에,

(사실 제가 제일 싫어하는 작업이었습니다, UI 작업....... )

별로 신경을 쓰지 않았더랬지요.

관련해서 뭔가 기억나는 것도 없구요.

 

잡설을 줄이고,

핵심은 이것

 

UI작업시

상대좌표와 절대좌표를 구분해서,

상대좌표는 그대로 사용,

절대좌표는 해상도의 비율을 적용.

 

우리가 보통 사용하는

left, right, top, bottom 값은

프로그램 실행시마다 자동으로 갱신되는 값들이니, 상대적인 값입니다.

이런 값들은 그냥 그대로 사용하면 됩니다. 당연히.

 

예를 들어

뉴게임 버튼의 x 좌표 위치를 left + 500 이런식으로 했다면,

left 는 상대값, 500 은 절대값이 됩니다. 

 

제가 사용하는 코드입니다.

UI가 그려질 중심위치를 정하는 코드입니다.

 

//해상도변경비율 = 현재의 해상도 / UI작업할때의 해상도

g_fUIScreenRatioX = (float)g_ScreenWidth / 1920.f;
g_fUIScreenRatioY = (float)g_ScreenHeight / 1080.f;

 

//

void
CCommonGUI::Set_DrawCenter( float _fRefX, float _fAbsX, float _fRefY, float _fAbsY )
{ 
     m_DrawCenter_P.x = _fRefX + (float)_fAbsX * g_fUIScreenRatioX; 
     m_DrawCenter_P.y = _fRefY + (float)_fAbsY * g_fUIScreenRatioY;
}

 

예제)

pUI->Set_DrawCenter_RefCoord( LeftX, 900, BottomY, -100 );

UI 사이즈 역시 해상도변경비율을 적용해 주면 됩니다. 

밑의 코드는 제 엔진의, UI 렌더링 함수에서 사용하는 코드입니다.

그냥 실시간으로 처리한다는 ㅎㅎ;;;

사이즈 변환 처리등도 같이 있어서 그냥 실시간으로 처리해 줍니다. 

 

//

if( m_bDrawSize )
{
   hw = m_DrawSize.x / 2;
   hh = m_DrawSize.y / 2;
}
else
{
   hw = _mpTex->GetWidth()/2;
   hh = _mpTex->GetHeight()/2;
}
  
//사이즈에다가 해상도비율을 곱해주었습니다.
hw *= g_fUIScreenRatioX;
hh *= g_fUIScreenRatioY;

 

어쨋든

UI작업시에, 상대값과 절대값을 구분해주고,

해상도변경비율을 절대값에만 적용해 주는 것이 포인트 입니다!

 

보통, 폰트의 크기는 절대값으로 지정해 놓으니, 30, 40 이렇게 말이죠.

이것의 사이즈를 조절할때는 해상도 변경비율만 적용해 주면 됩니다.

 

하나 빠트리지 말아야 할것은

기본적으로 작업하는 UI 해상도가 필요하다는 것입니다.

이것이 있어야 이것을 기준으로

해상도변경비율을 구할수 있습니다.

 

저의 경우는 1920, 1080 으로 기준UI 작업을 진행하고,

더 낮은 해상도에서는 해상도변경비율로 크기와 위치를 줄여서 조정해 주었습니다.