<div id="readability-page-1" class="page"><cite>wergia</cite>
 2022. 7. 7. 21:20
 <div>
 <figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=yFQARqOYX_Y" data-video-thumbnail="https://scrap.kakaocdn.net/dn/lqIhd/hyO0EAdBJn/dShqczKEOhnYWNtKBDojI1/img.jpg?width=1280&amp;height=720&amp;face=0_0_1280_720" data-video-width="860" data-video-height="484" data-video-origin-width="860" data-video-origin-height="484" data-ke-mobilestyle="widthContent"><iframe src="https://www.youtube.com/embed/yFQARqOYX_Y" width="860" height="484" frameborder="" allowfullscreen=""></iframe>
<figcaption></figcaption>
<img src="https://scrap.kakaocdn.net/dn/lqIhd/hyO0EAdBJn/dShqczKEOhnYWNtKBDojI1/img.jpg?width=1280&amp;height=720&amp;face=0_0_1280_720"></figure>
개발단에 가입하여 베르의 게임 개발 유튜브를 후원해주세요! <a href="https://www.youtube.com/channel/UC9j37A2ACL9ooSbsT4mtGww/join">https://www.youtube.com/channel/UC9j37A2ACL9ooSbsT4mtGww/join</a> 
안녕하세요! 여러분들과 함께 게임 개발을 공부하는 베르입니다! 
이번에는 앞에서 만든 와이어 수리 임무 UI를 게임과 직접 연결해봅시다. 

사용 엔진 버전 : 2019.4 

타임라인 
0:00 인트로 
0:12 초기화 기능 추가 
0:32 닫힘 기능 만들기 
1:44 임무 오브젝트 배치와 UI 연결 
6:23 아웃트로 

[유니티 어필리에이트 프로그램] 
아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다. 
- 유니티 에셋스토어 : <a href="https://prf.hn/l/eQEbxXy">https://prf.hn/l/eQEbxXy</a> 
- 유니티 플러스 : <a href="https://prf.hn/l/qXzX99o">https://prf.hn/l/qXzX99o</a> 
- 유니티 프로 : <a href="https://prf.hn/l/4mJ3Q3p">https://prf.hn/l/4mJ3Q3p</a> 

[투네이션 후원]
 <a href="https://toon.at/donate/637735212761460238">https://toon.at/donate/637735212761460238</a> 

[Patreon&nbsp;Donation] <a href="https://www.patreon.com/WerGameDevChan" target="_blank" rel="noopener">https://www.patreon.com/WerGameDevChan</a>

[디스코드 채널]
 <a href="https://discord.gg/tqmRTy4pgk">https://discord.gg/tqmRTy4pgk</a> 

<h2>스크립트</h2>
<h2 data-ke-size="size26">인트로</h2>
안녕하세요. 여러분들과 함께 게임 개발을 공부하는 베르입니다.
지난 시간까지는 와이어 수리하기 임무의 기본 구성을 만들었으니 이제 이 기능을 본격적으로 게임과 연결해보겠습니다.
<h2 data-ke-size="size26">초기화 기능 추가</h2>
먼저 게임에서 임무창이 꺼졌다가 켜졌을 때 내용이 다시 초기화되는 기능을 만들어야 합니다.
FixWiringTask 스크립트를 열겠습니다.
그리고 OnEnable 함수에서 LeftWires 리스트에 들어있는 왼쪽 와이어들을 대상으로 연결을 초기화하는 코드를 작성합니다.
<h2 data-ke-size="size26">닫힘 기능 만들기</h2>
그 다음으로는 임무를 완료하거나 도중에 그만 뒀을 때 UI가 닫히도록 만들 차례입니다.
Open 함수와 Close 함수를 만들어줍니다.
이 Open 함수에서는 임무 UI를 켜는 것은 물론 도중에 캐릭터가 움직이지 않도록 IsMoveable을 false로 바꾸는 작업도 해야합니다.
Close 함수는 Open 함수와 반대로 동작하도록 만들면 됩니다.
그 다음에는 CheckCompleteTask 함수를 만들고 와이어를 검사해서 모든 와이어가 연결된 상태에서만 UI가 닫히도록 코드를 작성합니다.
그리고 이 함수는 Update 함수에서 오른쪽 와이어와 연결되고 끊어지는 순간마다 검사하도록 만들어줍니다.
코드를 모두 작성한 다음에는 저장하고 에디터로 잠시 돌아갑니다.
에디터에서는 Task UI 오브젝트 아래에 이미지를 하나 추가하고 화면 전체를 덮게 만들어 줍니다.
그리고 거기에 Button 컴포넌트를 붙이고 Transition을 None으로 바꾼 뒤 OnClick 이벤트에 FixWiring의 Close 함수를 등록해줍니다.
<h2 data-ke-size="size26">임무 배치하기</h2>
이제 임무를 실행하기 위한 오브젝트를 배치할 차례입니다.
먼저 맵이 잘 보이도록 만들기 위해 하이어라키 뷰에서 캔버스와 라이트맵 오브젝트를 꺼줍니다.
그리고 맵 리소스에서 관리실의 전선함 이미지를 찾아서 관리실 복도에 배치해주고 머티리얼을 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 함수에서 호출하도록 만들어 줍니다.
&lt;재녹음&gt;이때 버튼 이벤트에 등록할 OnClickUse 함수를 만들어두겠습니다.
그리고 IngameUIManager 스크립트으로 이동해서 fixWiringTask 변수를 만들어서 캐싱이 가능하게 만들어줍니다.
다시 FixWiringTaskObject 스크립트로 돌아가서 OnClickUse 함수에서 FixWiringTask UI를 열도록 코드를 작성합니다.
코드를 모두 작성한 다음에는 저장하고 에디터로 돌아갑니다.
에디터로 돌아온 다음에는 앞에서 맵에 배치해둔 전선함 스프라이트 오브젝트에 콜라이더를 배치하고 위치를 잡아준 뒤 Is Trigger 체크해줍니다.
그리고 FixWiringTaskObject 컴포넌트를 붙이고 스프라이트 프로퍼티에 Use 버튼 스프라이트를 넣어줍니다.
그 다음에는 IngameUIManager 컴포넌트에 비어있는 프로퍼티들을 채워줍니다.
작업을 모두 마친 다음에는 게임을 빌드하고 실행해서 테스트합니다.
테스트를 진행해보면 전선함 근처에 다가가면 오브젝트가 강조되고 Use 버튼이 활성화됩니다.
그리고 버튼을 누르면 와이어 연결 임무 UI가 뜨고 전선을 모두 알맞게 연결하면 UI가 꺼지는 모습을 볼 수 있습니다.
<h2 data-ke-size="size26">아웃트로</h2>
이번 영상에서는 맵에 전선함 오브젝트를 만들고 앞에서 만든 와이어 연결 임무 UI와 연결해보았습니다.
이 강좌는 시청자 여러분들의 시청과 후원으로 제작되었습니다.
이상 베르의 게임 개발 유튜브였습니다. 감사합니다.
 
 
 </div></div>

베르의 프로그래밍 노트

개발단에 가입하여 베르의 게임 개발 유튜브를 후원해주세요! https://www.youtube.com/channel/UC9j37A2ACL9ooSbsT4mtGww/join 
안녕하세요! 여러분들과 함께 게임 개발을 공부하는 베르입니다! 
이번에는 앞에서 만든 와이어 수리 임무 UI를 게임과 직접 연결해봅시다. 
 
사용 엔진 버전 : 2019.4 
 
타임라인 
0:00 인트로 
0:12 초기화 기능 추가 
0:32 닫힘 기능 만들기 
1:44 임무 오브젝트 배치와 UI 연결 
6:23 아웃트로 
 
[유니티 어필리에이트 프로그램] 
아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다. 
- 유니티 에셋스토어 : https://prf.hn/l/eQEbxXy 
- 유니티 플러스 : https://prf.hn/l/qXzX99o 
- 유니티 프로 : https://prf.hn/l/4mJ3Q3p 
 
[투네이션 후원]
 https://toon.at/donate/637735212761460238 
 
[Patreon Donation] 
https://www.patreon.com/WerGameDevChan
 
[디스코드 채널]
 https://discord.gg/tqmRTy4pgk 
 
스크립트
인트로
안녕하세요. 여러분들과 함께 게임 개발을 공부하는 베르입니다.
지난 시간까지는 와이어 수리하기 임무의 기본 구성을 만들었으니 이제 이 기능을 본격적으로 게임과 연결해보겠습니다.
초기화 기능 추가
먼저 게임에서 임무창이 꺼졌다가 켜졌을 때 내용이 다시 초기화되는 기능을 만들어야 합니다.
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와 연결해보았습니다.
이 강좌는 시청자 여러분들의 시청과 후원으로 제작되었습니다.
이상 베르의 게임 개발 유튜브였습니다. 감사합니다.
 
'게임 제작 > Make the 시리즈' 카테고리의 다른 글
[Unity] Make the 어몽어스 (28) - 임무 만들기 4  (0)
21:20:47
[Unity] Make the 어몽어스 (27) - 임무 만들기 3  (0)
2022.03.28
[Unity] Make the 어몽어스 (26) - 임무 만들기 2  (2)
2022.03.06
[Unity] Make the 어몽어스 (25) - 임무 만들기 1  (0)
2022.02.22
[Unity] Make the 어몽어스 (24) - 투표와 추방 기능 만들기 3  (0)
2022.01.30
[Unity] Make the 어몽어스 (23) - 투표와 추방 기능 만들기 2  (2)
2021.09.15

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

댓글