커스텀 CSS로 컨트롤러 오버레이 꾸미기

에디터는 색상, 크기, 레이아웃, 라벨을 다뤄요. 누를 때 켜지는 윤곽선, 버튼을 누르고 있는 동안에만 나타나는 라벨, 내가 고른 글꼴처럼 에디터에 없는 걸 원한다면, Pro의 커스텀 CSS로 오버레이의 어떤 부분이든 다시 꾸밀 수 있어요. 이 페이지에는 지정할 수 있는 것 전부와, 건드리지 않는 편이 좋은 몇 가지를 정리했어요.

CSS를 쓰는 곳

에디터에서 오버레이를 열고 CSS 탭으로 가서 CSS 작성 을 선택하세요. 이 CSS는 에디터의 미리 보기가 아니라 OBS의 오버레이에 적용되고, 저장하는 즉시 소스를 새로 고치지 않아도 OBS에 도착해요. 레이아웃은 에디터 미리 보기로 보고, 스타일은 OBS에서 확인하세요.

OBS 브라우저 소스 속성에 있는 커스텀 CSS 칸은 비워 두세요. 같은 페이지를 겨냥하지만, gamepad.lol에 저장한 CSS는 그 링크를 쓰는 모든 장면과 모든 OBS 프로필로 오버레이와 함께 따라가요.

오버레이는 SVG예요

모든 컨트롤은 하나의 svg 요소 안에 있는 SVG 도형이에요. 어떤 속성이 통하는지는 여기서 정해져요. 도형은 background와 border가 아니라 fill과 stroke로 칠하고, 글자는 color가 아니라 fill로 칠해요. font-size나 stroke-width 같은 크기는 화면 픽셀이 아니라 스킨 자체의 640 × 360 도면 기준으로 재고, 오버레이와 함께 확대 축소돼요.

선택자

컨트롤마다 고유한 id가 있고, 같은 종류의 컨트롤은 클래스를 공유해요. CSS 에디터에서 #, ., [ 를 입력하면 지금 쓰는 스킨의 정확한 목록이 나와요.

• 페이스 버튼 은 스킨의 버튼 이름을 따라요. Xbox와 Switch Pro에서는 #face-a, #face-b, #face-x, #face-y, PlayStation에서는 #face-cross, #face-circle, #face-square, #face-triangle, 중립 스킨에서는 #face-down, #face-right, #face-left, #face-up 이에요. 클래스는 .gpl-button.
• 방향키: #dpad-up, #dpad-down, #dpad-left, #dpad-right. 클래스는 .gpl-button.
• 범퍼와 메뉴 버튼: #bumper-l, #bumper-r, #select, #start. 클래스는 .gpl-button.
• 스틱: #stick-l 과 #stick-r 이 움직이는 머리, #stick-l-ring 과 #stick-r-ring 이 그 주위의 고리예요. 클래스는 .gpl-stick 과 .gpl-stick-ring.
• 트리거: #trigger-l 과 #trigger-r 이 채워지는 부분, #trigger-l-track 과 #trigger-r-track 이 배경이에요. 클래스는 .gpl-trigger 와 .gpl-trigger-track.
• 라벨과 기호: 라벨이 있는 버튼의 글자는 그 버튼 id 뒤에 -label 을 붙인 것으로, #face-a-label 이나 #bumper-l-label 같은 식이에요. PlayStation 기호는 #face-cross-glyph 처럼 돼요. 클래스는 .gpl-label 과 .gpl-glyph. 버튼 라벨이 켜져 있을 때만 존재해요.

페이스 버튼 id는 위치가 아니라 글자를 따라가요. Xbox에서는 A가 아래에 있고 Switch Pro에서는 오른쪽에 있으니, #face-a 에 쓴 규칙은 두 스킨을 오갈 때 자리를 옮겨요. 스킨을 바꿔도 규칙이 살아남길 원한다면 클래스를 쓰세요.

누름 상태

컨트롤을 누르고 있는 동안 그 도형은 data-pressed 속성을 가져요. 버튼은 눌려 있는 동안, 트리거는 조금이라도 당겨져 있는 동안, 스틱은 눌러 넣은 동안이에요.

.gpl-button[data-pressed] {
  fill: #ffd60a;
}

라벨이나 기호는 버튼 바로 뒤에 오기 때문에 + 로 버튼 상태에서 스타일을 줄 수 있어요. 라벨은 글자라서 fill 을 받고, PlayStation 기호는 선이라서 stroke 를 받아요.

.gpl-button[data-pressed] + .gpl-label {
  fill: #111111;
}

.gpl-button[data-pressed] + .gpl-glyph {
  stroke: #111111;
}

건드리지 말아야 할 것

오버레이는 매 프레임 SVG 속성을 써서 움직여요. 스틱 머리에는 transform, 트리거 채우기에는 height 와 y 예요. CSS는 속성을 이기기 때문에, 그 요소들에 그 속성을 지정하면 제자리에 얼어붙어요. 나머지는 자유롭게 꾸미세요. fill, stroke, stroke-width, opacity, 글꼴 모두 괜찮아요.

색도 마찬가지예요. 에디터의 대기와 누름 색도 속성이라서, CSS로 버튼에 fill 을 지정했다면 그 버튼의 [data-pressed] 규칙도 같이 써야 해요. 그러지 않으면 눌렀을 때와 뗐을 때가 똑같아 보여요.

제한

• 원격 파일은 안 돼요. 웹 주소를 가리키는 @import 와 url() 은 거부돼요. 이미지와 글꼴은 base64 data: URI로 넣어야 해요.
• 전체 20,000자 까지예요. 넣은 이미지도 포함해요. 스타일과 작은 아이콘에는 넉넉하지만, 전체 일러스트를 담기에는 부족해요.
• 백슬래시는 안 돼요. CSS 이스케이프는 다른 규칙이 막는 걸 그대로 적어 낼 수 있어서 거부돼요.
• Pro 전용이에요. 구독이 끝나면 CSS는 저장된 채로 남지만 더 이상 적용되지 않고, 다시 구독하면 돌아와요.

저장이 거부되면 에디터가 경고를 보여 주고 대화 상자를 열어 둬서 입력한 내용은 사라지지 않고, OBS에서 이미 돌아가는 CSS도 그대로 남아요.

예제

내 브랜드 색상

.gpl-button,
.gpl-stick {
  fill: #1f1f24;
}

.gpl-button[data-pressed],
.gpl-stick[data-pressed] {
  fill: #9146ff;
}

.gpl-trigger {
  fill: #9146ff;
}

누를 때 켜지는 윤곽선

.gpl-button {
  stroke: #9146ff;
  stroke-width: 0;
}

.gpl-button[data-pressed] {
  stroke-width: 4;
}

누르기 전까지는 조용하게

.gpl-button,
.gpl-stick,
.gpl-stick-ring,
.gpl-trigger-track {
  opacity: 0.35;
}

.gpl-button[data-pressed],
.gpl-stick[data-pressed] {
  opacity: 1;
}

누르고 있는 동안에만 라벨 보이기

.gpl-label,
.gpl-glyph {
  opacity: 0;
}

.gpl-button[data-pressed] + .gpl-label,
.gpl-button[data-pressed] + .gpl-glyph {
  opacity: 1;
}

내 PC에 설치된 글꼴 쓰기

OBS의 브라우저는 OBS가 돌아가는 컴퓨터에 설치된 글꼴을 쓸 수 있어서, 로컬 글꼴은 업로드할 필요가 없어요.

.gpl-label {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
}

그 글꼴이 없는 사람이 오버레이를 열면 대체 글꼴로 보여요.

요소를 옮기거나 숨길 때는 레이아웃 탭을 쓰세요. 요소별로 위치를 저장하고 애니메이션과 부딪히지 않아요.