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

 

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

 

이번에 함께 할 작업은 볼 매니저를 통하여 볼을 생성할 수 있도록 만들고,

볼이 다양한 방향으로 나갈 수 있도록 만들겠습니다.

( 기존에는 대각선으로만 이동했었죠? )

클릭과 드래그를 통하여 볼의 위치와 방향이 결정될 것입니다.

 

(이번 강좌는 스크립트 사용 부분에서는 난이도가 초 보다는 조금 높은 '중'정도 됩니다.)

 

 

그럼 시작하겠습니다.

 

 

가장 먼저 저번에 작업했던 프로젝트를 실행합니다. 그리고 순서대로 직접 해보며 따라오시면 됩니다.

 

 

이렇게 설정된 곳까지 저번에 했었죠?

 

 

일단 바로 테스트를 하기 위해 스크립트를 수정하러 갈까요?

Script - Ball - MoveBall 스크립트를 열어줍니다.

 

 

moveValue = Vector2.One;이었던 부분은

new Vector2(0.5f, 1.5f);로 바꿔봅니다.

 

 

그리고 게임을 실행해보면 대각선으로만 갔던 볼이

살짝 치우친 방향으로 가는 것을 확인할 수 있습니다.

 

 

이번에는 0, 2f로 바꿔줍니다.

 

역시 여기가 바뀌니 상하로 왔다갔다만 하는군요.

 

그렇다면 볼의 방향을 바꾸기 위해서는 어디를 어떤식으로 바꿔야할지 감이 오시나요?

 

 

일단 그 전에 볼을 씬에 배치해둔 채 사용하는 게 아닌

매니저를 통하여 생성할 수 있도록 바꿔봅시다.

(그래야 터치를 통하여 생성하고 일정한 방향도 줄 수 있겠죠?)

 

Ball폴더로 들어간 후 빈공간에 마우스 우클릭 - Create - C# Script 순으로 선택합니다.

 

 

이름은 BallManager로 했습니다.

 

 

자 이렇게

게임오브젝트(프리팹)를 받을 GameObject를 public으로 선언하고,

실제 생성할 오브젝트는 private으로 GameObject를 선언해줍니다.

 

그 후 Awake에서 해당 게임 오브젝트를 생성(복사)해줍니다.

바로 비활성화시켜주고요.

(그리고 우리가 원할 때 나타나도록 해야겠죠.)

 

 

Hierarchy 탭에서 GameManager를 선택한 후

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

(지금까지 했던 것처럼 드래그 앤 드랍하시면 됩니다.)

 

 

그럼 이제 사용할 볼의 이름도 바꾸고

프리팹으로 만들어볼까요?

 

이름은 NormalBall로 했습니다.

 

 

그리고 이렇게 선택하여 드래그 앤 드랍.

(Prefabs 폴더에 프리팹을 또 만들었죠?)

 

그러면 저번에 NormalBlock을 만들었던 것처럼

NormalBall 프리팹이 만들어진 것을 확인할 수 있습니다.

 

 

그러면 기존 Hierarchy 탭에 있던 NormalBall은 이제 필요없으니 제거해줍니다.

선택한 후 Delete 키를 눌러 지워도 되고,

마우스 우클릭 - Delete를 선택하여 지워도 됩니다.

 

지운 후 보니 카메라, 일반블록의 중앙상단을 나타내는 오브젝트,

게임 매니저 이렇게 세 개 밖에 없네요.

 

 

그리고 다음으로 우리가 만들어준 프리팹을

스크립트에 연결해줍니다.

 

GameManager를 선택한 후

BallManager(Script)의 Normal Ball영역에

NormalBall 프리팹을 드래그 앤 드랍하여 추가해줍니다.

 

 

(이렇게 Normal Ball 옆의 칸에 NormalBall 프리팹이 있다면 제대로 된 거죠.)

 

 

그리고 실행해보면 Hierarchy  탭에서 NormalBall(Clone)이 생성된 것을 확인할 수 있습니다.

생성 후 바로 비활성화해줬기 때문에 씬과 게임 화면에선 보이지 않습니다.

 

 

하지만 Hierarchy 탭에서 NormalBall(Clone)을 선택한 후

Inspector 창에서 체크를 해줘 활성화시키면

기존에 있던 것처럼 움직이는 것을 확인할 수 있죠.

 

 

그럼 다시 작업을 이어가기 위해 BallManager 스크립트로 돌아갑니다.

 

이번에는 클릭에 대한 처리를 하겠습니다.

void Update()를 추가하여 입력해주세요.

 

여기서

Input.GetMouseButtonDown(0)

는 마우스 좌측 버튼이 눌러진 경우 true를 반환하고,

 

Input.GetMouseButtonUp(0)

는 마우스 좌측 버튼을 땐 경우 true를 반환합니다.

 

그 외의 상태에는 계속 false 값을 가지고 있습니다.

 

 

( 참고로 Input.GetMouseButtonDown(1), 인수가 1이면 우측 클릭에 대한 처리입니다. )

 

그리고 또 하나 볼 부분이 있죠?

Camera.main.ScreenToWorldPoint(Input.mousePosition);

이는 Camera 중 메인 카메라에게 접근하여 (Camera.main)

현재 마우스의 위치가 어디인지 월드포지션 값을 얻을 수 있습니다.(ScreenToWorldPoint(Input.mousePosition);)

 

(월드 포지션은 유니티에서 별도의 하위 디렉토리가 아닌 오브젝트들의 일반적인 포지션 값입니다.)

 

 

이렇게 작성해준 후

게임을 실행시키고

화면을 클릭하고 드래그한 후 마우스 버튼을 때 보면

시작한 위치, 종료된 위치 값이 나오는 것을 확인할 수 있습니다.

(그리고 메인 카메라 기준인데 메인 카메라의 z축이 -10이니 z는 -10으로 나오고 있죠?)

 

 

BallManager 스크립트로 돌아와서

void ActiveBall()이라는 함수를 맨 밑에 추가해줍니다.

클릭이 끝나는 지점 - 클릭이 시작된 지점으로

클릭 시작과 끝 지점의 차이가 어느정도인지 알 수 있겠죠?

 

여기서 direcVector.Normalize(); 부분이 보이시죠?

이 부분(Normalize 함수)의 역할은 기준치 길이 1을 중심으로

x, y값의 비율을 맞춰줍니다.

 

(피타고라스 정리를 보면 알 수 있듯이 x축 1이나 y축 1과 다르게 대각선 부분은 0.5,0.5로 할 수 없죠?)

(길이가 1이 되려면 x 0.7, y 0.7에 근접한 값이어야겠죠? 밑변^2 + 높이^2 = 대각선 길이 ...니까요)

 

(뭐 이런 부분은 몰라도 Normalize의 역할이 1을 기준으로 일정 길이 비율을 알려준다.. 정도만 알아도 되겠죠.

이렇게 노말라이즈를 사용하면 대각선 이동이든 가로, 세로 직선 이동이든 모두 일정한 수치만큼 이동하여

어느 방향이든 등속이동이 가능합니다.)

 

 

이렇게 Debug로 확인하던 부분은 주석으로 없애주고,

마우스 버튼을 때는 곳에

ActiveBall();함수를 위치시켰습니다.

 

 

그리고 시작해보면 direcVec 값이 콘솔창에 나오는 것을 확인할 수 있습니다.

마우스 이동거리를 길게해서 때든, 짧게해서 때든

Normalize를 통해 같은 값을 돌려줍니다.(일정 값으로 나오도록 정규화해주는 함수니까요.)

 

 

MoveBall 스크립트에서 이렇게 Awake 부분의 ballPos를 설정하던 곳은 주석처리해줍니다.

(최초 생성 시 볼의 위치를 저장할 게 아니니 필요없겠죠?)

 

 

이렇게 public void SetDirecMoveValue(Vector2) 함수를 통해

moveValue를 설정해줍니다. 이동할 때 사용되는 부분이었죠?

충돌하면 반전이 일어나고 그랬던 값이죠.

 

그리고 여기서 ballPos를 설정해줍니다.

(볼이 활성화되고 불릴 테니 여기가 적절하겠네요.)

 

 

새성해뒀던 볼을 활성화시킨 후

시작 위치 지정 - direcVector로 이동할 값 설정까지 해줬습니다.

 

 

실제로 실행시켜서 마우스 드래그를 해보면

제대로 원하는 방향으로 나가는 것을 확인할 수 있습니다.

지금은 bool 함수로 중복 생성 체크를 안 해뒀으니

방향이 제대로 나오고 같은 속도인지 확인해보기 좋을 것 같습니다.

 

(그냥 새로 클릭하고 때면 기존의 볼을 가지고 다시 생성되는 겁니다.)

 

 

이렇게 activeBall을 설정하면

Update에서 검사를 못 하도록 해뒀으니

한번 생성하면 추가 생성이 안 되겠죠?

(지금은 볼 하나를 기준으로 만들고 있습니다.)

 

 

바꾸는 김에

MoveBall 스크립트로 가서 moveSpeed도 0.3f로 올려줬습니다.

(0.15f는 너무 느렸죠?)

 

 

그리고 실행해보면 정상적으로 실행되고,

원하는 방향으로 볼을 보낼 수 있고,

한번 만들면 더 이상 안 만들어지는 것을 확인할 수 있습니다.

 

 

여기서 끝내기 아쉬우니 추가적인 작업을 몇 가지 해보겠습니다.

 

먼저 실수로 클릭이 될 수도 있으니

일정치 이상 클릭 후 이동이 없다면 생성하지 않도록 만들어보겠습니다.

 

Vector3.Distance 함수를 이용하여

Vector3 값 두 개의 거리를 확인하도록 했습니다.

이 함수의 장점은 편리하게 위치 값을 비교하여 거리값을 알려준다는 점입니다.

(양수로만 거리 값을 알려주니 거리 측정에 아주 좋죠.)

 

이 값이 1보다 크면 마우스 이동이 있었던 것으로 보고 생성 작업을 처리하고,

이하면 이동이 없었던 것으로 보고 생성이 이루어지지 않도록 만들었습니다.

 

 

실제로 실행해서

단순 클릭을 해보거나,

아주 약간의 이동을 해보면,

"생성 안 됨"이라는 글자가 콘솔창에 찍히는 것을 확인할 수 있습니다.

 

 

이렇게 일정 범위 이상으로 클릭 드래그하면

볼이 생성되고요.

 

 

이번에는 추가적으로 어느 위치에서 생성되려는지

생성 전에 반투명하게 보여주는 효과를 추가하겠습니다.

(나중에 방향에 대한 화살표도 만들어보겠지만요.)

일단 기존의 NormalBall 프리팹을 가지고 수정해서 쓸 것이니

Prefabs에 위치하고 있는 NormalBall을 Hierarchy 탭으로 드래그 앤 드랍해 주세요.

(그럼 파란 이름의 NormalBall이 Hierarchy 탭에 추가될 겁니다.)

 

불필요한 컴포넌트들을 제거할 겁니다.

(Sprite Renderer를 제외하고 모두 필요 없습니다.)

 

[여기서 주의할 점이 Prefabs에 있는 NormalBall을 선택하고 작업하시면 안 됩니다.]

반드시 Hierarchy 탭에 복사해준 NormalBall을 가지고 작업하세요.

 

 

   

Move Ball(Script), Circle Collider 2D 모두 마우스 우클릭 후 Remove Component를 선택하여 제거해줍니다.

 

    

마찬가지로 Rigidbody 2D도 제거해주시고, Tag도 Untagged로 변경해줍니다.

 

 

그런 다음 색상을 반투명으로 만들기 위해

Sprite Renderer에서 Color(색상이 있는 부분)을 클릭해줍니다.

 

그럼 파렌트가 나오는데 A(알파)값을 적당히 줄여줍니다.

A가 투명도에 관한 값입니다.

 

 

그리고 이름을 EmptyNormalBall로 변경해줍니다.

 

 

이 EmptyNormalBall을 다시 Prefabs 폴더에 드래그 앤 드랍해줍니다.

 

그러면 EmptyNormalBall 프리팹도 생성된 것을 확인할 수 있습니다.

 

그럼 결과적으로 지금까지 만든 세 개의 프리팹이 있어야겠죠?

 

 

일단 추가해줍시다.

BallManager 스크립트에

public GameObject EmptyNormalBall;

이라고 선언해줍니다.

저번에 NormalBall을 받은 것과 같은 방식으로 받고, 만들기 위해서죠?

 

 

이렇게 GameManager를 선택한 상태에서

만들었던 EmptyNormalBall 프리팹을 드래그 앤 드랍하여 추가해줍니다.

 

(정상적으로 추가된 모습이죠?)

 

 

그럼 이제 BallManager 스크립트로 돌아와서

작업을 끝내보도록 합시다.

 

(normalBall 생성했던 것과 같이 Instantiate를 사용하여 생성(복사)해준 후 비활성화시킵니다.)

 

 

그리고 Update 부분에서도 수정할 곳이 생겼습니다.

startTouchedPos를 사용할 건데, 이게 -10이니

앞으로는 클릭으로 위치값을 받으면,

z값은 무조건 0으로 초기화하도록 바꿨습니다.

 

최초 버튼이 눌린 자리에 emptyNormalBall 게임오브젝트가 활성화되도록 해뒀죠?

 

 

그리고 ActiveBall() 함수에서

startTouchedPos.z 값을 바꾸던 부분은 이제 필요 없으니 주석처리를 해주고,

함수 마지막 부분에 emptyNormalBall.SetActive(false);로

비활성화 되도록 했습니다.

(이 부분으로 생성이 되든 안 되든 처리가 끝나면 반투명한 노말볼은 없어(비활성화)지겠죠?)

 

자, 그리고 실행해서 클릭해보면

이렇게 반투명한 볼이 나오는 것을 확인할 수 있습니다.

 

그대로 마우스 버튼을 때면, 아무것도 생성되지 않고 반투명한 볼도 비활성화 되고,

드래그 후 마우스 버튼을 때면 진한 실제 노말볼이 생성되며 이동하는 것을 확인할 수 있습니다.

 

 

오늘의 최종 결과물입니다.

 

 

 

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

이번 시간에는 볼 매니저(볼 생성, 클릭처리 이벤트에 따라 활성화 + 이동 방향 설정),

효과, 사용자 편의를 위한 부분까지 처리해봤습니다.

스크립트 작업을 하며 이미 정의되어있는 Normalize()함수나 Distance()함수도 다뤄봤습니다.

아주 편리한 기능이 있죠?

 

그리고, 스크립트도 한번에 진행하면 많은 어려움을 느낄 것 같아

부분 부분 천천히 진행했습니다.

(이번에는 내부적으로 처리되는 걸 확인해보는 부분이 있어 더 어렵게 느껴질 것 같기도 합니다.)

 

 

다음 시간에는 볼과 블록에 일정한 수치 값을 넣어보록 하겠습니다.

볼을 늘리거나 특정한 경우 볼이 없어지는 처리도 해보고요.

 

 

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

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

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

 

 

 

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