[Unity] Make the 어몽어스 (27) - 임무 만들기 3

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

베르의 게임 개발 유튜브

 

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

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

 

예제 : 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로 같은 색상 와이어끼리 연결되었을 때만 불빛이 들어오는 모습을 확인할 수 있습니다.

아웃트로

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

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

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

 

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

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

에셋스토어

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

[투네이션]

-

[Patreon]

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

[디스코드 채널]

Join the 베르의 게임 개발 채널 Discord Server!