【OBS】Discordでしゃべった時にキャラクターを動かす方法！

Toshi

突然ですが、ゲーム配信などを見ている時、配信者しゃべったらキャラクターが動くような配信を見たことがありませんか？今回は、OBS × Discord を使ってしゃべったら キャラクターが動く 配信の設定についてお伝えしていきます。

今回解説していく内容は以下です！

本記事の内容

・OBS Discordでしゃべった時にキャラクターを動かす方法

OBS Discordでしゃべった時にキャラクターを動かす方法
まとめ

OBS Discordでしゃべった時にキャラクターを動かす方法

しょうがないなー…動くよ。

今回は、OBSに使いたいアニメキャラの画像(PNG)を配置し自分がしゃべったらそのアニメキャラが動くようにしていきます。※画像は背景が透過されているPNG画像を使用していきます。

実際、OBSにアニメキャラを配置しライブ配信した動画が以下になります。

【OBS】ゲーム配信・Discordの設定方法(誰がしゃべっているの？)

YouTubeのゲーム実況をやっているチャンネルで、複数人しゃべっていることがありますが、配信画面にアイコンが出ており誰がしゃべっているかわかりやすくなっている。かと思います。今回は、OBSでゲーム配信する際のDiscordの設定方法についてお伝えしていきます。※アイコンを配信画面に出し、しゃべってるのをわかりやすくする方法まで解説

上記の記事で、やり方についてはほぼ解説しているので OBS と Discordの連携についてわからない方は上記の記事を先に確認してみてください。※上記記事のDiscordでしゃべっている人をカスタム(CSS)の設定を変更することでキャラクターが動くようになります。

CSSを変更するだけなのですが、今回は画像を使うので画像のURLの取得としゃべる人のIDを取得しなければいけません。

/* 選択したユーザ以外の画像を非表示にする */

li.voice-state:not([data-reactid*=”①“]) { display:none; }

/* アイコンを立ち絵画像に差し替える */

.avatar {

content: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;

animation-duration: 300ms;

animation-fill-mode:forwards;

filter: brightness(100%) ;

}

@keyframes speak {

0% { bottom:0px; }

50% { bottom:100px; }

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; }