대화 상자 원하는 곳에 만들기.txt (수정)

#대화 상자, #대화상자, #만들기, #대화 상자 만들기, #대화상자 만들기

 

여러 흩어진 대화 상자 강좌를 끌어다 모아서 기본적으로 대화 상자를 만드는 방법과

원하는 위치에 배치하는 법, 그리고 디자인 적용 방법 이렇게 크게 3가지 방향으로 구성되어 있습니다.

 

 

1. 기본적으로 대화 상자를 만드는 방법

 

트리거 구성

행동

"대화 상자 만들기" - 화면의 중앙(을)를 기준으로 (0, 0)에 크기 (500, 400)인 모달 대화 상자 만들기

"대화 상자 표시/숨기기" - (모든 플레이어)에게 (마지막으로 만든 대화 상자) 표시

파란글자 : 개인적으로 설정 가능한 부분

 

해당 트리거를 풀이하면

-> 화면의 중앙 0, 0 좌표에 가로 500, 세로 400 크기의 모달 대화상자를 만든다.

-> 그리고 이 대화 상자를 모든 플레이어에게 표시한다.

 

이런 구조 입니다.

대화 상자를 만들고 -> 특정 플레이어에게 표시/숨기기를 설정합니다.

표시/숨기기의 기본값은 숨기기 이기 때문에 표시 행동을 해주지 않으면 대화상자가 보이지 않습니다.

 

+@ 대화 상자 내부에 이미지, 글자 등의 추가 내용 넣기

-> "대화 상자 아이템 만들기" 라는 행동을 이용하셔야 합니다.

"대화 상자 아이템 만들기 (이미지) -> 이미지 삽입

"대화 상자 아이템 만들기 (버튼) -> 버튼 만들기

"대화 상자 아이템 만들기 (레이블) -> 텍스트가 들어갈 부분 삽입

 

그 외도 다양한 것들을 만들 수 있는데 저는 활용의 필요성을 느끼지 못해 사용해보지 않았습니다.

나머지 부분은 직접 사용해보시면처 원하는 기능을 찾으시기 바랍니다.

 

 

2. 원하는 위치에 대화 상자를 배치하는 법 

 

준비물 : Adobe Illustrator

- 해당 프로그램은 어도비의 홈페이지에서 30일 무료판을 받을 수 있으며 (크랙을 읍읍..)

- 해당 프로그램을 어느 정도 사용 할 수 있다면 편하게 작업 할 수 있습니다.

- 더 편한 방법이 있을지도 모르지만 저는 이 방법 밖에 모르겠습니다.

 

게임의 해상도 1920*1080을 기준으로 대화상자를 만듭니다.

게임의 해상도가 다른 경우 화면에 다르게 표시 될 수 있습니다.

 

1) 일러스트레이터 기본 설정

 

새로 만들기를 합니다.

이때 가로, 세로의 크기와 표시되는 단위를 꼭 맞춰줍니다.

 

2) 일러스트레이터 기본 설정 

 

프로그램 상에서 보이는 모든 단위를 pixel로 변경합니다.

 

 

3) 대화 상자 좌표의 이해

 

중앙을 기준으로 하는 경우 대화 상자의 좌표 체계는 이렇게 결정 됩니다.

 

하지만 중앙이 아닌 경우, 아래와 같이 좌표 체계가 변경됩니다.

 

화면의 기준으로 중앙, 위, 아래, 오른쪽, 왼쪽, 왼쪽 위, 왼쪽 아래, 오른쪽 위, 오른쪽 아래에 따라서 좌표의 기준이 달라집니다.

 

 

 

중앙, 위, 아래, 오른쪽, 왼쪽, 왼쪽 위, 왼쪽 아래, 오른쪽 위, 오른쪽에 맞춰 (200, 200) 좌표에 

(200, 200) 크기의 대화 상자를 만들어 봤을때 상황입니다.

 

 

하지만 일러스트레이터의 내부에서는 중심점이 달라지더라도 X,Y좌표의 +,-값은

"화면 중앙"을 기준으로 보는 X,Y 좌표와 동일 합니다.

 

아래 이미지는 일러스트레이터에서

중앙, 위, 아래, 오른쪽, 왼쪽, 왼쪽 위, 왼쪽 아래, 오른쪽 위, 오른쪽에 맞춰 (200, 200) 좌표에 

(200, 200) 크기의 대화 상자를 만들어 봤을때 상황​ 입니다.

 

그렇기 때문에 오른쪽을 기준으로 하는 경우에는 X축 좌표에 * -1 해줘야 하며

아래를 기준으로 하는 경우에는 Y축 좌표에 * -1 해줘야 스타크래프트에서 대화 상자 위치와 동일하게 생성됩니다.

 

* 주의 사항

정말 헷갈려서 잘 모르겠다고 하면 그냥 대화 상자를 모두 화면 중앙을 기준으로 맞추고

일러스트레이터로 좌표과 크기를 찾은 다음 전부 배치해도 무리 없이 구현 할 수 있습니다.

다만 이런경우 게임의 해상도가 1920x1080과 다른 경우 대화상자가 잘려서 나올 수 있습니다.

특히 화면의 끝부분에 대화 상자를 생성하는 경우는 해상도가 다르면 100% 문제가 발생합니다.​ 

 

 

4) 본격적으로 대화 상자 만들기

 

* 예시 제작은 아래 트리거로 진행합니다.

"대화 상자 만들기" - 화면의 중앙(을)를 기준으로 (500, 200)에 크기 (300, 300)인 모달 대화 상자 만들기 

"대화 상자 표시/숨기기" - (모든 플레이어)에게 (마지막으로 만든 대화 상자) 표시 

 

 

우선 ctrl +r을 눌려 눈금자 기능을 활성화 시킵니다.

그리고 눈금자가 시작뒤는 부분을 드래그해서 중심점으로 쓸 부분에 드롭합니다.

 

 

다음으로 사각형을 하나 만든 다음 아래와 같이 상단 표시줄의 정보를 확인합니다.

 

빨간상자 - Align to Selection

 

주황상자 - 기준점 설정, 대화 상자를 화면의 중앙을 기준으로 만들 것이기 때문에 중앙으로 설정합니다.

* 만약 대화 상자가 화면 중앙 기준이 아니면 기준점 설정도 이에 맞춰서 변경 해줘야 합니다.

 

노란상자 - X,Y 좌표값입니다.

 

초록상자 - 사각형의 가로, 사로 크기 입니다.

 

 

 

그렇게 하면 화면상에 이 위치에 사각형이 지정됩니다.

그렇다면 이대로 한번 갤디터에서 만들어 보고 비교를 해보겠습니다.

 

 

 

??

좌표가 맞지 않습니다.

저도 이 부분은 정확한 이유를 잘 모르겠지만

일러스트레이터와 갤디터의 좌표체계가 완전하게 1:1 매칭이 되지 않아 발생하는 문제인거 같습니다.

 

하지만 그 비율은 10:9이기 때문에

일러스트레이터에서 좌표값을 전부 10% 줄여주게 되면

 

 

정확하게 일치합니다.

즉 이로써 일러스트레이터와 갤디터를 충분히 매칭 시킬 수 있다는 사실을 알게 되었습니다.

 

일러스트로 작업한 내용보다 10% 줄어든 상태로 갤디터에 출력이 되지만 본래 의도와 달라지는게 없으니

크게 신경 쓸 필요 없이 작업하면 됩니다.

 

만약 정말로 정밀하게 하고 싶으시면 아래 응용 단계를 참고하시기 바랍니다.

 

[phone]

+@ 1920*1080 스크린샷을 기준으로 UI를 만들때 일러스트레이터의 대지 크기를 10%늘려서

스크린샷:일러스트레이터의 비율을 10:11을 하시면

일러스트레이터에서 작업한 좌표 및 대화상자의 크기를

그냥 적용시키면 조절 할 필요 없이 스2에 바로 1:1 매칭되어 나타낼 수 있습니다.

 

 

5) 응용

응용을 통해 다양한 대화 상자를 만들어 보도록 하겠습니다. 

해당 내용은 예제맵에 있습니다.

 

이런 형태의 대화 상자를 만들어 보겠습니다.

일러스트레이터로 작업해서 구주와 좌표를 전부 알았으니 갤디터에 적용만 시키면 되는 상황

 

 

* 트리거 뒷부분이 잘린 것은 예제맵을 확인해 주세요

 

결과

 

 

일러스트레이터에서 작업한 내용과 비교

 

일러스트레이터 작업물은 꽉 차게 나오는데

실제 적용해보니 얇게 나와서 차이가 발생합니다.

 

그럼 어떻게 일러스트레이터의 작업과 동일하게 화면에 나오게 하는가!

 

간단하게 갤디터에서 크기와 좌표를 넣을때 전부 10%씩 추가 해주시면 됩니다.

 

그러면 이렇게 일러스트레이터에 작업한 비율과 동일하게 출력됩니다.

 

 

3. 디자인 적용 방법

* 주의

대화 상자 아이템들의 위치는 대화 상자가 화면을 기준으로 맞추는것과 같은 원래로 적용됩니다.

다만 대화 상자 아이템들은 그 기준이 대화 상자가 됩니다. 반드시 기준 지점과 오프셋 x,y값을 확인하세요

 

 

트리거 구성

파란색 - 자신의 설정에 맞게 변경해야 할 값

노란색 - 굳이 변경할 필요 없는 값, 본인이 사용해보고 필요하다고 여겨지면 바꾸는 값

 

행동

"대화 상자 만들기" - 화면의 중앙(을)를 기준으로 (0, 0)에 크기 (500, 400)인 모달 대화 상자 만들기

"대화 상자 표시/숨기기" - (모든 플레이어)에게 (마지막으로 만든 대화 상자) 표시

여기 까지가 기본 트리거

 

대화 상자 배경을 변경하는 방법

1) 행동 : "대화 상자 배경 설정" - 대화 상자의 배경 이미지를 이미지(으)로 설정

* 단 이 경우에는 이미지의 크기가 대화 상자의 크기와 일치해야 제대로 적용됩니다.

 

2) 행동 "대화 상자 아이템 만들기 (이미지) - 대화 상자 (마지막으로 만든 대화 상자)에 사용할 이미지 만들기.

고정점 중앙에 배열 (150, 150), 툴팁 ""에 오프셋 (0, 0) 설정, 보통 유형으로 이미지, 타일 덮임 거짓, 색조 색상 흰색,

혼합 모드 보통

 

* 반드시 타일 덮임을 "거짓"으로 설정 해주시기 바랍니다.

참으로 설정되는 경우 이미지의 본래 크기가 유지되며 대화 상자의 크기에 맞게 바둑판식 배열이 됩니다.

거짓으로 설정되는 경우는 이미지를 늘이거나 줄여서 지정한 크기에 맞게 적욛돕니다.

 

* 1 혹은 2 두개중 한가지 방법으로만 하시면 됩니다.

 

2-1) 행동 "대화 상자 배경 표시/숨기기" - (마지막으로 만든 대화 상자) 배경 이미지 숨기기

 

* 반드시 대화 상자 배경을 숨김 처리 해주셔야 합니다.

그렇지 않으면 기본 대화 상자를 생성하면 나오는 이미지가 같이 출력됩니다.

 

* 1의 방법으로 하셨다면 이 행동을 사용하시면 안됩니다. 

* 2의 방법으로 하셨다면 이 행동을 사용해 대화 상자 배경을 반드시 숨김 처리 해주셔야 합니다.

 

 

대화 상자 아이템 버튼 이미지 변경하는 방법

0) 기본 트리거인 대화 상자 만들기, 대화상자 표시/숨기기는 생략하겠습니다.

 

1) 원리

순차적으로 쌓아 올린다고 생각하시면 됩니다.

대화 상자 -> 대화 상자 아이템 (이미지) -> 대화 상자 아이템 (버튼)

 

2) 트리거 구성

2-1) 행동 "대화 상자 아이템 만들기 (이미지)"

대화 상자 (마지막으로 만든 대화 상자)에 사용할 이미지 만들기. 고정점 중앙에 배열 (100, 100), 툴팁 "설명"에

오프셋 (0, 0) 설정, 보통 유형으로 이미지 사용, 타일 덮임 거짓, 색조 색상 흰색, 혼합 모드 보통

 

 

-> 먼저 버튼의 배경이 될 이미지를 생성합니다.

어떤 대화 상자에?, 대화 상자 어느 위치를 기준으로?, 이미지의 가로, 세로 크기는?, 이미지의 툴팁은?, 이미지의 위치는?

어떤 유형으로?, 사용할 이미지는?, 타일은?, 색조 색상은?, 혼합모드는?

 

2-2) 행동 "대화 상자 아이템 만들기 (버튼)"

대화 상자 (마지막으로 만든 대화 상자)에 버튼 만들기. 배열 (200, 50), 고정점 중앙, 오프셋 (100, 100),

툴팁 "설명", 버튼 텍스트 "버튼 이름", 부양 이미지 ""

 

 

-> 배경이 되는 이미지 위에 버튼을 생성 합니다.

-> 특별한 일이 없으면 이미지와 같은 좌표에 올려주는게 좋습니다.

어떤 대화 상자에?, 버튼의 가로, 세로 크기는?, 대화 상자 어느 위치를 기준으로?, 버튼의 위치는?, 버튼의 툴팁은?,

버튼의 이름은?, 버튼의 부양 이미지는?

 

툴팁이란?

마우스를 올렸을때 나타나는 설명을 말합니다. 

이처럼 마우스를 이미지나 버튼 위로 올렸을 경우 특별한 경우가 아니면 마우스의 오른편에 생성됩니다.

 

버튼 텍스트(이름)?, 부양 이미지?

버튼 텍스트는 위의 이미지에서 "이름"이라는 텍스트가 출력된 부분. 즉 버튼 위에 나타나는 글자를 말합니다.

 

부양 이미지는 버튼을 클릭했을 때 나타나는 버튼의 외형을 말합니다.

기본 값은 "" 라고 되어 있는데 이 값이 있으면 종족별로 저그-주황, 테란-초록, 프로토스-파랑의 위의 이미지와 같은

버튼이 생성됩니다. 그외 다른 DDS파일을 이용해 이미지를 변경 할 수 있습니다.

 

대화 상자 내부 폰트 변경하는 방법

0) 기본 트리거인 대화 상자 만들기, 대화상자 표시/숨기기는 생략하겠습니다.

 

1)  행동 "대화 상자 아이템 만들기 (레이블)"

대화 상자 (마지막으로 만든 대화 상자)에 사용할 레이블 만들기. 고정점 중앙에 배열 (500, 400), 오프셋 (0, 0),

텍스트 "____" 색상 자동 텍스트, 모두 작성 거짓, 모두 작성 지속 시간 2.0

 

-> "레이블"이라는 것을 만들어야 텍스트를 대화 상자 내부에 입력 할 수 있습니다.

어떤 대화 상자에?, 대화 상자 어느 위치를 기준으로?, 레이블의 가로, 세로 크기는?, 레이블의 위치는?,

출력될 텍스트는?, 텍스트의 색상은?, 텍스트 출력방식은? 텍스트 출력에 걸리는 시간은?

 

* 레이블에서 텍스트를 작성하면 텍스트는 아래 사진과 같이 왼쪽 위에 정렬됩니다.

 

대화 상자 크기 500, 400

레이블 크기 500, 400, 레이블 위치 : 대화 상자 중앙, 오프셋 0,0

 

* 색상은 굳이 건드릴 필요가 없습니다.

특별한 이유가 아니면 기본 텍스트 입력란에서 색상을 조정 할 수 있습니다.

 

* 모두 작성 거짓, 모두 작성 지속 시간 2.0

모두 작성 "거짓"이 되어 있는 경우 "출력해" 라는 텍스트를 넣으면 "출력해"라고 바로 입력이 되며

모두 작성이 "참"이 되어 있는 경우 "출력해"라는 텍스트를 넣으면

"출", "출력", "출력해" 라고 글을 타이핑 치듯 출력됩니다.

그리고 이 출력하는데 걸리는 시간은 "모두 작성 지속시간"에 의해 결정됩니다.

2) 레이블 내부의 글자 조정하기!

-> 행동 "대화 상자 아이템 양싱 설정"과 "텍스트 -> 글꼴 양식"을 봐야 합니다.

2-1) 글꼴 양식
바로 이녀석 입니다.

 

물론 만들어진 다양한 양식도 있지만 그것들의 구성이 정확히 어떻게 되어 있는지 모르니 그냥 새로 만들어 쓰는게 속편합니다.

 

양식을 만드는 방법은 간단합니다.

 

 

흰 바탕에서 마우스 오른쪽 클릭 -> 양식 추가를 하시면 됩니다.

양식의 이름은 한글이 지원되지 않으니 영문으로 합시다.

 

 

그리고 오른편의 기본, 플래그를 통해 글꼴, 글자 크기, 글자 정렬 위치(수직, 수평), 그림자, 윤곽선을 선택 할 수 있으며

그 아래 세부적인 색상을 설정 할 수 있습니다.

마지막으로 오른편의 플래그로 원하는 효과를 설정 해주시면 됩니다.

 

그러면 저는 여기서 글꼴은 Localized...를 그대로 쓰고

크기 50, 수평-중앙, 수직-중앙 등등...을 해서 아래와 같은 양식을 만들어 보겠습니다.

 

2-2) 행동 "대화 상자 아이템 양싱 설정"
(모든 플레이어)에게 (마지막으로 만든 대화 상자 아이템) 양식을 New_Font(으)로 설정

 

 

-> 바로 이 행동을 통해 이전에 만든 대화 상자 아이템의 글의 형태를 적용 시킵니다.

보여 줄 사람은?, 어떤 대화 상자 아이템을?, 글꼴 양식을 어떤걸로?

 

자 그렇다면 아까 만든 대화 상자에 이것을 적용 시켜서 비교해보겠습니다.

 

요렇게 나옵니다.

텍스트를 넣어 보았습니다. 라고 나오지 않고

 

텍스트를 넣어

보았습니다. 라고 출력되는 이유는 가로가 좁아 글이 잘려서 여분이 있는 세로로 자동 줄바꿈이 되서 그런 것입니다.

만약 세로 공간도 불충분하면 "텍스트를 넣어 .... 이런식으로 줄어들게 됩니다."

 

 

예제맵은 좌표에 맞춰 생성한 대화 상자

그리고 대화 상자 글꼴 설정한 것, 정말 간단하게 2개 올렸습니다.

 

그리고 이것들을 적절하게 응용하면 다양한 디자인의 대화 상자를 만들 수 있습니다.

물론 엄청난 노가다가 필요하죠

 

 

 

 

 

시간이 부족해 버튼과 폰트는 다음에...

좋은 팁이네요
근데 30일 동안만 사용할 수 있다는 단점이...

ㄴ ㅋㅋㅋㅋㄱㅋ

끝

판밍님. 질문있는데요. 주제에 좀 맞을련지 모르겠지만, 제가 저글링 진화 임무맵을 개조해서 승리했긴했는데요. 원래 그 맵은 승리패널이란게 안뜨잖아요? 그래서 제가 어쩌다가 승리패널을 만들어주긴했었고, 승리패널에 넣을 처치한 유닛수, 잃은 유닛수 트리거 만드는것까지는 성공했습니다.
그런데 문제는 승리패널 최상단에 위치한 임무시간란에다가 실시간이라고 해야하는지... 그것을 만드는 트리거가 생각안납니다. 제게는 불가능해요;;
쉽게 말씀드리자면, 제가 그 저글링 진화 임무에서 3분 12초에 딱 맞춰서 승리를 했거든요. 그러면 나중에 승리패널뜰때에 임무시간 칸에 3:12라고 떠야하는데, 숫자가 뜨지를 않네요.... 아무리 게시판 곳곳에 검색해봐도 이 해결점을 찾질 못했습니다.

역시 판밍님 트리거도 풀어서 어찌하는지 직접 알려주시공 ㅋ 초보자의 입장에서 자세히 나열해주셨네요 ㅋ