ツチニンの使い方がわからない

https://bo-man.hatenablog.com/entry/2020/08/08/023828

OBSとdiscordを連携させて、配信画面に通話参加者のアバターを表示する

執筆:ptrst

チャンネル主のすのーさんに捧げる


第二回4thGS座談会!(ゲスト:stoic、ptrst、ふぉんでゅ。、ビーン)

次回以降の4thGS座談会に向けた技術面メモです

こんな感じの画面を作ります。

f:id:bo-man:20200817203745p:plain

・任意の画像をアバターとして設定する
・喋っていないときはアバターが暗くなる
・喋っている人のアバターはぴょんぴょんはねてかわいい

OBSのインストール、初期設定は完了している前提

Discord Streamkit Overlay導入

Discordを起動している状態で、
webブラウザで以下のページにアクセス

Discord StreamKit Overlay

「Install for OBS」選択

「VOICE WIDGET」選択

Server、Voice Channelを指定

画面右下のURLをコピーする

Discord Streamkit OverlayをOBSにソースとして貼り付ける

OBS起動

ソースの「+」をクリックして「ブラウザ」を追加

URLに先程コピーしたDiscord Streamkit OverlayのURLを入れる

f:id:bo-man:20200817205606p:plain

おお。(一人しかいない寂しい通話)

カスタムCSS導入

このままだと見た目があじけないのでカスタムCSSなるものを導入します

CSS(Cascading Style Sheets)はウェブページの見た目を定義できるすげえやつ
五秒前までカスタムスタイルシートだと思っていた。ごめん

なんか神ツールあったのでこれ使っていきましょう

manten-do.net

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」に上の呪文を貼り付ける

f:id:bo-man:20200817205924p:plain

f:id:bo-man:20200817213115p:plain

ええやん(クソデカネジキ)
(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のソースを追加して、背景とか文字とか足して完成です。

f:id:bo-man:20200817220620p:plain

手元にある画像が貧弱すぎてシュールな感じになってしまった
(いらすとや等で補完しましょう)

複数人いる場合は人数ぶんのソースを追加して、人数ぶんのカスタムCSSを設定してください

f:id:bo-man:20200817221215p:plain

では