2013년 5월 24일 금요일

ARMA Description.ext (2/2) Dialog Control, GUI Editor, UI Event Handler

커맨드 그룹의 GUI Control을 다루기 전의 밑바탕이 되는 내용으로, Description.ext 파일로Dialog를 설정하는법과 GUI Editor를 활용해서 Dialog를 손쉽게 만드는 법에 대해서 다룬다.




Dialog를 설정하는 방식은 GUI Editor로 외형적인 부분을 잡은 뒤 저장을 하면 그 내용이 클립보드로 옮겨지게 되고, description.ext파일에 붙여넣기를 한뒤 세부적인 사항을 설정한 뒤, Mission Editor를 통해서 createDialog등의 스크립트로 해당 Dialog를 호출하는 식으로 진행한다.

GUI Editor


Dialog를 GUI형태로 만들 수 있는 툴이다.

마지막에 마치고 저장하겠냐는 물음에 저장을 선택하면 편집했던 컨트롤들의 정보가 클립보드로 전송되는데 이 내용을 따로 저장해놨다가 필요할때 복사로 클립보드에 담아놓은 뒤 Ctrl + O키로 불러오기를 하면 그 내용 그대로 다시 편집할 수 있다.

종료시 저장에 대한 물음은 Ctrl + S를 눌렀을때의 Format중에 GUI Editor (Alt + Ctrl + S)와 같다.



조작키 (F1 / H키로 확인 가능)

  • LMB
    • 요소 클릭 후 드래그 : 이동
    • Ctrl : 그리드를 무시하고 위치등을 지정할 수 있다.
    • Alt : 크기 조절
    • Alt + Shift : 비율을 맞춰서 크기 조절
  • RMB
    • 요소 우클릭 : 해당 요소의 파라미터를 수정
      • Class
      • Text
      • Position
      • Text Color
      • Background Color
      • Active Color
      • Tooltip
      • Text size
      • Position Type
    • Ctrl + 우클릭 : 해당 요소의 세부 파라미터를 수정한다.
    • 빈 곳에 우클릭 : 요소를 추가한다
  • 단축키
    • 그리드 및 사이즈
      • G : 그리드 토글
      • Ctrl + G : 그리드 수정
      • Alt + G : 마우스 커서 밑의 요소에 그리드를 생성
      • Shift + G : 그리드의 절대값과 Safezone을 토글
      • 화살표 : 그리드의 10%단위로 해당 요소의 위치 조정
      • Alt + 화살표 : 그리드의 10%단위로 해당 요소의 크기 조절
    • 편집
      • Ctrl + N : 새 레이아웃
      • Ctrl + B : 백그라운드 토글
      • Ctrl + E : 새로운 요소를 추가하거나 현재 선택된 요소를 편집
        (우클릭과 같음)
      • Ctrl + C/X/V : 복사/잘라내기/붙여넣기
      • Delete : 요소 삭제
      • Ctrl + Z : 실행취소
      • Shift + Ctrl + Z : 다시실행
      • Ctrl + L : 모든 요소를 표시하고 고정/고정해제, 우선순위등을 설정
      • Ctrl + T : 프로젝트 제목을 설정
    • 출력 (클립보드)
      • Ctrl + S :출력
        • Project Title
        • Format
          • GUI Editor (Alt + Ctrl + S)
          • Config (Controls as class) (Shift + Ctrl + S)
            • Dialog 클래스의 class controls부분에 삽입하면 되는 클래스 형태로 출력한다.
          • Config (Controls as Array) (Shift + Alt + Ctrl + S)
            • controls를 미리 지정해주고, 컨트롤들을 각자 클래스로 지정해주는형태로 출력한다.
          • Config Macros (Ctrl + D)
            • idc값들에 대한 #define을 출력한다
          • Grid Macros (Shift + Ctrl + P)
            • 그리드에 대한 #define을 출력한다.
          • Parent Classes (Ctrl + P)
            • Dialog 내부에 사용할 요소들에 대한 기본설정들을 출력한다.
          • Stringtable (Ctrl + K)
    • 불러오기
      • Ctrl + O : GUI Editor 형태를 불러오기
      • Ctrl + I : Config형태를 불러오기. configFile에 설정되어있는 내용을 path로 지정해서 불러온다
    • 그외
      • F1 : 도움말
      • Space : 모든 요소를 강조

Dialog Control

들어가기 전에 알아둬야 할 것
  • 포지션
    • (x, y, w, h)
      • 범위는 0~1
      • 픽셀기반이 아닌 비율 (4:3 기준)
      • 모든 비율을 지원하기 위해서 백그라운드를 (-1,-1,3,3) 식으로 지정하기도 한다.
  • 색상
    • { R, G, B, A }
      • 범위 : 0 ~ 1
  • 소리
    • { "파일명", volume, pitch }
      • volume : 0~1
      • pitch : 0~4
        • 1일때 정상적으로 들린다.



Dialog

description.ext에서 사용되는 dialog에 대한 설정으로, 실질적인 역할을 하는 Control의 상위 클래스개념으로 보면 된다. Dialog로 지칭된 Display를 그 하위에 있는 Control들로 제어한다.


  • 설정값
    • idd
      • Type : integer
      • 이 Dialog에 배정된 id. 스크립트 내에서 이 다이얼로그로 접근할 필요가 없을때 -1로 설정한다. -1이 아니면 findDisplay를 써서 사용할 수 있다.
    • movingEnable
      • Type : Boolean
      • true로 설정하면 드래그로 옮길 수 있게 한다.
    • enableSimulation
      • Type : Boolean
      • Dialog를 띄워놓은 상태로 게임이 진행되도록한다.
    • controlsBackground
      • Type : Array { R, G, B, A }
      • 배경의 색상을 지정한다.
    • controls
      • Type : Array
      • Dialog 내부의 Control들을 정의한다.
    • objects

Controls

Dialog로 설정되는 클래스 내에 controls 값으로 사용할 control의 이름을 지정해준 후에 그 이름의 클래스를 생성해서 그 내부에 어떤 식으로 사용할 것인지에 대해서 설정한다.

외부에서 사용할때는 findDisplay로 Dialog를 호출 한 후에 displayCtrl로 해당 컨트롤을 지정하는 식으로 사용한다.

일일이 설정하기 보다는 GUI Editor를 통해서 설정하게 됨으로 대략적인 이해만 하고 넘어가면 된다고 본다.
  • 공통적인 설정값
    • idc
      • Type : integer
      • 해당 컨트롤에 대한 일련번호를 붙인다. 스크립트에서 호출할 일이 없으면 -1로 설정한다.
    • moving
      • Type : boolean
      • Dialog의 movingEnable이 1로 설정되어있는 상태에서 이 값이 1로 설정되면, 이 컨트롤을 드래그 했을때 Dialog가 움직인다.
    • type
      • Type : integer(CT_TYPES)
      • 사용될 컨트롤의 종류를 선택한다
    • style
      • Type : integer(CT_STYLES)
      • 정렬방식등의 스타일을 설정하는데 쓰인다.
      • style = "0x400+0x02+0x10"식으로 조합해서 쓸 수 있다
    • x/y/w/h
      • Type : float
      • 컨트롤의 위치와 스크린 사이즈에 대비한 사이즈를 설정할 수 있다.
    • sizeEx
      • Type : float
      • 텍스트의 폰트 사이즈를 설정한다.
    • font
      • Type : string
      • 폰트를 설정한다.
    • colorText
      • Type : color Array
    • colorBackground
      • Type : color Array
    • text
      • Type : string or texture
      • 문자열이나 그림을 설정한다
    • shadow
      • 0,1 or 2
  • 부수적으로 설정가능한 클래스
    • font
      • Type : String
    • color
      • Type : HTML color
    • align
      • Type : string
      • center, left, etc...
    • shadow 
      • Type : integer
  • 이미지와 관련된 부가적인 클래스
    • font
      • Type : string
      • (optional)
    • color
      • Type :  HTML color
    • align
      • Type : string
      • center, left, etc optional


UI Event Handler

Display나 Control에 특정한 이벤트가 발생할 시에 실행할 것을 지정해준다.

  • Event Parameters
    • 이 이벤트가 발생했을때 내부에 _this를 통해서 지정된 값이 넘어온다.

Event의 정의

이벤트를 정의하는 방법에는 두가지가 있는데, 한가지는스크립트 커맨드를 이용한 방법이고, 다른 한가지는클래스를 사용하는 방법이다.

  • 클래스를 통한 Event의 정의
    • 이벤트는 config.cpp나 description.ext의 Dialog(display)나 Control의 클래스에서 정의할 수 있다.
    • onMouseDown = "hint str _this";
      식으로 이벤트 명에 실행할 명령을 String형태로 지정하는 방식으로 사용가능하다.
    • 자세한 내용은 위 Event Handler에 포함된 예제를 보는 것이 나아보인다.
  • 스크립트를 통한 Event의 정의


Dialog 생성과 닫기

Dialog는 createDialog 명령으로 생성 후 출력할 수 있고, dialog 명령으로 dialog가 호출중인지 아닌지 여부를 확인 할 수 있다.

closeDialog 명령으로 현재 띄워져있는 Dialog를 닫을 수 있으며, 이를 컨트롤에 부여해서 사용하기도 한다.




Dialog 예시

  1. GUI Editor 실행
  2. Dialog 형태 생성
  3. 각각의 클래스명을 설정하고 버튼의 경우 버튼 위에 표시되는 문구(Text)를 설정
  4. Ctrl + L키를 눌러서 확인
  5. Ctrl + S를 눌러서 Parent Class를 선택 후 클립 보드의 내용을 메모장에 붙여넣기
  6. 컨트롤들의 위치값이 Grid로 설정되어 있기 때문에 그리드의 환산을 위해 define이 필요 하므로, Grid Macros를 마찬가지로 붙여넣기
  7. 실질적인 내용인 config (Controls as array)를 붙여넣기
    1. controls[] 윗쪽에 dialog에 대한 기본적인 설정을 해넣는다
      class dialog1 {
          idd = 1000;
          movingEnable = false;
          enableSimulation = true;
          controlsBackground[] = {};
          objects[] = {};
    2. 마지막에 };를 넣어서control들이 dialog에 포함되도록 한다. 
  8. 닫기 버튼에 action = "closeDialog 0"; 이라는 문구를 넣어서 버튼을 누르면 닫아지도록 설정
  9. setDamage 버튼의 경우 커서에 맞춰진 타겟을 없애기 위해서 action = "cursorTarget setDammage 1";을 지정해준다.
  10. 그 텍스트 파일을 description.ext라는 파일명으로 원하는 미션폴더에 저장한다.
  11. dialog를 불러오기 위한 action을 지정해주기 위해서 player유닛의 init에 다음과 같이 입력한다.
    this addAction["Dialog","createDialog 'dialog1';
    ((findDisplay 1000) displayCtrl 1000) ctrlSetText (str cursorTarget)"];
    1. (findDisplay 1000은 idd를 통해서 위에 지정해놓은 dialog1을 호출하기 위함이고, displayCtrl 1000은 내부에 만들어 놓았던 text1의 idc를 호출하는 것이다.
    2. strlSetText를 통해서 해당 컨트롤의 내용을 cursor에 맞춰진 내용으로, str을 통해서 문자열로 변경시켜서 적용시킨다.
  12. 원하는 객체에 커서를 맞춘 후 액션메뉴에서 addAction으로 지정했던 Dialog를 선택하면, 윗쪽에 해당 객체에 대한 정보가 뜨고, setDamage를 누르면 파괴되고, close를 누르면 Dialog가 닫힌다.





작성자: 시간:
라벨: , , , ,

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)