はじめに
筆者自身がゲーム配信をしていることもあり、
OBSにて配信用UIを色々作ってみようと考えました。
要件の一つとして周囲のPCに詳しくない友人にも共有することもあるため、
なるべく簡単な方法でOBSに追加できる必要があります。
何を作ろうと思ったか
①画面の下に表示するテロップ
②工業ゲームで生産性を最大化するための自動計算フローチャート
今回は①についてお話しします。
②についてはローカルで表示することは可能なものの、
UIでの操作を連携するにはまだ解決しなければならない問題があるため、
来月の記事で書きたいと思います。
画面の下に表示するテロップ
OBSでテロップを表示する際、
OBSのテキスト（GDI+）をソースに追加し、
エフェクトでスクロールを追加するなどしてテロップを作ることは可能ですが、
文言を変える場合にソースを編集する必要があったりして少しめんどくさいです。
そのため、ブラウザのローカルソースを追加することで
同階層のtxtを編集するだけで良いものを作成しました。
ファイル構成
/ticker/
├ overlay.html ← OBSで表示
├ text.txt ← テロップ内容（ここを編集）
① OBS表示用（overlay.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>下部スクロールテロップ</title>
<style>
body {
margin: 0;
background: transparent;
overflow: hidden;
font-family: "Noto Sans JP", sans-serif;
}
#ticker-wrap {
position: fixed;
bottom: 0;
width: 1920px;
height: 70px;
background: rgba(0, 0, 0, 0.7);
overflow: hidden;
}
#ticker {
position: absolute;
white-space: nowrap;
color: white;
font-size: 36px;
line-height: 70px;
padding-left: 1920px;
animation: scroll 15s linear infinite;
}
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div id="ticker-wrap">
<div id="ticker">読み込み中...</div>
</div>
<script>
async function updateTicker() {
try {
const res = await fetch("text.txt?_=" + Date.now()); // キャッシュ対策
const text = await res.text();
const ticker = document.getElementById("ticker");
if (ticker.innerText !== text.trim()) {
ticker.innerText = text.trim();
ticker.style.animation = "none";
ticker.offsetHeight; // 再描画
ticker.style.animation = "scroll 15s linear infinite";
}
} catch (e) {
console.log("読み込み失敗", e);
}
}
setInterval(updateTicker, 1000); // 1秒ごとにチェック
</script>
</body>
</html>
② テロップ内容ファイル（text.txt）
テロップに表示する内容を記載
これだけで編集しやすいテロップを作成することができました。
今後について
弊社ではtoolPodsと言う便利ツール集をリリースしており、
今後はOBSや配信に使えそうなツール集を自分でも作ってみようと考えています。
このテロップについては
背景や文字フォント等をUIで編集してhtmlを出力できるような形にしようと考えています。
来月は今詰まっている工業ゲームの最適化ツールについてお話しできればなと思っています。