【Discord StreamKit】差し替えた立ち絵にまばたきをさせるカスタムCSS

Posted on by 順風満帆丸

本サイトではDiscordのStreamKitで取得できる発話者アイコンをOBS上で立ち絵に差し替えるカスタムCSSを紹介してきました。本記事ではこの差し替えた画像にアニメーションを設定し、まばたきをさせる方法を紹介します。

過去の紹介記事は以下になります。まばたきアニメーションは不要なのでとりあえず立ち絵を差し替えたいという場合はこちらも見てみてください。

Discordで喋ってる人を分かり易くするカスタムCSS（2023年最新）
Discordで喋ってる人を分かり易くするカスタムCSS

事前準備

使用する立ち絵画像

今回、まばたきをするアニメーションを設定するために、以下の画像素材が必要となります。

  • 立ち絵画像①：通常
  • 立ち絵画像②：目閉じ差分
  • 立ち絵画像③：半目差分（※）

※半目差分についてはアニメーションを滑らかにする場合に必要ですが、妥協する場合はなくても問題ありません。

上記の用意した画像は「①②③①」の順番で横に4つ並べて結合し1枚の画像にします。用意する差分は横幅がバラバラにならないよう注意してください。画像の結合に関してはお手元のペイントソフトツール（背景透過に対応したもの）を利用するか、以下のようなオンライン上で可能なツールを使用して合成しましょう。

合成の終わった画像はDiscordの個人サーバーなどにアップロードし、URLを控えておきましょう。

必要な情報の取得

StreamKitをOBSに取り込むために必要な情報を取得します。
必要な情報は事前に取得した画像URLに加え、「ボイスウィジェットのURL」「画像を差し替えるDiscordユーザのID」です。これらの情報の取得方法については過去の記事に掲載していますのでそちらを参照してください。

Discordで喋ってる人を分かり易くするカスタムCSS

カスタムCSSの作成

今回はまばたきアニメーションの他に、待機中にふわふわと浮遊するアニメーションと発話時にぴょんと跳ねるアニメーションの2つを追加で設定します。

事前準備の段階で控えた情報を以下カスタムCSSのコード内で差し替えて控えてください。

  • ①DiscordユーザのID
  • ②画像URL
/* 各種アニメーション用変数 */
:root{
  --step-cnt:4;
  --step-sec:10s;
  --step-anime:step var(--step-sec) steps(var(--step-cnt)) infinite;
  --speak-anime:speak-now 300ms ease-in-out forwards;
  --floating-anime:floating-now 4500ms ease-in-out forwards infinite;
}

/* 選択したユーザ以外の画像を非表示にする */
img:not([src*="①DiscordユーザのID"]){ display:none; }  /* <------- 変更箇所1 */
img:not([src*="①DiscordユーザのID"])+div{ display:none; }  /* <------- 変更箇所2 */
li{ position:fixed;top:15px;left:0;right:0;width:100%; }

/* アイコンを立ち絵画像に差し替える */
img[class*="Voice_avatar_"]{
  content:url("②画像URL");  /* <------- 変更箇所3 */
  height:auto !important;
  width:100% !important;
  border-radius:0 !important;
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width:calc( 100% * var(--step-cnt) ) !important;
  left:calc( 100% * ( ( var(--step-cnt) / 2 ) - 0 ) );
  object-fit:cover;
  animation: var(--step-anime);
}
@keyframes step {
  97% { left:calc( 100% * ( ( var(--step-cnt) / 2 ) - 0 ) ); }
  to { left:calc( 100% * ( ( var(--step-cnt) / 2 ) - var(--step-cnt) ) ); }
}

/* 浮遊アニメーション */
li[class*="Voice_voiceState"]{
  border-color:rgba(0,0,0,0) !important;
  animation:var(--floating-anime);
}
@keyframes floating-now {
  0% { top:15px; } 50% { top:10px; } 100% { top:15px; }
}

/* 発話状態の設定 */
img[class*="Voice_avatarSpeaking"]{
  border-color:rgba(0,0,0,0) !important;
  position:relative;
  animation:var(--speak-anime),var(--step-anime);
}
@keyframes speak-now {
  0% { bottom:0px; } 50% { bottom:10px; } 100% { bottom:0px; }
}

/* ネームタグ表示位置調整 */
div[class*='Voice_user']{text-align:center; position:fixed; bottom: 10px; left:0;right:0;margin:auto; }
body { background-color: rgba(0, 0, 0, 0); overflow: hidden; }

補足

事前準備の段階で、まばたき画像を「立ち絵画像①：通常」「立ち絵画像②：目閉じ差分」の2枚しか用意できていない場合、合成する画像は「①①②①」としてください。

差分を細かくする場合（4枚以上になる場合）、CSS3行目の「–step-cnt:4;」の数字を横に並べた画像の枚数に合わせることで対応可能です。ただし画像の枚数は100の公約数（2、4、5、10など）にしないとアニメーション時にイラストの位置が微妙にずれてしまうので注意してください。

  --step-cnt:4;

まばたき以外のアニメーションに対応させたい場合は31行目以降のキーフレームの項目からアニメーションのタイミングを調整してください。

@keyframes step {
  97% { left:calc( 100% * ( ( var(--step-cnt) / 2 ) - 0 ) ); }
  to { left:calc( 100% * ( ( var(--step-cnt) / 2 ) - var(--step-cnt) ) ); }
}

OBSへの設定

準備した情報を元にOBSのソースを作成します。OBSのブラウザソースを作成し、URLにはボイスウィジェットのURL、カスタムCSSには先程作成したCSSのコードを入力します。

設定したボイスチャットへ入室し、設定した立ち絵が表示されたら設定は完了です。今回のカスタムCSSでは10秒に1回のペースで表示された画像がまばたきをします。

ツール紹介

まばたき無し版は既に公開済みですが、今回その機能拡張版としてこちらの記事の内容に対応した立ち絵変換ツールを公開しています。

必要な情報をフォームに入力すればコードを出力するようにしていますので、繰り返し使用したいという方はそちらをブックマークしておくと便利かもしれません。

Discord StreamKit：立ち絵変換（拡張版）

本記事の紹介内容は以上になります。
配信や録画の場で活用する機会があれば是非お役立てください。

Posted in カスタムCSS