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

 

안녕하세오!

 

이번에는 풍선을 지켜라 게임을 만들어 보려고 한다.

 

 

풍선을 지키는 게임은

풍선이 있고

 

그 앞에 작은 원인 실드로

장애물을 깨면서 가운데 풍선을 지키는 게임이다.

 

작은 원이 장애물을 깨기 때문에,

충돌이 있어야 하고

위에서 아래로 물체들이 떨어지니

중력도 있어야 한다..

 

 

우리가 앞에

만들었던 빗물 받는 게임과

패턴과 비슷하다.

 

https://qua28.tistory.com/91

모바일 게임 만들어보기 1 - 1 소나기 맞기 게임

 

 

빗물게임을 보고 온다면

이번 게임도 쉽게 만들 수 있을 것이다.

 

---

 

먼저 2D로 유니티를 만들어보자.

 

유니티를 만들면

우리는 보기 쉽게 바꿔야 한다..

 

window > Layouts > 2 by 3

 

그리고

오른쪽에

project > one Column layout

 

또 그 밑에

Scenes 

SampleScene가 있는데 이 친구를

우리는

 

MainScene로 바꿔준다!

 

 

자,

 

다음에

왼쪽 하단에 Game을 가서

Free Aspect를 눌러보면

우리가 지난 게임을 만들면서 사용했던

Phone이 있을 것이다.

 

만약 처음이라면

 

+버튼을 누르고

이름을 Phone로 정한 후

사이즈를 760 x 1280으로 해주고 저장한 다음에

 

Phone를 사용해 준다.

 

 

자!!!!!

제일 먼저 할 것,

배경화면 만들기😉

 

Hierarchy

2D Object > Sprites > Square를 눌러준다.

 

 

 

자그마한 네모가 생겼다.

이 자그마한 배경을 키워준다.

 

어디서? Inspector창에서

 

Scale

X : 6

Y : 10

으로 해주면 화면에 꽉 차게 된다.

 

 

그리고 밑에 Color 색상을

20 20 80으로 바꿔주면 예쁜 남색배경이 된다.

 

이 친구를 우리는 BackGround로 바꿔준다.

 

 

 

이제 지켜야 하는 풍선을 만들어야 한다..

 

풍선은 원이니까!!

 

이름을 Balloon으로 지어주고

 

 

 

생성!

Inspector의

Position 값을

Y : -3.2

 

나머지는 고칠 거 없다!

색상은 흰색 고정

 

 

 

다음은!!

지켜야 하는 실드도 있어야 한다..

 

이름은 Shield

실드도 똑같이 원으로 만들고

위치를 balloon보다 조금 앞에 두어서 지킬 수 있게 한다.

 

Color은 0 255 255로 해주면 된다..

 

실드는 벌룬보다 사이즈가 작아야 하기 때문에

Scale 값을

X값과 Y값을 0.5로 해준다.

 

 

 

자

마지막으로 게임에서 흐르는 시간도 보여줘야 한다..

오래 버틴 것을 보여줘야 하기 때문!

 

흐르는 시간은 Text기 때문에

 

Hierarchy창에서

UI > Lagacy > Text

 

다음에!

Rect Transform에 오른쪽 끝에 점 세 개를 눌러서

Reset를 꼭 눌러줘서 초기화를 시켜야 한다.

 

다음

Pos Y : 450

너비 Width : 200

높이 Height : 200

 

폰트사이즈 70

중앙정렬

글씨색 255 0 0

Text 0.00라고 쓰면 끝!

 

 

이렇게 되게 만들어준다 😎

 

 

기본세팅 끝!

 

이제 우리 이 풍선에게 애니메이션을 달아줄 것이다.

 

약간 깜빡깜빡거리게 만들어보도록 하자!

 

 

Project > Assets > Create > Folder

 

폴더이름은

Animations

그 안에 Animation

 

그 친구 이름은

Balloon_Idle 해주고

Loop Time까지 체크해 주면 된다.

 

헉! 잠깐

Loop Time 기억나시나요?

이 애니메이션을 반복적으로 사용할 것이다!라는 뜻이었어요!!

 

기억한다면 당신은 천재..

( 저는 또 찾아봤다는... )

 

저장하고!

 

이 삼각 Idle를 끌어다가 Balloon 오브젝트에 넣어준다.

그러면 Balloon에

Animator 컴포넌트가 생성된 것을 확인할 수 있다.

 

다음에 Idle를 켜주면

애니메이션 창이 뜨게 된다!

 

여기서

❗❗❗ 주의 ❗❗❗

 

이다음에 우리는 녹화버튼을 눌러야 하는데 비활성화가 되어있다.

 

 

 

Idle을 눌러서 창을 띄운 후

다시

Balloon 오브젝트를 눌러줘야지만

활성화가 된다!

 

주의 끝

 

자

녹화버튼을 누르고!

 

 

 

0.20까지 막대기를 주욱 당긴다..

 

당긴 다음에 Inspector color에서

255 255 0으로 바꾸고

 

 다시 원상 복구해야 하니

0.40까지 당겨서

다시 원래 색으로 돌려놓는다.

255 255 255

 

그렇게 해주고 재생버튼을 누르면 깜빡 거리는 거 같은 효과가 나타난다.

 

애니메이션은 끝났고...

 

자,

이제 우리는 shield의 역할을 구현해주려고 한다..

 

 

실드의 경우

마우스의 움직임이 곧 실드의 움직임과 같다.

 

마우스의 위치에 맞춰서 움직이기 때문에

우리는 화면에 떠돌아다니는 마우스의 위치를

게임 속 카메라에 있는 Shield GameObject 위치로 바꿔줘야 한다..

 

그래야 유니티에서 인식하기 때문!

 

 

즉,

Hierarchy 창에 Main Camera가 찍고 있는

게임 월드 상에 위치로 마우스의 위치를 바꿔준다고 생각하면 된다.

 

 

이해가 애매하게 되는데..

 

그냥 마우스의 위치에 따라 하늘색 실드가 움직여야 하니

그냥 같게 해 준다고 생각해 주면 된다.

 

이러기 위해서는 우리는 스크립트를 짜야한다!

 

 

스크립트 생성 방법은 다 알겠지만!

 

마지막으로 설명하면!

 

먼저

파일생성 해주고

파일 이름은 Scripts 하나 만들어주고

그 안에다가 Create > C#을 해주면 된다.

 

 

스크립트 이름은

Shield

 

 

꼭! 스크립트를 만들었으면 오브젝트에 끼워줘야 한다!!

그대로 마우스 끌어다가

Shield 오브젝트에 넣어준다.

 

 

그다음에 스크립트 열기!

열면서 저장 필수!

 

 

자 열어서

 

마우스 위치와 게임 내 실드의 위치를 같게!

 

 

 

 

Camera.main.ScreenToWorldPoint(Input.mousePosition);

 

 

ScreenToWorldPoint

이 친구는

이미 지원되고 있는 기능으로

 

 

즉,

 

입력장치로 마우스위치를 가져오고

 

스크린상의 마우스 위치 좌표를

카메라 중에서도 메인카메라가 비추고 있는

게임상 월드의 위치 좌표로 바꿔준다고 해석할 수 있다.

 

이 모든 값을 잠시 변수에 넣어주자.

Vector2 mousePos =

를 앞에 써주면 된다.

 

그러면 우리는 mousePos에 값을 담아둔 상태이다.

 

 

이 값을 실드 위치로 넣어주면 된다.

 

실드의 위치는 유니티에서

Transform 컴포넌트 안에 위치한다.

 

그렇기 때문에 우리는

코딩을 하려면 Transform을 가져와야 한다..

 

Transform은 바로 가져올 수 있어서 쉬웠다.

 

  void Update()
 {   
     // 마우스포인트와 게임상 쉴드의 위치를 같게 한다.
     Vector2 mousePos = Camera.main.ScreenToWorldPoint(Input.mousePosition);
     //이 값을 쉴드 오브젝트에 transform 컴포넌트에 position에 넣어준다.
     transform.position = mousePos;
 }

 

 

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