UI제작 Using Artificial intelligence

https://youtu.be/YmdVq7qbpFY

 

 

요약  :  1. 먼저 첫번째로 해상도 설정이나 기기 설정을 한다.

2. 그 다음 해상도가 정해졌으면 경계선을 추가하는 캔버스 패널이나, 다른 패널 옵션을 선택한다.

 

 

 

 

1. UI를 제작할때 가장 먼저 신경써야하는것은 해상도에 맞춰서 

"어떤 해상도"에 '어떤 기기'에 올라갈지, 다양한 해상도에 가로모드에 세로모드에 

다 유연하게 대처 할수있는지 확인

여기서 화면크기라던지, 가로모드, 세로모드 직접 시뮬레이션을 통해서 확인 할수가 있다.

 

2.

여러분들이 만든 UI가 화면에 대응되는 경계선 영역이 필요하다, 그 영역을 가장 먼저 만들어야하는데

그거는 패널에가서 , 캔버스 패널을 만든다. , 대부분 캔버스 패널로 시작한다고 정의 할수 있다.

 

 

3. 이렇게 이 캔버스 영역이 어떻게 보면 화면에 대응 되는 영역, 

화면 크기를 기기에 맞게 설정도 가능하고

가로 모드냐 세로 모드냐에 따라서 지정도 가능 

그 가로모드, 세로모드에 대응 되게끔 설정한 UI가 좋은 UI라고 할수가 있다. 

 

이것을 위해서는 무작정 만드는것이 아니고 UI 시스템이 어떻게 

4.이런 컴포넌트들을 어떻게 관리하는지 처리 방법에 대해서 이해를 해줘야 한다.

-다만 캔버스 자체가 기능이 너무 많아서 게임에 경우에는 관리하기 복잡할수있으므로

하나만 두는걸 권장한다.

 

5. 캔버스 패널에 사용 방법에 대해서 알아볼 것 

-  캔버스 패널의 자식들은 앵커라고 하는 특이한 형태의 이런 배치구조를 가지는데

 

문제는 이 화면에서는 잘 배치가 되지 많은 가로, 세로 모드로 변환하거나 특정 기기로 변환 및  화면 크기가 변했을때

연동이 되면서 바뀌지는 않는다.

 

앵커를 가운데다 두고 

정렬 같은 경우에도 0.5 0.5로 두면 앵커 가운데에 위치하게 됨 

6.dialogue 같은 것은 하단에서 이렇게 전체적으로 앵커를 설정해주면 좋다.

이런식으로 만들면 항상 하단쪽에 정렬된 UI를 만들수가 있게된다.

좌측 우측에 여백을 주기 위한 셋팅

 

8:46

 

컬러 및 오파시티에서 검정색등 색 조정 가능 

 

9:12 일러스트 추가 

 

이런식으로 명령어를 줌 영어로

T_Dialog_Character라고 이름을 써주고 텍스처는 T라는 접두사를 쓰는게 좋다.

 

이걸 선택하면 원본 이미지에 맞춰 크기가 자동으로 바뀐다.

 

Z순서에따라 누가 더 앞에 그려지고 나중에 그려질지 결정한다

나중에 그려질수록 우리 눈에 보기에 가깝다. 

즉, Z순서가 높을수록 위로 올라간다.

 

기존에 앵커등 설정된 값들을 스케일박스로 랩으로 감싸주면서 그설정들이 
스케일박스로 옴겨진다. 

 

이 스케일 박스옵션을 보면 ( 어떻게 자식의 컨텐츠를 다룰것인가.)

이런식으로 이미지의 일부분만 짤라져서 크기가 커지면서 맞춰진다.

 

인터페이스 요소들을 위에다가 덮어씌울때는 Overlay를 사용하면 되는것 같다.

16:56 

 

 

Overlay는  배치할때 패딩 옵셔닝 전부고

전체를 쓰고 싶으면

이렇게 선택하면 된다. 

오버레이로 감싸주게되면 기존에 캔버스 패널 자식 특징인 앵커는 사라지고 이렇게 패딩만남게 된다.

 

일단, 기존에 설정한 크기 나 앵커를 유지하면서 이미지 크기를 설정하기에 좋은것 같다.

 

18:53 이때 Overlay를 두가지 영역으로 쪼개서 쓸려고 할때 

 

채우기, 이미지 크기를 적절히 이용해서 조절하면됨

 

21:12 이미지 안에는 자식을 가질수가 없다..

타이틀에 해당하는 이미지를 오버레이도 랩핑 ㄱㄱ 

 

21:46 이미지 위에다가 타이틀이라고 하는 텍스트를 집어 넣을거기 떄문에 가로박스를 사용한다. 

텍스트를 가로 박스에다가 넣고

아까와는 달리 아래에 있는 Overlay는 부모인 vertical box 떄문에 크기는 이미지에서 조정 할수있따.

한가지 더 안 사실이 자식의 패딩, 크기에 따라 조절할수있는것 같다

 

23:00 가로박스를 우측으로 넣고싶다면 가로정렬 위치를 우측으로 바꿔주면 된다. (가로박스에서)

 

23:40 이미지는 자손을 가질수없으므로 오버레이로 맵핑한번 해주고 마찬가지로 텍스트를 추가한다. 

(나중에 알아봐야겠지만 오버레이이 또는 가로박스의 범위를 넘어서면 텍스트가 엔터키로 자동으로 내려간다거나 , 짤라서 다른데에 보관한다거나 하는 관리도 필요할것 같다. ) 

 

가로박스 자식인 "텍스트" 를 "채우기"를 해서 남은영역에 할당 할려면 꼭 가로 정렬도 끝까지 채움을 눌러야 한다. 

 

26:19 넘어가면 짤리므로 자동랩 텍스트라는 옵션을 클릭하면 된다. 

 

 

스페이서 라고하는걸 집어 넣어서 인위적으로 여백을 줄수가 있다. 

 

27:33 인공지능을 통해 아이콘을 만들수 있따고 ?ㄸㄷ

 

29:10 이미지를 임의로 바꿔서 하면 대략적으로 원하는 레이아웃을 가지는
dialogue를 만들수 있게 된다.

 

정답이란건 없고 여러가지를 시도 하면서 여러분들 입맛에 맞게 만들어보면 된다.