따라하는 유니티 2D 프로젝트ⓑ -7

 

 

따라하는 유니티 2D 프로젝트ⓑ 강좌 일곱 번째 시간입니다.

 

 

이번에 함께 할 작업은 저번 시간에 만들어 두었던 체력바를

필요한 때만 보여줄 수 있도록 하겠습니다.

(데미지를 받은 경우 3초 동안 보여주도록)

볼이 모두 없어지는 경우 게임오버, 즉 게임종료 화면으로 전환하도록 하겠습니다.

그때 Retry 버튼을 두고, 처음부터 다시 시작할 수 있도록 하겠습니다.

 

 

그럼 시작하겠습니다.

 

가장 먼저 저번에 작업했던 프로젝트를 실행합니다.

그리고 순서대로 직접 따라하시면 됩니다.

 

 

실행해보면 저번에 마지막 작업했던 부분이 정상적으로 나옵니다.

모든 블록에 대해서 체력 게이지를 보여주는 체력바를 생성해줬었죠?

 

 

먼저 체력바를 피해를 받은 경우에만 보여주도록 바꿔볼까요?

 

Scripts - Block 폴더로 들어가서

BlockInfo 스크립트를 열어주세요.

 

 

BlockInfo 스크립트에 게이지 활성화 상태 체크용 bool 변수 하나를 만들어주고,

SetBlockInfo() 스크립트에도 해당 내용을 추가해줍니다.

 

SetBlockInfo 함수는 블록이 활성화 될 때(새로운 블록 생성) 만들어지는 거였죠?

그때 게이지가 활성화 상태면 비활성화 상태로 바꿔줍니다. (게이지 비활성화 = 안 보임)

 

그리고 게이지를 3초 동안 보여주는 코루틴을 만들어줍니다.

(코루틴 함수 추가. OnTriggerEnter2D 함수 바로 위에 새로 만들었죠?)

 

코루틴 함수가 실행되면 gaugeOn = true로 바꿔주고,

게이지를 활성화 ( SetActive(true) )해줍니다.

 

그리고

yield return new WaitForSeconds(3f);

를 통하여 3초 후에 다음 부분이 실행되도록 합니다.

 

3초 후 게이지를 다시 비활성화시키고,

gaugeOn = false;로 바꿔줍니다.

 

코루틴을 잘 모르시겠다면

'코루틴이란? 사용법은?'

확인해보세요.

 

이 부분은 피격 시 깜박이는 피격효과가 있던 부분입니다.

 

여기에서 gaugeOn을 통하여 true 상태면

현재 실행 중인 GaugeOnRoutine 코루틴을 정지시킵니다.

그리고 해당 코루틴을 다시 실행시키죠.

(이러면 코루틴이 중복 실행되지 않고, 보여지는 시간만 초기화되겠죠?)

 

 

이렇게 실행시켜보면, 충돌된 부분만

3초 동안 체력을 표시해주는 것을 확인할 수 있을 것입니다.

 

 

이번에는 게임 종료 처리를 해보도록 하겠습니다.

 

aliveBallCount 라는 변수를 새로 추가해줬습니다.

이 변수로 현재 생존 중인 볼이 몇 개인지 확인할 겁니다.

(생존 중 = 현재 화면에서 움직이고 있는 볼)

 

Awake()에서 aliveBallCount = 0;으로 초기화도 해줬죠?

 

 

그리고 AcitveBall() 함수에서 볼을 생성할 때, aliveBallCount도 1 증가시켜주도록 합니다.

 

 

이번에는 게임오버가 되는 조건이 있는 함수입니다.

기본적인 기능은 aliveBallCount를 감소시키는 일인데요.

볼이 없어질 때마다 호출될 것입니다. (볼이 화면 아래로 내려갈 때)

 

 

MoveBall 스크립트에서 예전에 만든

y축 밑으로 가면 볼이 제거되게 하는 부분이죠?

 

볼 제거(비활성화)와 함께

GameObject.Find로 GameManager 게임 오브젝트를 찾은 후

GetComponent로 BallManager 스크립트를 얻어와

스크립트 안의 MinusAliveBallCount() 함수를 호출했습니다.

 

 

이렇게 게임 샐행 후 볼 3개를 만들어 NormalBall이 모두 없어지면,

"게임오버"라고 콘솔탭에 출력되는 것을 확인할 수 있습니다.

 

 

다음으로 게임오버 시 보여줄 UI를 만들어봅시다.

 

Hierarchy 탭의 빈 공간에서 마우스 우클릭,

UI - Canvas 순으로 선택해줍니다.

 

 

그러면 이렇게 Canvas가 생성된 것을 확인할 수 있습니다.

(밑의 EventSystem은 UI를 사용하기 위해 함께 생성된 객체입니다.)

 

 

Canvas가 선택된 상태에서 제대로 사용하기 위해 두 가지 설정을 해줘야합니다.

 

먼저 Render Mode를

Screen Space - Overlay에서

Screen Space - Camera로 바꿔주세요.

 

그리고 그 후

Render Camera를 Main Camera로 설정해주세요.

(지금까지와 마찬가지로 드래그 앤 드랍하여 넣어주면 됩니다.)

 

 

그럼 다음으로 화면 전체 위치 틀을 잡을 Panel을 만들어줍니다.

 

Canvas 위에서 우측 클릭 - UI - Panel 순입니다.

 

 

Canvas 하위에 Panel이 만들어진 것을 확인할 수 있습니다.

 

 

Scale을 X 1.01, Y 1.01로 바꿔주세요.

(테두리 부분이 약간 남는 것 때문에 살짝만 더 크게 만들어주는 겁니다.)

 

 

그리고 색상을 어둡게 만들어주세요.

(다른 색으로 해도 괜찮습니다.)

 

 

그러고 실행해보면

배경 화면만 어두워졌을 뿐입니다.

 

원래 UI라면 게임 실행 화면보다 위에 나와야겠죠?

 

설정을 바꿔줍시다.

 

Canvas를 선택하여

Order in Layer를 10으로 바꿉니다.

 

(Sorting Layer 기능을 이용하면 레이어 별 우선 순위도 정할 수 있지만,

지금은 간단하게 Order in Layer의 순서만 높여주도록 합니다. [높을 수록 앞에 그려짐])

 

 

그리고 실행해보면

이렇게 게임 화면 위로 어두워진 것을 확인할 수 있습니다.

 

이제 텍스트와 버튼도 추가해줄까요?

 

Panel 위에서 마우스 우클릭 - UI - Text 순으로 선택해주세요.

 

그리고 이렇게 Text 선택하여 설정해줍니다.

위치, 텍스트 내용, 폰트 사이즈 등을 설정해줍니다.

 

여기서 하나만 집고 넘어가자면

Text(Script)의 Paragraph 부분에

Horizontal Overflow는 좌우로 글자를 넘치게 할지, 말지,

Vertical Overflow는 상하로 글자를 넘치게 할지, 말지

(넘치게 = 범위를 초과하여 나타내도록)

에 대한 부분입니다.

(Overflow로 설정하면 만든 텍스트 크기와 상관없이 폰트 사이즈 대로 보여줍니다.)

 

 

(게임 화면에서도 보이는 내용.)

 

 

이번에는 재도전 할 수 있는 버튼을 추가해줄까요?

이번에는 Panel 위에서 마우스 우클릭 - UI - Button 순서입니다.

 

그러면 이렇게 생성되는 것을 확인할 수 있습니다.

(버튼은 기본적으로 Button과 하위 Text로 구성되어있습니다.)

 

Button을 선택하여 설정을 해줍시다.

이렇게 위치와 사이즈(Width, Height) 부분을 수정해줍니다.

 

 

그리고 Button의 하위에 있는 Text의 내용과 크기도 바꿔줍니다.

 

Retry 버튼으로 사용할 것이기 때문에 그대로 입력해줍니다.

 

 

Rich Text에 대하여 잠깐 설명하자면

Rich Text를 사용하면 HTML에서 사용하는 방법으로 텍스트에 색상을 줄 수 있습니다.

(지금 우리는 필요 없으니 꺼준 겁니다.)

 

사용 방법은 Rich Text를 체크(킨) 상태에서

<color=red>Retry</color>

이런식으로 입력해주면 됩니다.

 

 

자, 이렇게 간단하게 GameOver 화면을 만들었습니다.

 

게임 실행해서 어떻게 나오는지 확인해볼까요?

이렇게 GameOver 화면이 나오는 것을 확인할 수 있습니다.

 

 

이제 실제로 게임오버 조건일 때

게임오버 패널을 나타내 볼까요?

 

우선 Panel의 이름을 사용하기 편하게 GameOverPanel로

이름을 바꿔주도록 합니다.

 

먼저 게임이 실행하면 안 보이도록

비활성화 된 상태로 만들어줍니다.

 

 

그리고 BallManager.cs 스크립트로 갑니다.

 

아까 MinusAliveBallCount() 함수에서

콘솔탭에 "게임오버"라고 출력한 부분 바로 밑에

GameObject.Find("Canvas").transform.FindChild("GameOverPanel").gameObject.SetActive(true);

Time.timeScale = 0;

을 추가해줍니다.

Time.timeScale = 0;으로 시간 흐름도 멈춘 상태로 만들어주고요.

(timeScale은 시간의 크기로 0은 멈춤, 1은 보통입니다. 배속 정도로 생각하시면 됩니다.

0.5면 0.5배속 1이면 1배속, 3이면 3배속이겠죠? .. 0이면 0배속이니 멈춤입니다.)

 

바로 GameOverPanel을 찾지 않은 것은

비활성화 상태인 오브젝트는 GameObject.Find 함수로 찾을 수 없기 때문입니다.

그래서 항상 활성화되어 있는 Canvas를 먼저 찾고,

자식인 GameOverPanel을 FindChild로 찾아준 거죠.

 

이 GameObject는 어떻게 찾고 사용하는지 궁금하다면

'유니티, 원하는 게임오브젝트 얻기 -1(GameObject.Find..)'

'유니티, 원하는 게임오브젝트 얻기 -2(transform.FindChild..)'

을 한번 읽어보시면 이해에 도움이 될 것 같습니다.

 

 

그리고 실행해보면

이렇게 게임오버 조건이 충족되면

GameOver 패널이 나오는(활성화되는) 것을 확인할 수 있습니다.

 

 

이제 마지막으로 Retry 버튼을 누르면

게임이 재시작되도록 해줍시다.

 

UI용 스크립트를 만들기 위해서

Scripts 하위에 UI 폴더를 만들고

UI 폴더 내에서 Create - C# script를 선택합니다.

 

이름은 UIgameOver로 만들었습니다.

 

스크립트 내에는

using UnityEngine.SceneManagement;

와

public void RetryButton()

함수 하나를 작성해줍니다.

 

using UnityEngine.SceneManagement;를 해줘야

해당 스크립트에서 SceneManager를 사용할 수 있습니다.

 

SceneManager.LoadScene("GameScene");은

우리 만들어둔 씬(하나밖에 없죠?)을

불러오는 것입니다. (그러면 처음부터 시작되겠죠?)

 

그리고 Time.timeScale = 1f;를 통하여

게임 종료 시 설정했던 시간 크기를 다시 되돌려줍니다.

 

(여기 Scenes 폴더에 보면 저장해뒀던 GameScene이 있죠?)

(혹 씬 저장 시 이름을 달리했다면 그 이름을 LoadScene("이름")에 넣어주어야 합니다.)

 

 

GameOverPanel을 선택하여

UIgameOver 스크립트를 추가해줍니다.

지금까지와 마찬가지로 드래그 앤 드랍입니다.

 

 

그리고 Button(리트라이 버튼)을 선택하여

On Click() 이벤트를 추가해줍니다. ( + 클릭)

(클릭 시 처리할 함수를 설정해줄 수 있습니다.)

 

 

우측 하단의 +를 누르면 이렇게 추가됩니다.

 

 

None (Object) 부분에 GameOverPanel을 넣어줍니다.

지금까지와 마찬가지로 드래그 앤 드랍이죠?

 

 

그리고 No Function을 클릭하여

UIgameOver - RetryButton() 순으로 선택해줍니다.

 

그러면 Retry 버튼을 누르는 경우 실행될 함수 설정도 끝났습니다.

 

 

이제 실행하여 확인해 볼까요?

 

이렇게 게임오버 패널이 나와

Retry 버튼을 눌러보면,

 

다시 게임이 재시작되는 것을 확인할 수 있습니다.

(여기 볼 세 개는 제가 만들고 스크린샷을 찍었습니다..)

 

 

지금까지 따라하는 유니티 2D 프로젝트ⓑ -7번 강좌를 보셨습니다.

이번 시간에는 체력 게이지를 특정 조건에서 정해진 시간 동안만 보여주도록 했고,

그리고 볼이 모두 없어지는 조건에 따라 게임이 종료되도록 하고,

게임 오버 화면 구성(UI), 게임 재시작 기능을 만들고 적용시켜봤습니다.

 

 

다음 시간에는 블록을 추가 생성할 수 있도록 하고,

볼이 블록과 겹친 위치에 생성되지 않도록 예외 처리를 해주고,

클리어 조건도 추가해보겠습니다.

 

 

+그리고 그 다음 시간에 간단하게 어플로 전환하기 위해서

 어떤 처리를 추가로 해줘야 하는지 살펴보고

 어플로 만들어보도록 하겠습니다.

 

이번 프로젝트ⓑ는 생각보다 스크립트를 너무 많이 써서

처음에는 난이도를 '초' 정도로 보고 시작했지만 지금은 '중'정도인 것 같습니다..

거기에 지금은 강좌를 작업할 시간도 제대로 못 내서 급하게 마무리하고

다음 강좌는 1~2달 정도 후에 여유를 두고 다시 자세히 만들어야 겠습니다.

그 기간 동안 프로젝트ⓐ, 프로젝트ⓑ 모두 간단한 완성형 정도는 만들어서

올리도록 하겠습니다.

 

고생하셨습니다. 같이 따라하며 해보니 어떤가요? 도움은 좀 됐나요?

그럼 프로젝트의 다음 단계를 진행하며 나오는 새로운 것들에 대해서는

지금과 같이 설명하며 진행하도록 하겠습니다.

 

 

궁금한 점 있으시면 댓글이나 따로 메일로 질문하시면 시간되는 대로 답변드리겠습니다. ( 연락 )