4. 유니티_오브젝트 이동, UGUI 기초

<오브젝트 이동>

(이번에 만드는 프로젝트는 이 기능이 필요없지만 그래도 다음 프로젝트를 위해 일단 적어둔다.)

Hierarchy 창에서 새로운 물체를 만들면 Transform 창이 뜬다.

Transform : 오브젝트 형태에 대한 기본 컴포넌트 (위치, 회전, 크기) (하나의 클래스이다.)

Translate : 벡터 값을 현재 위치에 더하는 함수

ex)

transform.Translate(Vector3); // 3차원이라서 Vector3임.
int number = 4; // 스칼라 값
Vector3 vec = new Vector3(0, 0, 0); // 벡터 값. (x, y, z)만큼 이동한 위치에 배정
transform.Translate(vec);

 

Start에다 넣으면 첫 고정위치가 되고, Update에 넣으면 1초에 60회씩 실행되므로 계속 이동한다.

ex)

void Start(){
}

void Update(){
  Vector3 vec = new Vector3(0, 0.1f, 0); // y축으로 0.1씩 증가
transform.Translate(vec);
}

 

이 함수를 메인카메라에도 넣으면 (Hierarchy창에 있는 Main Camera를 누르고 Inspector창에 해당 스크립트를 드래그&드롭한다.) 이동하는 모습이 게임 창에 나타난다.

카메라가 같이 이동하기 때문이다. 플레이어의 시점을 이동시키고 싶을 때 이러한 방식을 사용하면 될 듯.

 

 

<방향키로 오브젝트 이동>

void Update(){
  Vector3 vec = new Vector3(Input.GetAxis(“Horizontal”), Input.GetAxis(“Vertical”), 0);
  transform.Translate(vec);
}

 

GetAxis -> GetAxisRaw로 바꾸면 중간값이 없음. 뭔 말이냐면.. 방향키를 눌렀는데 이동하는 수치가 커짐. 이게 왜 필요한 건지는 잘 모르겠음.

 

검색해보니 아래와 같은 설명을 찾았다

1. Input.GetAxis(string name)

-1.0f 부터 1.0f 까지의 범위의 값을 반환한다. 즉, 부드러운 이동이 필요한 경우에 사용된다.

 

2. Input.GetAxisRaw(string name)

-1, 0, 1 세 가지 값 중 하나가 반환된다. 키보드 값을 눌렀을 때 즉시 반응해야한다면 GetAxisRaw를 사용하면 된다.

(https://onecoke.tistory.com/entry/%EC%9C%A0%EB%8B%88%ED%8B%B0-GetAxis%EC%99%80-GetAxisRaw 출처)

 

 

 

<UGUI 기초>

 

Hierarchy 창 -> 우클릭 -> UI

UI에 뜨는 다양한 속성들

 

<Canvas>

UI가 그려지는 도화지 역할 컴포넌트

Scene 창에서 2D 버튼을 클릭하면 평면 뷰를 보여준다.

(Hierarchy창에서 캔버스 하위에 UI를 넣지 않으면 보이지 않음)

 

하얀색 직사각형으로 만들어진 틀이 스크린(화면)이다.

World(카메라O) / Screen(카메라X)

 

이제 캔버스 -> 우클릭으로 UI를 추가해보자.

 

<Text>

문자열 작성 가능. (꼭 상업적 이용 가능한 폰트로 전환하기)

Horizontal Overflow 설정 : 텍스트가 길어서 텍스트박스가 넘칠 시 Wrap은 넘친게 보이지 않게 하고, Overflow는 보이게 한다. (특수한 경우가 아니면 Overflow는 잘 안 쓴다고 한다. 글자가 좀 깨진다고 함.)

 

Line Spacing : 행간 (1, 2, …)

 

<Image>

이미지 에셋의 Texture Type는 기본적으로 Default로 놓여있는데 Sprite(2D and UI)로 변경해준다. (그래야 UI 적용이 가능함) 우측 하단의 Apply까지 눌러서 변경을 완료.

 

Inspector창에서 Source Image를 변경해준다.

(Project창의 Assets에서 이미지 파일을 Source Image 옆 None(Sprite)라고 적힌 박스에 드래그&드롭 하면 된다.)

 

Preserve Aspect에 체크를 하면 비율이 고정 된다.

그 밑의 Set Native Size 버튼을 누르면 실제 사이즈로 조절된다.

 

Image Type

-      Simple : 그냥 늘어남

-      Sliced : 이미지 모서리를 자르고 안쪽만 늘림. (Filled Center의 체크를 해제하면 모서리부분만 남고 안쪽은 뻥 뚫린다.)

(https://youtu.be/k4YUJy-otDs?si=XzczHs80Zn2ORwTr 14:21~16:04 참고) 

-      Tiled : 크기는 고정된 상태로, 이미지 파일은 원본 사이즈로 해당 네모박스 틀 안에 채워져있는 것이다. (반복되는 패턴 배경 같은 거 만들 때 사용하면 될 듯)

-      Filled : Radical 360을 선택 후 Fill Amount를 드래그하면 타이머 시계 기능처럼 없어지는 연출 가능.

(이런식으로)

Vertical이 아닌 가로나 세로 방향으로도 가능. ‘닦아내기’ 효과라고 보면 될 것 같다.

ex)

이미지를 복붙한 후, 하나는 색을 어둡게 만든 뒤 원본 앞에 둔다. 위의 효과를 사용해서 쿨타임을 표현할 수 있음. (https://youtu.be/k4YUJy-otDs?si=XzczHs80Zn2ORwTr 11:18~12:23 참고)

 

Ctrl+d로 이미지를 복붙할 수 있다.

Hierarchy 창의 Canvas에서 파일이 리스트 상단에 있을수록 뒤쪽에 위치하고(먼저 그려지고), 하단에 있을수록 앞쪽에 위치(나중에 그려진다)한다.

 

 

<Button>

Hierarchy창에서 Button 하위에 있는 Text를 변경할 수 있다.

Sliced 기능을 사용하여 자유자재 크기로 이미지 구현 가능. 팝업창이나 버튼 만들 때 사용.

(https://youtu.be/k4YUJy-otDs?si=XzczHs80Zn2ORwTr 14:21~16:04 참고)

 

Interactable : 버튼 활성화 용도. (체크 해제 시 비활성화)

Transition : 버튼 누를 시

Color Tint : 색깔 바뀜

-       Normal Color : 평소 색깔

-       Highlighted Color : 마우스를 올려놓을 때 색깔

-       Pressed Color : 눌렀을 때 색깔

-       Disabled Color : 비활성화 되었을 때 색깔

-       Color Multiplier : 색깔 섞는 강도(보통 1에 둠)

-       Fade Duration : 색깔이 바뀌는 시간

Navigation은 버튼을 눌렀을 때 어느 방향으로 갈지… 잘 이해 못해서 검색해봤더니 유니티에서 누를 버튼을 입력 디바이스를 통해서 정하는 거라고 한다.

(https://blog.naver.com/saegot/222480052429 참조)

 

OnClick(): 버튼 클릭 시 호출되는 이벤트 함수

+ 버튼을 눌러서 나오는 리스트에다가 Hierarchy창에서 끌어온 오브젝트를 드래그&드롭 하면 된다.

No Function 이라고 되어있는 부분에서 적용하고 싶은 오브젝트를 클릭하고 어떤 함수를 동작시킬지 선택한다. (스크립트에 원하는 함수를 짜서 넣어준다. 단, 함수 앞에 public 적어줘야 함.)

이러면 매핑이 되었고.. 마우스를 누르면 해당 함수가 동작한다.

 

<앵커>

게임 속 오브젝트들의 Inspector 창을 보면 Transform으로 되어있는데, 위에서 추가한 것들은 Rect Transform으로 되어있다. (UI Transform이라고 생각하면 됨)

middle과 center가 적힌 과녁 느낌 네모 상자가 있다. 이걸 누르면 Anchor Presets가 뜬다. 어느 한 곳을 잡아서 그것과의 거리를 유지하는 것이라고 함.

그니까.. 앵커를 잡아놔야 UI가 여기저기 움직이지 않음. UI 위치를 좌표계로 고정시키면 화면의 크기에 따라 UI가 바뀌지 않고 옹졸하게 보인다거나 안보일 수 있는데, 기준을 왼쪽 상단 모서리에 둔다. 이런 식으로 하는 거임.

앵커가 9개가 있는데 이 중 골라서 배치하면 된다.

씬에서 보이는 바람개비가 기준점임.

앵커 9개 뜬 화면에서 Shift를 누르면 파란색 기준점이 뜬다. 그걸 누르고 나서 Pos X, Y, Z를 적당히 설정하면 좀 더 깔끔하게 배치 가능. (이러면 앵커에 딱 위치할 때 그 기준점에 맞춰서 좌표가 0 0 0이 되기 때문에 위치 설정값을 좀 더 깔끔하게 넣을 수 있다.)

 

근데 위에 다 기억 안나도 되고

Shift + Alt를 누르면 알아서 맞춰진다. (딱 붙으니까 Pos X, Y, Z 적당히 설정)

 

 

모르는 거 검색하다가 아래의 블로그를 보게 되었는데 이미지 설명이 너무 완벽해서 참고하기 좋을 것 같다.

https://m.blog.naver.com/saegot?categoryNo=16&tab=1

새것 연구소 : 네이버 블로그

 

강좌를 오늘 겨우 2개밖에 안 봤는데 시간이 훌쩍 지나갔다. 초반엔 그래도 전에 대충 알던 내용이라 빨리 진도가 나갔는데 슬슬 조급하다. 개발 계획을 6개월로 잡아놨는데, 개발 블로그 보니까 다들 금방금방 만든다. (대부분 퀄리티가 떨어지긴 하지만..)

내가 만들고 싶어서 만드는 것이기도 하지만 어쨌든 포트폴리오로 쓸거니까 너무 많은 시간을 써서는 안된다는 생각이 든다. 조금 더 속도를 올려야겠다.