だいぶニッチなネタではありますが、最近流行のAmongUs。
これを配信にて
- OBSというツールを用い
- Discordで通話を行い
- Discord StreamKit Overlayで通話画面を構成したい
という人に向けたものになっています。
AmongUsが16日より最大15人対応になるということもあり、簡単にですが15人対応用のCSSを書いてみました。
AmongUsで15人並べるCSS
まず御託はいいからCSSだけくれという人のためにCSSのみ先に記載します。
使い方は後ほど
@charset "UTF-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: transparent;
}
.voice-container .voice-states {
display: flex;
flex-wrap: wrap;
width: 3620px;
}
.voice-container .voice-states .voice-state {
width: 240px;
display: inline-block;
height: auto;
text-align: center;
margin-bottom: 38px;
}
.voice-container .voice-states .voice-state .avatar {
width: 200px;
height: 200px;
border-radius: 0;
border: none;
filter: brightness(0.55);
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}
.voice-container .voice-states .voice-state .avatar.speaking {
filter: brightness(1);
border: none;
}
.voice-container .voice-states .voice-state .user {
text-align: center;
padding-top: 20px;
}
.voice-container .voice-states .voice-state .user .name {
line-height: 1.4;
}
使い方
Discord StreamKit Overlayの設定
https://streamkit.discord.com/overlay
詳しい使い方は死ぬほど紹介されてるのでググってもらうとして・・・
このCSSを使う上での注意点のみ記載します。
基本的には小さく作って拡大するより大きく作って縮小するほうが綺麗なので、大きめに作っています。（あとでOBS側で縮小する）
好みもありますが、こちらはすべてオフにしてください。
TEXT SETTEINGS
TextSize：30px
こちらは好みで調整可能ですが、概ね30px前後をご利用ください。後でOBSで縮小する際小さすぎると視力検査レベルになってしまいます。
TextColor : こちらは文字色なので好きな色で
その他は0pxに設定してください。
BACKGROUND SETTINGS
Opacity: 0%
ここはお好みになります。
名前表示の背景に色をつけたい場合はOpacityを好きな数字に（デフォは95%）。
OBSの設定
ソースにて（＋マーク）からブラウザを選択します。
タイトルはお好みで入力してOK。
ストリームキットのほうで右下にあるこのURLをコピーしておきます。
OBS側、ブラウザの設定です。
赤い枠の部分に上記のURLをコピペ。
幅：3620
高さ：300
青枠にCSSをコピペ（このページ最上部に貼ってある）。
OKを押す。
ここまででこのような感じになると思いますが、多くの場合このように赤枠がはみ出した状態になっていると思います。
この赤枠を手動で縮小や画面サイズに合わせる等で縮小して画面に合わせます。
右クリして「変換」→「画面に合わせる」→手動で調整が楽だと思います。
いい感じに配置を調整して完了。
まとめ
ざっくりですが横に並べるCSSを作ってみました。
ちなみに黙ってるとアイコンが暗い状態で、しゃべると明るくなります。
人狼群像劇で使用しているCSSをベースにしているため、群像劇をご覧になってる方はイメージしやすいと思います。
「こういう風に出来ませんか？」等の要望あれば教えていただければ検討します。