Canlı yayınlarda izleyici dikkatini çekmek, küçük ligler için hem marka değeri yaratır hem de prodüksiyon kalitesini yükseltir. AR (artırılmış gerçeklik) katmanları kulağa karmaşık gelse de küçük bütçeyle uygulanabilecek, düşük gecikmeli ve etkili overlay çözümleri mümkün. Bu rehberde 6 hazır overlay fikrini sunacak, her biri için dosya türleri, OBS ve browser kaynak kurulumu ve performans için pratik ipuçları vereceğim.
Giriş: Neden AR Katmanları ve Hazır Şablonlar?
AR katmanları, izleyicinin ekranda gördüğü bilgiyi sahneye entegre eder; skorlar, oyuncu kartları, sponsor bandı gibi öğeler daha dinamik ve akılda kalıcı görünür. Küçük liglerde prodüksiyon ekipleri genelde kısıtlı kaynakla çalışır. Bu yüzden:
- Hazır şablonlar zaman kazandırır ve tutarlılığı korur.
- Web tabanlı overlay'lar kolay güncelleme ve düşük CPU kullanımı sağlar.
- Şeffaf video formatları (alpha kanallı WebM) sahneye çabuk entegre olur.
Genel Hazırlık: Hangi Araçlara İhtiyacınız Var?
Minimum araç seti:
- OBS Studio (Windows/Mac/Linux)
- Tarayıcı kaynakları için OBS Browser Source (OBS içinde hazır)
- Basit bir HTML overlay sunucusu veya NodeCG gibi hazır dashboard aracılarından biri
- WebM (alpha), PNG dizileri veya SVG/HTML/CSS animasyonlar
- İyi bir internet bağlantısı ve yayın bilgisayarında GPU hızlandırması
İleri seviye opsiyonlar: NDI, vMix, TouchPortal veya Stream Deck entegrasyonu. Ancak küçük ligler için ilk etapta OBS + browser kaynak + WebM kombinasyonu en düşük bariyerli ve etkili çözümdür.
6 Hazır Overlay Şablonu ve Uygulama Notları
1. Minimal Skorbord – Mobil Uyumlu
Amaç: Ekranın köşesinde sürekli güncellenen sade skor göstergesi.
- Format: HTML/CSS (responsive) veya WebM alpha
- Boyut: 300x150 px (köşe için), 72-120 KB CSS tabanlı, WebM için 720p alpha
- Kurulum: OBS Scene içine Browser Source ekle, URL'ye skor API veya manuel dashboard bağla.
- İpucu: CSS ile font-smoothing ve transform kullanarak retina uyumluluğu sağlanabilir.
2. Dinamik Oyuncu Kartı – Tanıtım Esnası
Amaç: Maç öncesi ve oyuncu değişikliklerinde ad, rol, kısa istatistikler gösterir.
- Format: WebM alpha (kısa animasyon), PNG arka plan + HTML metin
- Kullanım: Replay veya mola anlarında hotkey ile göster
- Kurulum: WebM dosyasını Media Source olarak ekle. Alpha destekli WebM tercih edin. Yoksa PNG dizisi kullanın.
3. Sponsor Ticker ve Hareketli Banner
Amaç: Yayın boyunca sponsor isimleri/mesajlarını göstermek.
- Format: HTML ticker (CSS animasyonlu)
- Kurulum: Browser Source, içeriği Google Sheet veya JSON ile besleyin
- İpucu: Ticker uzun metinleri döndürürken tekrarları minimuma indirmek için klonlama yapın, animasyon performansı için transform: translateX kullanın.
4. Replay Çerçevesi ve Saniyelik Donma Efekti
Amaç: Önemli anları vurgulamak için çerçeve ve kısa donma efekti.
- Format: PNG çerçeve + short WebM freeze stinger
- Kurulum: Replay kaynaklarını Scene içinde gruplayın ve hotkey ile tetikleyin
- İpucu: Replay için ayrı düşük gecikmeli capture makinesi kullanmak işi kolaylaştırır.
5. AR Pop-out ile İstatistik Kartları
Amaç: Oyuncu istatistiklerini ekrandan 'uçuyormuş' gibi gösterme.
- Format: HTML/CSS + SVG veya Three.js tabanlı basit 3D
- Kurulum: Browser Source. Verileri NodeCG veya basit WebSocket ile anlık güncelleyin.
- İpucu: Basit parallax için fare/mouse hareketine bağlı düşük çaplı transform kullanın, performans için 3D hesapları sunucu tarafında azaltın.
6. Maç İçi Etkileşim Katmanı (Anket, Chat Öne Çıkarma)
Amaç: İzleyiciyi etkin tutmak için chatten seçilen mesajları veya anket sonuçlarını ekranda göstermek.
- Format: HTML overlay, WebSocket bağlantısı ile interaktif
- Kurulum: Chat bot veya Twitch/YouTube API ile mesajları alın, filtreleyin, browser kaynağa gönderin
- İpucu: Spam kontrolü yapın; yalnızca onaylı mesajları ya da moderator onayını ekranda gösterin.
Adım Adım Kurulum Rehberi (OBS + Browser Source Örneği)
- Overlay dosyalarınızı hazırlayın: WebM animasyonları alpha ile dışa aktarın. Alternatif olarak SVG/HTML paketleyin.
- Basit bir local overlay sunucusu kurun: Node.js ile statik dosya servisi yeterli. Örnek: serve paketini kullanın.
- OBS'ye Browser Source ekleyin: URL olarak local adresi veya uzak overlay URL'sini girin. Genişlik/yükseklik ayarlarını çözünürlüğe göre ayarlayın.
- Veri bağlantısı: Skor ve oyuncu verisi için WebSocket veya REST endpoint kullanın. Güncellemeleri hızlı uygulamak için WebSocket tercih edin.
- Hotkey ve scene organizasyonu: Her overlay için ayrı bir Scene veya Scene Item yapın. Hotkey atayarak anlık gösterim sağlayın.
- Kaynak optimizasyonu: Browser Source'larda gereksiz animasyonları azaltın, CSS animasyonlarını GPU-friendly yapın, WebM için GPU decoding aktif edilsin.
Performans İpuçları ve Yayın Stabilitesi
- WebM kullanımı: Alpha destekli WebM dosyaları PNG dizisine göre çok daha az CPU kullanır ve daha akıcı oynatılır.
- Browser Source limitleri: Çok fazla DOM elemanı ve ağır JavaScript CPU tüketir. Basit, performans odaklı kod yazın.
- Donanım hızlandırma: OBS'de donanım kodlayıcı (NVENC/AMD) kullanın; yayın bilgisayarının GPU kaynaklarını overlay oynatımından ayırın.
- Ağ gecikmesi: Overlay güncellemelerini yerel ağda tutmak en iyisi. Bulut üzerinden güncelleme gerekiyorsa düşük gecikmeli socket çözümü tercih edin.
Not: Küçük lig prodüksiyonlarında sadelik çoğu zaman kaliteye dönüşür. Çok fazla görsel öğe yerine net, okunur ve hızlı tepki veren overlay'lar seçin.
Pratik Örnek Senaryo
Hafta sonu turnuvası için önerilen akış:
- Maç öncesi: Intro stinger (WebM) + oyuncu kartları sırayla (hotkey ile)
- Canlı maç: Minimal skorbord (browser source) + sponsor ticker
- Önemli an: Replay çerçevesi + donma stinger
- Mola/yarı: Dinamik oyuncu kartları ve kısa istatistikler
- Sonuç: Kapanış overlay ve sponsor vurgusu
Sonuç: Hangi Yolu Seçmelisiniz?
Küçük ligler için önerim aşamalı ilerlemek: önce basit HTML/CSS overlay ile başlayın, skor ve sponsor yönetimini oturtun, ardından WebM animasyonları ve daha dinamik AR efektlerini ekleyin. NodeCG gibi hazır paneller, bir kez kurulduğunda birçok işlemi otomatize eder ama başlangıç maliyeti ve öğrenme eğrisi vardır. Bütçeniz kısıtlıysa OBS + Browser Source + WebM kombinasyonu en uygunudur.
Özetle: 6 hazır overlay şablonunu kullanarak yayınınızı daha profesyonel hale getirebilirsiniz. Önemli olan düşük gecikme, okunabilirlik ve sahne yönetimi. Küçük ligler için aşamalı, pratik ve performans odaklı kurulumlar uzun vadede en verimli çözümdür.
