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

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

이번에는 앞에서 만든 와이어 수리 임무 UI를 게임과 직접 연결해봅시다.

사용 엔진 버전 : 2019.4

타임라인

0:00 인트로

0:12 초기화 기능 추가

0:32 닫힘 기능 만들기

1:44 임무 오브젝트 배치와 UI 연결

6:23 아웃트로

스크립트

인트로

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

지난 시간까지는 와이어 수리하기 임무의 기본 구성을 만들었으니 이제 이 기능을 본격적으로 게임과 연결해보겠습니다.

초기화 기능 추가

먼저 게임에서 임무창이 꺼졌다가 켜졌을 때 내용이 다시 초기화되는 기능을 만들어야 합니다.

FixWiringTask 스크립트를 열겠습니다.

그리고 OnEnable 함수에서 LeftWires 리스트에 들어있는 왼쪽 와이어들을 대상으로 연결을 초기화하는 코드를 작성합니다.

닫힘 기능 만들기

그 다음으로는 임무를 완료하거나 도중에 그만 뒀을 때 UI가 닫히도록 만들 차례입니다.

Open 함수와 Close 함수를 만들어줍니다.

이 Open 함수에서는 임무 UI를 켜는 것은 물론 도중에 캐릭터가 움직이지 않도록 IsMoveable을 false로 바꾸는 작업도 해야합니다.

Close 함수는 Open 함수와 반대로 동작하도록 만들면 됩니다.

그 다음에는 CheckCompleteTask 함수를 만들고 와이어를 검사해서 모든 와이어가 연결된 상태에서만 UI가 닫히도록 코드를 작성합니다.

그리고 이 함수는 Update 함수에서 오른쪽 와이어와 연결되고 끊어지는 순간마다 검사하도록 만들어줍니다.

코드를 모두 작성한 다음에는 저장하고 에디터로 잠시 돌아갑니다.

에디터에서는 Task UI 오브젝트 아래에 이미지를 하나 추가하고 화면 전체를 덮게 만들어 줍니다.

그리고 거기에 Button 컴포넌트를 붙이고 Transition을 None으로 바꾼 뒤 OnClick 이벤트에 FixWiring의 Close 함수를 등록해줍니다.

임무 배치하기

이제 임무를 실행하기 위한 오브젝트를 배치할 차례입니다.

먼저 맵이 잘 보이도록 만들기 위해 하이어라키 뷰에서 캔버스와 라이트맵 오브젝트를 꺼줍니다.

그리고 맵 리소스에서 관리실의 전선함 이미지를 찾아서 관리실 복도에 배치해주고 머티리얼을 M_Highlight로 변경해줍니다.

그 다음엔 배치한 스프라이트를 복제해서 원본의 자식 컴포넌트로 만들고 크기를 살짝 키운 뒤 Order in Layer를 원본 스프라이트보다 뒤로 가도록 설정해줍니다.

그리고 스프라이트 렌더러의 머티리얼에 전에 만든 M_Outline 머티리얼을 할당해줍니다.

BoxCollider2D 컴포넌트도 붙여주고 Is Trigger를 체크한 뒤 복도를 적당히 커버하도록 콜라이더의 크기와 위치를 수정합니다.

그리고 Sprite Renderer 컴포넌트를 비활성화 시켜줍니다.

이제 이 콜라이더에 캐릭터가 닿았을 때 색을 변경하도록 기능을 만들어야 하는데, 이전에 만든 OutlineObject 스크립트를 조금 확장하도록 하겠습니다.

OutlineObject 스크립트를 찾아서 열어줍니다.

스크립트가 열리고 나면 SpriteRenderer 변수의 지정자를 protected로 변경해줍니다.

그리고 OnTriggerEnter2D, OnTriggerExit2D 이벤트 함수들 역시 protected로 지정자를 변경하고 virtual 키워드를 붙여줍니다.

그 다음에는 잠시 에디터로 돌아가서 MissionOutlineObject라는 이름으로 새 스크립트를 생성합니다.

스크립트 생성이 완료된 다음에는 클래스의 상속을 MonoBehaviour에서 OutlineObject로 바꿔줍니다.

실제 기능은 나중에 구현하도록 하고 저장하고 에디터로 돌아가서 앞에서 만든 아웃라인 오브젝트에 컴포넌트를 붙여줍니다.

그 다음에는 FixWiringTaskObject 스크립트를 생성하고 스크립트 에디터를 엽니다.

이 스크립트에서는 먼저 Sprite 타입의 UseButtonSprite와 SpriteRenderer 타입의 SpriteRenderer 변수를 선언해줍니다.

그리고 Start 함수에서는 GetComponent 함수로 게임오브젝트에 부착된 SpriteRenderer를 가져오고 가져온 SpriteRenderer로부터 머티리얼을 인스턴싱하도록 코드를 작성해줍니다.

그 다음에는 OnTriggerEnter2D와 OnTriggerExit2D 이벤트 함수를 만들어줍니다.

이 두 함수에서는 IngameCharacterMover의 접근을 감지해서 머티리얼의 _Highlighted 값을 바꾸도록 해줍니다.

그 다음에는 IngameUIManager로 이동합니다.

그리고 스크립트의 상단에 UnityEngine.UI 네임스페이스와 UnityEngine.Events 네임스페이스를 using 선언해줍니다.

그리고 멤버 변수로 Button 타입의 useButton과 Sprite 타입의 originUseButtonSprite를 선언해줍니다.

그 다음에는 SetUseButton 함수를 만들고 useButton의 sprite를 교체한 뒤 버튼에 이벤트를 등록해줍니다.

이어서 UnsetUseButton 함수를 만들고 useButtone을 원상태로 돌리는 코드를 작성해줍니다.

이 함수들을 작성하고 난 다음에는 FixWiringTaskObject 스크립트로 이동해서 OnTriggerEnter2D와 OnTriggerExit2D 함수에서 호출하도록 만들어 줍니다.

<재녹음>이때 버튼 이벤트에 등록할 OnClickUse 함수를 만들어두겠습니다.

그리고 IngameUIManager 스크립트으로 이동해서 fixWiringTask 변수를 만들어서 캐싱이 가능하게 만들어줍니다.

다시 FixWiringTaskObject 스크립트로 돌아가서 OnClickUse 함수에서 FixWiringTask UI를 열도록 코드를 작성합니다.

코드를 모두 작성한 다음에는 저장하고 에디터로 돌아갑니다.

에디터로 돌아온 다음에는 앞에서 맵에 배치해둔 전선함 스프라이트 오브젝트에 콜라이더를 배치하고 위치를 잡아준 뒤 Is Trigger 체크해줍니다.

그리고 FixWiringTaskObject 컴포넌트를 붙이고 스프라이트 프로퍼티에 Use 버튼 스프라이트를 넣어줍니다.

그 다음에는 IngameUIManager 컴포넌트에 비어있는 프로퍼티들을 채워줍니다.

작업을 모두 마친 다음에는 게임을 빌드하고 실행해서 테스트합니다.

테스트를 진행해보면 전선함 근처에 다가가면 오브젝트가 강조되고 Use 버튼이 활성화됩니다.

그리고 버튼을 누르면 와이어 연결 임무 UI가 뜨고 전선을 모두 알맞게 연결하면 UI가 꺼지는 모습을 볼 수 있습니다.

아웃트로

이번 영상에서는 맵에 전선함 오브젝트를 만들고 앞에서 만든 와이어 연결 임무 UI와 연결해보았습니다.

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

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

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

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

[투네이션]

[Patreon]

[디스코드 채널]

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

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

이번에는 전선 수리하기 임무에서 전선에 색을 입히고 같은 색 전선끼리 연결되었을 때 불빛이 들어오는 기능을 만들어봅시다!

예제 : https://drive.google.com/file/d/1W_xeHVrH7KueNOgW-HRGONCs5qFVlsFA/view?usp=sharing

사용 엔진 버전 : 2019.4

타임라인

0:00 인트로

0:09 각 와이어에 색깔 입히기

2:25 와이어를 연결했을 때 불 들어오게 하기

5:50 아웃트로

스크립트

인트로

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

이번에도 지난 시간에 이어서 임무를 만들어 보겠습니다.

각 와이어에 색깔 입히기

지난 영상에서는 끊어진 전선을 연결하는 기능을 만들었으니 각 전선이 어디에 연결되어야 하는지 알려주기 위해서 전선들에 색깔을 부여해보겠습니다.

먼저 FixWiringTask 스크립트로 이동해서 연결되어야 하는 전선의 색을 표시하는 WireColor 열거형을 선언해줍니다.

그리고 그 다음에는 LeftWire 스크립트로 이동해서 방금 만든 WireColor 열거형 타입을 이용한 프로퍼티를 선언하고 색을 입혀줄 전선 이미지들을 담고 있을 List<Image> 멤버 변수를 선언해줍니다.

멤버 변수 선언을 한 다음에는 SetWireColor 함수를 만들고 매개변수로 받은 색상 값에 따라 이미지의 색을 변경하도록 코드를 작성합니다.

그 다음에는 RightWire 스크립트로 이동해서 같은 멤버 변수와 함수를 만들어줍니다.

RightWire 스크립트에서 작업을 끝낸 다음에는 다시 FixWiringTask 스크립트로 돌아가서 OnEnable 함수를 만들고 왼쪽 와이어와 오른쪽 와이어에 랜덤으로 색을 입히도록 만들어줍니다.

코드를 모두 작성한 다음에는 저장하고 에디터로 돌아갑니다.

에디터로 돌아온 다음에는 각 와이어의 컴포넌트에 이미지들을 할당해줍니다.

그 다음 게임을 플레이시켜보면 양 쪽의 전선에 랜덤하게 색상이 입혀지는 모습을 볼 수 있습니다.

와이어를 연결했을 때 불 들어오게 하기

전선의 색을 입히는 작업까지 마쳤으니 이제 색이 맞는 전선끼리 올바르게 연결되었을 때, 전선 위에 불빛이 들어오게 만들 차례입니다.

먼저 LeftWire 스크립트로 이동해서 Image 타입으로 불빛이 들어올 이미지와 RightWire 타입으로 연결된 오른쪽 와이어를 담을 변수, 그리고 bool 타입의 IsConnected 프로퍼티를 선언해줍니다.

그 다음에는 ConnectWire 함수를 만들고 두 전선의 색이 같으면 LightImage의 색을 변경하고 IsConnected 프로퍼티도 true로 변경해줍니다.

그리고 DisconnectWire 함수도 만들어서 연결이 끊어졌을 때 상태를 원래대로 돌리는 코드도 작성해줍니다.

그 다음에는 RightWire 스크립트로 이동해서 bool 타입의 IsConnected 프로퍼티와 Image 타입의 LightImage, 그리고 List<LeftWire> 타입으로 연결된 와이어들을 담을 변수를 선언합니다.

그리고 여기에서도 ConnectWire 함수와 DisconnectWire 함수를 만들어줍니다.

RightWire의 ConnectWire 함수에서는 여러 개의 LeftWire가 연결될 수 있기 때문에 List에서 연결된 와이어의 갯수와 함께 연결된 와이어의 색상을 검사한 뒤 불빛 이미지와 IsConnected를 변경해줍니다.

그리고 DisconnectWire 함수에서도 마찬가지로 연결된 와이어의 갯수가 1개이며 연결된 와이어와 현재 와이어의 색이 같은 경우에만 연결된 상태로 보도록 코드를 작성합니다.

나머지 경우는 불을 끄고 연결 해제하도록 코드를 작성하면 됩니다.

함수를 완성한 다음에는 FixWiringTask 스크립트의 Update 함수로 이동해서 각 상황에 맞게 만든 함수들을 호출해줍니다.

코드를 모두 작성한 다음에는 저장하고 에디터로 돌아갑니다.

에디터로 돌아온 다음에는 모든 와이어 객체의 LightImage에 각자 불빛 이미지를 할당해줍니다.

그 다음에 게임을 플레이시켜서 테스트해보면 잘 동작해야 하는데 약간 문제가 있습니다.

색상이 다른 와이어에 연결했다가 바로 다른 색 와이어에 연결하면 이전에 연결했던 오른쪽 와이어가 제대로 동작하지 않게 됩니다.

RightWire 스크립트로 돌아가서 연결된 와이어 리스트를 인스펙터에서 볼 수 있게 SerializedField 어트리뷰트를 붙여주겠습니다.

그리고 게임을 플레이시켜서 다시 테스트해보면 예상대로 연결을 완전히 떼지 않고 다른 와이어에 연결했을 때 리스트가 제대로 초기화되지 않는 모습을 볼 수 있습니다.

플레이를 중단하고 LeftWire 스크립트의 ConnectWire 함수로 이동해서 연결된 와이어가 비어있지 않고 매개변수로 받은 오른쪽 와이어가 현재 연결된 와이어가 아니라면 와이어 연결을 끊도록 코드를 작성해줍니다.

수정이 끝나면 저장하고 다시 에디터로 돌아갑니다.

그리고 게임을 플레이시켜보면 모든 와이어가 1:1로 같은 색상 와이어끼리 연결되었을 때만 불빛이 들어오는 모습을 확인할 수 있습니다.

아웃트로

이번 영상에서는 와이어 연결하기 임무에서 와이어들에게 무작위로 색상을 부여하고 같은 색상을 가진 와이어끼리 연결했을 때, 불빛이 들어오도록 하는 기능을 구현해보았습니다.

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

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

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

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

[투네이션]

[Patreon]

[디스코드 채널]

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

안녕하세요! 여러분들과 함께 게임 개발을 공부하는 베르입니다! 이번에도 임무를 계속해서 만들어봅시다.

사용 엔진 버전 : 2019.4

타임라인

0:00 인트로

0:08 오른쪽 전선 배치

0:41 RightWire 클래스 생성과 연결 기능 구현

2:23 기능분리

5:05 아웃트로

[예제]

https://drive.google.com/file/d/1EsCSDsd5Ekt4eehA9WhIyWT0QTsVzw0N/view?usp=sharing

스크립트

인트로

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

지난 영상에 이어서 임무를 계속해서 만들어보겠습니다.

오른쪽 전선 배치

이번에는 끌어온 왼쪽 전선이 연결될 오른쪽 전선을 만들 차례입니다.

Left Wire를 복사해서 크기를 -1로 변경한 다음 오른쪽으로 옮겨 줍니다.

그리고 오브젝트의 이름을 Right Wire로 바꿔준 뒤 Wire Body에 붙어있는 Left Wire 컴포넌트를 제거해줍니다.

참고로 하이어라키에서 Right Wire가 Left Wire보다 상단으로 가도록 배치해줘야 합니다.

RightWire 클래스 생성과 연결 기능 구현

그 다음에는 오른쪽 와이어에 붙을 클래스를 만들 차례입니다.

Right Wire라는 이름으로 C# 스크립트를 생성하고 스크립트 에디터를 엽니다.

그리고 LeftWire 스크립트로 이동합니다.

LeftWire 스크립트의 Update 함수에서 마우스 클릭을 떼는 부분을 찾아줍니다.

여기서 클릭을 떼는 순간에 RayCast를 발사하고 RightWire를 찾도록 만들어줍니다.

RightWire를 찾은 다음에는 LeftWire의 길이와 방향을 발견한 RightWire를 향하도록 만들어줍니다.

코드를 모두 작성한 다음에는 저장하고 에디터로 이동합니다.

에디터에서는 앞에서 배치해둔 Right Wire의 Wire Body에 RightWire 컴포넌트를 붙여줍니다.

그리고 게임을 플레이해서 테스트해보면 왼쪽의 와이어를 끌어서 오른쪽 와이어에 붙일 수 있는 것을 볼 수 있습니다.

잠시 플레이를 중단하고 오른쪽 와이어를 복사해서 아래 쪽으로 쭉 배치해줍니다.

그리고 다시 플레이하고 테스트 해보면 오른쪽 와이어 중에 하나를 골라서 마음대로 연결할 수 있는 모습을 볼 수 있습니다.

그럼 한 번 더 플레이를 중단하고 이번에는 왼쪽 와이어를 복사해서 배치해줍니다.

그리고 다시 플레이해서 테스트 해보겠습니다.

이번에는 제 의도와는 조금 다르게 왼쪽 와이어 중 하나만 선택해도 모든 와이어가 딸려나오는 모습을 볼 수 있습니다.

기능 분리

이제 LeftWire에 몰아 넣어둔 기능을 분리할 때가 왔습니다.

먼저 FixWiringTask라는 이름으로 C# 스크립트를 생성합니다.

사실 원래라면 여러 임무 클래스를 사용해야하기 때문에 BaseTask 클래스를 만들고 그 클래스를 상속받는 방식으로 구현하겠지만 지금은 강좌 진행 속도를 위해서 FixWiringTask 클래스에서 바로 구현하도록 하겠습니다.

스크립트 에디터로 이동해서 FixWiringTask 클래스의 멤버 변수로 List<LeftWire> 타입의 mLeftWires와 List<RightWire> 타입의 mRightWires를 선언해줍니다.

그리고 현재 선택된 와이어를 기억하기 위해서 LeftWire 타입으로 mSelectedWire도 선언해주겠습니다.

멤버 변수 선언이 끝난 다음에는 LeftWire 스크립트로 이동합니다.

이 Update 함수에 있는 코드를 FixWiringTask의 Update 함수로 옮겨줘야 합니다.

그전에 이 코드에 있는 기능 중에 LeftWire가 자체적으로 처리해야 하는 코드를 함수로 따로 빼겠습니다.

SetTarget 함수를 만들어주고 Update의 코드 중에 마우스 위치를 대상으로 와이어의 각도와 길이를 수정하는 코드를 붙여넣은 뒤 수정해줍니다.

그 다음에는 ResetTarget 함수를 만들고 와이어의 위치와 각도를 원상복구하는 코드를 옮겨줍니다.

함수를 모두 만든 다음에는 Update 함수의 각 부분의 코드를 함수로 대체해줍니다.

그리고 이렇게 완성된 코드를 잘라내서 FixWiringTask의 Update 함수로 옮겨줍니다.

그러면 당연하게도 에러가 발생할텐데 대부분은 mSelectedWire로 바꾸거나 추가해주면 됩니다.

코드를 모두 작성한 다음에는 저장하고 에디터로 이동합니다.

에디터로 돌아온 다음에는 와이어들의 부모 오브젝트에 방금 만든 FixWiringTask 컴포넌트를 붙여주고 각 와이어 리스트에 Wire Body들을 넣어줍니다.

모든 작업이 끝난 다음에 게임을 플레이해서 테스트해보면 왼쪽 와이어들이 한꺼번에 움직이지 않고 각자 따로 마우스로 끌어서 오른쪽 와이어에 붙여지는 모습을 확인할 수 있습니다.

아웃트로

이번 영상에서는 끊어진 전선을 연결하는 임무에서 왼쪽 와이어를 끌어서 오른쪽 와이어에 붙이는 기능을 만들어 보았습니다.

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

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

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

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

[투네이션]

[Patreon]

[디스코드 채널]

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

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

이번에는 어몽어스의 전선 고치기 임무를 만들어봅시다!

사용 엔진 버전 : 2019.4

리소스 : https://drive.google.com/file/d/1-QrHUpE40wdpZpNthEFHxo3Iw50-Ufi_/view?usp=sharing

타임라인

0:00 인트로

0:27 끊어진 전선 UI 배치하기

2:22 와이어 끌기 기능 구현

4:05 와이어 끌기 기능 테스트

4:27 아웃트로

스크립트

인트로

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

이번에는 크루원들이 진행해야 하는 미션을 만들어보겠습니다.

물론 실제 게임에서는 맵 하나에 굉장히 많은 수의 미션이 있지만 모든 미션을 다 만들었다간 어몽어스 강좌가 앞으로 1년은 더 만들어야 할 것 같으니 하나의 미션과 미션 진행률에 집중하도록 하겠습니다.

본격적인 작업에 들어가기 전에 영상 하단의 링크에서 리소스를 다운로드 받아서 임포트합니다.

끊어진 전선 UI 배치하기

우리가 만들 임무는 끊어진 전선을 연결하는 임무입니다.

먼저 Task UI라는 이름으로 이미지를 배치하고 화면 전체를 덮도록 세팅한 다음 이미지를 투명하게 만들어 줍니다.

그리고 그 이미지 아래에 이미지를 하나 더 배치하고 전선 패널 이미지를 넣어줍니다.

그 다음에는 빈 게임 오브젝트를 만들고 그 아래에 전선 베이스와 맞는 전선끼리 연결되었을 때 불빛이 표시될 이미지를 하나씩 배치합니다.

그리고 Wire Base 아래에 같은 스프라이트를 사용해서 이미지를 하나 더 배치한 뒤 앵커를 middle right로 변경하고 Pivot X를 0으로 변경해줍니다.

그러면 이미지의 길이를 바꿔도 제 위치에서 늘어나게 됩니다.

그리고 Wire Body 아래에 잘린 전선 피복과 끊어진 구리선 이미지를 추가한 뒤 둘 모두 앵커를 middle right로 변경하고 Pivot X를 0으로 변경해줍니다.

그러면 마찬가지로 Wire Body의 길이가 변경되어도 끊어진 부분이 함께 움직이는 것을 볼 수 있습니다.

그 다음에는 끊어진 전선 구리 이미지 오브젝트에 Box Collider 2D 컴포넌트를 붙여준 뒤 콜라이더가 끊어진 전선 부분을 덮도록 만들어줍니다.

그리고 Tag에서 task-wire라는 이름으로 태그를 하나 만들어주고 이 태그를 적용해줍니다.

와이어 끌기 기능 구현

전체적인 UI 배치는 뒤로 넘겨두고 우선 와이어를 컨트롤 하는 기능부터 만들어보겠습니다.

먼저 LeftWire라는 이름으로 C# 스크립트를 생성하고 스크립트 에디터로 이동합니다.

스크립트 에디터가 열리고 나면 스크립트의 상단에 UnityEngine.UI 네임스페이스를 using 선언해줍니다.

그리고 RectTransform 타입으로 wireBody라는 멤버변수와 LeftWire 타입의 selectedWire 변수를 선언해줍니다.

그 다음에는 Update 함수로 가서 마우스 버튼을 누르는 순간에 RayCast를 쏴서 맞은 콜라이더의 부모에서 LeftWire를 찾아서 selectedWire로 설정해줍니다.

그리고 SelectedWire가 비어있지 않은 동안에는 오브젝트의 위치와 마우스 커서의 위치를 이용해서 전선이 움직일 각도와 거리를 계산하고 이것을 wireBody에 적용하도록 만들어줍니다.

마지막으로 마우스 클릭을 떼는 순간에 wireBody의 각도와 거리를 원상복구 시키고 selectedWire를 비워주도록 만들어줍니다.

추가로 게임 해상도가 달라질 때마다 변경되는 캔버스 크기 때문에 distance가 일치하지 않는 문제를 해결하기 위해서 캔버스의 크기를 가져와서 distance에 캔버스 크기의 역수를 곱해주는 코드를 추가합니다.

지금은 기능을 프로토타이핑하는 과정이니 모든 기능을 LeftWire에 추가한 상황이지만 다른 부분을 만들면서 이 기능들을 각자 맞는 위치로 이동시킬 예정입니다.

코드를 모두 작성한 다음에는 코드를 저장하고 에디터로 이동합니다.

와이어 끌기 기능 테스트

에디터로 이동한 다음에는 앞에서 만들어둔 Wire Body 오브젝트에 LeftWire 컴포넌트를 붙이고 WireBody 프로퍼티에 Wire Body 오브젝트를 할당해줍니다.

그 다음 게임을 플레이해서 테스트해보면 끊어진 전선 구리 부분을 클릭해서 드래그 하면 전선이 마우스를 따라서 움직이고 클릭을 떼는 순간 전선이 원래 자리로 돌아가는 모습을 볼 수 있습니다.

아웃트로

이번 영상에서는 어몽어스의 임무 중 하나인 끊어진 전선 수리하기 임무를 만들기 위해서 와이어를 끌어당기는 부분을 만들어보았습니다.

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

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

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

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

[투네이션]

[Patreon]

[디스코드 채널]

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

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

이번에는 투표 후에 플레이어가 추방되는 연출과 기능을 만들어보겠습니다!

리소스 : https://drive.google.com/file/d/1aCeadnc5XUeTM0fwNUsFQvsu5lFv5C8r/view?usp=sharing

사용 엔진 버전 : 2019.4

타임라인

0:00 인트로

0:24 추방 UI 배치

1:27 추방 UI 기능 구현

8:05 씬 세팅과 테스트

8:59 아웃트로

스크립트

인트로

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

아주 오랜만에 메이크 더 어몽어스 강좌로 돌아왔습니다.

이번에는 지난 강좌에 이어서 투표로 결정된 추방자가 추방되는 연출을 추가하고 추방된 플레이어가 죽는 기능을 추가해보도록 하겠습니다.

본 작업에 들어가기 전에 영상 하단의 링크에서 리소스를 다운로드 받아서 임포트해줍니다.

추방 UI 배치

바로 직전 강좌에서는 투표 직후에 누가 표를 많이 받았는지 보여주는 결과까지 구현했으니 이제 투표 결과로 표를 많이 받은 플레이어를 추방하는 UI를 추가할 차례입니다.

Gameplay 씬에서 Canvas 오브젝트 아래에 이미지 오브젝트를 하나 생성하고 Ejection UI 라는 이름을 붙여줍니다.

그리고 이 이미지가 화면 전체를 덮도록 만들어주고 색을 검은 색으로 만들어 줍니다.

그 다음에는 이 이미지 아래에 텍스트 오브젝트를 만들고 글자 색과 글자 크기를 적당하게 지정해줍니다.

그리고 이미지 오브젝트를 하나 더 생성하고 방금 전에 임포트한 이미지를 넣어주고 머티리얼과 위치를 설정해줍니다.

마지막으로 추방된 플레이어 이미지가 날아갈 경로의 왼쪽 끝과 오른쪽 끝을 표시하는 오브젝트를 배치합니다.

추방 UI 기능 구현

UI 배치를 마친 다음에는 기능을 만들 차례입니다.

EjectionUI라는 이름으로 C# 스크립트를 생성하고 스크립트 에디터를 엽니다.

스크립트 에디터가 열리고 나면 먼저 스크립트 상단에 UnityEngine.UI 네임스페이스를 using 선언해줍니다.

그리고 EjectionUI 클래스의 멤버 변수로 Text 타입의 ejectionResultText과 Image 타입의 ejectionPlayer를 선언해줍니다.

그 다음에는 추방된 플레이어 이미지가 날아갈 경로의 왼쪽 끝과 오른쪽 끝 위치를 담을 RectTransform 타입의 left와 right 변수를 선언합니다.

먼저 Start 함수를 만들고 ejectionPlayer 이미지의 머티리얼을 인스턴스화 해줍니다.

그 다음에는 Open 함수를 만들고 추방당할 플레이어가 있는지를 뜻하는 bool 타입의 isEjection, 추방당한 플레이어의 색상을 표현할 EPlayerColor 타입의 ejectionPlayerColor, 추방당한 플레이어가 임포스터인지 알려주는 bool 타입의 isImposter, 남아있는 임포스터의 수를 알려주는 int 타입의 remainImposterCount를 매개변수로 선언해줍니다.

이 함수에서는 먼저 isEjection 값에 따라서 출력될 텍스트를 만들어 주고 난 다음 오브젝트를 활성화시켜줍니다.

그 다음에는 ShowEjectionResult_Coroutine 함수를 만듭니다.

여기서는 글자가 순서대로 촤라락 보여지는 기능을 만들기 위해서 텍스트를 앞부분과 뒷부분으로 나눠줄 겁니다.

먼저 추방되는 플레이어의 여부에 따라서 플레이어 이미지의 색을 결정해줍니다.

그 다음에는 추방되는 캐릭터 이미지를 회전시키면서 날아가도록 코드를 작성합니다.

그리고 적당한 딜레이를 주면서 글자를 순서대로 출력하도록 만들어 줍니다.

코루틴 함수를 모두 작성한 다음에는 이 코루틴 함수를 Open 함수에서 호출하도록 만들어줍니다.

마지막으로 Close 함수를 만들어서 EjectionUI를 닫도록 코드를 작성합니다.

그 다음 작업으로는 투표가 끝난 이후에 이 EjectionUI를 호출해줘야 합니다.

우선 이 EjectionUI로 접근하기 쉽도록 IngameUIManager로 이동해서 EjectionUI를 캐싱해서 프로퍼티로 불러올 수 있도록 만들어 줍니다.

그 다음에는 GameSystem 스크립트를 열고 MeetingProcess_Coroutine 함수로 이동합니다.

이 코루틴 함수의 아래에 CalculateVoteResult_Coroutine 함수를 만들어 줍니다.

CalculateVoteResult_Coroutine 함수에서는 투표 결과를 계산해야 하는데 먼저 어느 플레이어가 가장 많은 표를 받았는지 확인해야 합니다.

플레이어들이 받은 표를 계산하여 정렬시키기 위해 IComparer 인터페이스를 상속받아서 CharacterVoteComparer라는 이름으로 클래스를 만들어줍니다.

IComparer 인터페이스를 상속받아서 Compare 함수를 구현하면 배열을 빠르게 정렬할 수 있습니다.

Comparer를 만든 다음에는 CalculateVoteResult_Coroutine 함수로 돌아가서 System.Array.Sort 함수에 players 배열과 방금 만든 CharacterVoteComparer를 넣어서 플레이어들을 받은 표 순서대로 정렬해줍니다.

그리고 남은 임포스터 수를 구해두고 제일 처음에는 표를 가장 많이 받은 플레이어의 받은 표 수와 스킵 표 수를 비교합니다.

스킵 표 수가 가장 많이 받은 표 수보다 많거나 같다면 플레이어는 추방당하지 않습니다.

그리고 가장 많은 표를 받은 플레이어와 2순위 플레이어가 동률인 경우도 추방이 이루어지지 않습니다.

마지막으로 스킵 표와 2순위 표보다 1순위 표가 많은 경우에는 1순위 플레이어를 추방해야 합니다.

이 CalculateVoteResult_Coroutine 함수는 서버에서 호출될 예정이기 때문에 클라이언트에서 EjectionUI를 열도록 만들어둘 RpcOpenEjectionUI 함수를 만들고 ClientRpc 어트리뷰트를 붙여줍니다.

그리고 여기서는 IngameUIManager를 통해서 EjectionUI에 접근해서 Open 함수를 호출해줍니다.

그 다음에는 CalculateVoteResult_Coroutine 함수로 돌아가서 각 상황에 맞게 RpcOpenEjectionUI 함수를 호출해줍니다.

RpcOpenEjectionUI 함수를 호출한 다음에는 플레이어가 추방당하는 분기에서 추방당한 플레이어를 죽음 처리해줘야 합니다.

Dead 함수를 호출하면 될 것 같은데, 현재 이 Dead 함수는 크루원이 임포스터에게 죽는 것을 전제로만 동작하게 되어 있으니 조금 수정이 필요해보입니다.

Dead 함수로 이동해서 매개변수에 bool 타입의 isEject 매개변수를 추가해주고 시체를 만드는 부분을 if문으로 묶어서 추방으로 죽은게 아닐 때만 동작하도록 만들어줍니다.

그리고 아래의 RpcDead 함수에도 같은 매개변수를 추가하고 KillUI가 isEject가 아닐 때만 호출되도록 수정해줍니다.

그리고 이 Dead 함수를 수정함으로써 발생하는 에러 역시 모두 수정해줍니다.

수정이 모두 끝나면 CalculateVoteResult_Coroutine 함수로 돌아가서 가장 많은 표를 받은 플레이어의 Dead 함수를 호출해주고 사망한 크루원의 시체들을 찾아서 제거해줍니다.

추방 작업이 끝나고나면 플레이어들이 다시 테이블 근처에 원형으로 배치되도록 만들어줘야 합니다.

GameReady 코루틴 함수를 보면 캐릭터들을 원형 테이블 근처에 배치하는 코드가 있을 겁니다.

이 코드를 블럭 선택해서 우클릭하고 [빠른 작업 및 리팩터링] 항목을 선택해서 [메서드 추출]로 새 함수로 만들어 줍니다.

그리고 이 함수를 CalculateVoteResult_Coroutine 함수에서 호출해줍니다.

그 다음에는 클라이언트에서 EjectionUI를 닫게 만들어줄 RpcCloseEjectionUI 함수를 만들고 ClientRpc 어트리뷰트를 붙여준 다음 EjectionUI의 Close 함수를 호출하게 만들어줍니다.

그리고 다시 플레이어의 캐릭터가 움직일 수 있게 myCharacter의 IsMoveable을 true로 바꿔줍니다.

완성된 RpcCloseEjectionUI 함수는 CalculateVoteResult_Coroutine 함수에서 모든 작업이 끝나고 일정 시간이 지나면 호출되게 만들어줍니다.

그리고 CalculateVoteResult_Coroutine 함수를 MeetingProcess_Coroutine 함수의 제일 아래에서 호출해줍니다.

아 마지막으로 MeetingUI가 닫히도록 만들어주기 위해서 MeetingUI 스크립트로 이동해서 Close 함수를 만들어주고 GameSystem의 RpcOpenEjectionUI 함수에서 호출해줍니다.

코드를 모두 작성한 다음에는 저장하고 에디터로 돌아갑니다.

씬 세팅과 테스트

에디터로 돌아온 다음에는 EjectionUI 오브젝트에 방금 생성한 컴포넌트를 부착하고 프로퍼티를 할당해줍니다.

그리고 캔버스에 붙어있는 IngameUIManager에 EjectionUI를 캐싱해줍니다.

작업이 끝난 다음에는 게임을 빌드해줍니다.

빌드가 완료되면 게임을 실행하고 테스트합니다.

테스트 해보면 아무도 추방하지 않은 경우, 임포스터가 아닌 플레이어를 추방했을 경우, 임포스터인 플레이어를 추방했을 경우, 모두 다른 문구가 나오는 것을 볼 수 있습니다.

아웃트로

이번에는 어몽어스 게임에서 투표 후에 플레이어가 추방되는 UI 연출과 그 처리를 해보았습니다.

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

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

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

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

[투네이션]

[Patreon]

[디스코드 채널]

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

이번 영상에서는 개발할 때 활용할 수 있는 정규화라는 개념에 대해서 알아봅시다!

타임라인

0:00 인트로

0:10 정규화란?

0:47 벡터의 정규화

3:21 좌표의 정규화

5:12 아웃트로

인트로

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

이번 시간에는 게임 개발에서 사용할 수 있는 정규화라는 개념에 대해서 알아보도록 하겠습니다.

정규화란?

먼저 정규화라는 용어에 대해서 알아보겠습니다.

위키백과를 참고해보면 정규화는 어떤 대상을 일정한 규칙이나 기준에 따르는 정규적인 상태로 바꾸거나 비정상적인 대상을 정상적으로 돌리는 과정을 뜻한다고 합니다.

영어로는 Nomalization이라고 합니다.

이 정규화라는 개념은 여러 분야에서 각 분야에 맞게 사용되고 있습니다.

가장 대표적인 것은 데이터베이스 분야의 정규화로 데이터베이스를 설계할 때 여러 테이블에서 중복되는 데이터를 최소화시키는 프로세스를 가리킵니다.

게임이나 프로그램을 개발할 때도 여러 곳에서 이러한 정규화를 적용할 수 있습니다.

벡터의 정규화

앞에서 정규화를 영어로 하면 Noralization이라고 했을 때 짐작하신 분도 있었겠지만 역시 가장 먼저 이야기 해볼 것은 바로 벡터의 정규화 입니다.

벡터에 대해서는 [좌표와 속도를 다루는 도구 - 벡터] 영상에서 한 번 다룬 적이 있습니다.

벡터에 대한 자세한 내용은 해당 영상에서 확인할 수 있습니다.

벡터의 정규화는 어떤 한 벡터를 벡터의 길이로 나누어서 그 벡터의 길이를 1로 만드는 것입니다.

이렇게 길이가 1이 된 벡터를 단위 벡터라고 부르죠.

이런 식으로 정규화를 통해서 길이를 1이 된 벡터는 캐릭터의 이동과 방향에 주로 사용됩니다.

보통 키보드로 조작하는 방식의 게임은 W키와 S키를 이용해서 앞/뒤로 움직이고 A키와 D키를 이용해서 좌/우로 움직입니다.

그리고 W키를 누르면 수직 입력 값을 1로 받고 S키를 누르면 수직 입력 값을 -1로 받게 됩니다.

물론 손을 떼면 0이고 W키와 S키를 동시에 누르면 값이 상쇄되어서 0이 됩니다.

A키와 D키 역시 마찬가지로 수평 입력 값에 대해 동일하게 동작합니다.

그리고 W키와 S키로 동작하는 수직 입력과 A키와 D키로 동작하는 수평 입력을 묶어서 2차원 벡터로 이동 입력을 표현하게 됩니다.

여기서 이동 입력 키를 하나만 눌렀을 때의 입력 벡터의 길이는 언제나 1이라는 것을 알 수 있습니다.

이처럼 플레이어가 이동하고자 하는 입력 방향 벡터의 길이가 언제나 1이 되어야 캐릭터를 이동시킬 때, 입력 받은 방향에 캐릭터의 이동 속도를 곱하는 방식으로 쉽게 구현할 수 있게 됩니다.

그런데 캐릭터를 대각선 방향으로 이동시키기 위해서 W키와 A키, W키와 D키, A키와 S키, D키와 S키 같은 조합으로 동시에 누르게 되면 문제가 발생합니다.

만약 오른쪽 정면을 향해 이동하기 위해 W키와 D키를 동시에 눌렀다면, 정면 방향 벡터인 (0,1)과 오른쪽 방향 벡터인 (1,0)이 합쳐져서 (1,1)이 됩니다.

벡터 (1,1)의 길이는 밑변과 높이가 각각 1인 삼각형의 빗변의 길이로 나타내집니다.

이 길이는 루트 2로 약 1.414가 됩니다.

그래서 입력된 대각선 이동 벡터에 곧바로 이동 속도를 곱해서 캐릭터를 이동시키면 앞, 뒤, 왼쪽, 오른쪽 각 단일 방향으로 움직일 때보다 약 1.4배의 속도로 더 빠르게 움직일 수 있게 되는 겁니다.

이런 문제를 막기 위해서 이동 벡터의 길이가 1보다 길어지면 정규화를 통해서 이동 벡터의 길이를 1로 맞춰주는 방식을 자주 사용하게 됩니다.

이런 캐릭터의 이동 문제 외에도 속력과 방향을 정의되는 벡터에서 순수하게 방향만을 남겨서 사용하고자 하는 경우에는 이러한 벡터의 정규화 개념을 사용하게 됩니다.

좌표의 정규화

두 번째로 다뤄볼 정규화는 좌표의 정규화입니다.

게임을 개발하면서 우리는 여러가지 종류의 공간을 다루게 됩니다.

대표적으로는 게임을 플레이하면서 돌아다니게 되는 월드 공간과 UI가 그려지는 UI 공간이 있습니다.

이 두 공간의 좌표를 오가는 기능으로는 월드 공간에 존재하는 오브젝트를 UI 공간에서 나타내기 위한 기능으로 지도 기능이 있습니다.

플레이어나 오브젝트들이 움직이는 월드 공간의 크기는 기획에 따라 달라지기 마련이고 UI 공간은 디스플레이의 해상도에 따라 달라집니다.

간단하게 예를 들어서 3800x3800의 넓이를 가지는 월드 공간에서 움직이는 오브젝트를 UI 공간에서 800x800의 지도 UI에서 표시하고 싶다고 가정해봅시다.

오브젝트가 (2000, 1500)의 위치에 있을 때 지도 UI에 자신의 좌표를 그대로 보내버리면 800x800인 지도의 한참 바깥에 위치를 표시하게 됩니다.

그렇기 때문에 월드 공간에 존재하는 오브젝트의 위치는 좌표를 정규화시켜서 지도에 전달해야 합니다.

오브젝트 좌표의 X값과 Y값을 각각 월드 공간에 속하는 맵의 가로 폭과 세로 폭으로 나눠줍니다.

그러면 오브젝트의 좌표는 (0.52631, 0.39473)으로 변환되면서 좌표의 모든 값이 0에서 1사이 값의 형태를 가지게 됩니다.

이렇게 정규화된 좌표 값을 지도 UI에 넘겨주면 지도 UI에서는 이 값에 지도의 너비와 높이를 곱해줍니다.

그러면 오브젝트의 지도 위에서 좌표 값이 (421.05, 315.78)이 되면서 월드 상의 위치와 지도 상의 위치가 거의 흡사하게 표시되는 것을 볼 수 있습니다.

이런 식으로 서로 다른 공간에 있는 오브젝트의 위치를 표현할 때 좌표 값을 정규화해서 넘겨주는 것으로 동일한 위치에 표시할 수 있게 되는 것입니다.

이러한 좌표의 정규화 개념은 월드 공간과 UI 공간을 넘어서, 현실 공간에서 센서같은 장비로 계측된 위치를 월드 공간으로 옮기는 방식으로도 적용할 수 있습니다.

아웃트로

이번 영상에서는 정규화라는 개념과 게임 개발에서 사용되는 아주 간단한 예시만을 알아보았습니다.

이 외에도 정규화라는 개념은 게임 개발의 여러 분야에서 유용하게 사용할 수 있습니다.

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

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

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

[투네이션]

[Patreon]

[디스코드 채널]

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

지난 어몽어스 영상에 이어서 투표와 추방 기능을 계속 만들어 봅시다!

사용 엔진 버전 : 2019.3

타임라인

0:00 인트로

0:10 투표 기능 만들기

3:36 투표 스킵 기능 만들기

6:30 투표 시간 제한 만들기

10:41 아웃트로

스크립트

인트로

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

이번 영상에서는 지난 강좌의 내용에 이어서 투표와 추방 기능을 계속 만들어 보겠습니다.

투표 기능 만들기

이번에는 투표하는 기능을 만들어보겠습니다.

먼저 IngameCharacterMover 스크립트로 이동해서 이 플레이어가 투표했는지를 의미하는 bool 타입의 isVote 변수와 이 플레이어가 몇 표를 받았는지를 의미하는 int 타입의 vote 변수를 선언하고 두 변수에 SyncVar 어트리뷰트를 붙여줍니다.

그리고 CmdVoteEjectPlayer 함수를 만들고 Command 어트리뷰트를 붙여줍니다.

이 함수에서는 투표한 플레이어의 isVote 값과 표를 받은 플레이어를 찾아서 Vote 값을 바꿔줍니다.

그 다음에는 GameSystem 스크립트로 이동해서 다른 모든 플레이어들에게 투표 내용을 알리기 위해서 RpcSignVoteEject 함수를 만들고 ClientRpc 어트리뷰트를 붙여줍니다.

그리고 IngameCharacterMover의 CmdVoteEjectPlayer 함수에서 RpcSignVoteEject 함수를 호출해줍니다.

잠시 MeetingUI로 이동해서 UpdateVote 함수를 만들어 줍니다.

그리고 이 함수에서는 MeetingPlayerPanel들에 몇 가지 작업을 해줘야 합니다.

이리저리 스크립트를 많이 이동해서 어지러울 수 있는데 이건 애초에 설계를 제대로 안하고 내키는대로 작업한 부작용입니다.

MeetingPlayerPanel 스크립트로 이동합니다.

그리고 GameObject 타입으로 이 플레이어가 투표했음을 알리는 voteSign 변수와 이 플레이어에게 어떤 플레이어가 투표했는지 알리는데 사용될 voterPrefab 변수, voterPrefab으로 만들어진 오브젝트들을 정렬하는데 사용될 Transform 타입의 voterParentTransform 변수를 선언해줍니다.

그 다음에는 UpdatePanel 함수를 만들어서 투표한 플레이어 캐릭터를 만들고 배치하도록 코드를 작성합니다.

그리고 UpdateVoteSign 함수를 만들고 voteSign 오브젝트를 활성화 시키게 코드를 작성합니다.

그 다음에는 MeetingUI의 UpdateVote 함수로 돌아가서 투표받은 플레이어의 UpdatePanel 함수를 호출해주고 투표한 플레이어는 UpdateVoteSign 함수를 호출해줍니다.

그리고 그 다음에는 GameSystem의 RpcSignVoteEject 함수로 가서 MeetingUI의 UpdateVote 함수를 호출해줍니다.

이어서 패널을 선택했을 때 뜨는 투표 버튼의 기능을 마저 만들어 보겠습니다.

MeetingPlayerPanel 스크립트로 이동해서 Select 함수를 만들고 CmdVoteEject 함수로 이 플레이어가 어떤 플레이어에게 투표했는지 알리고 투표 버튼을 비활성화하도록 코드를 작성합니다.

마지막으로 OnClickPlayerPanel 함수에서 이미 투표한 플레이어는 투표를 하지 못하도록 코드를 수정해줍니다.

코드를 모두 작성한 다음에는 저장하고 에디터로 이동합니다.

에디터로 돌아온 다음에는 PlayerPanel 프리팹을 찾아서 열고 프로퍼티에 플레이어가 투표했음을 알리는 표시와 투표한 플레이어 프리팹, 그리고 투표한 플레이어 오브젝트가 정렬될 트랜스폼을 할당해줍니다.

그리고 Select Button의 On Click 이벤트에 PlayerPanel의 Select 함수를 등록해줍니다.

작업이 끝나면 게임을 빌드합니다.

빌드가 완료된 이후에 게임을 실행해서 테스트해보면 투표하고자 하는 플레이어의 패널을 선택하고 체크 버튼을 누르면 그 캐릭터의 패널에 투표한 플레이어의 아이콘이 뜨는 모습을 볼 수 있습니다.

투표 스킵 기능 만들기

그 다음으로는 누구를 임포스터로 지목할 지 결정하지 못한 플레이어를 위한 투표 스킵 기능을 만들 차례입니다.

MeetingUI 스크립트로 이동합니다.

그리고 GameObject 타입으로 voterPrefab 변수와 skipVoteButton 변수 그리고 skipVotePlayers 변수를 선언하고, Transform 타입의 skipVoteParentTransform 변수를 선언합니다.

그리고 UpdateSkipVotePlayer 함수를 만들고 매개변수로 받은 플레이어의 투표함 표시를 활성화 한다음 투표 스킵 표시를 추가하는 코드를 작성합니다.

이어서 투표 스킵 버튼을 비활성화하고 투표를 스킵한 플레이어의 표시가 보이도록 코드를 작성합니다.

그 다음에는 GameSystem 스크립트로 이동해서 투표를 스킵한 플레이어 수를 카운트할 int 타입의 skipVotePlayerCount 변수를 선언하고 SyncVar 어트리뷰트를 붙여줍니다.

그리고 투표를 스킵한 플레이어를 클라이언트의 MeetingUI에 알려주고 업데이트 하기 위한 RpcSignSkipVote 함수를 만들고 ClientRpc 어트리뷰트를 붙여줍니다.

이 함수에서는 MeetingUI의 UpdateSkipVotePlayer를 호출해주면 됩니다.

그 다음으로는 IngameCharacterMover 스크립트로 이동해서 CmdSkipVote 함수를 만들고 Command 어트리뷰트를 붙여준 뒤 GameSystem의 skipVotePlayerCount의 값을 증가시키고 RpcSignSkipVote 함수를 호출해줍니다.

그리고 다시 MeetingUI 스크립트로 돌아와서 스킵 버튼을 눌렀을 때 동작할 OnClickSkipVoteButton 함수를 만들고 내 캐릭터의 CmdSkipVote 함수를 호출하도록 코드를 구현합니다.

물론 이 함수 역시 플레이어가 이미 투표한 경우라면 누르지 못하도록 코드를 작성해줍니다.

코드를 모두 작성한 다음에는 코드를 저장하고 에디터로 돌아갑니다.

에디터로 돌아온 다음에는 Meeting UI 오브젝트를 선택하고 각 프로퍼티에 필요한 것들을 찾아서 할당해줍니다.

Voter Prefab에는 Voter Img 프리팹을 할당하고, Skip Vote Button 프로퍼티에는 Skip Vote Button 오브젝트를 할당해줍니다.

그리고 Skip Vote Players 프로퍼티에는 Skipped Voting 오브젝트를, Skip Vote Parent Transform 프로퍼티에는 Skipped Voter 오브젝트를 할당해줍니다.

마지막으로 Skip Vote Button의 On Click 이벤트에 Meeting UI의 OnClickSkipVoteButton 함수를 등록해줍니다.

작업을 모두 마친 뒤에는 게임을 빌드합니다.

그리고 게임을 실행해서 테스트해보면 투표 스킵이 잘 작동하는 모습을 볼 수 있습니다.

물론 지금은 한 플레이어가 스킵하면 모든 플레이어에게서 스킵버튼이 바로 사라지고 스킵한 플레이어가 보이게 되면서 한 명만 스킵이 가능하지만 이 부분은 모든 플레이어가 투표한 뒤에 그 결과가 보이도록 만들면서 수정할 예정입니다.

시간 제한

그 다음으로는 투표를 하지 않는 플레이어를 자동으로 스킵처리하기 위해서 투표 시간 제한을 추가해보겠습니다.

먼저 회의와 관련된 시간 변수를 찾아보기 위해서 GameRuleStore 스크립트를 열어보겠습니다.

게임 규칙과 관련된 GameRuleData 구조체를 살펴보면 회의 시간인 meetingsTime과 투표 시간인 voteTime 변수를 볼 수 있습니다.

이 두 값을 이용해서 회의 시간과 투표 시간을 제한해보겠습니다.

GameSystem 스크립트로 이동해서 float 타입으로 남은 회의 시간과 투표 시간을 나타내는 데 사용될 remainTime 변수를 만들고 SyncVar 어트리뷰트를 붙여줍니다.

그리고 이 제한 시간을 계산할 코루틴 함수를 MeetingProcess_Coroutine이라는 이름으로 만들어 줍니다.

MeetingProcess_Coroutine 함수에서는 룸 매니저에서 가져온 게임 규칙 데이터의 meetingsTime과 voteTime 값을 이용해서 remainTime을 계산하도록 만들어줍니다.

그리고 회의가 시작된 직후에 회의 시간동안에는 투표를 하지 못하게 막기 위해서 플레이어들의 isVote를 true로 만들어줍니다.

그 다음에 회의 시간이 끝나고 투표 시간이 시작될 때 플레이어들의 isVote를 false로 만들어서 다시 투표가 가능하게 만들어 주고 투표받은 수나 스킵된 투표 수 역시 초기화해 줍니다.

만들어진 MeetingProcess_Coroutine 함수는 StartReportMeeting 함수에서 호출해줍니다.

그리고 중간에 회의 시간이 끝나고 투표 시간이 시작되었음을 알리기 위한 RpcStartVoteTime 함수와 투표 시간이 종료되었음을 알리는 RpcEndVoteTime 함수를 만들고 각각 ClientRpc 어트리뷰트를 붙여줍니다.

함수의 자세한 내용은 작업을 좀 더 진행한 이후에 채우기로 하고 MeetingProcess_Coroutine 함수에서 이 두 함수를 호출하도록 만들어줍니다.

그 다음에는 MeetingUI 스크립트로 넘어가서 상단에 회의 상태를 확인하기 위한 EMeetingState 열거형을 만들어줍니다.

그리고 방금 만든 열거형 타입으로 회의 상태를 표시할 meetingState 변수와 Text 타입으로 시간을 출력하기 위한 meetingTimeText 변수를 선언해줍니다.

그리고 ChangeMeetingState 함수를 만들어서 외부에서 회의 상태를 변경할 수 있게 만들어 준 뒤 Update 함수에서 남은 시간을 표시하도록 만들어 줍니다.

다시 GameSystem 스크립트로 이동해서 StartMeeting_Coroutine 함수에서 MeetingUI의 ChangeMeetingState 함수를 호출해서 회의 상태를 Meeting으로 변경하고 RpcStartVoteTime 함수에서는 Vote로 변경하게 코드를 작성합니다.

그리고 마지막으로 할 작업은 현재 투표를 하면 바로 결과가 보이는 것을 모든 투표가 완료된 이후에만 결과가 공개되도록 수정하는 것입니다.

먼저 MeetingPlayerPanel 스크립트로 이동해서 OpenResult 함수를 만들고 UpdatePanel 함수에 있는 voterParentTransform를 보이게 만들어주는 코드를 방금 만든 함수로 이동시킵니다.

그리고 MeetingUI 스크립트로 이동해서 CompleteVote 함수를 만든 뒤 각 패널의 OpenResult 함수를 호출하고 UpdateSkipVotePlayer 함수에서 스킵한 플레이어들을 보여주는 코드를 이 CompleteVote 함수로 이동시켜줍니다.

마지막으로 GameSystem 스크립트로 이동해서 RpcEndVoteTime 함수에서 MeetingUI의 CompleteVote 함수를 호출하도록 코드를 작성하고 MeetingProcess_Coroutine 함수에서 RpcEndVoteTime 함수가 호출되기 전에 아직 투표하지 않은 플레이어가 있다면 강제로 스킵에 투표하도록 해줍니다.

코드를 모두 작성한 다음에는 코드를 저장하고 에디터로 돌아갑니다.

에디터에서는 Meeting UI 오브젝트 아래에 시간을 표시할 Text를 추가해줍니다.

그리고 추가한 Text 오브젝트는 Meeting UI 컴포넌트의 Meeting Time Text 프로퍼티에 할당해줍니다.

그리고 모든 작업이 끝나면 게임을 빌드합니다.

빌드가 완료되고 실행해서 테스트해보면 회의 시간이 끝나기 전에는 투표가 불가능하며, 투표 시간이 되면 그때부터 투표가 가능해집니다.

그 다음에 투표 시간이 끝날 때 투표 결과가 공개되며 시간이 끝날 때까지 투표를 하지 않은 플레이어는 자동으로 스킵 처리되는 모습을 확인할 수 있습니다.

아웃트로

이번 영상에서는 투표와 추방 기능을 만들기 위해서 다른 플레이어에게 투표하는 기능과 투표 스킵 기능, 그리고 투표 시간 제한을 만들어 보았습니다.

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

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

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

[투네이션]

[Patreon]

[디스코드 채널]

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

이번 영상에서는 대규모 게임 회사에서 고퀄리티 지형을 만드는 데 사용되는 툴을 알아봅시다!

타임라인

0:00 인트로

0:45 월드 머신

2:38 월드 크리에이터

3:25 아웃트로

스크립트

인트로

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

여러분들은 여러 게임이나 영화를 보면서 엄청나게 넓은 지형과 월드맵을 어떻게 제작하는지 궁금해 해보신 적이 있으신가요?

영화에서 실제로 존재하는 공간이라면 그 현장에 가서 촬영을 하고 CG를 씌우겠지만, 그 공간을 직접 제작해야 하는 게임이나 우리의 상상 속에만 존재하는 공간이라면 어떻게 만들어질까요?

게임이나 영화 속에 나오는 깎아지른 산이 빼곡한 산악 지대, 황량하고 광활한 사막, 매서운 바람이 몰아치는 설원과 빙하지대, 들끓는 용암이 흐르는 용암 지대, 아무도 가본 적없는 우주의 행성과 같은 지형이 어떻게 만들어지는지 알려드리기 위해 이번 영상에서는 상당수의 대규모 프로덕션에서 고퀄리티 지형을 제작하는데 사용되는 툴을 소개해보겠습니다.

월드 머신

첫 번째로 소개할 툴은 월드 머신입니다.

구글에서 World Machine이라는 키워드로 검색하면 제일 상단에 World Machine : The Premier 3D Terrain Generator라는 이름으로 월드 머신 공식 페이지 링크가 뜨는 것을 볼 수 있습니다.

그 링크로 접속하면 월드 머신을 어떻게 사용하는지 간단한 프리뷰가 보이는 홈페이지를 볼 수 있습니다.

여기서 Free download 버튼을 누르면 무료 버전의 월드 머신을 다운로드 받을 수 있습니다.

무료 버전의 월드 머신은 비상업적으로 사용하는 경우에 무료로 제공되고 1025x1025의 해상도 제한이 있습니다.

이러한 제한없이 사용하고 싶으시다면 유료 버전을 구매해서 사용하시면 됩니다.

먼저 무료 버전을 통해서 사용법을 익힌 뒤에 유료 버전을 구매해서 사용하시는 것도 좋습니다.

일단 무료 버전을 다운로드 받아서 설치합니다.

설치가 완료된 다음 월드 머신을 실행해보면 노드를 이어서 지형을 제작하는 작업 공간이 보입니다.

그리고 왼쪽 상단에는 지금 노드로 만들어진 월드가 작게 보이는데 좀 더 크게 보고 싶다면 상단 메뉴 바에서 사각형 4개가 모여있는 스플릿 버튼을 누르면 월드의 모습을 좀 더 크게 원하는 각도로 돌려볼 수 있는 3D뷰를 볼 수 있게 됩니다.

이 3D 뷰를 켜고 각 노드를 선택하면 해당 노드의 결과물을 볼 수 있고 Scene View 노드를 선택하면 모든 작업이 처리된 최종 결과물을 볼 수 있습니다.

그리고 각 노드를 선택해서 변수 값을 바꿔주면 실시간으로 지형이 바뀌는 모습을 볼 수 있습니다.

그리고 노드를 추가하면 바다나 강 역시도 추가할 수 있습니다.

이런 작업을 통해 만들어진 높이 맵을 게임 엔진으로 불러와서 사용하게 됩니다.

이렇게 만들어진 지형을 유니티 엔진과 언리얼 엔진에서 불러오면 이렇게 됩니다.

월드 크리에이터

두 번째로 소개할 툴은 월드 크리에이터 입니다.

월드 머신과 마찬가지로 지형을 제작하는 툴인데 월드 크리에이터는 월드 머신과 같은 교육용 무료 버전을 제공하지 않습니다.

월드 머신과 월드 크리에이터를 모두 사용해본 지인의 의견으로는 월드 크리에이터 쪽이 조금 더 고퀄리티의 결과물을 내기에 좋다고 합니다.

그래서인지 우리가 잘 아는 대규모 개발사들은 상당수 월드 크리에이터를 사용하고 있습니다.

기능 제한이 있는 스탠다드 버전은 $149로 $119인 월드 머신의 인디 버전 버전보다 비싸지만 거의 모든 기능을 자유롭게 사용할 수 있는 프로페셔널 버전은 $289로 $299인 월드 머신의 프로페셔널 버전보다는 저렴합니다.

고퀄리티의 지형 제작에 도전해보고 싶으신 분들이라면 구매해서 사용해보시면 좋을 듯합니다.

아웃트로

이번 영상에서는 거대한 지형을 제작하는데 사용되는 툴인 월드 머신과 월드 크리에이터를 소개해봤습니다.

조금 더 여유가 생긴다면 월드 머신이나 월드 크리에이터로 월드를 제작해서 게임 엔진에 올리는 작업을 강좌로 만들어보도록 하겠습니다.

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

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

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

[투네이션]

[Patreon]

[디스코드 채널]