2D.MetalSlug 07. UI

https://youtu.be/sYnUdg4a17U

14 : 29초 영상 / 1STAGE (03초 - 22초) YOUTUBE 영상

---

1 Stage = 03초 ~ 22초 구간을 모작해 보고 있습니다.

---

캡처사진

오늘은 영상의 UI항목을 만들어볼 생각이며

캡처사진

UI항목을 하기 전 영상처럼 MISSION START가

 

파란 글씨로 다가와 회전 후 일정 시간이 지나면 퍼지는 모습을 먼저 구현해보겠습니다.

 

---

↑↑↑

위의 선을 기준으로 위의 영상은 YOUTUBE의 영상 및 캡처입니다.

 

이제부터 Unity3 D 환경에서 직접 제작한 화면들을 보시겠습니다.

 

 

첫 번째로 Mission 1 Start를 만들었습니다.

 

각 글자는 텍스트가 아닌 Sprite를 가져와 작업을 했습니다.

 

Text로도 애니메이션을 추가해 원하는 결과물을 만들 수 있겠지만,

 

글자 Sprite 들을 Slice 하여서 작업을 했으며

 

애니메이션은 사용하지 않았습니다.

각 글자들의 기준점 위치를 잡아주었으며

 

You Tube의 영상과 같이 멀리서 이 기준점 위치로 이동하여

 

일정 시간 후 퍼지는 동작을 구현해 봤습니다.

 

---

코드 내용을 살펴보기 전에

 

빈 오브젝트를 통해 글자들의 초기 생성 위치를 잡아주었습니다.

(글자가 처음에 화면밖에 있다가 기준점으로 이동하기 위함입니다.)

---

처음 작업을 할 때 애니메이션으로 모두 관리를 해줄까? 하고 생각을 했었는데,

 

애니메이션 클립으로 만들면 모두 관리하기가 힘들어지고

 

무언가 바뀌었을 때 전체적으로 변경이 불가하고

 

애니메이션을 일일이 수정을 해야 한다는 단점이 있었습니다.

 

각 장단점들이 존재하겠지만.. 이번 동작 구현은 애니메이션을 이용하지 않고

 

스크립트로 모두 제어를 해주었습니다.

글자들을 제어해 주기 위해 MissionStart의 스크립트를 생성하여 작성해 주었습니다.

 

상태는 단순히 enum 열거형으로 선언하여 선언을 해 주었고

 

Idle, Move, Exit 세 가지 상태 값이 존재합니다.

 

Idle : 대기

Move : 움직임

Exit : 퍼질 때

 

3가지 상태 값을 갖게 해 주었으며

 

이를 제어하기 위해 state의 변수를 생성해 주었습니다.

 

OrizinPos : 글자들의 각 기준 위치입니다.

 

StartPos : 글자들의 시작 위치입니다.

(화면 밖입니다.)

 

moveSpeed : 글자의 움직이는 스피드입니다.

rotSpeed : 글자의 회전되는 스피드입니다.

 

idleTime : 시작 후 기다릴 시간입니다.

(글자가 생성 후 한 번에 이동을 하는 것이 아닌, 일정 시간 후

움직이게 하여서 차례대로 오는 효과를 주기 위함입니다.)

 

exitTime : 기준점으로 이동후 퍼지는 효과의 실행을

기다리는 시간입니다.

 

exitAngle : 글자가 퍼질 각도입니다.

 

spriteRenderer : 글자의 SpriteRenderer입니다.

(글자가 초기엔 블루였다가 회전 후 원래 색으로 돌아오게 되는데.,

이 색을 변경하기 위해 받아왔습니다.)

 

Start함수입니다.

 

초기 상태를 State.Idle로 갖게 해 주었으며

 

SpriteRenderer를 받아와 컬러를 blue로 변경해주었습니다.

 

orizinPos(기준점)과 StartPos(시작점) 을받아와 주었으며,

 

글자의 초기 위치를 StartPos로진 행해주었습니다.

 

맨 마지막 줄인 transform.rotation을 (0, 180, 0)으로 변경해준 이유는

 

(글자가 회전 후 블루-> 원래 색으로 변경되게 구현을 할 예정인데

180도 회전을 하여 색이 변경되는 건구현이 되었지만,

s 같은 경우엔

이러한 방향으로 멈춰 지기에 구현을 해준 부분입니다.)

 

(또한 회전을 시켜주는 방법 중

Sprite Renderer의 Flip을 이용해 x를 변경해 줄 수 있고

Transform의 Scale 값을 -1로 변경시켜 회전을 해주는 방법도 있습니다.)

 

Update 함수입니다.

 

Switch문을 이용해 state(상태) 값에 따른 구현을 쉽게 구현해 주었으며

 

동작 구현을 바로 넣어도 되지만

 

Idle(), Move(), Exit()의 새로운 함수를 만들어 동작 구현을 해주어

 

보다 간결하게 작성하였습니다.

 

우선 StartCorutine로 실행되는 코 루틴 함수 IdleProcess를 먼저 보겠습니다.

IdleProcess은 전체적인 로직을 담고 있습니다.

 

yield return new WaitForSeconds를 이용해 지정한 idleTime만큼 기다렸다가

상태의 값을 Move로 바꾸어준 뒤 (이동 및 회전)

 

yield return new WaitForSeconds를 이용해 지정해준 exitTime - idleTime만큼 기다려 줬다가

상태 값을 Exit로 바꾸어 줍니다. (퍼지는 동작)

 

exitTime에서 idleTime을 빼준 이유는

(startPos에서 orizinPos로 이동후

동시에 퍼지게 하기 위함입니다.)

 

State의 상태가 Move일 때 실행될 Move함수입니다.

 

MoveTowards를 사용해 이동을 해 주었으며

 

사용 방법은 (a, b, 스피드)로 a에서 b의 방향으로 이동시켜 주는 함수입니다.

(단점은 나중에 알게 됐는데 화면 좌표의 기준으로 하기 때문에

플레이어를 따라다니는 동작이라던가 이동이 안된다는 단점이 있었습니다.)

 

a의 방향은 curPos로 글자의 위치를 받아와 주었으며

desPos는 기준점을 잡아주었습니다.

 

이방향을 Vector3 dir로 받아주어 transform(글자)의 위치를 이동해 주었습니다.

 

방향의 길이를 받기 위해 기준점 - dir을 해주어 

 

v의 magnitude(길이)를 dist에 넣어주었습니다.

 

(즉, dist는 글자의 위치에서 기준점까지의 길이입니다.)

 

Move함수 내에 작성된 코드를 이어서 보겠습니다.

if(dist < 0.1f) 만일 글자의 위치에서 기준점의 길이가 0.1f보다 작다면 의 조건문입니다.

 

transform(글자)의 y축(회전)을 제어하기 위해 angles_y에 받아주었습니다.

 

여기서 상당히 헷갈린 부분이 있는데..

유니티 내에서 각도는 -20을 가려면 -가 아닌 0~360도의 회전으로

340의 값을 받는다는 것이었습니다.

 

그리하여 x축 을 기준으로 위쪽은 0 ~ 180 / 아래쪽은 0 ~ -180을 받아주기 위해

 

angles_y이 181 - 360의 범위 내 라면 -360도를 더해주고

 

0 - 180의 범위 내라면 그 값을 그대로 받아 주는 코드를 작성했습니다.

 

angles_y를 Rotate로 회전시켜 주는 모습입니다.

 

-Vector3.up으로 이용해 180도로 회전되어 있는 transform의 y축 값을 - 해 줍니다.

(-를 해주지 않으면 180도에 + 가 되어 181 이상이라면 0도가 되는 조건문에 걸려 바로 0이 됩니다)

 

이 값이 90.0f의 이하라면 색을 white(원래 색)으로 변경을 해 줬으며

 

y축이 0도 이하가 되면 transform(글자)의 회전 값은 0, 0, 0으로 맞춰 주었습니다.

 

(이 Move 함수의 코드는 별로 없지만 상당한 시간이 걸렸다는.....)

 

마지막으로 Exit함수입니다.

 

z축의 값을 제어하기 위해 지정 해준 exitAngle을 Euler로 받아와

 

q에 지정해주었으며

 

Translate를 이용해 지정한 방향으로 이동을 해 주었습니다.

 

여기서 주의할 점? 은 x축을 기준으로

 

위쪽은 0 ~ 180 아래는 0 ~ -180 이 되게 코드를 구현했다는 점입니다.

 

---

이후 플레이 화면에 있는 UI항목을 각 Sprite를 맞게 배치를 해 주었으며.

 

현재까지 진행된 부분을 영상으로 짧게 보시겠습니다.

 

 

00 : 12초

다음엔 이 UI항목이 변경되는 부분과 함께 제작이 완성된다면

 

적들도 함께 구현된 글을 올리도록 하겠습니다!!

 

오늘도

 

감사합니다.