최상단 광고

2012년 4월 11일 수요일

다양한 툴팁 <게임프로그래밍>


.다양한 툴팁

툴팁 컨트롤은 보통 조그만 사각형이며 노란색 바탕에 검정색 폰트로  텍스트를 보여 주는데  단조로운모양을 다양하게 변형할  있다너무 요란해 보이면 곤란하겠지만 약간의 변화만 줘도 훨씬  읽기 쉽고예쁜 툴팁이 된다 값들 바꿀 때는 물론 메시지를 사용하는데 어떤 속성들이 있고 어떻게 바꾸는지 요약식으로 정리해 보도록 하자.

지연 시간

지연 시간(Duration)이란 툴팁이 나타나고 사라질 시간을 지정하는 값이다툴팁과 관련된 지연 시간은 세가지 종류가 있다지연시간 설정에 따라 툴팁이 나타나거나 사라지는 시간이 변경된다.

 초기 지연 시간(Initial) : 툴팁이 얼마동안  위에 머물러 있어야 하는지를 지정하며  시간이 경과하면툴팁이 출력된다커서가 마우스 위에 올라오는 즉시 툴팁이 출력되는 것보다는 일정시간 경과  출력되는것이  좋다.
 팝업 지연 시간(AutoPop) : 툴팁이 출력된 상태에서 커서가 움직이지 않을 경우 얼마동안 툴팁을 보여줄것인가를 지정한다도움말을 출력한 채로 너무 오랫동안 있으면 좋지 않으므로 사용자가  읽을 정도의 시간이 지나면 사라지는 것이 좋다 시간동안 커서가 움직이지 않으면 툴팁이 자동으로 사라진다.
 다시 보임 지연 시간(Reshow) : 툴팁이 출력된 상태에서 옆의 툴로 이동할 때의 지연 시간이다이미 툴팁이 출력된 상태에서 다른 툴팁으로 변경하는 것이므로 보통 초기 지연 시간보다는 훨씬  짧게 준다.

초기 지연 시간은 보통 마우스 더블클릭 시간과 동일하며 대개의 시스템에서는 0.5초이다  위에서0.5초동안 커서가 정지해 있으면 툴팁이 출력된다팝업 지연 시간은 초기 지연 시간의 10배로 되어 있으며다시 보임 지연 시간은 초기 지연 시간의 1/5 되어 있다 5초동안 가만히 있으면 툴팁이 사라지며 옆의툴로 이동할 때는 0.1초만에 툴팁이 다시 나타난다개발자 스튜디오의 툴팁을 자세히 관찰해 보고  세가지 시간이 어떻게 적용되는지 살펴보기 바란다.
툴팁 컨트롤은  위에 커서가 올라올  초기 시간 간격으로 타이머를 설치하며  타이머가 WM_TIMER메시지를 발생시킬  툴팁을 출력한다이때 다시 팝업 시간 간격으로 타이머를 설치하여  시간동안 커서가 가만히 있으면 툴팁을 제거한다 툴팁은 항상 타이머로 툴팁 출력 시간을 제어하고 있는 것이다 값은 TTM_SETDELAYTIME 메시지로 개별적으로 조정할  있다. lParam 하위 워드에 어떤 시간을 조정할 것인가를 지정하는데 다음값  하나를 준다.

설명
TTDT_INITIAL
초기 지연 시간을 설정한다. -1 주면 기본값으로 지정하는데 기본값이란 마우스 더블클릭 시간과 동일하다.
TTDT_AUTOPOP
팝업 지연 시간을 설정한다. -1 주면 기본값으로 지정한다.
TTDT_RESHOW
다시 보임 지연 시간을 설정한다. -1 주면 기본값으로 지정한다.
TTDT_AUTOMATIC
 값을 모두 기본값으로 설정한다초기 지연시간은 wParam값으로 지정되며 팝업 지연 시간은 초기 지연 시간의 5다시 보임 지연 시간은 초기 지연시간의 1/5 된다.

wParam에는 설정할 시간값을 1/1000 단위로 준다지연 시간을 조사하고 싶을 때는TTM_GETDELAYTIME 메시지를 사용하며 wParam으로 알고자 하는 시간에 대한 값에 대한 플래그를 주면된다.
지연 시간을 어떻게 설정할 것인가는 도움말의 종류에 따라  선택해야 한다초기 지연시간이 너무 짧으면마우스가 움직이는 족족 툴팁이 출력되어 다소 지저분해 보이는 경향이 있으며  너무 길면 사용자가 오랫동안 기다려야 하므로 불편할 것이다보여주는 정보의 성격에 따라 초기 지연 시간을  선택해야 한다팝업 지연 시간은 정보의 양에 따라 결정되는 것이 합리적인데 읽어야  내용이 길다면 오랫동안 유지해 주는것이 좋고 아주 짧다면 금방 사라지는 것이 좋을 것이다.

색상

기본 색상은 노란색 바탕에 검정색 글자인데 배경색과 글자색을 각각 변경할  있다색상을 변경할 때는TTM_SETTIPBKCOLOR, TTM_SETTIPTEXTCOLOR 메시지를 사용하며 wParam으로 변경하고자 하는 색상값을 전달해 준다색상을 조사할 때는 같은 이름의 TTM_GET~ 메시지를 사용한다.

여백

여백이란 툴팁의 경계선과  텍스트와의 간격인데  값이 너무 좁으면 갑갑해 보이고  너무 넓으면 별로예뻐 보이지 않을 것이다디폴트 여백 정도가 적당한데  넓게 하거나 좁게 하고 싶다면TTM_SETMARGIN 메시지로 간격을 조정할  있다 메시지의 lParam으로  변의 간격을 지정하는RECT 구조체를 전달해 준다 구조체는 사각형을 표현하는 용도로 사용하지만  메시지에서는 사각형의좌표가 아니라  변의 여백을 픽셀 단위로 지정한다.
여백을 조사할 때는 TTM_GETMARGIN 메시지를 사용하되 lParam으로 RECT 구조체의 포인터를 전달해 주면  구조체에 현재 설정되어 있는 여백을 조사해 준다.

최대폭

툴팁의 폭은 별도로 지정해 주지 않는   텍스트의 길이만큼이며  텍스트가 길어지면 툴팁도 따라서 길어진다만약 보여주어야  텍스트가 아주 길다면 한줄에  보여주는 것보다는 오른쪽 그림처럼 적당히 개행을  주는 것이 보기 좋을 것이다.


최대폭이란 개행 위치를 지정하는 오른쪽 좌표값이며  위치에서 공백을 기준으로 자동으로 개행하여 아랫줄로 내려 준다예를 들어  값을 300으로 지정하면 툴팁의 폭이 최대 300까지 가능하며 문자열이  이상이  경우 자동으로 개행하여 여러줄로 툴팁을 보여줄 것이다최대폭을 지정하면 여러 줄로  툴팁을 만들  있으며 \r\n 개행 코드를 넣어 강제로 개행할 위치를 지정할 수도 있다툴팁의 폭은 최대폭으로 조정할  있으나 높이는 별도로 조정할  없으며 텍스트 양에 따라 자동으로 결정된다.
디폴트 최대폭은 -1 되어 있으며 이는  개행을 하지 않는다는 뜻이다설사 \r\n 개행 코드를 넣어 주어도 최대폭이 -1 되어 있으면 강제 개행도 되지 않는다툴팁이 조금 길다면 최대폭을 지정하여 적당한위치에서 개행되도록  주는 것이 보기에 좋다최대폭을 조사하거나 설정할 때는TTM_G(S)ETMAXTIPWIDTH 메시지를 사용하는데 lParam으로 최대폭의 픽셀값을 전달한다.

폰트 변경

툴팁의 폰트를 변경하는 방법은 일반적인 윈도우와 동일하며 원하는 폰트를 생성한   핸들을WM_SETFONT 메시지의 wParam으로 전달해 주면 된다 폰트는 툴팁이 파괴되고  후에 반드시 파괴해주어야 한다설정된 폰트를 조사할 때는 물론 WM_GETFONT 메시지를 사용한다.

TipSetting

여기까지 툴팁의 여러 가지 속성을 조사하거나 변경하는 방법을 정리해 보았는데  이상 상세한 설명을 하기 보다는 직접 예제를 만들어 보고 속성을 변경해 보면 쉽게 이해가  것이다. TipSetting 예제는 툴팁의여러 속성을 조사하거나 변경해 보고  결과를 바로 확인해   있도록 의도적으로 만든 예제이다실행중의 모습은 다음과 같다.
위쪽의 버튼에디트리스트 박스는 툴로 등록된 윈도우들이며 아래쪽의 컨트롤들로 툴팁의 속성을 변경하거나 설정해 보아라지연시간을 변경하면 어떤 효과가 있고 배경색을 어떤 색으로 써야 예쁜지 바로 테스트해   있다색상이나 글꼴여백을 조정함으로써 분위기를 색다르게 연출해   있을 것이다.
   예제의 소스를 보면 속성들을 어떻게 바꾸고 조사하는지   있는데 이미 앞에서  설명한 것들이고 소스 자체가 어렵지 않으므로 소스에 대한 분석은 하지 않기로 한다. CD-ROM 있는 예제를 직접 열어 보기바란다.

풍선형 도움말

보통 모양의 툴팁은 직사각형인데 비해 풍선형 도움말은 마치 만화에 나오는 꼭지가 달린 풍선 모양을 하고있어 훨씬  깜찍하다툴팁 컨트롤을 생성할  TTF_BALLOON 스타일만 주면 풍선형 도움말을 만들 있다.

hTip=CreateWindowEx(WS_EX_TOPMOST,TOOLTIPS_CLASS,NULL,TTS_BALLOON,
CW_USEDEFAULT,CW_USEDEFAULT,CW_USEDEFAULT,CW_USEDEFAULT,
hWnd,NULL,g_hInst,NULL);

툴을 등록하는 방법이나 적용되는 속성은 일반 툴팁과 동일하므로 특별히 프로그래밍하기 어려운 것도 아니다커서가 있는 위치에 꼭지가 나타나는데 모양과 위치는 커서 위치에 따라 약간씩 달라진다.

보통은 오른쪽 그림처럼 출력되지만 툴이 화면 위에 있다거나 오른쪽 끝에 있으면 꼭지의 방향도 따라서 바뀐다.


댓글 없음: