어제 쓴 와우스틱 리뷰에 등장한 입력뷰어 만드는 방법에 대해 물어본 챈럼이 있었음.

별로 어려운 건 아니라 설명해보고자함.


준비물1 : 녹화프로그램 OBS Studio(링크)

OBS가 개인적으론 무료 녹화프로그램 중에서 가장 괜찮다고 생각해서 쓰고있음.


준비물2: Display Fightstick Motion(링크)

별다른 프로그램을 사용한 건 아니고 OBS 공식 포럼에 유저가 제작한 툴을 활용했음.

위 링크를 누르면 해당 툴을 다운받을 수 있는 포럼으로 이동할 수 있음.

대충 해당 글에 사용법 다 정리되어있지만 일단 이 글에서도 설명하겠음.


우상단의 Download 버튼을 눌러서 압축파일을 받고 압축해제하자.


이런 파일들이 들어있을텐데 fightstick.html을 크롬 등의 응용프로그램을 사용해서 열어주자.


이런 사이트가 열릴텐데 아무 버튼이나 누르라고 빨간 글씨가 떠있다.


스틱을 연결하고 아무 버튼이나 누르면 위 모습대로 스틱 배열이 표시가 된다.

디폴트는 하얀색 레버가 달린 형태일 것이다.


상단 탭 중 Custom Layout을 누른 후

Custom Layout 체크버튼을 활성화시키면 아래의 목록들이 표시된다.

Open File 버튼을 누르고


압축 해제한 파일 중 layout 폴더에 진입하면


이런 폴더들을 볼 수가 있다.

만약 본인이 히트박스 유저라면 hitbox 폴더에 들어가서


layout.sav 파일을 불러오면 되는 식이다.

이하 내용은 히트박스를 기준으로 설명하겠음.


불러왔으면 이렇게 표시될 것이다.

사용법에 대해 설명해보겠음.



스틱이 연결되어있을 때 스틱의 버튼을 누르면 해당되는 버튼이 화면에 실시간으로 표시된다.

디폴트 이미지에선 하얀색으로 표시가 됨.


허나 실제로 스틱을 연결하면 실제 누르는 버튼과 화면에 표시되는 버튼이 다르게 표시될 거임.


아래 Button Config에서 Button#: 값을 수정해줘도 되지만,

아예 해당 버튼을 마우스로 클릭하고

(위 이미지는 30mm 버튼을 마우스로 클릭해서 활성화시킨 상태)

그 상태에서 동일한 위치의 스틱의 버튼을 눌러주면 서로 같은 번호가 매겨지게 된다.


그 외의 커스터마이징 요소도 이 페이지에서 설정할 수 있음.


Background Config: 스틱의 배경 이미지 파일을 불러올 수 있음.

Stick Config: 레버의 존재 여부, 위치, 크기를 설정할 수 있음.(마우스로 드래그 가능)

Button Config: 앞에 설명한대로 버튼마다 번호를 매길 수 있음.

Button Released: 버튼의 위치, 크기를 설정할 수 있고 (마우스로 드래그 가능) Choose File 버튼을 눌러 버튼 이미지를 불러올 수 있음.

Button Pressed: 버튼이 입력되었을 때 표시되는 이미지의 위치, 크기를 설정할 수 있고 Choose File 버튼을 눌러 버튼 이미지를 불러올 수 있음.

default값으로 표시해두면 기본적으로 통상 버튼과 같은 위치에 배정되서 크게 건들 필요는 없음.


이러한 기능으로 스틱의 배열과 배경, 버튼 이미지 등을 맘대로 설정할 수 있는 거임.


그리고 만약 hitbox폴더의 layout.sav 파일을 불러온 상태라면 hitbox 폴더에 사용된 버튼 이미지가 다운되어져있을거임.

입력되었을 때는 하얀색 버튼이 표시되는 방식임.

layout - color 폴더에 들어가면 이런 다른 색의 예시버튼도 있고

포토샵 등의 편집 프로그램을 사용해서 원하는 색상의 버튼 이미지를 만들어도 됨.


나도 이런식으로 내 취향에 맞는 버튼을 만들어서 등록했음.


 

자, 이제 본인이 원하는 모습의 커스터마이징 뷰어를 만들었다고 가정합시다.

그럼 이제 해야할 것은

저장이다.

애써 만든 뷰어가 날아가버리면 너무나도 원통할거임.

Save as layout.sav 버튼을 통해 .sav 파일을 만들면 버튼의 번호, 배열 등의 정보가 저장된다.

맨 첨에 불러온 디폴트 배열같은 것을 저장한다고 보면 됨.


그리고 입력 뷰어를 최종적으로 완성했으면 상단 탭의 General을 클릭해서 첫 페이지로 돌아온다.

Save As Mysetting.html 버튼을 눌러서 html 파일을 저장해두면 다음에 해당 html파일을 클릭했을 때 위 사이트로 들어올 수 있다.


주의사항은 html파일이 저장된 폴더와 layout등의 하위 폴더 위치가 변경되면 불러오기 실패할 수가 있으니 제대로 된 저장위치를 확보해두자.




이제 만들어낸 뷰어를 OBS 스튜디오에서 구동시켜봅시다.

OBS 스튜디오의 하단에 있는 기능 중 소스 목록: 탭을 주목하자.

일단 지금 위 이미지에 있는 5개의 탭은 무시하자, 내가 쓰고 있는 소스인데 지우고 설명하기 귀찮음 ㅎㅎ


+ 버튼을 누르고 브라우저 탭을 클릭한다.

소스 이름이야 본인이 구별할 수 있게 알아서 지어주시구


그럼 이런식으로 창이 생성될텐데 여기 URL 입력란에다가


이걸 Copy버튼을 누르고 복붙해주면 끝이다!


그럼 저렇게 OBS 편집 공간에 본인이 만든 스틱 뷰어가 표시될거임.

처음 사이트에 layout.sav 파일 불러왔을 때 처럼 스틱 버튼을 눌러주면 Press Any Button 문구와 흰 배경도 사라질테고

설정할 때 실수가 없었으면 본인이 원하는 입력이 표기될 거임.


그러곤 원하는 위치에 배정하고 녹화하면


이런 식으로 볼 수 있는거지~

난 리겜 녹화용으로 쓰고있는데 격겜용으로도 충분히 활용 여지가 있을듯?


뭔가 글은 꽤 길어졌는데 크게 어렵진 않을거임 ㅋㅋ

각자 원하는 뷰어를 만들어봅시다.


배경, 버튼 이미지 만드는데 시간 잡아먹지 걍 표시만 원하는 거면 디폴트 레이아웃으로도 충분할듯.

OBS 녹화방법 등의 기본적인 사용법은 생략하겠음, 네이버에 검색하면 다 나옴 ㅋㅋ