Dein Controller-Overlay mit eigenem CSS gestalten

Der Editor deckt Farben, Größe, Layout und Beschriftungen ab. Willst du etwas, das er nicht anbietet, etwa eine Kontur, die beim Drücken aufleuchtet, Beschriftungen nur bei gehaltener Taste oder deine eigene Schrift, kannst du mit eigenem CSS in Pro jeden Teil des Overlays umgestalten. Diese Seite listet alles auf, was du ansprechen kannst, und die wenigen Dinge, die du in Ruhe lassen solltest.

Wohin das CSS gehört

Öffne dein Overlay im Editor, geh zum Reiter „CSS“ und wähl CSS schreiben. Das CSS gilt für das Overlay in OBS, nicht für die Vorschau im Editor, und es erreicht OBS beim Speichern, ohne die Quelle zu aktualisieren. Nimm die Editor-Vorschau fürs Layout und prüf die Gestaltung in OBS.

Lass das CSS-Feld in den Eigenschaften der Browserquelle in OBS leer. Es spricht dieselbe Seite an, aber in gamepad.lol gespeichertes CSS reist mit dem Overlay in jede Szene und jedes OBS-Profil, das seinen Link benutzt.

Das Overlay ist SVG

Jedes Bedienelement ist eine SVG-Form innerhalb eines einzelnen svg-Elements. Das entscheidet, welche Eigenschaften wirken: Formen werden mit fill und stroke gefärbt, nicht mit background und border, und Text mit fill, nicht mit color. Größen wie font-size und stroke-width werden in der 640 × 360 großen Zeichnung des Skins gemessen und skalieren mit dem Overlay, nicht in Bildschirmpixeln.

Selektoren

Jedes Bedienelement hat eine eigene id, und alle Elemente einer Art teilen sich eine Klasse. Tipp im CSS-Editor #, . oder [, um die genaue Liste für deinen Skin zu bekommen.

• Fronttasten heißen wie die Tasten des Skins: #face-a, #face-b, #face-x, #face-y bei Xbox und Switch Pro, #face-cross, #face-circle, #face-square, #face-triangle bei PlayStation, #face-down, #face-right, #face-left, #face-up beim neutralen Skin. Klasse .gpl-button.
• Steuerkreuz: #dpad-up, #dpad-down, #dpad-left, #dpad-right. Klasse .gpl-button.
• Schultertasten und Menütasten: #bumper-l, #bumper-r, #select, #start. Klasse .gpl-button.
• Sticks: #stick-l und #stick-r sind die beweglichen Kappen, #stick-l-ring und #stick-r-ring die Ringe darum. Klassen .gpl-stick und .gpl-stick-ring.
• Trigger: #trigger-l und #trigger-r sind die Füllungen, #trigger-l-track und #trigger-r-track die Hintergründe. Klassen .gpl-trigger und .gpl-trigger-track.
• Beschriftungen und Symbole: Der Text einer beschrifteten Taste ist ihre id plus -label, etwa #face-a-label oder #bumper-l-label; die PlayStation-Symbole heißen #face-cross-glyph und so weiter. Klassen .gpl-label und .gpl-glyph. Sie existieren nur, solange Tastenbeschriftungen aktiv sind.

Die ids der Fronttasten folgen den Buchstaben, nicht der Position. Bei Xbox liegt A unten, bei Switch Pro rechts, eine Regel für #face-a wandert beim Wechsel zwischen diesen Skins also mit. Nimm die Klassen, wenn eine Regel einen Skinwechsel überstehen soll.

Der gedrückte Zustand

Solange ein Bedienelement gehalten wird, trägt seine Form das Attribut data-pressed: Tasten beim Drücken, Trigger schon bei leichtem Zug, Sticks beim Hineindrücken.

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

Eine Beschriftung oder ein Symbol folgt direkt auf seine Taste, du kannst sie also mit + aus dem Zustand der Taste heraus gestalten. Beschriftungen sind Text und nehmen fill, die PlayStation-Symbole sind Konturen und nehmen stroke:

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

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

Was du in Ruhe lassen solltest

Das Overlay animiert, indem es in jedem Frame SVG-Attribute schreibt: transform auf den Stick-Kappen, height und y auf den Trigger-Füllungen. CSS gewinnt gegen Attribute, diese Eigenschaften auf diesen Elementen zu setzen friert sie also an Ort und Stelle ein. Alles andere kannst du frei gestalten: fill, stroke, stroke-width, opacity, Schriften.

Mit Farben ist es genauso. Die Farben für Ruhezustand und Gedrückt aus dem Editor sind ebenfalls Attribute, sobald dein CSS also fill auf einer Taste setzt, schreib auch eine [data-pressed]-Regel dafür, sonst sieht sie gedrückt aus wie losgelassen.

Grenzen

• Keine entfernten Dateien. @import und url() mit einer Webadresse werden abgelehnt. Bilder und Schriften müssen als base64-data:-URI eingebettet werden.
• 20.000 Zeichen insgesamt, eingebettete Bilder eingeschlossen. Das reicht reichlich für Gestaltung und kleine Icons, nicht für ganze Grafiken.
• Keine Backslashes. CSS-Escapes werden abgelehnt, weil sich damit alles buchstabieren ließe, was die anderen Regeln blockieren.
• Nur mit Pro. Endet dein Abo, bleibt dein CSS gespeichert, wird aber nicht mehr angewendet, und kommt zurück, wenn du wieder abonnierst.

Wird ein Speichern abgelehnt, zeigt der Editor eine Warnung und lässt den Dialog offen, nichts von dem Getippten geht verloren und das in OBS bereits aktive CSS bleibt, wie es war.

Beispiele

Deine Markenfarben

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

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

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

Eine Kontur, die beim Drücken aufleuchtet

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

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

Zurückhaltend bis zum Druck

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

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

Beschriftungen nur bei gehaltener Taste

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

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

Eine auf deinem PC installierte Schrift

Der Browser in OBS kann Schriften nutzen, die auf dem Rechner installiert sind, der ihn ausführt, eine lokale Schrift braucht also keinen Upload:

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

Wer das Overlay ohne diese Schrift öffnet, bekommt die Ersatzschrift.

Zum Verschieben oder Ausblenden von Elementen nimm stattdessen den Reiter „Layout“: Er speichert Positionen pro Element und kommt der Animation nicht in die Quere.