[Unity] UI기초 - Inspector 활용하기 , Image, 이벤트 리스너 설정

오늘은 Unity를 다뤄 보도록 하겠습니다. Unity를 활용하여 2D App을 개발하였던 프로젝트의 메인 개발자가 공석이 되어 유지보수라도 진행을 하기 위해 Unity에 대하여 학습을 시작하게 되었습니다.

이 내용은 누군가에게 도움이 될 수도 있겠지만 Unity는 학습을 원하시면 다른 블로그를 가 보시는게 나을 듯 합니다. 개인 노트식의 글이 될 예정입니다.

우선 UI 다루기를 해 보기 위해서 "[유니티 UI 디자인 교과서] - 위키북스"에서 나온  내용을 확인 해 가며 진행하였습니다. 오늘 확인한 부분은 3장의 기본적인 UI요소 입니다.

이미지 가져오기는 먼저 하단의 Project -> Assets에 Sprite이라는 폴더를 만든 후 해당 폴더로 이미지를드레그 엔 드롭하면 됩니다.

오늘 제가 Unity를 학습하면서 하고싶은 목표는 이미지를 불러와 해당 이미지를 Y축(보이는 화면의 위쪽방향)을 기준으로 회전하도록 만드는 것입니다.

위의 사진은 이미지를 선택하였을 때 기본으로 보이는 인스펙터(Inspector)입니다.

먼저!!! 

Rect Transform  컴포넌트에는 이미지의 크기, 위치등에 대한 정보입니다. 

먼저 Pivot은 회전과 같은 작업에서 무게중심을 정하는 것 같은데 정확한 느낌은 아직 모르겠습니다.

Rotation은 회전에 관련된 값들로 X,Y,Z축에대한 회전값을 통해서 축으로부터 회전을 줄 수 있습니다.

Scale은 크기에 관련된 값으로 X,Y,Z축으로 크기를 키우거나 줄일 수 있습니다. 배율값으로 보시면 편할 것 같습니다.

이미지 컴포넌트에는 Source Image가 있습니다. 해당 값은 이 이미지 컴포넌트가 보여줄 이미지 파일에 해당합니다. 위에서 드레그 엔드롭으로 추가했던 라이언의 이미지를 넣어보았습니다.

Color는 처음에 이미지에 왜 Color값을 추가로 설정할까? 라는 생각을 했습니다. 이미지에 적용할 색을 선택하는 것으로 Color 속성에서 설정 한 색과 Sprite에 있는 각 색의 값이 곱해져서 표현된다고 합니다. 

이 부분은 여러개 이미지를 비교하며 보겠습니다.

위의 이미지는 알파값이라고 하는 투명값을 주었을 때 입니다.

팔레트가 보이지는 않지만 붉은색으로 선택을 했을 때의 이미지입니다.

형광느낌의 연두색을 선택했을 때의 이미지입니다.

위의 이미지는 파랑색을 선택했을 때의 이미지입니다.

위의 이미지는 에메랄드? 민트? 색을 선택했을 때의 라이언 이미지입니다.

즉, 선택한 색으로 변하는 느낌은 맞지만 원래 이미지의 색과도 상관이 있습니다. 아직 색의 곱에 대해서 정확하게 알지 못해 이렇게 느낌만 남겨둡니다.

이러한 인스펙터(inspector) 속성 값의 내용을 파악했으니 이제 직접 해당 값들을 프로그램(또는 Game)에서 변경할 수 있도록 스크립트를 작성해 볼 예정입니다.

스크립트의 작성 및 등록작업 과정은 몇차례 작업을 해보지 않는다면 계속 잊어버릴 것 같다. 전임자에게 한번 듣고, 다른 게임을 만들어 볼 때도 했었는데 이번에도 바로 생각이 나지 않았습니다. 따라서 차근차근 아래에 기록합니다.

1. 스크립트 파일 생성

화면 하단의 "프로젝트-> 에셋"에 Script라는 폴더를 만들고, 아래와 같이 생성해주면 됩니다.

2. Canvas에 컴포넌트(Component)로 스크립트 추가

오른쪽 하단의 주황색 사각형에 표시된 버튼을 눌러서 C#혹은 Java Script로 작성된 스크립트를 선택해줍니다.

여기까지가 스크립트 사용의 준비라면 실제로 버튼등에서 스크립트의 함수를 사용하기 위해서는 스크립트의 함수와 각 버튼과 같은 객체의 이벤트 핸들러와 스크립트에서 작성한 함수를 연결해주어야 합니다. 설명이 조금 미숙한 것 같습니다만.... 허허;;

3. 이벤트 연결하기

우선 가장 기본적인 것으로 버튼의 클릭 시 스크립트의 특정 함수를 사용하도록 하는 작업을 해 보겠습니다.

버튼을 선택하면 버튼에 맞게 인스펙터가 변경이 됩니다.

오른쪽 중간부분에 ,인스펙터의 Button(Script)를 보면 On Click()이라는 부분이 있습니다. 해당 부분에 Canvas를 넣어줍니다.

Drag & Drop입니다.

그 후 function에서 원하는 함수를 고르면 됩니다.

원하는 함수를 고른 후 인자까지 드레그 엔 드롭으로 넣어주면 아래와 같이 설정이 됩니다.