執筆:ptrst
チャンネル主のすのーさんに捧げる
第二回4thGS座談会!(ゲスト:stoic、ptrst、ふぉんでゅ。、ビーン)
次回以降の4thGS座談会に向けた技術面メモです
こんな感じの画面を作ります。
・任意の画像をアバターとして設定する
・喋っていないときはアバターが暗くなる
・喋っている人のアバターはぴょんぴょんはねてかわいい
OBSのインストール、初期設定は完了している前提
Discord Streamkit Overlay導入
Discordを起動している状態で、
webブラウザで以下のページにアクセス
「Install for OBS」選択
「VOICE WIDGET」選択
Server、Voice Channelを指定
画面右下のURLをコピーする
Discord Streamkit OverlayをOBSにソースとして貼り付ける
OBS起動
ソースの「+」をクリックして「ブラウザ」を追加
URLに先程コピーしたDiscord Streamkit OverlayのURLを入れる
おお。(一人しかいない寂しい通話)
カスタムCSS導入
このままだと見た目があじけないのでカスタムCSSなるものを導入します
CSS(Cascading Style Sheets)はウェブページの見た目を定義できるすげえやつ
五秒前までカスタムスタイルシートだと思っていた。ごめん
なんか神ツールあったのでこれ使っていきましょう
discordサーバ上でアバターを適用するユーザを右クリック→[IDをコピー]
「DISCORD STREAMKIT:立ち絵変換」の「DiscordユーザID」に貼り付け
アバターに使う画像をdiscordとかはてなブログに投稿して、URLを取得。
「DISCORD STREAMKIT:立ち絵変換」の「画像URL」に貼り付け
跳ねる・明度変更・ネームタグ非表示にチェック
生成をクリック
するとこんな感じのCSSが生成されるはず
/* 選択したユーザ以外の画像を非表示にする */ li.voice-state:not([data-reactid*="discordのID"]) { display:none; } /* アイコンを立ち絵画像に差し替える */ .avatar { content:url("画像のURL"); height:auto !important; width:95% !important; border-radius:0 !important; filter: brightness(50%); } /* 発話状態の設定 */ .speaking { border-color:rgba(0,0,0,0) !important; position:relative; animation-name: speak-now; animation-duration: 300ms; animation-fill-mode:forwards; filter: brightness(100%) ; } @keyframes speak-now { 0% { bottom:0px; } 50% { bottom:10px; } 100% { bottom:0px; } } /* ネームタグ表示位置調整 */ li.voice-state{ position: static; text-align: center;} div.user{ display: none; } /* 色々消すヤツ */ body { background-color: rgba(0, 0, 0, 0); overflow: hidden; }
OBSのソースを選んで、「カスタムCSS」に上の呪文を貼り付ける
ええやん(クソデカネジキ)
(OBSのソースの高さ・幅を調整しましょう)
ちょっと手動で手直し
/* 選択したユーザ以外の画像を非表示にする */ li.voice-state:not([data-reactid*="discordのID"]) { display:none; } /* アイコンを立ち絵画像に差し替える */ .avatar { content:url("画像のURL"); height:auto !important; width:95% !important; border-radius:0 !important; /* ドロップシャドウ追加 */ filter: brightness(75%) drop-shadow(10px 10px 5px #00000033); /* 明るさの変化をなめらかに */ transition: filter 200ms ease; } /* 発話状態の設定 */ .speaking { border-color:rgba(0,0,0,0) !important; position:relative; animation-name: speak-now; animation-duration: 800ms; animation-fill-mode:forwards; filter: brightness(100%) drop-shadow(10px 10px 5px #00000033); } /* 2回跳ねる(ポケモンコンテストみたいでかわいい) */ @keyframes speak-now { 0% { bottom:0px; } 25% { bottom:0px; } 43.75% { bottom:10px; } 62.5% { bottom:0px; } 81.25% { bottom:10px; } 100% { bottom:0px; } } /* 名前は消す */ div.user{ display: none; } /* 色々消すヤツ */ body { background-color: rgba(0, 0, 0, 0); overflow: hidden; }
あとはOBSのソースを追加して、背景とか文字とか足して完成です。
手元にある画像が貧弱すぎてシュールな感じになってしまった
(いらすとや等で補完しましょう)
複数人いる場合は人数ぶんのソースを追加して、人数ぶんのカスタムCSSを設定してください
では