配信情報

DiscordとOBSを連携させてイラストを動かす~カスタム編~

今日は昨日紹介した「DiscordとOBSを連携させて喋ると動くイラストのエフェクトをつける」の設定カスタマイズ編です

DiscordとOBSを連携させてゲーム配信に喋ると動くイラストをつけよう今回はYoutubeの配信者向けの情報です ゲーム実況や雑談配信をしていて”画面が何か寂しい”、”Vtuberさんたちのように動く...

デフォルトではこんな感じで3枚のイラストを使ったアニメーションになっています

画像A 常時表示するイラスト

画像B マイクに反応があった時に表示する1枚目

画像C マイクに反応があった時に表示する2枚目

マイクに反応があったときは0.5秒ずつに画像B、画像Cを交互に表示します

なとり
なとり
これをカスタマイズします

今回ご紹介する内容で

画像の枚数を増やす  →2枚から3,4枚に増やしたり

時間の長さを変更する →0.5秒で切り替えから0.3秒なり1秒なり

明るさを変更する →平常時や喋っている時の画像の明るさを変更

なとり
なとり
こんな感じで結構細かいところまで調整することができます

より凝った画像を使いたい、アニメーションのパターンを増やしたい、という方の為の情報ですね

それではやっていきましょう

*取り急ぎ要点だけまとめてみました。後日画像例なども加えて丁寧に加筆致します

コードの変更場所

前回の記事で紹介したコードに"ここを変更する"という変更ポイントを書き加えてみました

li.voice-state:not([data-reactid*="DiscordのキャラID"]) { display:none; }
.avatar {
content:url(画像Aのurl);
height:auto !important;
width:auto !important;
border-radius:0% !important;
filter: brightness(80%①明るさの変更A);
}

.speaking {
animation: speak 1s②アニメーションの再生時間 linear 0s infinite normal;
border-color:rgba(0,0,0,0) !important;
filter: brightness(100%③明るさの変更B);
}

@keyframes speak {
0% {content:url(画像Bのurl);}

100%③二枚目の画像の表示タイミング {content:url(画像Cのurl);}
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

明るさの変更

常時表示タイプの画像と、話している時のみ表示される画像で明るさを変更することができます

①明るさの変更A→常時表示されている画像

③明るさの変更B→喋っている時の画像

この二つの左の80%や100%の数字を変更することで明るさが変わります

なとり
なとり
明るさに差があるほど、話している時に目立つようになります

雑談配信などで誰が話しているかをわかりやすくするのに効果的ですが、頻繁に話すような場合には画像のチカチカが目立つので見づらくなってしまいます

アニメーションの再生時間の変更

②アニメーションの再生時間の左の〇sの数字を変更することで、アニメーションが一周する時間を変更することができます

なとり
なとり
用意した画像を何秒かけて一回再生するかっていうことですね

1s→1秒で一周

5s→5秒で一周

画像の追加、切り替えタイミングの変更

③二枚目の画像の表示タイミングの左のパーセンテージの数字を変更することで、1秒のアニメーションの中のどのタイミングでその画像を表示するかを設定します

デフォルトでは一枚目が0%、二枚目は100%の状態で表示されるようになっています

これを任意の数字に変更することでアニメーション内での画像の切り替えタイミングを変更します

なとり
なとり
ということはつまり・・・

→この行を増やすことで表示する画像の数を三つ、四つと増やすことが可能です!

今は0%と100%の二つだけなので、他の表示タイミングの行を挿入して表示画像数を増やしてみましょう

変更例

@keyframes speak {
0% {content:url(画像A);}
30% {content:url(画像B);}
60% {content:url(画像C);}
}

上記設定では0%で画像A、30%で画像B、60%で画像Cへと切り替わります

一個前に紹介したアニメーションの再生時間の変更と合わせて設定することでかなり自由に調整することが可能です

まとめ

こんな感じで再生するアニメーションの画像の明るさ、再生時間、画像の切り替えタイミング、画像数を変更することが可能です

ご利用になる画像に合わせてベストな調整をしてみて下さい

取り急ぎまとめましたので後日また画像例なども加えて細かく加筆したいと思います

以上本日はDiscordとOBSを連携させてイラストを動かす~カスタム編~の紹介でした

【Discord】にMusicBOT rhythmを入れて友達と一緒に音楽を聴こう。導入方法&コマンド一覧discordで音楽を流せるミュージックBOT rythmのお話です ...
HDMIキャプチャーボードでPS4、Switchの映像をPCに取り込もう皆さんはPS4やnintendo Switchをプレイしていて「ゲームの映像をパソコンに写したいな~っ」なんて思ったことはないでしょうか...

COMMENT

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください