(13) Start Scene #UI & 배경 화면 보완

현재 구상으로는 시작화면에 들어갈 UI가

 

- Single Play (추후에 개발예정)

-Multi Play

-Setting

-Quit

 

정도이고, 설정화면에는

-BGM

-Effect

 

정도로 가볍게 담아볼까 구상중이다

 

시작 화면과 설정창에 쓰일 UI들을 여기저기 찾아봤는데

확실히 FREEPIK이라는 사이트에서 제공하는 것들이 가장 무난하고 심플하게 이쁜것들이 많았다

 

 

문제는 무료로 다운할거라면 꼭 이미지 출처를 표시하라는거.. 출처가 뭔가 해서 봤더니

 

 

이 링크를 넣으라는것이었다. 안그래도 볼륨 작고 심플한 게임에 이것까지 넣을 자리가 어딨나 싶어

고민하다 아이디어가 하나 떠올랐다

 

- Single Play

-Multi Play

-Credit

-Setting

-Quit

 

Credit창을 만들어서 이 링크들을 죄다 여기에다 때려박으면 되겠다

 

그럼 지금 총 들어가는 씬이

-게임 시작씬

-크레딧 씬

-설정씬

 

기존에 있는씬

-인게임씬

-P1 Win

-P2 Win

 

이니 총 6개가 되겠다.

 

이번글에서는 시작화면을 만들어보겠다. 내가 최종적으로 쓰기로 한 UI는

<a href="https://www.freepik.com/free-vector/medieval-game-interface_2874386.htm#page=3&query=game%20ui&position=37&from_view=keyword&track=ais&uuid=3efb279b-0848-466b-875c-1e99d51117e3">Image by macrovector</a> on Freepik

이게 가장 무난하고 심플하게 이뻐보여서 쓰기로 했다

 

전 글에서 적었듯이 시작화면에 가장 필요한 핵심요소는 UI와 배경화면이다

배경화면은 이전글에서 만들었으니 이번엔 UI를 만들어보겠다

추출하고자 하는 버튼 부분만 캡쳐한뒤

 

 

배경제거 사이트에서 배경을 깔끔하게 지워준다. 사실 이렇게 간단한건 그림판으로도 충분히 가능하지만

그래도 확실한게 좋으니까ㅎㅎ

이제 깔끔한 버튼만 남게되었지만 원래 있던 NEXT라는 텍스트까지 쓸 생각은 없으니 텍스트는 그림판으로 지워주자

 

2차 공정을 해주자. Multiple로 설정한뒤 Sprite Editor에서 Automatic에 맞춘뒤 한번더 정교하게 잘라준다

깔끔하게 잘 잘린것을 확인할 수 있다

 

Hierarchy창에서 버튼을 하나 만들어준뒤 버튼 이름, 안에 들어갈 텍스트 모두 Single Player로 저장해준다

 

 

그리고 버튼의 소스이미지에 방금 따온 이미지를 넣어준다

 

폰트, 사이즈, 색상 보기좋게 조절해준뒤 복사하여 다른 버튼들도 만들어준다

 

 

 

그리고 막상 구현이 된것을 보니 두가지 생각이 드는게

 

첫번째로 Setting 버튼은 굳이 저기에 넣지 말고 우측하단 구석에 톱니바퀴 아이콘으로 대체하는게 나을것같다

메인 선택버튼에는 싱글,멀티,나가기 심플하게 이 3가지 기능만 있는게 더 나아보인다

 

두번째는 굳이 고정 구체를 안에 숨기지 말고 저 메인 버튼들이 전부 물리적으로 고정되어 공을 팅겨낸다면 더

참신하지 않을까?

 

우선 첫번째에 대한 수정으로 다시 변경해보았다

 

언젠간 추가될 Online Play 버튼도 만들어준뒤 우측하단에 톱니바퀴 모양 아이콘(설정 UI 국룰)을 추가해주겠다

 

왠만하면 저 버튼을 가져온 이미지에서 설정 아이콘도 가져오려 했으나 음...조금 못생겼다

톱니바퀴는 그냥 따로 구해와서 쓰는게 더 나을것같다

 

가장 무난한걸로 가져와서 뭐가 나을까 비교해보려고 놔봤는데...뭔가 애매하다. 색을 칠해야 할것 같다

 

얼추 만들어보긴 했는데 뭐랄까..차라리 톱니바퀴를 없애고 심플하게 버튼 5개로 가는게

더 깔끔하고 나을것같다는 느낌이 든다. 조금 자연스럽게 묻질 못하는 느낌이다

 

음 차라리 이게 나은것같다. 또 이렇게 놓고보니 톱니바퀴도 괜찮은것 같은데 우선은 이 디자인으로 밀고 가겠다

 

두번째는 굳이 고정 구체를 안에 숨기지 말고 저 메인 버튼들이 전부 물리적으로 고정되어 공을 팅겨낸다면 더

참신하지 않을까?

 

이번엔 이 두번째에 대해서 구현해보도록 하자. 말 그대로 위에 보이는 회색 고정구체를 없애버리고

버튼 UI들이 직접 공을 팅겨내는 고정구체가 되는것이다

 

하지만 이 둘은 아예 다른 영역...

 

그러나 이 버튼 UI에다 물리를 입히는것은 아직 모르겠다. 방법이 아예없는건지 아니면

내가 배워놓고 기억을 못하는건지는 모르겠지만 직접 버튼에다 물리엔진을 입힐수 없다면 다른 방법이 있다

 

 

바로 똑같은 소스를 가져와 물리 컴포넌트를 먹인뒤 버튼 뒤에 숨겨버리면 된다

 

 

고정구체들을 전부 제거해준뒤 사이즈를 맞추고 정확히 버튼과 겹쳐넣는다

세세하게 봐줘야하는게 조금 노가다긴 하지만 최대한 꼼꼼하게 맞춰준다

 

티 안나게 버튼 뒤에 숨겨준뒤 고정구체가 있던 폴더안에 전부 넣어 묶어준다

콜라이더는 Capsule Collider 2D를 Horizontal로 뒤집어 맞춰넣어주었다

 

이제 나머지 4개에도 똑같이 이 콜라이더를 넣어줘야 하는데, 꿀팁이라면

이미 만들어진 콜라이더 우측 점 세개를 눌러 Copy Component를 선택한뒤

나머지들을 전부 선택한뒤 한꺼번에 콜라이더를 붙여넣고 Paste Component Values를 선택해주기만 하면 끝이다

 

초안과 결과물 비교

 

드디어 완성했다. 보면 영상 중간중간에 구체가 끼고, 급하게 막혔다가 뚫려나올때 확 팽창되고 하는것들이 보이지만

어차피 시작화면인데다 이런 허당끼가 보이는것도 난 오히려 매력포인트 중 하나라고 생각한다

 

다음글에서는 지금 등록한 버튼들의 구현을 해보도록 하겠다