모바일 게임 만들어보기 2 - 3 풍선을 지켜라 게임

Hi (●'◡'●)

 

 

지금까지 우리는

UI 꾸미고

게임매니저 스크립트를 만들어서

게임 내에서 움직이는 친구들을

적어보았다.

 

게임이 돌아가기 위해 

쓰는 코드들이

Game Manager 스크립트!! 였다.

 

다음 코딩 해 볼 내용은

스톱워치!

 

자 시간이 흘러가는 것을 먼저 적고

Text에다가 넣어주어야 한다.

 

자! 그럼 시간이 흐르는 코드는?

 

 ✨ deltaTime; ✨

C#에서 제공해 주는 시간코드

 

 

시간을 담을 수 있는 변수 생성

float time = 0.00f

 

다음 이 시간을 계속 가는 거니까

Update 에다가

 

time = Time.deltaTime;

 

여기서 이 Time은

말했듯 c#에서 지원해 주기 때문에 사용이 가능하다.

 

자 이제,

흘러가게 만들었으니

배경에 있는 빨간 글씨에

시간을 담은 time을 넣어주어야 한다.

 

이 빨간 글씨는

 

 

 

우리는 여기서 Text 컴포넌트 안에 Text값에 넣어주어야 한다.

 

그렇다면 먼저

코드에 Text컴포넌트를 가져올 수 있는

라이브러리를 가져와야 Text 컴포넌트를 사용할 수 있다.

 

라이브러리가 기억이 안 나거나

깜빡하고 일단 변수부터 쓰면

 

이렇게 빨간 줄이 뜨는데

여기서 왼쪽에 있는 노란 전구 버튼을 누르면

이렇게

빨간 줄을 지울 수 있는 방법들을 설명해 준다.

 

 

우리는 저기 밑에 UI를 추가해 주면 된다!!!

 

자 그다음에 우리는

 

Text 컴포넌트 안에

Text 값에

시간을 넣어주어야 한다.

 

timeTxt.text = time.ToString("N2")

 

ToString는

text 값 안에는 문자열이 들어가야 하는데

우리는 time을 실수형으로 만들었기 때문에

자료형을 변환해 주는 것이다.

 

N2는 여기서 소수점 두 번째까지 라는 뜻을 가지고 있다.

 

" " 따옴표 필수여!!!!

 

 

자, 이제

끝났을 때 점수판을 만들어보자

 

UI일 테니

Canvas안에 만들어야겠죠?!

 

만들 땐

Canvas > Create Empty

 

이름은

EndPanel

여기 안에다가

 

EndPanel > UI > Image

 

Width 450

Height 600

 

다음에 조금 맛깔나게 생기게

그림자를 추가해줘야 하는데

 

Add Component > Shadow 치면 나온다

색상은 255 255 0

 

가장 중요한 건

 

Effect Distance 값을

X 15

y -15로

맞춰주면

 

 

사진처럼 나오게 된다.

 

설정값이 이렇게 되었다면!

잘 따라오신 것!!

 

자 그다음에

글자를 넣어야 하는데

그전에 폰트를 조금 준비해 보자

 

아무 폰트나 상관없지만

혹시 저와 같은 폰트가 쓰고 싶으신 분들은

배달의민족 주아 체

 

http://pop.baemin.com/fonts/jua/BMJUA_ttf.ttf

 

요고 다운로드하셔서 쓰시면 됩니다.

 

제 링크가 불안하신 분들은

배민 주아체는 무료배포니 까요

홈페이지 들어가셔서 다운로드하셔도 됩니다 :)

 

다운로드하시고

 

폴더 Fonts 파일을 생성해서 만든 다음에

 

다운로드한 주아체를 드래그드롭해 주면 된다.

 

 

그럼 이제 판넬 안을 채워보자

 

먼저

끝!이라는 단어와

스코어! 를 넣어줘야 하니

Text를 만들어줘야 한다.

 

UI > Legacy > Text로 추가

 

끝은 이름을

 < Title >

 

Y 194

Width 200

Height 200

색상 255 0 0

폰트 배민주아

폰트 사이즈 50

중앙정렬

Text 내용 끝

 

이 친구를 그대로 복사!

 

Ctrl D를 사용

c 랑 v를 누르지 않아도 

D로 한 번에 해결할 수 있는 좋은 시스템이다

나는 이미 사용하고 있었지만..

아무쪼록 잘 사용해 보자!

 

다음 친구

 

< NowScoreTitle >

X -100

Y 100

Width 200

Height 200

(앞에 친구를 그대로 복사해 와서 안 고쳐도 된다.)

 

색상 255 255 255

폰트 배민주아

폰트 사이즈 40

중앙정렬

Text 내용 현재 점수

 

 

또 그대로 복사

< BestScoreTitle >

X -100

Y 0

Width 200

Height 200

(앞에 친구를 그대로 복사해와서 안고쳐도 된다.)

 

색상 255 255 255

폰트 배민주아

폰트 사이즈 40

중앙정렬

Text 내용 최고 점수

 

 

< NowScore >

X 150

Y 100

Width 200

Height 200

 

 

색상 255 255 255

폰트 배민주아

폰트 사이즈 40

중앙정렬

Text 내용 0.00

 

< BestScore >

X 150

Y 100

Width 200

Height 200

 

 

색상 255 0 0

폰트 배민주아

폰트 사이즈 40

중앙정렬

Text 내용 0.00

 

다섯 개 했으면 준비 완!

 

밑에 버튼을 만들어줘야겠지요!

 

< Retry 버튼 >

 

UI > Legacy > Button

 

여기서 

Image에 값을

 

None로 설정해 준 다음에 값을 넣는다.

 

Y -200

Width 300

Height 100

 

색상 80 80 200

 

< 버튼 안에 Text >

 

폰트 배민주아

폰트 크기 50

색상 255 255 255 255

Text 다시 하기

 

 

이렇게 나왔다면 성공!

 

지금은 이 EndPanel이 중요한 게 아니니

일단은 꺼두어야 한다.

끄는 방법은?

 

 

 

여기 체크박스 해제하면 된다고 했지요!

 

---

 

자 이제 우리는

엔딩크레딧을 만들었으니

 

게임이 엔딩 되었을 때!

점수판을 띄워주도록 로직을 짜야한다.

 

게임 로직을 만들려면

게임기능이니깐

Game Manager로 가야 한다!

 

우리는 GM를 굴러가게 하기 위해

 

게임이 종료되고 -> 새로운 오브젝트로 이동 -> 점수판

을 해줄 수 있는 기능을 만들어야 한다.

 

그 기능이 바로 싱글톤!

 

싱글톤은 나 혼자야! 나 이제 누구든 부를 수 있어!라는 뜻으로

 

1. public static로 선언해줘야 한다.

( 싱글톤 변수는 보통 Instance가 국룰 )

 

2. Start 전에 쓰는 awake를 써줘야 한다.

 

3. 반드시 변수에 나 자신을 집어넣어 줘야 한다.

instance = this

 

 

요렇게!

 

자 이제 게임종료 로직을 만들어보자

일단 클래스 하나 만들어줘야 한다.

 

 public void GameOver()
 {
     //게임 종료, 시간을 멈추게 하기
     Time.timeScale = 0f;
     //점수판 띄우기 (변수 필요, 값을 참 거짓으로 띄우고 말아야하기 때문)
     endPanel.SetActive(true);
 }

 

 

점수판에 변수가 필요하니

우리는 변수도 하나 맨 위에 선언해줘야 한다.

 

Public GameObject endPanel

 

이렇게 해줬으면

 

유니티로 돌아왔을 때 Game Manager에 새로운 변수인 

endPanel이 생긴다.

 

거기에 우리가 만든 옵젝

숨김 해놨던

Endpanel오브젝트를 드래그해서 넣어준다.

 

그러면 이제 게임이 종료되면 점수판이 띄워지게 된다!!

 

 

자 이제 점수판에 점수가 기록이 되어야 할 텐데

 

먼저

 

시작하고 나서 시간이 가다가

게임이 끝났을 때,

시간이 현재 점수에 기록되도록 해야 한다.

 

 

그러면!

 

또 time Text를 nowScore Text로 옮겨줘야겠지요!

 

이해가 됐나?

코드를 봅시다.

 

 

먼저 변수 생성

 

Public Text nowScore;

 

Game Over 안에

nowScore.text = time.ToString("N2")

 

nowScore옵젝 안에 text 컴포넌트에다가 값을 넣어라

무슨 값을?

time값을

문자열로

소수점 둘째까지

 

 

 

요렇게 넣어주면 된다.

 

 

 

이제 이 게임종료 조건을 걸어줘야 하는데

그것은 바로

풍선이랑 장애물이 충돌했을 때이다.

 

그러면 충돌하려면..

장애물에게 충돌했다면

이라는 기준을 세우면 된다.

 

 

장애물이 풍선에 부딪혀야 하기 때문에

우리는 일단 풍선에게 고유한 태그를 달아주는 게 좋다.

 

지금은 아니지만 앞으로 게임할 때

풍선이 1, 2, 계속 생성될 수 있기 때문에

 

태그로 하나 고정시키는 것이다. 

 

 

자 주인공으로 만들었으면

장애물 스크립트로 가서

플레이어랑 부딪혔을 때 

endPanel이 나올 수 있게 끔 해주면 된다.

 

스크립트 가서

충돌 클래스를 하나 만들어야 하는데..

그 이름은

 

✨ OnCollisionEnter2D입니다. ✨

 

이거만 쳐줘도

알아서 컴퓨터가 따닥따닥해줘서

 

이 친구가 나오게 됩니다.

 

여기에다가 이제 장애물과 플레이어가 충돌했을 때를 적어야 하는데

장애물과 충돌된 것이

맨 끝에 하늘색 collision ( 매개변수 ) 안으로 들어가는데,

그 여러 것들 중에

플레이어 일 경우!

게임이 끝나며, 점수판이 나오게 해 주면 된다.

요렇게 써줄 수 있다.

충돌된 것이

오브젝트에 태그 값을 비교해 보니

"player"일 경우

 

GameManager에 있는 instance 변수 기억나죠?

그 변수로 얻어올 수 있는 gameOver를 호출한다.

 

 

중간중간 저장하고 계시죠?!

해야 합니다 ㅎㅅㅎ

 

저장하고

GameManager에 Inspector에서

변수가 잘 들어가져 있는지 확인해줘야 한다.

 

 

 

자잔!

 

이런 게임에서는 0.1, 0.2 차이가 중요하기 때문에

 

 

이 부분을 제대로 방지하고자 한다.

 

방지를 위해서는 우리는 bool이라는 친구를 활용해야 한다.

 

참 거짓을 표현하는 친구이다. 

 

bool 변수이름 = true;

로 해주고

GameOver로 가셔서 false로 바꿔준다.

 

그다음 Update로 가서

변수가 true일 때만

시간이 가도록 설정해 주면 된다.

 

 void Update()
 {
     if (isPlay == true) // ispaly만 써도 된다.  같은뜻 만약에 false를 쓰려면 !isplay라고 해주면 된다.
     {
         time += Time.deltaTime;
         timeTxt.text = time.ToString("N2");
     }
     
 }

 

제 변수는 isPlay 입니다

자

이제 게임 종료가 되면

다시 하기 기능이 켜져야 할 텐데

 

retry 스크립트를 만들어보자

 

 

retry 스크립트는

retrybutton 친구 맨 밑에

드래그 앤 드롭하는 게

가장 좋겠죠?!

 

retry에는

사실 처음부터 다시 시작만 하면 되기 때문에

 

스크립트 내에 내용은 지워주는 게 좋다!

start, update 같은 친구들 말이다!

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class RetryButton : MonoBehaviour
{
  public void Retry()
    {
        //mainscene 데려오면 된다.
        SceneManager.LoadScene("MainScene");
    }
  
}

 

 

Retry 안에는

처음 시작 하는 MainScene을 넣어주면 되기 때문에

SceneManager을 써주고 점을 찍어주면

위에

 

라이브러리가 자동으로 완성된다.

 

Engine.SceneManagment

그러니 너무 기억하려고 외울 필요 없다.

 

자, 우리는 이제 버튼을 눌렀을 때

메인신을 가져오는 거 기 때문에

RetryBtn 오브젝트를 눌러주고,

 

버튼 컴포넌트 밑에

On click()를 만져줘야 한다.

 

지난 시간에 했지만..

+ 버튼을 눌러주고

 

Retrybtn 자기 자신 오브젝트를 넣어주면

오른쪽에 기능이 활성화된다.

 

RetryButton.Retry를 눌러준다.

 

RetryButton에 있는 Retry함수를 실행시켜서

 MainScene가 나오게 한다.

 

다 됐으면 실행해 본다.

 

엇 만약에 다시 하기를 눌렀는데 실행이 안된다?

 

눈치채셨군요

우리는 아까 게임 끝났을 때

timeScale를 0으로 바꿔놨습니다.

다시 1로 바꿔주어야겠지요.

 

그러면 게임기능이니까

GameManager 스크립트 안에

Start로 가서

 

 

TimeScale를 1로 다시 바꿔주면 된다.

 

그다음에 우리는

최고점수를 구현하고

풍선에 애니메이션을 넣어보자!

 

 

 

< 이 프로젝트는 스파르타 코딩수업에서 배운 내용을 복습 한 내용입니다. >