Kumanda overlay'ini özel CSS ile biçimlendir

Editör renkleri, boyutu, düzeni ve etiketleri kapsıyor. Onun sunmadığı bir şey istediğinde, örneğin basınca yanan bir kenar çizgisi, yalnızca tuş basılıyken görünen etiketler ya da kendi yazı tipin, Pro'daki özel CSS overlay'in her parçasını yeniden biçimlendirmeni sağlar. Bu sayfa hedefleyebileceğin her şeyi ve dokunmaman gereken birkaç şeyi listeliyor.

CSS nereye yazılır

Overlay'ini editörde aç, CSS sekmesine geç ve CSS yaz'ı seç. CSS editördeki önizlemeye değil OBS'teki overlay'e uygulanır ve kaydettiğin anda kaynağı yenilemeye gerek kalmadan OBS'e ulaşır. Düzen için editör önizlemesini kullan, görünümü OBS'te kontrol et.

OBS'teki Tarayıcı kaynağı özelliklerindeki özel CSS kutusunu boş bırak. O da aynı sayfayı hedefler ama gamepad.lol'e kaydettiğin CSS, overlay'in linkini kullanan her sahneye ve her OBS profiline onunla birlikte gider.

Overlay SVG'dir

Her kontrol, tek bir svg öğesinin içindeki bir SVG şeklidir. Hangi özelliklerin çalışacağını bu belirler: şekiller background ve border ile değil fill ve stroke ile, metin de color ile değil fill ile renklendirilir. font-size ve stroke-width gibi boyutlar ekran pikseliyle değil skinin kendi 640 × 360 çizimiyle ölçülür ve overlay'le birlikte ölçeklenir.

Seçiciler

Her kontrolün kendine ait bir id'si var ve aynı türden kontroller bir sınıfı paylaşıyor. CSS editöründe #, . ya da [ yazınca skinine ait tam listeyi görürsün.

• Ön tuşlar skinin tuşlarına göre adlandırılır: Xbox ve Switch Pro'da #face-a, #face-b, #face-x, #face-y; PlayStation'da #face-cross, #face-circle, #face-square, #face-triangle; nötr skinde #face-down, #face-right, #face-left, #face-up. Sınıf .gpl-button.
• Yön tuşu: #dpad-up, #dpad-down, #dpad-left, #dpad-right. Sınıf .gpl-button.
• Omuz ve menü tuşları: #bumper-l, #bumper-r, #select, #start. Sınıf .gpl-button.
• Analog çubuklar: #stick-l ve #stick-r hareket eden başlıklar, #stick-l-ring ve #stick-r-ring çevrelerindeki halkalar. Sınıflar .gpl-stick ve .gpl-stick-ring.
• Tetikler: #trigger-l ve #trigger-r dolgular, #trigger-l-track ve #trigger-r-track arka planlar. Sınıflar .gpl-trigger ve .gpl-trigger-track.
• Etiketler ve semboller: etiketli bir tuşun metni, id'sinin sonuna -label eklenmiş hâlidir; örneğin #face-a-label ya da #bumper-l-label. PlayStation sembolleri #face-cross-glyph gibi adlandırılır. Sınıflar .gpl-label ve .gpl-glyph. Yalnızca Tuş etiketleri açıkken vardırlar.

Ön tuş id'leri konumu değil harfi izler. Xbox'ta A altta, Switch Pro'da sağdadır; yani #face-a için yazdığın kural bu iki skin arasında geçince yer değiştirir. Kuralın skin değişikliğinden etkilenmemesini istiyorsan sınıfları kullan.

Basılı durum

Bir kontrol basılı tutulurken şekli data-pressed özniteliğini taşır: tuşlar basılıyken, tetikler biraz bile çekildiğinde, analog çubuklar içeri basıldığında.

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

Etiket ya da sembol tuşunun hemen ardından gelir; bu yüzden onu tuşun durumuna göre + ile biçimlendirebilirsin. Etiketler metindir ve fill alır; PlayStation sembolleri çizgidir ve stroke alır:

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

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

Dokunmaman gerekenler

Overlay her karede SVG öznitelikleri yazarak hareket eder: çubuk başlıklarında transform, tetik dolgularında height ve y. CSS özniteliklerin önüne geçer; bu özellikleri o öğelerde ayarlarsan onları yerinde dondurursun. Geri kalan her şeyi rahatça biçimlendir: fill, stroke, stroke-width, opacity, yazı tipleri.

Renkler de aynı şekilde çalışır. Editördeki Boşta ve Basılı renkleri de birer öznitelik; bu yüzden CSS'in bir tuşta fill ayarladığında onun için bir [data-pressed] kuralı da yaz, yoksa tuş basılıyken de bırakılmışken de aynı görünür.

Sınırlar

• Uzak dosya yok. @import ve bir web adresini gösteren url() reddedilir. Görseller ve yazı tipleri base64 data: URI olarak satır içine gömülmelidir.
• Toplam 20.000 karakter, gömülü görseller dahil. Biçimlendirme ve küçük simgeler için bol, tam boy çizimler için değil.
• Ters eğik çizgi yok. CSS kaçış dizileri reddedilir, çünkü diğer kuralların engellediği her şeyi yazabilirler.
• Yalnızca Pro. Aboneliğin biterse CSS'in kayıtlı kalır ama uygulanmaz; yeniden abone olursan geri gelir.

Bir kayıt reddedilirse editör bir uyarı gösterir ve pencereyi açık tutar; yazdığın hiçbir şey kaybolmaz ve OBS'te yayında olan CSS olduğu gibi kalır.

Örnekler

Marka renklerin

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

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

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

Basınca yanan kenar çizgisi

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

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

Basılana kadar sakin

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

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

Etiketler yalnızca basılıyken

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

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

Bilgisayarında kurulu bir yazı tipi

OBS'in tarayıcısı, çalıştığı bilgisayarda kurulu yazı tiplerini kullanabilir; yerel bir yazı tipi için yükleme gerekmez:

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

Overlay'i o yazı tipi olmadan açan herkes yedek yazı tipini görür.

Öğeleri taşımak ya da gizlemek için bunun yerine Düzen sekmesini kullan: konumları öğe başına kaydeder ve animasyonla çakışmaz.