[📜일지] [벨라스터 개발일지 002] UI 제작기

[Velaste..(3sgpvdapx8fn)]

벨라스터 스팀 페이지 링크 + (위시리스트 / 팔로우 좀 plz)

https://store.steampowered.com/app/1897060/VELASTER/

.

.

아이템이 있는 모든 게임에는 인벤토리가 있다.

물론 어딘가에는 인벤토리가 없는 게임이 있을 수 있겠지만 일반적으로는 전부 있다.

아이템은 보관해야 하고, 당연히 보관 장소가 필요하며, 유저는 보관 된 아이템을 볼 수 있어야 하기에 인벤토리는 필수불가결 요소인 것이다.

.

.

인벤토리를 제작하기에 앞서 우선적으로 확인하고 넘어가야 할 것.

UI에 들어갈 요소들과

UI의 레이아웃.

레이아웃은 요소가 나와야 작업이 가능하니, 인벤토리에 들어갈 것들을 우선 체크한다.

• UI 최상단에 들어갈 씬 제목
• 아이템의 종류 (카테고리로 사용할 예정)
  
  • 장비
    
  • 소모품
    
  • 잡템
    
  • 퀘스트 아이템
  • 키 아이템
  • 룬 스톤
• 아이템 설명 패널
• 퀵 슬롯 패널
• 착용 중인 장비를 확인할 장비 패널
• 보유 중인 재화

들어가야할 요소는 전부 나왔고, 더 생긴다면 이후에 추가하면 된다.

이를 바탕으로 ui의 레이아웃을 기획 해 본다.

가장 잘 보이는 정중앙에 아이템 슬롯을 배치하고, 중앙 하단에 퀵 슬롯을 배치하였다.

좌측에 플레이어의 정보와 장비 슬롯, 우측에 아이템의 정보를 보여주기로 하였다.

최상단에는 씬의 제목이 있고 Q/E 나 이름을 클릭 해 스테이터스나 스킬 씬으로 빠른 메뉴 전환이 가능하다.

+아이템 장착 시 스테이터스 변경을 확인할 수 있다.

...레이아웃의 기획이 꽤나 빨리 끝났다.

해당 레이아웃을 사용했을 때의 변수, 단점들을 생각해봤지만 아이템을 착용했을 때 스테이터스의 변경을 확인하려면

아이템 정보 패널보다 먼 좌측의 스테이터스를 봐야한다는 것 정도?

추후에 그게 문제가 된다면 중앙의 아이템 패널과 스테이터스 패널의 위치를 교체하면 될 일이었다.

내 기준, 미관상으로도 실용성으로도 합격이다.

다음은 상호작용 시 출력 될 팝업의 기획.

아이템을 선택하면 우측 하단에 팝업이 출력 되도록 한다.

팝업창을 띄우기에 충분한 공간이 없다면 반대로 우측 상단에 출력될 것이다.

팝업의 버튼은 기본적으로

• 사용
• 퀵 슬롯 등록
• 장착
• 버리기

여기서 소모품은 '장착'이 없을테고

장비는 '퀵 슬롯 등록'이 없으며

잡템은 '버리기'만 있다.

버릴 수 없는 아이템은 버튼이 회색으로 변경되며 비활성화되도록 하였다.

이번엔 퀵 슬롯.

소모품의 경우에는 총 7칸의 퀵 슬롯 중 한 칸에 등록할 수 있게 된다.

퀵 슬롯에 등록 된 아이템은 전투 중 빠른 사용(R) 키로 사용할 수 있고, Z,X 키를 통해 순서를 변경할 수 있게하였다.

다만... 키 할당이 너무 많아 억지로 넣은 z,x 키가 좀 애매하다고 생각은 하는 중.

퀵 슬롯에 등록하거나 장착한 장비의 경우에는 라벨을 아이템 이미지에 붙여 어떤 것을 장비 중인지 확인할 수 있게해주었다.

어느정도 기획이 완성되었으니 이를 토대로 ui 시스템을 제작한다.

제작 된 시스템(레이아웃)은 다음과 같았다.

아이템의 이미지가 포션 말고는 아직 제작되지 않아서 임시 아이콘들로 대체 함.

직접 실행해본 후 제거할 것과 수정할 것을 추려내보았다.

A.좌측 하단의 활성화된 버프 패널

-기능이 의미가 없으므로 제거

B.퀵 슬롯의 칸

-퀵 슬롯이 7개나 있는 것이 과하다 판단하였고, 인벤토리와 크기가 달라 통일성이 없으니 미학적으로도 거슬린다.

칸 수를 6개로 줄인다.

딱히 추려낼 것이 없다.

음.... 잘 만든 것 같다.

토대로 완성(?) 된 인벤토리의 이미지

게임의 분위기에 맞춰 디자인하고, 영어 폰트를 결정하였다.

이미지가 제작 된 아이템 몇 종도 인벤토리에 넣어봄. (은 목걸이 / 감람석 귀걸이 / 타오르는 태양 빛의 반지 / 고요한 달 빛의 반지)

+장비 팝업과 착용 사진

https://youtu.be/DNCYH2Sj3TA

테스트도 성공적

어찌저찌 이렇게 인벤토리가 95% 완성 되었다.

완성 된 인벤토리를 만져보다보니 앞으로 추가하거나 수정할 것이 꽤 눈에 띈다.

1.카테고리 아이콘에 테두리 추가

구분해줄 테두리가 없으니 구분이 잘 안됨.

2.캐릭터 포즈 및 라이트 / 텍스쳐 수정

적절한 포즈를 제작하고 라이트도 다시 넣기로 하였음. 또한 이렇게 가까이서 보여줄 일이 없어서 텍스쳐가 낮았으므로, 인벤토리에 보여줄 캐릭터의 텍스쳐를 새로 제작하기로 함.

3.미니 스테이터스 패널에 수치가 안 보임

4.게이지의 색 구분 필요(hp/mp/stamina)

5.선택 중인 아이템의 정보가 팝업이 켜져도 패널에 유지되도록 변경

수정은 천천히 하기로...

.

.

.

.

인벤토리는 얼추 됐으니 스테이터스로 넘어가자

스테이터스에는 다음과 같은 요소들이 필요하다.

• 캐릭터의 정보
  • 이름 (캐릭터의 명칭)
  • 레벨
  • 경험치
  • 체력
  • MP (실제 명칭은 다름)
  • 스태미나
  • 공격력 / 물리 방어력 / 마법 방어력
  • 보유한 스테이터스 포인트
• 활성화된 효과 (버프/디버프)

기획 된 스테이터스의 레이아웃.

스테이터스는 인벤토리보다 레이아웃을 기획하는 데 더 오랜 시간이 걸렸다.

인벤토리와 달리 들어가는 요소가 게임마다 달라지기 때문에 이렇다할 정형화된, 모범적인 틀이 없었기 때문이 컸던 것 같다.

우리는 현재 적용 중인 효과들,

그러니까 버프 디버프를 유저가 어디에선가 확인할 수 있도록 하고싶었기에 그것을 스테이터스 씬에서 함께 보여주기로 하였다.

하지만 화면 크기의 한계 및, 내 레이아웃 아이디어가 발목을 잡았기에 씬 내부에서 분리하는 방식을 사용했다.

최상단의 빠른 메뉴 전환(Q,E)과 같이 A,D를 통해 스테이터스 - 장신구 - 활성화된 효과 탭을 교체할 수 있도록 하는 식이다.

제작된 레이아웃은 다음과 같다.

장신구는 굳이 스테이터스 씬에서 보여줄 필요 없는 것 같아 제거했다.

어차피 인벤토리에서 보여주기도 하고 굳이 여기에 새로운 레이아웃을 추가할 정도의 가치는 없었다.

장신구 외의 카테고리는 그대로 적용.

다만 활성화된 효과(버프/디버프)의 시스템은 추후에 개발 예정이라 카테고리만 존재하는 상태.

얼마 뒤 스테이터스의 디자인이 나왔다.

전체적인 크기가 크다 싶었지만 가시성을 생각하면 투박하고 큰 것도 괜찮다고 생각 된다.

수치를 표시하고 공격과 방어력에는 게이지를 보여주지 않도록 수정하고, 이렇게 스테이터스는 완성.

인가 싶었지만 큰 문제가 기획 단계에서부터 있었다.

기존에는 공격력과 방어력(현재는 물리/마법으로 나뉨)의 수치를 올리는 방식이 해당 스탯에 직접 투자하는 방식이었지만

이번에 여러 RPG 게임에서 사용 중인 2차 스탯에 투자 해, 1차 스탯이 오르는 방식으로 변경하였다는 것을 까먹었던 것.

다행인 건 추가로 생기는 것이지 없어지는 것은 아니었으니까 제작 된 이미지들을 전부 사용이 가능했단 것 정도?

수정된 레이아웃.

하단에 체력/힘/인내/지구력/순발력/집중력의 스탯이 추가 되었다.

해당 수치를 올리면 그에 맞는 1차 스탯 들이 오르는 방식.

그리고 나온 의견.

집중력과 같은 스탯은 찍었을 때 치명타가 오르는데, 우리는 해당 능력치를 보여주지 않아서 찍는 맛이 없지 않을까? 라는 것.

분명히 그런 점은 불친절하기도 하고, 유저가 알 수 있는 정보를 너무 줄이는 것 같기도 하였기에

2번째 임시 레이아웃을 짜보았다.

.

.

결과적으로

굳이 모든 상세한 능력치를 보여줄 필요가 있는가?

오히려 어지럽고 어려워져 유저가 진입장벽으로 느끼지 않을까? 라는 이유로 첫 번째 레이아웃으로 결정되었다.

완성 된 스테이터스 씬. (참고로 Effect는 현재 없음)

만들고보니 글자의 가시성이 부족한 것이 눈에 띄는데

크기를 키운다고 해결될 문제가 아니기에 글자의 외곽선을 추가하고, 텍스트 박스의 색감을 조정할 생각.

이렇게 인벤토리와 스테이터스 씬이 제작 되었다.

아직도 많은 작업이 남아있지만 점점 게임 같아지는 벨라스터를 보다보면 말로 할 수 없는 쾌감, 성취감이 느껴지는데

이 맛에 힘들어도 게임을 만드는 게 아닐까...

마지막으로 스테이터스 씬 테스트 영상을 올리며 글을 마친다

https://youtu.be/DC1e0hDvBxY

벨라스터에 대해 궁금하다면 아래의 링크로 ㄱㄱ !

---

인스타그램

https://www.instagram.com/the_velaster/

트위터

https://twitter.com/Velaster_

디스코드

https://d1scord.gg/38vWUd9fES

스팀 페이지

https://store.steampowered.com/app/1897060/VELASTER/

---

[익명(218.234)]

캐릭터는 멋있는데 아이콘이 도트여서 부조화가 느껴집니다. 더미 스프라이트라면 죄송

[Velaster(3sgpvdapx8fn)]

도트는 더미 스프라이트가 맞습니다. 인게임 내에서는 직접 그린 아이콘 이미지들이 들어가게 됩니다 ! 아직 아이템 이미지는 몇 개만 제작된 터라 더미를 사용하였습니다.

[익명(14.37)]

아트웍 보소.. 대단하다

[Velaster(3sgpvdapx8fn)]

[질문에킹(9bvdteedt38e)]

캡쳐만 보고 그냥 그런가 보다 했는데, 스팀 가서 보고 지렸다 게이야

[Velaster(3sgpvdapx8fn)]

ㅋㅋㅋㅋㅋㅋㅋㅋ 위시리스트도 해 줘...

[해당 댓글은 삭제되었습니다.]

해당 댓글은 삭제되었습니다.

[Velaster(3sgpvdapx8fn)]

[익명(175.223)]

텍스트 색깔 통일해야할듯 - dc App

[잘살어(qlqhdl08)]

팀원 몇명이신가요?

[익명(122.45)]

왤케 고수임