NGMsoftware

NGMsoftware
로그인 회원가입
  • 매뉴얼
  • NGM 5
  • 매뉴얼

    NGM 5의 매뉴얼입니다.

    NGM 5

    NGM 5의 매뉴얼입니다.

    본 사이트의 컨텐츠는 저작권법의 보호를 받으므로 무단 복사, 게재, 배포 등을 금합니다.

    디자이너 NGM Designer - 스크립트의 변수를 한번에 처리하는 방법.

    페이지 정보

    본문

    안녕하세요. 소심비형입니다. 오늘은 이전 시간과 연결된 예제입니다. 그렇기 때문에 이전 내용을 미리 학습하고 이 글을 보는 게 좋겠죠^^; 이전 내용을 학습하려면 아래 링크를 클릭하세요.

    로그인 스크립트를 이용하여 매크로 플레이어 제작하기 ]

     

    이전 내용을 확인하고 정상적으로 진행했다면 아래와 같은 그림을 볼 수 있습니다.

    img.png

     

     

    우선 이미 추가된 변수(Variable) 컨트롤 3개를 모두 선택 후 삭제(Delete key)하세요. 그리고, 우측의 도구 상자에서 변수 목록(Variables) 컨트롤을 드래그 앤 드롭으로 폼 위에 올려놓습니다. 아래 그림을 참고하세요^^

    img.gif

     

     

    적당히 사이즈를 조정한 후 F5를 눌러서 실행 해보세요. 이전 시간에 이미 변수 값들을 저장했기 때문에 기본 값이 아닌 저장된 값이 표시됩니다. 매번 초기화하려면 내부적으로 코드가 추가로 필요합니다. 이런 것들은 고급 기능 설명에서 알아보기로 하고 오늘은 넘어가도록 하겠습니다.

    img.png

     

     

    변수 목록 컨트롤은 스크립트에 포함된 변수들 중에서 "플레이어 표시" 옵션이 True인 항목만 가져옵니다. 이외에도 몇가지 속성이 존재하는데요. 아래와 같이 컨트롤 배치 디자인을 변경해보세요.

    1. 플레이 버튼 하단 이동
    2. 추가한 변수 목록 컨트롤 선택
    3. 속성의 열 값을 2로 변경
    img.png

     

     

    변수 목록 컨트롤을 선택하고 속성에서 ②BorderStyle(보더 스타일: 외곽선 또는 테두리 모양)을 FixedSingle로 변경하세요. 그러면 디자인 모드에서 외곽선이 표시되는 것을 알 수 있습니다. 보통, 이외에도 외곽선을 만드는 방법은 천차만별이에요^^; 가장 일반적으로 UI 개발자들이 사용하는 방식으로 소개하고 진행하고 있으니 참고하시면 좋을 거 같아요.

    F5를 눌러서 실행하거나 ③시작 버튼을 클릭하세요.

    img.png

     

     

    이전 예제와 디자인은 좀 변경되었지만, 기능은 동일합니다.

    img.png

     

     

    플레이 버튼을 클릭하면 "인증되었습니다." 메시지가 표시되는 것을 확인할 수 있습니다.

    img.png

     

     

    여기서 상단의 변수 부분과 하단의 버튼 부분을 구분해줄 수 있는 컨트롤을 하나 더 추가해 보도록 하겠습니다. 이것도 UI 개발자들이 구분선을 만들 때 많이 사용하는 방식입니다. 서버 측 내용도 다룰만한 게 있었으면 좋겠는데... 딱히 눈에 보이지 않는 일들이라 소개할 수 있는 것들이 별로 없네요-_-;

     

    아래와 같이 라벨(레이블: Label) 컨트롤을 추가해줍니다.

    1. 검색 도구 상자에 Label을 입력
    2. Label 컨트롤 선택
    3. 드래그 앤 드롭으로 폼에 추가
    4. 속성 클릭
    img.png

     

     

     

    아래 그림을 참고하여 추가한 라벨 컨트롤의 속성을 변경해주세요. 라벨 컨트롤을 선택하고 속성 창에서 AutoSize(오토 사이즈)를 False로 변경합니다. 그리고, Text(텍스트)에 기본 내용을 삭제하세요. 컨트롤을 쭉 늘려서 폭(Width: 위드 또는 윋트)을 보기 좋은 크기로 조정하세요.

    img.gif

     

     

    이번에는 높이(Height: 하이트) 값을 직접 조정합니다. 2로 입력하고, 보더 스타일(BorderStyle: 외곽선 모양)을 Fixed3D로 설정합니다.

    img.gif

     

     

     

    ※ 컴퓨터 용어 및 발음에 대한 여담

    개발자 또는 디자이너, 아키텍터가 자주 사용하는 발음 중에 Exec가 있습니다. Execute(엑시큐트: 실행하다)의 줄임말인데요. 읽을 때는 이그젝이라고 합니다. 아무래도 Exec가 줄임말이다 보니 엑시큐트라고 읽기도 하고 이그젝이라고 읽기도 합니다. 하지만, Execute는 이그젝 큐트는 아니니 주의하시기 바랍니다^^;

     

    여기까지 잘 따라 하셨으면, F5를 눌러 실행해보세요. 아래 그림과 같이 변수 목록 컨트롤과 하단의 버튼 사이에 구분선이 추가된 것을 확인할 수 있습니다.

    img.png

     

     

    오늘 내용은 이것으로 마치도록 하고 다음 시간에는 그룹 컨트롤에 대한 예제를 가지고 찾아뵙도록 하겠습니다. 감사합니다.

     

    개발자에게 후원하기

    img.jpg

     

     

    추천, 구독, 홍보 꼭~ 부탁드립니다.

    여러분의 후원이 빠른 귀농을 가능하게 해 줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

    감사합니다~ 

    • 네이버 공유하기
    • 페이스북 공유하기
    • 트위터 공유하기
    • 카카오스토리 공유하기
    추천1 비추천0

    댓글목록

    등록된 댓글이 없습니다.