[📜일지] 댕댕이 서바이벌 #11 - 경험치 및 레벨업 UI

[태보미코(taebomico)]

대충 UI 구상이 끝났으므로 바로 착수하였다.

전체적인 목업을 한번 만들어 보고 진행하면 좋겠지만 출시가 급급하기에 부분부분 빠르게 구현해볼 생각이다.

레벨업과 연계되는 부분으로 아이템 풀로부터 레어도나 레벨업 할 장비들을 꺼내주는 작업이 있는데,

한번에 개발일지를 작성하면 내용이 너무 길어질 듯 하여 UI먼저 작성해보겠다.

경험치 바

뱀서는 경험치 바가 상단에 있던데, 나는 익숙한 하단에 배치했다.

여기에 몇가지 부가정보를 더 배치해줄것인데, 그 중 하나가 가운데에 보이는 시계.

뮤주라의 가면의 메인 요소 중 하나인 화면 하단의 시계.

3일 째에 떨어지는 달이 존재해 플레이어는 3일째에 사망하게 된다.

따라서 3일 내에 클리어하는 것이 목표이며, 시간을 되돌리는 방식을 이용해 클리어해나간다.

구상해둔 세계관과 스토리가 이와 유사하며,

뱀서를 플레이하며 느꼈던 것 중 하나가 화면에 표시되는 타이머가 게임을 끄게 만든다는 것.

초기에 가속모드가 없을 때 플레이하다 죽으면 20분, 30분 이렇게 표기된 것을 보고

벌써 게임을 이렇게 많이했어? 하면서 게임을 끄는데에 도움을 주는 요소였다.

다른 플레이어들도 이렇지 않을까 생각하며 직접적인 시간이 표시되는 타이머 대신

최근에 플레이해본 주기마다 비가 쏟아져 주기 내에 피난처를 찾아야하는 레인월드처럼

(원 둘레의 작은 점들이 남아있는 시간을 의미한다)

세계관에 녹여낼 수 있으며 게임 내 시간의 흐름을 보여줄 수 있는 요소로 만들어 줄 생각이다.

본론으로 돌아가서 지난번 구현한 경험치 시스템에 경험치가 차오를 때마다 비율을 UnityEvent로 invoke시켜주고,

경험치 바는 이 이벤트를 구독해서 ratio에 맞추어 ui를 업데이트한다.

코드는 단순하고, 슬라이스 된 이미지 여러개를 준비해서 작은 사이즈 일때는 작은 9slice 이미지를 이용한다.

이 부분의 UI를 만들며 난관이었던 부분이 패널과 경험치 바 그림자가 겹쳐지며 shadow의 alpha가 중첩되는 문제,

경험치 바 뒷쪽의 패널을 구멍을 내주어야하는 문제가 있었는데,

셰이더와 마스크로 해결하고 싶었으나 두 가지 문제를 모두 해결하기 위한 셰이더의 지식이 없어서 그냥 통짜스프라이트로 만들었다.

노가다가 최고야...

움짤을 보면 잘 작동하긴 하지만 마음에 들지 않는 부분이 있다.

뱀서를 하면서도 느꼈던 경험치바가 너무 딱딱하다는 것.

기계적으로 차오르는 경험치의 모습이 마음에 들지 않는다.

수정해보도록하자.

아까보단 마음에 드는 모습이지만 빨리 차다 점점 느려지는 모습이 조금 답답하게 느껴진다.

그냥 목표치만큼 차지 않았으면 속도를 매프레임 증가시켜주고, 그 속도를 더해주도록 했다.

이제 좀 만족스러운 모습이다.

한번에 비교해보도록 하자.

물론 세가지 모두 취향차이기 때문에 정답은 없다.

여기서 다음 문제는 경험치가 가득 찬 뒤 레벨업을 진행하면 바가 줄어들어버린다는 것이다.

이는 간단하게 가득차있는 이미지를 하나 추가해주고 레벨업 시에는 게임을 정지시키며 이 이미지를 경험치 위에 덮어서 띄워주도록 했다.

경험치 바 내부에 보로노이 노이즈같은걸로 애니메이션을 주고싶었는데, 원하는 느낌이 나지 않아 보류.

다음으로 레벨업을 축하하는 이펙트.

뱀서의 경험치바가 반작거리는게 마음에 들어 유사하게 진행.

드디어 구매했던 allin1spriteshader를 사용해보았다.

문제는 그레디언트 텍스쳐가 마음에 들지 않아 직접 만들어주었다.

빤딱빤딱거리는것이 마음에 든다.

다음으로 레벨업 시 출력될 장비 선택창을 만드려 했으나, 배치를 어떻게 할까 고민이 되었다.

고민하며 마우스 커서나 만들어보았다.

마우스 커서는 이미지를 마우스에 따라다니게 하면 원하는 사이즈로 만들어지겠지만,

나중의 터치 디바이스를 생각해 그냥 커서로 구현해주었다.

일단은 만족 !

마우스 커서를 만들며 UI 구상이 완료되었다.

뱀서를 플레이하며 중간에 갑자기 레벨업되었을 경우 방향키를 조작중이어서

내가 선택중인 장비가 뭔지 잘 눈에 안들어와서 불편했으므로

확실히 보이도록 선택중인 장비에 애니메이션을 줄 생각이다.

Tiled로 만들었더니 상단에 늘어났다 줄어드는 경계선이 눈에 명확히 보여 조금 거슬린다.

Sliced로 변경해보았는데, 세로 도트만 늘어나다보니 크게 어색해보이지 않아 이대로 수정.

레벨업 시 등장 애니메이션, 선택 후 사라지는 애니메이션, 세부 디자인을 해주었다.

뱀서에서 상자 나올때마다 esc를 연타한 경험이 있으므로

애니메이션은 최대한 빠르게 작동시켜줄 생각이다.

개인적으로 UI는 애니메이션이 없으면 딱딱하고 조잡하게 느껴진다.

이 때, 선택한 장비도 똑같이 닫히는 것은 심심하므로

앞서말한 셰이더를 사용해 불타사라지는 효과를 주고싶었는데,

sliced라 그런지 원하는대로 되지는 않아 적당히 느낌만 내 주었다.

효과는 애니메이션과 마찬가지로 빠르게.

나에게 흡수되었다는 느낌이 들면 좋겠다.

장비 설명은 프롬식 설명문으로 작성해줄 예정이다.

세계관과 스토리를 나타내줄 요소 중 하나이고,

2레벨부터는 추가 설명문이나 레벨업 효과에 대해 작성해줄듯 하다.

뭔가 있어보이는 세계관을 만들어주면 좋아하지 않을까?

참고로 야미는 우리집 고양이 이름이다.

애니메이션을 만들어주면 생기는 문제점은

이 애니메이션의 시작과 끝을 체크해줘야한다는 것이다.

현재는 레벨업이 동시에 2번 일어나면 애니메이션으로 인해 문제가 발생한다.

애니메이션 종료 후 이벤트를 발생시켜주고 매니저에서 이 이벤트를 대기하는 방식으로 해결해줄 생각이다.

페어리 테일즈를 개발할 때에는 이런 방식이 불편했는데

그냥 파츠별로 쪼개버리고 요렇게 연결해버린다음 초기화 순서를 신경쓰지 않아도 되고 사용하는것도 나쁘지 않은 것 같다.

라이더에서 추적도 해주니 일단 UI는 이런식으로 진행해보겠다.

[익명(219.250)]

개발속도 미춌다

[태보미(taebomi)]

오소이...

[사슴발레리나(dearvalerie)]

아니 인갤 안한 2주동안 대체 뭔일이 있었길래 여기까지 진전된거? 개쌉고수 개추

[태보미(taebomi)]

2주동안의 개발일지. 바로 이곳에 ! 감사한거에요 !

[익명(5q9jebg64g2q)]

와 진짜 빠르네 영혼을 갈아넣고 있는 거 아님?

[태보미(taebomi)]

사실전백수에요사실전백수에요사실전백수에요 시무룩...

[익명(175.126)]

진짜 개빠르네 자괴감 든다

[태보미(taebomi)]

UI라서 빨라보이는것일 뿐인거에요 ! 눈에 보이는게 전부가 아닌거에요 ! 힘내서 같이 개발하는거에요 !

[익명(220.126)]

하루하루 지날수록 게임이 바뀌네 개발 속도 실화인가? 거기다가 퀄도 똑같이 업글중임 ㅋㅋㅋ 무섭다 무서워

[태보미(taebomi)]

감사한거에요. 더 진보되어 돌아오도록 하겠어요 !

[애널sex커넥트(analconnection)]

스팀에 출시 계획임?

[태보미(taebomi)]

스팀 출시 후 가능하다면 모바일도 생각중이에요.

[야겜제작좌(dottoru69)]

슷게ㅔ..!

[태보미(taebomi)]

[익명(220.83)]

동기부여가 된다.

[태보미(taebomi)]

저또한 이 댓글로 동기부여되는것이에요 !

[익명(211.178)]

switch 뭐지? 해서 gpt한테 물어보니까 c#8.0에 도입된 switch statement라고 나오네 모르는 걸 배웠다. 고맙다

[태보미(taebomi)]

모두함께 발전해나가는것이에요 !

[에뚜(ssss4610)]

[태보미(taebomi)]

[익명(119.194)]

ㄷㄷ 댕댕쩌는 퀄리티 댕댕쩌는 개발속도

[태보미(taebomi)]

[연두고래(jjw2696)]

오우 쉐이더는 아직 공부해보지 않아서 못써봤는데 쉐이더 쓰니까 진짜 화려하고 이뻐지네요!! 뭔가 상위호환의 게임개발 과정을 보는 거 같아서 자극이 됩니다! 화잇팅!

[태보미(taebomi)]

과찬 감사한거에요. 개발하시는게임 너무너무 예쁜거에요 ! 저도 그걸 보며 자극받았고 함께 귀여운 게임 개발해내는거에요 !

[카퍠인(happys96)]

[태보미(taebomi)]

[양치기(220.126)]

깃허브 혹시 있나요?

[태보미(taebomi)]

아니요 !

[익명(121.142)]

근데 이거 해상도 왤케 작아보임