1. 시작
처음 뵙겠습니다!
갑작스럽겠지만...
UI 개발 칼럼 「UI 스트리트」 시작하겠습니다!
「UI 스트리트」에서는 스트리트 파이터 6에서의 UI 제작을 통해 추억 이야기, 비화, 퇴짜맞은 방안까지... 완성에 이르게 되는 「길」을 폭넓게 소개하고 싶습니다.
우선은 멤버의 자기 소개부터!
첫 번째는 저, UI 디자이너 토비타입니다.
스트리트 파이터 6 UI 전체의 그래픽, 구현의 감수·제작을 실시하고 있습니다.
「더 알기 쉽고, 더 놀기 쉽게」를 모토로 평소에 생각하면서 UI를 제작하고 있습니다.
전작 스트리트 파이터 5 플레이어 분들이나, 이번 작품이 처음인 분 등, 모든 분들이 플레이하기 쉽도록 의식해서 만들었기 때문에 좋은 의미로 UI를 신경쓰지 않고 게임을 즐겨주셨으면 좋겠습니다!
두 번째는, 이번 작품의 테마인 「그래비티」를 메인으로 제작해 주시는 「우에다 씨」입니다!
우에다) 힙합이 키워드가 되는 SF6에서 그래비티 제작을 담당하고 있는 우에다 입니다.
배경, UI 외에 모든 캐릭터의 이름을 그래비티로 제작하고 있습니다.
게임 분야 이외에는 SF6 게임쇼, 전시, 콜라보 상품 등의 그래피티 제작, 제공을 담당하고 있습니다.
SF6의 그래비티 소개나 그래비티의 그리는 방법 강좌 등 그래비티에 관련되는 다양한 정보를 보여줄 수 있으면 좋겠다고 생각하고 있습니다.
자기 소개 감사합니다!
이 두 명에서 보여줄 수 있으면 좋겠다고 생각하니 잘 부탁드립니다!
인사가 끝났으니 조금만 작은 이야기 거리를...
스트리트 파이터 6에서는 그래비티가 많이 등장합니다.
그 중에서도 플레이어 여러분이 많이 보셨을 「캐릭터 셀렉트 화면」의 배경으로 사용되고 있습니다.
바로 이것입니다.
평소에 UI나 캐릭터에 숨어있기 때문에 배경만 보면 신선하네요!
사실 이 배경...
이벤트 회장 등에서 시연하고 있던 시연판과는 그래비티가 다릅니다!
그것이 이쪽
그래비티의 일부를 굳이 미완성으로 만들어, 아직 그리고 있는 중 = 개발 중 이라는 것을 의미하는 디자인으로 하고 있었습니다.
모든 디자인에는 의미가 있기 때문에 그 의미를 상상하면 또 다른 즐길 방법이 생길지도 모르겠네요!
이번에는 이 쯤에서!
그럼 이만!
2. 캐릭터 폰트의 비밀 라시드 편
안녕하세요!
UI의 토비타입니다.
7/24에 라시드가 발매되었으니, 이번에는 UI 섹션의 라시드에 관한 이야기로 「캐릭터 폰트」 이야기를 할 수 있으면 좋겠습니다.
캐릭터 폰트란 캐릭터 키 비주얼 등에서 사용되고 있는 「캐릭터 이름의 문자」를 가리키는 말로서 개발 내에서 사용하고 있습니다.
그것이 이쪽
캐릭터 키 비주얼
캐릭터 폰트
라시드의 이미지가 잘 표현되어 있어 멋있네요!
디자인의 의도는 라시드 출신지의 아랍어를 이미지화한 것으로, 아라비아 느낌을 너무 강하게 하면 문자로서의 가독성이 떨어져 버리기 때문에 그 상태의 조절이 어려웠지만 잘 정리해 주었습니다.
이번에는 캐릭터 폰트의 「비밀」이라는 것으로 기획안 당시의 것 일부를 소개할 수 있으면 좋겠습니다.
그것이 이쪽
모두 라시드 느낌이 나는 좋은 디자인이네요!
각각 라시드의 이미지로부터 아랍어나 파쿠르, 스트리트, 라시드의 트레이드 마크, 디지털, 이글, 날개 등 다양한 키워드를 부풀려 디자인의 기획안을 받았습니다.
하나의 디자인이 세상에 나오기까지 많은 디자인이 생겨나고, 많은 디자인이 사람들이 볼 수 없이 사라져 가기 때문에 흔히 디자이너는 「공양한다」는 말을 사용하여 태어난 디자인에 경의를 가지고 작별을 고합니다.
이번에는 개발 칼럼이라는 자리에서 빛을 볼 수 있었기 때문에, 분명 디자이너들도 기뻐하고 있지 않을까요!
이번에는 이 쯤에서!
그럼 이만!
3. 캐릭터 그래비티의 비밀 라시드 편
안녕하세요!
UI의 토비타입니다!
지난번 라시드의 폰트에 이어서, 이번에는 라시드의 「캐릭터 그래비티」를 소개할 수 있었으면 좋겠습니다.
캐릭터 그래비티란, 말 그대로 캐릭터를 상징하는 그래비티가 됩니다.
그것이 이쪽
이쪽도 캐릭터 폰트와 마찬가지로 라시드의 이미지가 잘 표현되어 있어 멋있네요!
이번에도 캐릭터 그래비티의 「비밀」로 기획안 당시의 것 중 일부를 소개할 수 있었으면 좋겠습니다.
그것이 이쪽
이름 부분은 캐릭터 폰트를 기반으로 한 것으로 일찍 굳어졌지만 배경 부분에서 다수의 기획안이 나왔습니다.
각각 라시드의 트레이드 마크, 회오리, 회오리의 연기, 날개, 새 등 라시드에서 연상된 다양한 키워드로부터 생각해냈습니다.
직접적인 날개나 새 모티브도 멋있었습니다만, 릴리나 마농과도 겹칠지도 모른다고 해서 최종적으로 「회오리 + 날개」의 이미지가 들어간 디자인이 되었습니다.
인게임에서는 캐릭터 그래비티가 사용되고 있는 부분이 적습니다만 상품 등에서 자주 사용되고 있기 때문에 그쪽에서 보았을 때는 "이러한 경위로 만들어진 디자인이구나"라고 생각해주시면 감사하겠습니다!
이번에는 이 쯤에서!
그럼 이만!
4. 아이트래킹의 활용
안녕하세요!
UI의 토비타입니다!
지금까지는 그래픽적인 이야기를 했지만, 이번에는 조금 UI의 전문적인 내용을 소개하고자 합니다.
스트리트 파이터 6의 UI 개발에서는 「아이트래킹」의 기술을 이용해 검증, 개발을 실시하고 있었습니다.
아이트래킹이란 눈동자의 움직임을 추적하는 기술로, 일본어로는 「시선 계측(視線計測)」이라고 불리기도 합니다.
이 기술은 주로 개발 초기에 「배틀 중 게이지 레이아웃」 검증에 활용하고 있었습니다.
그것이 이쪽
여기에서 붉은 원형의 표시가 아이트래킹(시선의 가시화)하고 있는 모습이 됩니다.
화면을 보면 아시겠지만, 개발 초기에는 체력바, 드라이브 게이지, SA 게이지 등 모든 요소가 화면 하단에 정리되어 있었습니다.
이 레이아웃은 스트리트 파이터 시리즈가 아닌 것으로, 배틀 중에 봐야 할 게이지가 한 곳에 정리되어 있어 시선이 분배되지 않고 플레이 체험이 향상될 것이라는 예측 하에 시작한 시도였습니다.
검증해서 알게 된 것이 몇 가지 있는데, 첫 번째는 게이지류가 정리되어 있으면 시선을 옮기는 횟수가 줄어 플레이에 집중할 수 있다는 것을 알았습니다.
두 번째로, 격투 게임의 초보자와 상급자를 비교했을 때 초보자는 자신의 캐릭터를, 상급자는 화면의 중심 (화면전체)을 보고 있음을 알 수 있었습니다.
첫 번째 결과로부터 게이지류는 정리하는 것이 좋다고 할 수 있습니다만, 지금 발매된 게임을 보면...
기존 시리즈와 비슷한 레이아웃으로 되어 있습니다.
그럼 왜 게이지를 한 곳에 정리한 레이아웃이 채택되지 않았냐면
첫 번째 이유
게이지가 하단에 있으면 캐릭터와 표시가 겹쳐 앉은 모션이나 하단 공격이 보이지 않고 그 보이지 않는 것을 해결하기 위해 카메라를 내리면 점프했을 때 지상에 있는 캐릭터가 보이지 않게 되어, 그에 대한 대책으로 점프 중에만 카메라를 당기거나 상시 카메라를 당기는 등 다양한 검증을 실시했습니다만 어느 쪽이든 캐릭터가 작아져 박력이 없어져 버려, 게임 체험이 떨어진다는 것을 알게 되었습니다.
두 번째 이유
아이트래킹 검증 결과에서도 소개한 「상급자는 화면의 중심을 보고 화면 전체를 파악하고 있다」는 결과가 있었기 때문에 게이지가 한 곳에 정리되어 있지 않다고 해도 눈의 끝에서 시인할 수 있다는 결과가 있었기 때문에 종합하여 현재의 게이지 레이아웃이 되었습니다.
이 부분은 지금까지 예상이나 감각으로만 측정할 수 있었던 아이트래킹을 이용한 데이터로 논리적으로 판단할 수 있게 되었기 때문에 이를 잘 활용한 좋은 사례라고 생각합니다.
이번에는 이쯤에서!
그럼 이만!
