개발단에 가입하여 베르의 게임 개발 유튜브를 후원해주세요! https://www.youtube.com/channel/UC9j37A2ACL9ooSbsT4mtGww/join

 

안녕하세요! 여러분들과 함께 게임 개발을 공부하는 베르입니다!

이번에는 유니티 2020에서 추가된 Properties 기능에 대해서 알아봅시다.

 

사용 엔진 버전 : 2020.3

 

타임라인

0:00 인트로

0:08 인스펙터에서 여러 개의 오브젝트를 컨테이너에 담기

0:26 1. 일일이 집어넣기

0:43 2. 인스펙터 잠그기

1:13 3. Properties 이용하기

1:45 아웃트로

 

[투네이션 후원]

https://toon.at/donate/637735212761460238

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

- 유니티 에셋스토어 : https://assetstore.unity.com/?aid=1100lkbzf

 

[디스코드 채널]

https://discord.gg/tqmRTy4pgk

 

스크립트

인트로

안녕하세요. 여러분들과 함께 게임 개발을 공부하는 베르입니다.

이번에는 유니티 에디터의 Properties 기능에 대해서 알아보겠습니다.

인스펙터에서 여러 개의 오브젝트를 컨테이너에 담기

유니티에서는 에디터의 인스펙터에서 오브젝트를 담을 컨테이너를 이렇게 스크립트에서 리스트나 배열로 만들 수 있습니다.

스크립트에서 만든 리스트나 배열은 에디터에서 이렇게 보여지죠.

그리고 이 컨테이너에 씬 안에 있는 오브젝트를 끌어넣을 수 있습니다.

1. 일일이 집어넣기

그런데 한꺼번에 여러 개의 오브젝트를 넣기 위해서 여러 오브젝트를 선택하면 컴포넌트가 붙어있는 오브젝트의 선택이 풀리면서 인스펙터에서 사라집니다.

그래서 인스펙터를 잠그는 방법을 몰랐을 때는 오브젝트를 하나하나 선택해서 일일이 집어넣을 수 밖에 없었죠.

2. 인스펙터 잠그기

하지만 인스펙터 뷰 우측 상단에 있는 자물쇠 모양 버튼을 클릭하면 인스펙터가 잠기면서 지금 선택한 오브젝트로 인스펙터가 고정됩니다.

그러면 다른 오브젝트를 선택해도 인스펙터가 바뀌지 않고 여러 오브젝트를 한꺼번에 컨테이너에 넣을 수 있게 되죠.

하지만 인스펙터 잠금을 푸는 것을 깜빡하면 다른 오브젝트를 변경하기 위해 선택해도 인스펙터가 변경되지 않아서 헤매게 되는 실수가 발생합니다.

그래서 작업이 끝나면 인스펙터 잠금을 일일이 풀어줘야 한다는 단점도 있습니다.

3. Properties

이 모든 단점을 해결하기 위한 기능이 바로 Properties입니다.

이 기능은 2020 버전에 추가된 기능으로 게임 오브젝트에 우클릭하고 제일 아래의 [Properties...] 항목을 선택하면 Properties 창이 열리며 인스펙터에서 보이는 것과 동일한 내용을 볼 수 있게 됩니다.

여기서는 다른 오브젝트를 선택해도 Properties 창의 내용이 바뀌지 않습니다.

그래서 여러 오브젝트를 선택해서 컨테이너로 한 번에 넣어줄 수 있습니다.

그리고 작업이 끝나면 어떤 잠금을 푼다던가 하는 일에 신경쓰지 않고 그냥 Properties 창을 꺼버리면 됩니다.

아웃트로

이번 영상에서는 유니티 에디터의 Properties 기능에 대해서 알아보았습니다.

이 강좌는 시청자 여러분들의 시청과 후원으로 제작되었습니다.

이상 베르의 게임 개발 유튜브였습니다. 감사합니다.

반응형

개발단에 가입하여 베르의 게임 개발 유튜브를 후원해주세요! https://www.youtube.com/channel/UC9j37A2ACL9ooSbsT4mtGww/join

 

안녕하세요! 여러분들과 함께 게임 개발을 공부하는 베르입니다!

베르의 게임 개발 유튜브의 디스코드 채널 개설 공지입니다!

 

타임라인

0:00 인트로

0:42 디스코드 채널 소개와 가입 방법

2:33 질문 채널 사용법

3:57 아웃트로

 

[투네이션 후원]

https://toon.at/donate/637735212761460238

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

- 유니티 에셋스토어 : https://assetstore.unity.com/?aid=1100lkbzf

 

[디스코드 채널]

https://discord.gg/tqmRTy4pgk

 

인트로

안녕하세요. 여러분들과 함께 게임 개발을 공부하는 베르입니다.

이번에는 베르의 게임 개발 유튜브의 디스코드 채널이 만들어졌다는 것을 알려드리려고 합니다.

사실 디스코드 채널 생성 공지는 얼마 전에 했던 라이브 스트리밍과 커뮤니티 글을 통해서 드렸었지만, 라이브 스트리밍과 커뮤니티 글은 접근성이 떨어져 못본 분들이 많은 듯해서 이렇게 영상을 만들게 되었습니다.

유튜브 채널을 계속 운영해오면서 강좌에 대한 질문이나 궁금하신 점들을 주로 댓글로 보고 답변을 드렸었는데 아무래도 유튜브 댓글로는 이미지나 영상을 첨부할 수 없어서 자세한 내용 파악이나 답변이 어려운 점이 많았습니다.

그래서 이렇게 이미지나 영상들을 포함해서 질문할 수 있는 사이트들을 여럿 고민하다 디스코드에 채널을 열기로 결정했습니다.

디스코드 채널 가입과 채널 소개

우선 영상 하단에 있는 디스코드 채널 링크를 통해 베르의 게임 개발 채널에 가입하실 수 있습니다.

채널에 가입하고 나면 이렇게 여러 개의 채팅 채널을 보실 수 있습니다.

먼저 공지 채널은 강좌가 업로드되거나 베르의 게임 개발 유튜브 채널에 이벤트가 있을 때 공지가 올라오는 채널입니다.

아직은 별다른 이벤트가 없어서 대부분은 강좌 업로드 공지만 올라오지만 언젠가 이벤트를 열게 되어서 이벤트 공지를 올릴 때가 오면 좋겠네요.

그 다음 일반 채널은 채널에 접속하신 유저들끼리 대화를 나누는 채널입니다.

욕설이나 어그로, 도배 등 나쁜 행동은 삼가해주시고 자유롭게 대화를 나눠주세요.

그 다음 질문 채널은 강좌나 개발에 있어서 궁금하거나 도움이 필요한 부분을 질문으로 올려주시면 되는 채널입니다.

질문 채널을 이용하는 방법은 잠시 후에 좀 더 자세하게 설명하기로 하고 다음 채널 설명으로 넘어가겠습니다.

그 다음 채널은 강의요청 채널입니다.

이 채널에서는 여러분들이 원하는 강좌를 요청해주시면 됩니다.

요청해주신 강좌는 제가 만들 수 있는 강좌라면 저의 강좌 목록에 올라가게 됩니다.

많이 어렵거나 제가 모르는 분야라서 제가 하기 어려운 내용이라면 요청을 받아들이지 않을 수도 있지만 가급적이면 리스트에 올리고 연구를 하는 방식으로 진행하려고 합니다.

그리고 이미 리스트에 있는 주제라면 리스트에서 우선 순위가 올라가게 됩니다.

물론 한 분이 여러 번 요청하는 건 기록해두고 한 계단만 올릴 예정이니 요청을 도배하지는 말아주세요.

그 다음 건의 채널은 유튜브 채널이나 디스코드 채널 운영과 관련하여 이렇게 했으면 좋겠다하는 사항을 제안하는 채널입니다.

마지막으로 프로젝트 자랑 채널은 여러분들이 만들거나 개발 중인 프로젝트를 자랑하기 위한 채널입니다.

자신의 프로젝트를 자랑하거나 다른 사람의 프로젝트를 보면서 칭찬과 격려를 아끼지 말아주세요.

그리고 이 채널에 올려주신 프로젝트는 제 유튜브 영상이나 스트리밍을 통해서 소개될 수 있습니다.

베르의 게임 개발 채널 디스코드는 현재 이렇게 운영되고 있습니다.

질문 채널 사용법

각 채널에 대한 설명을 끝마쳤으니 이제 질문 채널을 사용하는 법에 대해서 자세히 설명해보겠습니다.

먼저 질문을 하실 때는 하려고 하는 질문이 다른 유저가 한 적이 있는지 확인해보시면 좋습니다.

질문 채널의 상단에 #모양으로 된 스레드 버튼을 눌러보면 현재 해결 중인 질문과 이미 해결된 질문들을 볼 수 있습니다.

스레드에서 활성화를 선택해서 나오는 스레드들은 현재 해결 중이거나, 해결된지 얼마 안 된 질문입니다.

그리고 그 옆에 보관됨을 선택하면 해결된지 시간이 꽤 지난 질문들을 볼 수 있습니다.

여기서 궁금한 내용을 검색해서 찾아보고 원하는 해결책이 아니라면 질문을 새로 올려주시면 됩니다.

질문을 올리실 때 버그와 관련된 내용이라면 스크린샷이나 GIF, 영상, 로그 등 해당 문제와 관련된 자료를 첨부하시면 좀 더 원활한 답변이 가능합니다.

그리고 이 질문 채널에서는 저 뿐만 아니라 여러분들도 알고 계시는 내용의 질문에 답변을 함께 달아주시면 모두에게 도움이 됩니다.

질문에 답변을 남기시는 방법은 해당 질문 채팅에 마우스 커서를 올리고 스레드 만들기 버튼을 클릭하면 답변을 남길 스레드를 만들 수 있습니다.

스레드를 만들 때는 스레드의 제목을 정해야 하는데 이 제목은 [작성자의닉네임]을 적고 유니티와 관련된 내용이라면 [유니티], 언리얼4 엔진과 관련된 내용이면 [언리얼4], 그 외의 내용이라면 [기타]처럼 [질문 카테고리]를 적어주고, 본 제목으로 질문 내용을 요약해서 적어주시면 됩니다.

아웃트로

이번 영상에서는 베르의 게임 개발 유튜브의 디스코드 채널 생성 공지를 해드렸습니다.

앞으로 질문을 디스코드 채널을 통해서 해주시느라 영상의 댓글이 줄어들 수 있을 것 같습니다.

그래도 유튜브 영상에 댓글 많이 남겨주세요.

이 채널의 강좌들은 시청자 여러분들의 시청과 후원으로 제작되며 채널의 운영에 큰 도움이 됩니다.

이상 베르의 게임 개발 유튜브였습니다. 감사합니다.

반응형

개발단에 가입하여 베르의 게임 개발 유튜브를 후원해주세요!

https://www.youtube.com/channel/UC9j37A2ACL9ooSbsT4mtGww/join

 

안녕하세요! 여러분들과 함께 게임 개발을 공부하는 베르입니다!

이번에는 유니티 애니메이션 시스템의 기본이 되는 애니메이션 클립에 대해서 알아보도록 하겠습니다.

 

사용 엔진 버전 : 2020.3

 

타임라인

0:00 인트로

0:16 애니메이션 클립

1:05 외부프로그램에서 만든 애니메이션

2:26 유니티 에디터에 만든 애니메이션

6:04 아웃트로

 

[투네이션 후원] https://toon.at/donate/637735212761460238

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

- 유니티 에셋스토어 : https://assetstore.unity.com/?aid=1100lkbzf

 

[디스코드 채널] https://discord.gg/tqmRTy4pgk

 

인트로

안녕하세요. 여러분들과 함께 게임 개발을 공부하는 베르입니다.

이번에는 유니티 애니메이션 클립에 대해서 알아보도록 하겠습니다.

본격적인 강좌에 들어가기 전에 필요한 리소스들을 영상 하단의 링크에서 다운로드받아서 임포트합니다.

애니메이션 클립

이제 지난 애니메이션 개요 강좌에서 가볍게 이야기 했던 애니메이션 클립에 대한 이야기를 복습하면서 좀 더 자세히 알아보도록 하겠습니다.

지난 강좌에서 이야기 했듯이 애니메이션 클립은 애니메이션의 가장 기본적인 단위이며 오브젝트가 어떻게 움직여야 하는지에 대한 정보들이 포함되어 있는 것입니다.

그리고 이 애니메이션 클립을 만드는 방법으로는 크게 두 가지가 있습니다.

외부에서 만들어서 임포트한 애니메이션

첫 번째 방식은 3ds MAX나 Maya, 블랜더 같은 외부 프로그램으로 애니메이션을 만들어서 임포트하는 방식입니다.

이렇게 외부 프로그램에서 애니메이션을 만들어서 임포트하는 방식은 보통 3D 프로그램으로 만들어진 3D 모델의 애니메이션을 만들고자 할 때 주로 사용합니다.

외부 프로그램에서 전문 툴을 사용해서 만드는 애니메이션이니만큼 유니티의 기능만으로 만드는 애니메이션에 비해서 좀 더 복잡한 애니메이션을 만들 수 있습니다.

임포트된 FBX 파일은 프로젝트 뷰에서 이렇게 박스 모양 아이콘의 에셋으로 보이게 됩니다.

이 FBX 에셋을 선택해보면 인스펙터 뷰에서 Model, Rig, Animation, Materials 탭을 볼 수 있습니다.

이 중에서 Animation 탭을 선택해보면 이 FBX 파일이 가지고 있는 애니메이션에 대한 정보를 볼 수 있습니다.

물론 FBX 파일이 애니메이션을 전혀 포함하고 있지 않다면 이 탭은 활성화되지 않을 겁니다.

여기서 이 애니메이션이 어떤 애니메이션인지 재생해 볼 수 있으며, Loop Time 옵션을 통해 애니메이션이 끝까지 재생된 이 후에 동작을 멈출지 아니면 처음으로 돌아가서 반복 재생할지를 결정할 수 있습니다.

이외에도 애니메이션 이벤트를 추가하는 등의 작업을 할 수도 있습니다.

그리고 3D 팀에서 애니메이션을 넘겨줄 때 애니메이션 동작마다 FBX 파일을 따로 나눠서 주지 않고 한 FBX 파일에 여러 동작을 넣어서 주는 경우가 있습니다.

그럴 때는 여기 Clips에서 [+] 버튼을 눌러서 클립을 추가해주고 해당 애니메이션의 시작 지점과 끝 지점을 나눠주면 됩니다.

그리고 이렇게 나눈 애니메이션의 이름이 헷갈리지 않도록 이름을 설정해줍니다.

이렇게 외부 프로그램에서 만들어서 임포트한 애니메이션은 유니티의 애니메이션 뷰에서 Read Only로 표시되며 보통은 유니티에서 수정하지 못하기 때문에 외부 프로그램에서 다시 수정해서 임포트해야 합니다.

유니티 에디터에서 만든 애니메이션

유니티의 또 다른 애니메이션 클립 방식은 유니티 에디터에서 직접 애니메이션 키를 잡아서 클립을 만드는 것입니다.

유니티 에디터에서 직접 키를 잡아서 애니메이션 클립을 만드는 것은 비교적 간단한 애니메이션이나 UI 애니메이션을 만들고자 할때 사용하는 빈도가 높습니다.

유니티 에디터에서 애니메이션을 만드는 방법은 아주 간단합니다.

먼저 하이어라키 뷰에 우클릭해서 애니메이션을 만들 오브젝트를 하나 생성합니다.

그리고 그 오브젝트를 선택한 상태로 [Ctrl + 6] 단축키를 눌러서 애니메이션 뷰를 열어줍니다.

그러면 아직 애니메이션이 없는 상태이기 때문에 애니메이션 클립과 애니메이터를 만들라는 문구와 함께 Create 버튼이 표시되는 것을 볼 수 있습니다.

여기서 Create 버튼을 누르면 방금 생성한 오브젝트에 대한 애니메이션 클립을 생성할 수 있습니다.

Create 버튼을 누르고 애니메이션 클립을 생성합니다.

그러면 프로젝트 뷰에서 방금 생성한 애니메이션 클립과 이 오브젝트에 대한 애니메이터 컨트롤러가 생성되는 것을 볼 수 있습니다.

애니메이터 컨트롤러는 이 오브젝트가 가진 여러 개의 애니메이션 클립을 관리하고 어떤 상황에 어떤 애니메이션을 재생할 것인지를 결정하는 내용들을 담는 에셋입니다.

이에 대한 자세한 내용은 애니메이터 컨트롤러에 대해서 다루는 강좌에서 이야기하도록하고 지금은 애니메이션 클립에 좀 더 집중해보겠습니다.

애니메이션 클립이 생성된 이후에 애니메이션 뷰를 보면 텅 비어있는 프로퍼티 패널과 애니메이션 타임라인을 볼 수 있습니다.

먼저 애니메이션을 만들기 위해서는 Add Property 버튼을 눌러서 동작을 만들어줄 프로퍼티를 추가해야 합니다.

이 프로퍼티에는 컴포넌트와 관련된 대부분이 추가될 수 있지만 기본적으로는 트랜스폼 컴포넌트에서 크기, 회전, 위치 등을 주로 사용하고, UI인 경우에는 이미지나 색상과 같은 값들을 다룰 수 도 있습니다.

먼저 트랜스폼 컴포넌트에서 Rotation 프로퍼티를 추가해보겠습니다.

그러면 Rotation 프로퍼티가 프로퍼티 목록에 추가되며 타임라인의 0초 지점과 1초 지점에 마름모 꼴의 키가 추가되는 것을 볼 수 있습니다.

이 때 타임라인의 중간을 선택하고 프로퍼티의 값을 변경하면 새로운 키가 추가되는 것을 볼 수 있습니다.

그리고 키를 클릭해서 드래그하면 키의 위치를 옮길 수도 있고 여러 개의 키를 동시에 선택해서 동일 비율로 줄이거나 늘일 수도 있습니다.

이렇게 타임라인에서 키를 옮기면서 값을 입력하는 기본 방식을 Dopesheet라고 하고 애니메이션 뷰 아래 쪽의 버튼에서 다른 방식인 Curves를 선택할 수 있습니다.

Curves 방식에서는 그래프를 보면서 키의 위치를 조절하고 베지어 곡선 각도를 바꾸거나 더블 클릭으로 키를 추가할 수 있습니다.

이 외에도 타임 라인 끝 부분에 [...]으로 표시된 버튼을 눌러서 이 애니메이션이 초당 몇 프레임으로 애니메이션을 재생하게 만들지도 결정할 수 있습니다.

이 애니메이션 프레임 수에 대한 내용은 애니메이션 샘플 레이트 영상에서 확인하실 수 있습니다.

그리고 애니메이션 클립 이름이 적힌 드롭 다운을 클릭하면 이 오브젝트가 가진 애니메이션들을 볼 수 있고 제일 아래의 [Create New Clip] 항목을 선택하면 새로운 애니메이션 클립을 추가할 수 있습니다.

이렇게 유니티에서 만들어진 애니메이션 클립은 프로젝트 뷰에서 이런 아이콘으로 표시됩니다.

이것을 선택해보면 FBX 에셋에 담긴 애니메이션보다는 결정할 수 있는 옵션이 거의 없고 애니메이션의 반복 여부를 설정하는 LoopTime만 있는데 이것은 대부분의 작업을 애니메이션 뷰에서 할 수 있기 때문입니다.

아웃트로

이렇게 외부 프로그램에서 만들어서 임포트하거나 유니티 엔진에서 만든 애니메이션 클립은 애니메이터 컨트롤러를 통해서 하나의 애니메이션 구성을 만드는데 사용하게 됩니다.

이번 영상에서는 유니티 애니메이션 시스템의 기본 구성 요소인 애니메이션 클립에 대해서 알아보았습니다.

이 강좌는 구독자 여러분들의 시청과 후원으로 제작되었습니다.

이상 베르의 게임 개발 유튜브였습니다. 감사합니다.

반응형

 

유니티 엔진에 대한 본격적인 공부에 들어가기에 앞서 게임 엔진과 유니티 엔진에 대해서 알아봅시다.

반응형

 

마우스 입력 처리를 응용해서

1. 캐릭터가 마우스 위치를 쳐다보게 하는 기능

2. 클릭으로 투사체 발사 기능

3. 휠으로 줌 인/줌 아웃하는 기능

을 구현하는 방법을 알아봅시다.

 

응용 이전에 마우스 입력 처리에 대한 기본 방법은 링크를 통해서 배우실 수 있습니다.

반응형

Programming 

모바일 가상 조이스틱 구현하기

 

작성 기준 버전 :: 2019.2 - 2019.4

 

[이 포스트의 내용은 유튜브 영상으로도 시청하실 수 있습니다]

 

 

 

요즘에는 오락실이 별로 많지 않지만 제가 어렸을 때 오락실에서 게임할 때는 오락실 기계에 붙어있는 조이스틱과 버튼을 사용해서 게임을 플레이 했었다. 그리고 본격적으로 PC게임으로 넘어왔을 때는 키보드와 마우스를 통해 게임 속의 캐릭터나 유닛들을 조작했다.

 

 

또 구세대 2G 폰에서는 핸드폰에 달린 숫자 버튼들이 게임을 조작하는 데 쓰였었다. 한참 모바일 기기에서 새로운 시도를 하던 때에는 게임을 위한 전용 휴대폰도 나왔었다.

 

 

하지만 어느 새 스마트폰의 시대가 와버렸는데 스마트폰은 보통 입력을 받아들일 수 있는 부분이 화면의 터치 밖에 없다. 그래서 게임 조작 방식에 많은 제약이 있을 수 밖에 없었다.

 

터치만 가능한 모바일 기기에서 어떻게 하면 좀 더 콘솔 게임과 같은 조작이 가능할까 하며 고안된게 바로 가상 조이스틱이다. 가상 조이스틱은 화면에 조이스틱 UI를 띄우고 그것을 터치하여 조작하는 방식의 컨트롤러다.

 

조이스틱 UI 배치하기

 

 

 

가상 조이스틱을 구현하기 위해서 먼저 필요한 리소스는 조이스틱을 위에서 아래로 쳐다보았을 때의 조이스틱 바닥 부분과 레버 머리부분을 표현한 이미지이다.

 

 

 

이미지 리소스를 준비하고 나면 이미지 게임 오브젝트를 두 개 만들어서 위의 이미지와 같이 넣어준다. 빨간색 레버가 자식 게임 오브젝트가 되도록 만든다.

 

 

그리고 조이스틱 레버 이미지의 위치를 화면 좌측하단에서부터 계산하기 위해서 Joystick 게임 오브젝트의 앵커를 left bottom으로 설정한다.

 

조이스틱 스크립트 작성

 

드래그 이벤트 가져오기

 

using UnityEngine;
using UnityEngine.EventSystems; // 키보드, 마우스, 터치를 이벤트로 오브젝트에 보낼 수 있는 기능을 지원

public class VirtualJoystick : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{    
    public void OnBeginDrag(PointerEventData eventData)
    {
        Debug.Log("Begin");
    }
    
    // 오브젝트를 클릭해서 드래그 하는 도중에 들어오는 이벤트
    // 하지만 클릭을 유지한 상태로 마우스를 멈추면 이벤트가 들어오지 않음    
    public void OnDrag(PointerEventData eventData)
    {
        Debug.Log("Drag");
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        Debug.Log("End");
    }
}

 

이미지 배치가 끝나면 조이스틱 기능을 만들기 위해서 VirtualJoystick이라는 이름으로 C# 스크립트를 생성한다. 그리고 제일 상단에 EventSystems 네임스페이스를 using 선언해준다. 이 이벤트 시스템 네임스페이스에는 유니티에서 키보드, 마우스, 터치 등의 사용자 입력을 오브젝트에 이벤트로 보낼 수 있는 기능들을 지원한다.

 

그 다음에는 MonoBehaviour 상속 뒤에 IBeginDragHandler, IDragHandler, IEndDragHandler를 추가한다. 여기서 I로 시작하는 이 핸들러들은 인터페이스라는 것으로 클래스와는 다르게 구현해야할 함수만을 지정해주는 것이다. 이 인터페이스를 상속받으면 인터페이스가 가지고 있는 함수들을 강제로 구현하도록 에러가 표시된다.

 

여기서 [F12]를 눌러서 일일이 구현해야할 함수를 보고 작성할 수도 있지만, 에러가 표시되고 있는 인터페이스 위에 커서를 두고 [Ctrl + .] 단축키를 누르면 구현해야할 함수들을 자동으로 생성되게 할 수 있다.

 

참고로 BeginDrag는 드래그를 시작할 때, Drag는 드래그 중일 때, EndDrag는 드래그를 끝냈을 때를 의미한다.

 

먼저 드래그를 체크해보기 위해서 각 드래그 이벤트 함수에 로그 코드를 추가하고 코드를 저장한 뒤 에디터로 돌아간다.

 

 

그리고 생성한 컴포넌트를 Joystic 게임 오브젝트에 부착하고 게임을 플레이시킨다.

 

 

그 다음 조이스틱 이미지 위에 클릭하고 드래그하면 Begin, Drag, End 순서로 로그가 출력된다.

 

레버 이미지가 드래그를 따라서 움직이게 만들기

 

using UnityEngine;
using UnityEngine.EventSystems; // 키보드, 마우스, 터치를 이벤트로 오브젝트에 보낼 수 있는 기능을 지원

public class VirtualJoystick : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    [SerializeField]
    private RectTransform lever;    // 추가
    private RectTransform rectTransform;    // 추가

    private void Awake()    // 추가
    {
        rectTransform = GetComponent<RectTransform>();
    }
    
    public void OnBeginDrag(PointerEventData eventData)
    {  
        // Debug.Log("Begin");

        // 추가
        var inputDir = eventData.position - rectTransform.anchoredPosition;
        lever.anchoredPosition = inputDir;
    }
    
    // 오브젝트를 클릭해서 드래그 하는 도중에 들어오는 이벤트    // 하지만 클릭을 유지한 상태로 마우스를 멈추면 이벤트가 들어오지 않음    
    public void OnDrag(PointerEventData eventData)
    {
        // Debug.Log("Drag");
        
        // 추가
        var inputDir = eventData.position - rectTransform.anchoredPosition;
        lever.anchoredPosition = inputDir;
    }
    
    public void OnEndDrag(PointerEventData eventData)
    {
        // Debug.Log("End");
        
        // 추가
        lever.anchoredPosition = Vector2.zero;
    }
}

 

드래그 이벤트가 제대로 동작하는 것을 확인했으니 터치한 위치를 따라서 레버 이미지가 따라 움직이도록 만들 차례이다.

 

우선 빨간 레버 이미지의 Rect Transform 컴포넌트를 가질 lever 변수와 Joystick의 Rect Transform을 가지고 있을 rectTransform 변수를 선언한다. 그리고 lever 렉트 트랜스폼은 에디터의 인스펙터 뷰에서 넣어주기 위해서 SerializeField 어트리뷰트를 걸어주고 본체의 rectTransform은 Awake 함수에서 GetComponent로 가지고 와서 저장해둔다.

 

그 다음은 터치한 위치를 찾아내서 lever 이미지가 그 위치로 이동하게 만들어 줘야한다.

 

터치한 위치는 이벤트 함수의 매개변수로 받는 eventData.position을 통해서 가져올 수 있다. 이렇게 가져온 eventData.position에서 가상 조이스틱 게임 오브젝트의 위치인 rectTransform.anchoredPosition을 빼주면 lever가 있어야할 위치를 구할 수 있게 된다. 구한 inputDir를 lever.anchoredPosition에 넣어준다. 이 과정은 OnBeginDrag와 OnDrag, 두 이벤트에서 동일하게 처리해준다.

 

그리고 마지막으로 가상 조이스틱에서 손을 뗐을 때의 이벤트인 OnEndDrag에서는 lever.anchoredPosition을 Vector2.zero로 만들어서 조이스틱의 중심으로 다시 돌아가게 만들어준다.

 

 

코드를 저장하고 에디터로 돌아간 다음에는 컴포넌트의 비어있는 lever 프로퍼티에 레버 이미지를 할당해준다.

 

 

게임을 플레이시키고 가상 조이스틱 위에 드래그해보면 빨간색 레버 이미지가 터치한 위치를 잘 따라오는 것을 볼 수 있다. 그리고 터치를 끝내면 자동으로 중심으로 레버가 돌아가기까지 한다.

 

 

하지만 너무 잘 따라와서 문제인데 드래그를 유지한 채로 조이스틱 영역 밖으로 움직이면 빨간 레버 역시 조이스틱 위치를 벗어나 버린다. 레버가 조이스틱 영역을 벗어나지 않도록 수정할 필요가 있어보인다.

 

레버 이동 제한하기

using UnityEngine;
using UnityEngine.EventSystems; // 키보드, 마우스, 터치를 이벤트로 오브젝트에 보낼 수 있는 기능을 지원

public class VirtualJoystick : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    [SerializeField]
    private RectTransform lever;
    private RectTransform rectTransform;
    // 추가
    [SerializeField, Range(10f, 150f)]
    private float leverRange;    
    
    private void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
    }
    
    public void OnBeginDrag(PointerEventData eventData)
    {
        var inputDir = eventData.position - rectTransform.anchoredPosition;
        //추가
        var clampedDir = inputDir.magnitude < leverRange ? 
            inputDir : inputDir.normalized * leverRange;

        // lever.anchoredPosition = inputDir;
        lever.anchoredPosition = clampedDir;    // 변경

    }
    
    // 오브젝트를 클릭해서 드래그 하는 도중에 들어오는 이벤트
    // 하지만 클릭을 유지한 상태로 마우스를 멈추면 이벤트가 들어오지 않음    
    public void OnDrag(PointerEventData eventData)
    {
        var inputDir = eventData.position - rectTransform.anchoredPosition;
        // 추가
        var clampedDir = inputDir.magnitude < leverRange ? inputDir : inputDir.normalized * leverRange;

        // lever.anchoredPosition = inputDir;
        lever.anchoredPosition = clampedDir;    // 변경
    }
    
    public void OnEndDrag(PointerEventData eventData)
    {
        lever.anchoredPosition = Vector2.zero;
    }
}

 

먼저 레버가 움직일 수 있는 거리를 조이스틱의 중심부로부터 일정 거리로 제한시키기 위해서 float 타입으로 leverRange라는 변수를 추가한다. private으로 두되 에디터에서 수정할 수 있도록 SerializeField 어트리뷰트와 특정 범위 내에서만 값을 조절할 수 있도록 Range 어트리뷰트를 추가해준다. Range의 범위는 10에서 150 사이로 하자.

 

leverRange 변수를 만들고 나면 이벤트 함수에서 inputPos를 lever의 anchoredPosition에 바로 넣지 말고 inputPos의 길이와 leverRange를 비교한 뒤, leverRange보다 짧으면 inputPos를 바로 주고, 길면 inputPos를 정규화한 다음 leverRange를 곱하는 방식으로 inputPos의 거리를 제한하여 lever의 anchoredPosition에 넣어준다. 이 과정도 OnDrag에서 똑같이 처리해준다.

 

 

 

코드를 저장하고 에디터로 돌아가서 레버 이미지가 조이스틱 영역을 크게 벗어나지 않는 적절한 영역을 확인한다. 지금은 100 정도가 적당해 보인다.

 

 

VirtualJoystick 컴포넌트가 부착되어 있는 Joystick 게임 오브젝트를 선택하고 인스펙터 뷰에서 Lever Range 프로퍼티를 100으로 설정한다.

 

 

게임을 플레이시키고 가상 조이스틱을 움직여보면 드래그를 조이스틱 밖으로 끌어도 조이스틱의 레버가 조이스틱 영역을 벗어나지 않는 것을 볼 수 있다.

 

조작 기능 추가하기

using UnityEngine;
using UnityEngine.EventSystems; // 키보드, 마우스, 터치를 이벤트로 오브젝트에 보낼 수 있는 기능을 지원

public class VirtualJoystick : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    [SerializeField]
    private RectTransform lever;
    private RectTransform rectTransform;
    [SerializeField, Range(10f, 150f)]
    private float leverRange;
    
    private Vector2 inputVector;    // 추가
    private bool isInput;    // 추가

    private void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
    }
    
    public void OnBeginDrag(PointerEventData eventData)
    {
        // var inputDir = eventData.position - rectTransform.anchoredPosition;
        // var clampedDir = inputDir.magnitude < leverRange ? inputDir 
        //     : inputDir.normalized * leverRange;
        // lever.anchoredPosition = clampedDir;

        ControlJoystickLever(eventData);  // 추가
        isInput = true;    // 추가
    }
        
    // 오브젝트를 클릭해서 드래그 하는 도중에 들어오는 이벤트
    // 하지만 클릭을 유지한 상태로 마우스를 멈추면 이벤트가 들어오지 않음    
    public void OnDrag(PointerEventData eventData)
    {
        // var inputDir = eventData.position - rectTransform.anchoredPosition;
        // var clampedDir = inputDir.magnitude < leverRange ? inputDir 
        //     : inputDir.normalized * leverRange;
        // lever.anchoredPosition = clampedDir;
        
        ControlJoystickLever(eventData);    // 추가
        isInput = false;    // 추가
    }
    
    // 추가
    public void ControlJoystickLever(PointerEventData eventData)
    {
        var inputDir = eventData.position - rectTransform.anchoredPosition;
        var clampedDir = inputDir.magnitude < leverRange ? inputDir 
            : inputDir.normalized * leverRange;
        lever.anchoredPosition = clampedDir;
        inputVector = clampedDir / leverRange;
    }
    
    public void OnEndDrag(PointerEventData eventData)
    {
        lever.anchoredPosition = Vector2.zero;
    }
}

 

이제 조작 기능을 추가할 차례이다.

 

이번에는 Vector2로 inputVector 변수와 bool 타입으로 isInput 변수를 추가한다.

 

그리고 OnBeginDrag와 OnDrag 이벤트 함수에서 inputVector 값을 넣어줄 차례인데, 두 이벤트 모두 동작하고 있는 함수의 내용이 완전히 동일하다는 것을 알 수 있다. 그렇기 때문에 ControlJoystickLever라는 함수를 새로 만들고 두 함수의 내용을 복사해서 붙여넣어 준다.

 

그 다음에는 ControlJoystickLever 함수에서 clampedDir를 leverRange로 나누어서 inputVector에 넣어준다. clampedDir를 바로 써도 될 것 같은데 굳이 leverRange로 나누어서 사용하는 이유는 이 clampedDir는 해상도를 기반으로 만들어진 값이라 캐릭터의 이동속도로 쓰기에는 너무 큰 값을 가지고 있기 때문이다.

 

이런 값으로 캐릭터를 움직이면 너무 빠른 속도로 캐릭터가 움직일게 분명하기 때문에 입력 방향의 값을 0-1 사이 값으로 만들어서 정규화된 값으로 캐릭터에 전달하기 위한 것이다.

 

그리고 화면 해상도를 기준으로 값이 정해지기 때문에 해상도가 바뀌면 입력 방향 값의 크기가 바뀌어서 캐릭터의 이동 속도가 바뀌는 문제도 있어서 0-1사이로 정규화된 값을 사용해야 한다. 캐릭터는 이렇게 전달받은 정규화된 이동 벡터에 이동속도를 곱해서 일정한 속도로 이동하게 된다.

 

그 다음엔 OnBeginDrag에서 isInput을 true로 바꿔주고 OnEndDrag에서는 false로 바꿔준다.

 

private void InputControlVector()
{
    Debug.Log(inputDirection.x + " / " + inputDirection.y);
    // 캐릭터에게 입력벡터를 전달
}

 

그 다음에는 구해낸 입력 벡터를 캐릭터에 전달하기 위한 함수로 InputContorlVector를 만든다. 이 함수 안에 캐릭터에게 이동 벡터를 전달하는 기능을 작성하면 된다. 우선 지금은 매개변수로 받은 inputVector의 값을 로그로 출력하는 코드만 작성해두자.

 

void Update()
{
    if(isInput)
    {
        InputControlVector();
    }
}

 

업데이트 함수로 가서 isInput이 true일 때, InputControlVector 함수를 호출해주면 됩니다. 

 

여기에서 한 가지 의문을 가질 수 있다. 이 InputControlVector 함수를 OnBeginDrag와 OnDrag 이벤트 함수에서도 호출할 수 있을 텐데 왜 굳이 isInput변수를 따로 만들어서 Update 함수에서 처리하는가 하는 것이다. 

 

이 부분은 OnDrag 이벤트 함수의 특성과 관련이 있다. 앞에서도 이야기했다시피 OnDrag 이벤트 함수는 오브젝트를 클릭하여 드래그하는 도중에 호출되는 이벤트이다. 하지만 여기에 꽤나 중요한 빈틈이 있다.

 

그것은 바로 클릭해서 드래그하는 도중에 클릭을 떼지 않고 마우스를 멈추면 더 이상 이벤트가 호출되지 않는다는 것이다. 그리고 다시 마우스를 움직이기 시작하면 이벤트가 호출된자. 한 마디로 드래그 도중에 마우스 이동을 멈추고 있는 동안에는 이벤트가 들어오지 않는다는 것이다.

 

그래서 드래그 도중에 터치의 이동이나 마우스 이동이 멈췄을 때도 InputControlVector 함수를 연속적으로 호출하기 위해서 isInput이 활성화된 상태일 때 Update 함수에서 지속적으로 호출하도록 만들어 준 것이다.

 

코드를 저장하고 에디터로 돌아가서 다시 테스트해보면 입력 벡터의 길이가 1이 넘지 않는 선에서 입력 방향이 출력되는 것을 볼 수 있다.

 

캐릭터 컨트롤러와 연결하기

 

이렇게 만들어진 가상 조이스틱을 캐릭터와 연결해서 조작할 수 있도록 만들어주어야 한다.

 

// 가상 조이스틱 클래스에서 컨트롤러를 소유
public CharacterController characterController;

private void InputControlVector()
{
    if (characterController)
    {
        characterController.Move(inputDirection);
    }
}

 

간단하게 예시를 들자면 위의 코드처럼 가상 조이스틱 클래스에서 캐릭터 컨트롤러를 소유하거나 콜백을 등록시켜서 호출하는 방법이 있다.

 

 

 

위의 이미지와 같은 방식으로 두 개의 조이스틱을 배치해서 사용하고 싶을 수도 있다.

 

public enum JoystickType { Move, Rotate }
public JoystickType joystickType;

private void InputControlVector()
{
    // 캐릭터에게 입력벡터를 전달
    switch(joystickType)
    {
        case JoystickType.Move:
            controller.Move(inputDirection);
            break;

        case JoystickType.Rotate:
            controller.LookAround(inputDirection);
            break;
    }
}

 

그럴 때는 가상 조이스틱에 타입을 설정할 수 있는 열거형을 만들어서 조이스틱의 타입에 따라 다르게 동작하게 만들어주면 된다.

반응형
  1. ㅇㅇ 2021.03.04 16:52

    좋은 글 친절한 설명 너무 잘 보고 갑니다!
    다만, isInput = false가 OnDrag가 아닌 OnEndDrag함수에 와야하지 않을까 싶습니다

  2. 나도 2021.07.15 10:02

    친절한 설명 덕분에 이해하면서 쭉쭉 배웠습니다. 다만 ㅇㅇ님 댓글처럼 false 부분은 End 함수쪽으로 가야해요 실수같습니다!!

Programming 

TPS 캐릭터 조작 기능 구현하기

 

작성 기준 버전 :: 2019.2

 

[이 포스트의 내용은 유튜브 영상으로도 시청하실 수 있습니다]

 

지난 포스트 중 하나에서는 마우스를 이용해서 클릭한 위치로 캐릭터를 이동시키는 RPG나 AOS 게임에서 주로 사용되는 캐릭터 조작 방법을 구현했었다.

 

이번에는 키보드로 이동하고 마우스로 원하는 대상을 바라보게 하는 TPS 게임에서 사용되는 캐릭터 조작 방법을 구현해보도록 하자.

 

리소스 임포트와 기본 애니메이션 세팅

 

본격적인 구현에 들어가기 전에 캐릭터로 사용할 모델링과 애니메이션을 영상 하단의 링크에서 다운로드 받아서 임포트한다.

 

practice-animation.zip
다운로드

 

FBX 파일을 임포트하고 나면 먼저 캐릭터의 이동 애니메이션을 보여주기 위한 애니메이션 세팅을 해보자.

 

 

먼저 임포트된 FBX 파일 중에 Run, Stand의 애니메이션 임포트 세팅 중에서 Loop Time을 체크하고 적용한다.

 

 

그리고 애니메이터 컨트롤러를 생성한 뒤 Bool 타입으로 isMove 파라미터를 추가한다. 

 

 

그 다음에는 Stand 애니메이션을 기본 스테이트로 추가하고 Run 애니메이션을 추가한 뒤 isMove의 상태에 따라서 Stand와 Run을 왔다갔다 하도록 세팅해준다.

 

캐릭터 배치와 카메라 세팅

 

 

이 작업이 끝나면 씬에 캐릭터가 돌아다닐 바닥이 될 Plane을 하나 배치하고 BoxMan@Stand를 배치하고 BoxMan에 붙어있는 Animator 컴포넌트의 비어있는 Controller 프로퍼티에 방금 만든 애니메이터 컨트롤러를 할당해준다.

 

 

애니메이션에 대한 세팅이 끝나면 카메라를 이동시켜서 TPS 게임에서 자주 보이는 카메라 구도를 만들어보자. TPS 시점의 게임에서는 이런 구도의 카메라 시점이 주로 사용된다.

 

일인칭으로 보여지는 FPS 게임은 이것과는 약간 다르게 캐릭터의 몸이 거의 보이지 않고 손 정도만 보이게 시점을 세팅하게 되지만 이후의 기능 구현 자체는 거의 비슷하게 진행하면 된다.

 

본격적인 조작 기능 구현에 들어가기에 앞서 카메라와 캐릭터 구조를 조금 더 살펴보자.

 

지금 시점 자체는 나쁘지 않지만 조작 기능이 들어가기에는 아쉬움이 많다.

 

 

특히 마우스를 상하좌우로 움직이면 카메라 역시 마우스의 움직임에 맞게 회전해야 하는데, 카메라를 잡고 위/아래/좌/우로 회전시켜보면 전혀 적절하지 못하다는 것을 깨달을 수 있을 것이다.

 

해결책 1 : 카메라를 캐릭터의 자식 게임 오브젝트로 만들기

 

 

첫 번째로 생각해볼 만한 방법은 카메라를 캐릭터의 자식 게임 오브젝트로 만드는 것이다.

 

 

카메라를 BoxMan의 자식 게임 오브젝트로 만들면 좌우로 움직이는건 정상적으로 동작한다.

 

 

하지만 위/아래로 움직여보면 캐릭터가 같이 기울어져서 적절하지 못한 것을 알 수 있다. 적절한 카메라 회전을 위해서는 캐릭터를 회전시키지 않으면서도 캐릭터를 중심으로 카메라를 회전시키는 방법을 찾아야 할 것이다.

 

해결책 2 : 카메라 암(Camera Arm) 만들기

 

 

다른 해결책으로는 카메라 암(Camera Arm) 역할을 할 빈 게임 오브젝트를 하나 만들고 BoxMan의 머리 정도의 위치로 이동시켜 주고 카메라를 이 빈 게임 오브젝트의 자식 게임 오브젝트로 만들어준다. 

 

 

이렇게 세팅해주면 상하좌우 모든 방향의 회전에도 문제없이 카메라가 캐릭터를 중심으로 움직이는 것을 확인할 수 있다.

 

 

이대로 Camera Arm을 BoxMan 밑에 배치해도 되지만 그렇게 하면 BoxMan의 회전에 Camera Arm이 묶이게 되기 때문에 Character라는 이름의 빈 게임 오브젝트를 만들어서 BoxMan과 Camera Arm을 그 아래에 배치하자. 이렇게 해주면 BoxMan의 회전과 Camera Arm의 회전이 분리되서 관리하기가 쉬울 것이다.

 

카메라 회전 기능 구현하기

 

이제 본격적으로 캐릭터 조작 기능을 만들어보자.

 

TPSCharacterController라는 이름으로 C# 스크립트를 생성하고 다음 코드를 따라 작성하자.

 

public class TPSCharacterController : MonoBehaviour
{
    [SerializeField]
    private Transform characterBody;
    [SerializeField]
    private Transform cameraArm;

    Animator animator;

    void Start()
    {
        animator = characterBody.GetComponent<Animator>();
    }
}

 

Transform 타입으로 BoxMan 모델을 관리할 characterBody 변수와 카메라의 회전을 관리할 cameraArm 변수를 선언하고 애니메이션을 관리할 Animator 변수를 선언하고 Start 함수에서 characterBody.GetComponent 함수로 BoxMan에 붙어있는 Animator 컴포넌트를 가져와서 저장해둔자.

 

private void LookAround()
{
    Vector2 mouseDelta = new Vector2(Input.GetAxis("Mouse X"), Input.GetAxis("Mouse Y"));
    Vector3 camAngle = cameraArm.rotation.eulerAngles;

    cameraArm.rotation = Quaternion.Euler(camAngle.x - mouseDelta.y, camAngle.y + mouseDelta.x, camAngle.z);
}

 

먼저 마우스의 움직임에 따라서 카메라를 회전시키는 기능을 구현하기 위해서 LookAround 함수를 만든다. 

 

LookAround 함수에서는 먼저 마우스가 이전 위치에 비해서 얼마나 움직였는지 알아내야 한다. 마우스가 움직인 수치는 Input.GetAxis 함수에 "Mouse X"와 "Mouse Y"를 매개변수로 넣어서 가져올 수 있다. 

 

"Mouse X"로는 마우스를 좌우로 움직인 수치를 가져올 수 있고 "Mouse Y"로는 마우스를 위아래로 움직인 수치를 가져올 수 있다.

 

이 두 값을 Vector2로 묶어서 mouseDelta 변수에 저장한다. 참고로 프로그래밍에서 이전 값과 현재 값의 차이를 주로 delta라는 용어로 표현한다. 

 

그 다음에는 cameraArm의 rotation 값을 오일러 각으로 변환해둔다. 그리고 camAngle과 mouseDelta를 합쳐서 새로운 회전값을 만들어낸 다음 cameraArm.rotation에 넣어줘야 한다.

 

우선 마우스 좌우 움직임으로 카메라 좌우 움직임을 제어해야 하기 때문에 mouseDelta의 x 값을 camAngle의 y에 더해준다. 그리고 마우스 수직 움직임은 카메라 상하 움직임을 제어해야 하기 때문에 mouseDelta의 y 값을 camAngle의 x에 추가해준다.

 

이 마우스 수직 움직임의 경우에는 한국에서는 마우스를 위로 움직이면 위를 쳐다보고 아래로 움직이면 아래를 쳐다보게 하는 방식을 사용하는 유저들이 더 많지만 북미에서는 이 움직임을 반대로 사용하는 경우가 꽤 있다고 한다. 그렇게 때문에 별도의 옵션을 둬서 두 가지 조작 방식 중에 사용자가 원하는 방식을 선택할 수 있도록 하는게 좋다. 

 

우선 한국에서 주로 쓰는 방식으로 구현하자. 마우스 방향과 바라보는 방향을 일치시키려면 mouseDelta.y를 camAngle.x에서 빼주면 된다.

 

void Update()
{
    LookAround();
}

 

그리고 LookAround 함수를 Update 함수에 호출하게 만들어준 뒤 코드를 저장하고 에디터로 돌아가보자.

 

 

그 다음 Character 게임 오브젝트에 생성한 컨트롤러 컴포넌트를 붙이고 프로퍼티들을 할당해준다.

 

 

게임을 플레이시키고 마우스를 움직여보면 우선 카메라는 제대로 움직이는 것 같지만 카메라 상하 회전에 제한이 없어서 그런지 마우스를 움직이다보면 화면이 뒤집어지는 경우가 발생한다.

 

카메라 각도 제한하기

 

이런 문제를 막기 위해서는 카메라의 x 회전을 제한해야 한다.

 

위쪽 회전은 약 70도를 제한하고 아래쪽 회전은 약 25도를 제한하도록 하자. 다만 x 회전 값을 출력해보면 알겠지만 수평을 기준으로 위쪽으로 회전하면 0도에서 90도까지 각도가 나오고 아래쪽으로 회전하면 360도부터 270도까지 각도가 나온다.

 

private void LookAround()
{
    Vector2 mouseDelta = new Vector2(Input.GetAxis("Mouse X"), Input.GetAxis("Mouse Y"));
    Vector3 camAngle = cameraArm.rotation.eulerAngles;
    
    //추가
    float x = camAngle.x - mouseDelta.y;
    if (x < 180f)
    {
        x = Mathf.Clamp(x, -1f, 70f);
    }
    else
    {
        x = Mathf.Clamp(x, 335f, 361f);
    }

    cameraArm.rotation = Quaternion.Euler(x, camAngle.y + mouseDelta.x, camAngle.z);
}

 

우선 camAngle.x - mouseDelta.y로 만들어낸 값을 바로 회전값에 넣지 말고 따로 x에 저장한다. 그리고 회전값에 넣어주기 전에 x값의 상태에 따라서 처리하는 과정을 구현해야 한다.

 

먼저 x가 180도보다 작은 경우는 위쪽으로 회전하는 경우이므로 x의 값을 -1도에서 70도까지 제한시켜둔다. 여기서 0도가 아닌 -1도로 최저점을 잡는 이유는 0도로 잡으면 카메라가 수평면 아래로 내려가지 않는 문제가 발생하기 때문이다.

 

그리고 x각이 180도보다 큰 경우는 아래쪽으로 회전하는 경우로 25도를 제한하기 위해서 335도에서 361도 사이로 값을 제한시킨다.

 

이렇게 구해진 x값을 camAngle의 x값 자리에 넣어준다.

 

 

카메라 회전을 제한시킨 기능을 에디터에서 테스트해보면 위아래 회전에 제한이 걸려서 카메라가 뒤집어지는 문제가 발생하지 않는 것을 확인할 수 있다.

 

이동기능 추가하기

 

이제 여기에 이동 기능을 추가할 차례이다.

 

이동방향 구하기

 

private void Move()
{
    Debug.DrawRay(cameraArm.position, cameraArm.forward, Color.red);
}

 

움직이는 기능을 추가하기 위해서 Move 함수를 만든다. 

 

캐릭터를 이동시키기 위해서는 먼저 캐릭터가 이동할 방향을 찾아야 한다. 이동할 방향으로 가장 적합한 대상은 카메라가 바라보고 있는 방향일 것이다.

 

cameraArm.forward를 사용하면 될 것 같은데 우선 이 값이 적당한 방향인지 확인하기 위해서 Debug.DrawRay로 카메라 암 위치에서 cameraArm.forward 방향으로 에디터에서 선으로 그려보자.

 

void Update()
{
    LookAround();
    Move();
}

 

Update 함수에서 Move 함수를 호출하게 만든다.

 

 

게임을 플레이시키고 마우스를 움직여보면 씬 뷰에서 Camera Arm 위치에 빨간색 선이 카메라 암이 쳐다보는 방향을 표시하는 것을 볼 수 있다.

 

캐릭터의 이동 방향으로 쓰기에 적당해 보이지만 위쪽이나 아래쪽을 쳐다볼 때는 선이 기울어지는 것을 볼 수 있다. 정상적인 이동 방향을 보장하기 위해서는 이 선을 수평으로 변환해야 한다.

 

private void Move()
{
    Debug.DrawRay(cameraArm.position, 
        new Vector3(cameraArm.forward.x, 0f, cameraArm.forward.z).normalized, Color.red);
}

 

새 벡터를 만들면서 cameraArm.forward의 y값을 넣지 않는 것으로 높이를 없애고 normalized 시켜서 길이를 1로 맞춰준다.

 

 

다시 에디터에서 게임을 플레이시키고 마우스를 움직여보면 위나 아래를 쳐다봐도 빨간 선의 방향이 수평을 유지하는 것을 볼 수 있다.

 

이동기능 구현하기

 

private void Move()
{
    Vector2 moveInput = new Vector2(Input.GetAxis("Horizontal"), Input.GetAxis("Vertical"));
    bool isMove = moveInput.magnitude != 0;
    animator.SetBool("isMove", isMove);
    if (isMove)
    {
        Vector3 lookForward = new Vector3(cameraArm.forward.x, 0f, cameraArm.forward.z).normalized;
        Vector3 lookRight = new Vector3(cameraArm.right.x, 0f, cameraArm.right.z).normalized;
        Vector3 moveDir = lookForward * moveInput.y + lookRight * moveInput.x;

        characterBody.forward = lookForward;
        transform.position += moveDir * Time.deltaTime * 5f;
    }
}

 

그럼 다시 스크립트 에디터로 돌아가서 이동 기능을 구현하는 것을 진행해보자.

 

우선 Input.GetAxis 함수로 "Horizontal"과 "Vertical"로 이동 입력 값을 가져와서 moveInput 벡터를 만든다. 그리고 moveInput의 길이로 입력이 발생하고 있는지 판정하여 isMove 변수에 넣어준다.

 

moveInput의 길이가 0이면 이동 입력이 없는 것이고 0이 아니면 이동 입력이 발생하고 있는 것이다.

 

이 isMove를 animator의 "isMove"에 세팅해주면 이동 입력이 발생할 때는 걷는 애니메이션을 재생하고, 이동 입력이 없을 때는 대기 애니메이션을 재생할 것이다.

 

그리고 아까 전에 구해낸 방향을 바라보는 방향으로 저장한다. 거기에 추가로 cameraArm.right 역시 정면과 마찬가지로 평면화시켜서 저장해둔다.

 

이렇게 구해낸 lookForward와 lookRight에 moveInput을 곱해서 더하면 바라보고 있는 방향을 기준으로 이동 방향을 구할 수 있다. 그리고 구해낸 이동 방향과 Time.deltaTime, 이동속도를 모두 곱해서 transform.position에 더해주면 캐릭터를 이동시킬 수 있게 된다.

 

이동시 바라보는 방향 1 : 카메라가 바라보는 방향

 

private void Move()
{
    Vector2 moveInput = new Vector2(Input.GetAxis("Horizontal"), Input.GetAxis("Vertical"));
    bool isMove = moveInput.magnitude != 0;
    animator.SetBool("isMove", isMove);
    if (isMove)
    {
        Vector3 lookForward = new Vector3(cameraArm.forward.x, 0f, cameraArm.forward.z).normalized;
        Vector3 lookRight = new Vector3(cameraArm.right.x, 0f, cameraArm.right.z).normalized;
        Vector3 moveDir = lookForward * moveInput.y + lookRight * moveInput.x;

        characterBody.forward = lookForward;
        transform.position += moveDir * Time.deltaTime * 5f;
    }
}

 

마지막으로 캐릭터가 바라보는 방향을 정하는 방법을 여러 가지로 구현할 수 있다.

 

첫 번째 방법은 캐릭터를 이동시킬 때 시선을 정면에 고정시키는 방법이다.

 

characterBody의 forward를 lookForward로 정해주면 된다.

 

 

캐릭터를 움직여보면 캐릭터를 앞뒤좌우 어느 방향으로 움직이든 카메라가 바라보는 방향을 바라본다.

 

이 기능을 위해서는 캐릭터가 좌우로 움직일 때는 옆걸음을 치는 애니메이션을 넣고, 뒤로 움직일 때는 뒷걸음을 치는 애니메이션을 넣어줘야 할 것이다.

 

이런 식으로 움직이는 방법은 캐릭터가 언제나 정면을 바라보기 때문에 좀 더 직관적인 컨트롤을 할 수 있다는 장점이 있다.

 

이동시 바라보는 방향 2 : 이동방향

 

private void Move()
{
    Vector2 moveInput = new Vector2(Input.GetAxis("Horizontal"), Input.GetAxis("Vertical"));
    bool isMove = moveInput.magnitude != 0;
    animator.SetBool("isMove", isMove);
    if (isMove)
    {
        Vector3 lookForward = new Vector3(cameraArm.forward.x, 0f, cameraArm.forward.z).normalized;
        Vector3 lookRight = new Vector3(cameraArm.right.x, 0f, cameraArm.right.z).normalized;
        Vector3 moveDir = lookForward * moveInput.y + lookRight * moveInput.x;

        characterBody.forward = moveDir;
        transform.position += moveDir * Time.deltaTime * 5f;
    }
}

 

characterBody.forward를 moveDir로 지정해주면 된다.

 

 

캐릭터를 움직여보면 캐릭터는 카메라가 바라보는 방향을 기준으로 앞뒤좌우로 움직이지만 정면을 바라보지 않고 이동해야하는 방향을 바라보는 것을 알 수 있다.

 

이렇게 구현된 컨트롤은 정면만 바라보는 컨트롤에 비해서 복잡하기는 하지만 좀 더 섬세한 방향 컨트롤이 가능해진다.

 

이 두 가지 방식 중에서 게임에서 필요한 방식을 선택해서 구현하면 된다.

반응형
  1. 테샤르 2020.06.08 12:56 신고

    잘보고갑니다!!

  2. 아무거나 2021.03.13 01:00

    혹시 이동기능 코드좀 올려주실수 있나요? 변수 선언 부분에서 cameraarm 선언부랑 characterbody 부분 선언을 어떻게 해야할지 감이 안와서요

  3. 현신 2021.10.06 22:28

    우오오 매우 감사합니다! 딱 제가 찾던 내용이네요… 이렇게 체계적으로 살펴봐주시고, gif로 어떤 느낌인지도 보여주시니 정말 훌륭한 글 감사합니다.

UI 비법서 (7) 

Button 컴포넌트

 

작성 기준 버전 :: 2019.2

 

[이 포스트의 내용은 유튜브 영상으로도 시청하실 수 있습니다.]

 

아마 게임을 하면서 플레이어와 제일 많은 상호작용을 하는 UI 요소는 바로 버튼일 것이다. 버튼은 마우스의 클릭에 반응해서 지정해둔 기능을 동작하게 하는 UI이다. 이렇게 설명만 들어도 간단해보이는 Button 컴포넌트가 이렇게 영상까지 만들어서 이야기할 필요가 있을까 싶을 것이다.

 

버튼 게임 오브젝트 생성하기

 

하지만 이렇게 간단해보이는 Button 컴포넌트에도 유용하게 사용할 수 있는 팁들이 꽤 있다.

 

 

하이어라키 뷰에 우클릭하고 [UI > Button]을 선택하면 버튼 게임 오브젝트를 생성할 수 있다.

 

 

생성된 버튼 게임 오브젝트에는 Image 컴포넌트와 Button 컴포넌트가 부착되어 있는 것을 볼 수 있다. 거기에 기본적으로 버튼 게임 오브젝트 아래에는 버튼에 글자도 표시되게 Text 컴포넌트가 붙어있는 게임 오브젝트도 자식으로 있는 것을 알 수 있다. 이게 버튼의 제일 기본적인 상태이다.

 

Button 컴포넌트의 프로퍼티

 

그럼 Button 컴포넌트의 프로퍼티들을 하나씩 알아보도록 하자.

 

Interactable

 

첫 번째 프로퍼티는 Interactable이다. Interactable은 버튼이 상호작용 가능한지를 정하는 프로퍼티입니다.

 

 

먼저 Interactabla이 체크된 상태에서 클릭해보면 클릭할 때마다 버튼이 깜빡깜빡하며 버튼과 마우스 사이의 상호작용이 일어나고 있는 것을 확인할 수 있다.

 

 

Interactable을 끄면 먼저 버튼의 색깔이 약간 어두워지고 반투명해지는 것을 볼 수 있다. 그 상태에서 버튼을 클릭해보면 아까와는 다르게 상호작용하면서 발생하는 깜빡임이 나타나지 않는 것을 알 수 있다.

 

이 프로퍼티는 특정한 조건에 따라서 버튼을 활성화/비활성화 하는 기능으로 응용할 수 있다.

 

Transition

 

그다음 프로퍼티는 Transition이다. Transition은 버튼이 각 상호작용 상태에서 어떤 모습으로 보일 것인지를 결정한다.

 

 

버튼의 상호작용 상태로는 먼저 아무런 상호작용도 일어나고 있지 않은 Normal, 마우스가 버튼 위에서 호버링되고 있는 상태인 Highlighted, 버튼을 클릭하고 손을 떼지 않은 상태인 Pressed, 버튼에 클릭을 하고 손을 뗀 상태인 Selected, 버튼이 비활성화된 Disabled. 

 

이렇게 총 5가지가 있다.

 

그리고 선택 가능한 Transition의 종류로는 None, Color Tint, Sprite Swap, Animation이 있다.

 

None

 

None 타입의 트랜지션은 버튼과의 상호작용이 일어나도 아무런 표현을 하지 않는 타입이다.

 

Color Tint

 

버튼을 생성하면 기본 트랜지션으로 설정되는 Color Tint는 버튼에 상호작용을 했을 떄 상태변화를 생상으로 표현하는 것이다.

 

위에서 버튼을 클릭할 때마다 버튼이 깜빡깜빡하던 것을 기억할 것이다. 여기 Pressed를 보면 색깔이 약간 어두운 색으로 되어 있다. 이 Pressed에 설정된 색상이 버튼 이미지에 합쳐져서 버튼을 클릭할 때마다 깜빡거렸던 것이다.

 

Sprite Swap

 

Sprite Swap은 버튼의 상호작용 상태에 따라서 버튼 게임 오브젝트의 Image를 완전히 교체하는 방식이다.

 

 

Transition을 Sprite Swap으로 바꾸면 각 버튼 상호작용 상태에 따라서 색깔을 바꾸던 프로퍼티들이 스프라이트를 넣도록 바뀐 것을 볼 수 있다.

 

Sprite Swap 타입에서는 Normal 상태가 없는 것을 볼 수 있는데 Sprite Swap의 기본 상태는 버튼에 붙은 기본 이미지의 Image Source여서 바꿔넣을 필요가 없기 때문이다.

 

  

버튼 이미지에 기본 이미지를 넣고 Pressed에 버튼이 눌린 이미지를 넣으면 위의 그림과 같이 버튼이 눌리는 듯한 연출이 가능하다.

 

Animation

 

Animation 타입은 버튼의 색깔만 바뀌는 Color Tint나 이미지만 바뀌는 Sprite Swap에 비해서 좀 더 복잡하고 다양한 연출이 필요할 때 사용한다.

 

 

Animation 타입에서 Transition의 하위 프로퍼티는 각 상태에 맞는 이름으로 되어있는데 버튼 애니메이션에 추가될 스테이트와 파라미터의 이름을 지정하는 부분입니다. 이 부분은 따로 손댈 필요가 없다.

 

아래에 있는 Auto Generate Animation 버튼을 누르면 버튼에 대한 애니메이터 컨트롤러를 생성하는 대화상자가 뜬다. 여기서 애니메이터를 생성하면 하면 자동으로 버튼 게임 오브젝트에 애니메이터 컴포넌트가 추가되고 애니메이터에서 필요한 스테이트와 파라미터들이 자동으로 생성된다.

 

버튼 게임 오브젝트를 선택한 상태로 [Ctrl +6] 단축키를 누르면 애니메이션 뷰가 열리는데 개발자는 여기서 각 상태의 애니메이션 키만 잡아주면 된다.

 

 

  

이미지 하나를 버튼의 자식 게임 오브젝트로 만들고 버튼 위에 마우스를 올렸을 때, 이미지를 활성화 시키면서 360도 회전시키는 애니메이션을 만들어보자.

 

 

그 다음 플레이시킨 뒤 버튼에 마우스를 올려보면 버튼 앞에서 사각형이 나타나서 회전하는 것을 볼 수 있다.

 

이런 연출은 확실히 Color Tint나 Sprite Swap으로는 할 수 없는 연출이다. 일반적으로는 Color Tint나 Sprite Swap을 사용하지만 버튼과의 상호작용 연출에서 이런 다양한 연출을 사용하려면 Animation 타입의 Transition을 사용하는 것이 좋다.

 

Navigation

 

그 다음 프로퍼티인 Navigation은 모든 UI 컴포넌트에 있는 것으로 키보드나 패드로 UI를 선택할 때 어떤 순서로 포커스가 넘어갈 것인지를 결정하는 옵션dl다.

 

On Click 이벤트

 

 

On Click()은 버튼을 눌렀을 때 실행될 기능을 넣을 수 있는 On Click 이벤트 리스트이다.

 

public class ButtonTester : MonoBehaviour
{
    public void OnClickButton()
    {
        Debug.Log("Button Click!");
    }
}

 

On Click에 실행될 함수를 이벤트로 등록해주기 위해서는 스크립트에서 public으로 된 함수를 만들면 된다.

 

 

그리고 버튼에 스크립트로 작성한 컴포넌트를 추가하고 On Click 항목의 [+] 버튼을 누른 뒤 비어있는 오브젝트 란에 호출할 함수를 가진 컴포넌트를 넣어주고 호출해야할 함수를 선택해주면 된다.

 

이렇게 함수를 선택해주면 이 버튼이 클릭되었을 때, 이 함수가 실행되게 된다.

 

스크립트에서 On Click 이벤트 등록하기

 

버튼의 응용 기술로는 이렇게 에디터에서 고정으로 이벤트를 등록하지 않고 스크립트에서 동적으로 등록해주는 방법이 있다.

 

using UnityEngine.UI;

public class ButtonTester : MonoBehaviour
{
    Button button;

    public void OnClickButton()
    {
        Debug.Log("Button Click!");
    }

    void Start()
    {
        button = GetComponent<Button>();
        button.onClick.AddListener(OnClickButton);
    }
}

 

스크립트에서 Button 컴포넌트와 같은 UI의 기능을 사용하기 위해서는 UI 네임 스페이스를 using 선언해줘야 한다.

 

그 다음에는 Button 변수를 선언하고 Start 함수에서 GetComponent로 게임 오브젝트에 부착된 Button 컴포넌트를 가져온다. 그리고 button.onClick.AddListener에 함수를 넣어주면 이 함수가 이 버튼을 클릭했을 때 호출되는 이벤트로 등록된다.

 

게임을 플레이해보면 Button 컴포넌트의 On Click에서는 아무런 이벤트가 등록되지 않은 것처럼 보이지만 게임 뷰에서 버튼을 클릭해보면 스크립트에서 버튼의 이벤트로 등록해준 ButtonTester의 OnClickButton 함수가 정상적으로 호출되어 로그를 출력하는 것을 볼 수 있다.

 

버튼 터치 영역 키우기

 

모바일 기기에서 작은 버튼은 터치가 잘 안되거나 잘못 터치할 확률이 높다. 이런 문제를 해결하기 위해서 그냥 버튼의 크기를 키워버릴 수도 있지만 그렇게 하면 디자이너가 지정해준 전체적인 UI 레이아웃이 깨지게 될 것이다. 그러니 실제로 보이는 버튼의 크기는 키우지 않고 버튼의 터치 영역만 키워야 한다.

 

 

우선 버튼의 자식 컴포넌트로 이미지를 하나 추가하고 적당히 버튼을 덮도록 세팅한 다음 투명하게 만들어주면 된다.

 

 

그러면 눈에 보이는 버튼 이미지보다 바깥을 클릭해도 버튼이 무사히 동작하는 것을 볼 수 있다.

 

이것을 응용해서 버튼보다 작은 투명 이미지를 만들고 그 투명 이미지를 제외한 나머지의 Raycast Target을 끄는 방법으로 실제 버튼 이미지보다 작은 영역만 클릭 가능하게 만드는 것도 가능하다.

 

버튼 이미지보다 작은 영역에 터치를 받는 테크닉은 잘 사용되지 않을 것 같지만 버튼 이미지 리소스 외곽에 그림자나 글로우가 들어간 경우에 글로우 영역이나 그림자 영역을 제외하고 실제 버튼 영역에만 클릭을 받기 위해서 사용되는 경우가 종종 있다.

 

반응형
  1. 테샤르 2020.05.25 13:07 신고

    잘보고갑니다!

+ Recent posts