カスタム CSS でコントローラーオーバーレイをデザインする

エディターは色、サイズ、レイアウト、ラベルをカバーしています。押した瞬間に光る輪郭線、ボタンを押している間だけ現れるラベル、自分のフォントなど、エディターにない表現がほしくなったときは、Pro のカスタム CSS でオーバーレイのどの部分でも作り替えられます。このページでは、指定できるものすべてと、触らないほうがよい数少ないものをまとめます。

CSS を書く場所

エディターでオーバーレイを開き、CSS タブに移動して CSS を書く を選びます。CSS が適用されるのはエディターのプレビューではなく OBS のオーバーレイで、保存すればソースを更新しなくても OBS に届きます。レイアウトはエディターのプレビューで、見た目は OBS で確認してください。

OBS のブラウザソースのプロパティにあるカスタム CSS 欄は空のままにします。対象は同じページですが、gamepad.lol に保存した CSS は、そのリンクを使うすべてのシーンと OBS プロファイルにオーバーレイと一緒についていきます。

オーバーレイは SVG です

各コントロールは、1 つの 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] ルールも書いてください。書かないと、押しても離しても同じ見た目になります。

制限

• 外部ファイルは使えません。 Web アドレスを指す @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 のブラウザは、動作している PC にインストールされたフォントを使えます。ローカルフォントならアップロードは不要です。

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

そのフォントを持っていない人がオーバーレイを開くと、代替フォントで表示されます。

要素を動かしたり隠したりするときは、レイアウトタブを使ってください。要素ごとに位置を保存し、アニメーションとぶつかりません。