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

 

베르의 게임 개발 유튜브

안녕하세요! 여러분들과 함께 게임 개발을 공부하는 베르입니다! 게임 개발에 도움이 되는 강좌들을 올리는 채널입니다! [투네이션 후원] https://toon.at/donate/637735212761460238 [유니티 어필리에이트

www.youtube.com

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

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

 

사용 엔진 버전 : 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 오브젝트를 할당해줍니다.

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

아웃트로

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

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

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

 

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

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

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

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

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

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

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

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

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

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

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

+ Recent posts