動くの？立ち絵さん

こいつ……動くぞ！

Vtuberさんがコラボする時に利用していると思われる、Discord Stream Kit の立ち絵をちょっと豪華にする小技です。

まばたき、くちぱく、ぴょんぴょんするようになります。

VoiceRoid実況動画を作っている人が、同じ立ち絵素材と「ゆかりねっと」を使ってライブ配信する時などに役立つかもしれません。

アニメーションする画像の APNG形式 の作成書き出しにはクリップスタジオペイントを利用しました。

（本記事は以前投稿した記事の抜粋、加筆です。）

用意する画像

1. ノーマル（口を閉じた絵）

2. くちぱく半開（口を半開きの絵）

3. くちぱく全開（口を開いている絵）

の3枚を使いますが、まばたきをするならあと2枚、

4. 閉じ目（目を閉じた絵）

5. 半目（目を半分閉じた絵）

の2枚、合計で5枚の絵を用意します。 

LIVE 2D Cubism Editor の画像書き出しや、 VRoid Studio のスクリーンショットを使ったり、自作のイラストに差分レイヤーを描いても良いと思います。

背景透過PNGが良いですが、無理なら最後にOBSのブラウザソースをクロマキーで抜いてください。

まばたきさせる

クリップスタジオペイントのアニメーション機能を使って、ノーマルの立ち絵にまばたきを設定します。

ノーマル立ち絵を読み込み、

アニメーション　＞　アニメーション用新規レイヤー　＞　アニメーションフォルダ

と操作します。

「レイヤーパレット」に「アニメーションフォルダ」が作成されるので、ノーマル立ち絵をその中へドラッグ。閉じ目、半目、のファイルを同じようにドラッグして、アニメーションフォルダに3枚の画像が入った状態にします。

ウィンドウ　＞　タイムライン

タイムラインウィンドウを表示します。

タイムラインウィンドウで、新規タイムラインを作成します。↑のアイコンをクリック。

フレームレート30、再生時間120（4秒）。

タイムラインが作成され、フォルダに入れてある画像が左側に並んで表示されます。
 

タイムラインに画像を配置します。

0フレームをクリック選択し、右クリック　＞　リストからノーマル立ち絵を選択します。

同じように、

30フレーム　半目

33フレーム　閉じ目

36フレーム　半目

39フレーム　ノーマル

と設定します（一例）。

ちょっと間隔が広いかも。お好みで30,32,34,36等、狭めてください。

ざっくり操作方法

再生ボタンでアニメーションをチェック。

サムネイル（フレーム）をドラッグで画像の表示フレームを移動。

画像をタイムラインから削除するには、サムネイル（フレーム）を　右クリック　＞　削除。

保存と書き出し

作業ファイルの保存は*.clip形式で。
アニメーションの書き出しは、
 ファイル　＞　アニメーション書き出し　＞　アニメーションスタンプ（APNG)...

ループ回数＝無限

なぜか画像のサイズが小さく設定されているので注意。元画像のサイズに直してください。

画像サイズには最大2000ピクセルの制限があるようです。これにも注意。

書き出されたPNGファイルをGoogle Chromeで表示してアニメーションを確認できます。

以上で、ノーマル立ち絵がまばたきするように設定できました。

画像をDiscordに投稿する

ノーマル立ち絵、くちぱく半開、くちぱく全開、の3枚をDiscordサーバに投稿します。

適当に作った自分の公開サーバに投稿しておけばOKだと思います。

※次項で必要になる、画像のURLを得るには、サムネイルを　右クリック　＞　リンクをコピー　です。

OBSブラウザソースの設定

OBSのシーンに、コラボ立ち絵表示用のブラウザソースを追加します。

プロパティの入力項目は以下で説明します。

URLの設定

Discord Streamkit

https://streamkit.discordapp.com/overlay

こちらにアクセスしてURLを取得、設定します。

Install for OBS　＞　VOICE WIDGET　＞

Server　＝　利用するサーバ

Voice Channel　＝　利用する音声チャンネル

Show Speaking Users Only　＝　OFF

Small Avatars　＝　OFF

Hide Names　＝　ON

画面右側のテキストボックスからURLをOBSへコピペ。

幅、高さ

画像より少し大きめの数値を指定します。+100程度。

カスタムCSS

以下のCSSをコピペして、緑色の部分を書き換えてください。

自分で使う以外に、コラボ主に書き換え済みのCSSを渡して、OBSにコピペしてもらうだけ……でOKだと思いますが、実際に試していないのでもしかしたらダメかもしれません。

※こちらは他所様の公開されているCSSを素人のぼくが見様見真似で改変したものです。

li.voice-state:not([data-reactid*="ユーザーID"]) { display:none; }

.avatar {
  content:url(画像のリンクURL・ノーマル);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
  filter: brightness(100%);
}

.speaking {
  animation: speak 0.8s
  linear 0s infinite normal;
  border-color:rgba(0,0,0,0) !important;
  filter: brightness(100%);
  position:relative;
}

@keyframes speak {

  20% { content:url(画像のリンクURL・くちぱく全開);}
  30% { content:url(画像のリンクURL・くちぱく半開);}
  50% { content:url(画像のリンクURL・ノーマル);}
  70% { content:url(画像のリンクURL・くちぱく半開);}
  100% { content:url(画像のリンクURL・くちぱく全開);}

  0% { bottom:0px;  }
  25% { bottom:20px;  }
  50% { bottom:0px;  }
  75% { bottom:10px;  }
  100% { bottom:0px;  }

}

li.voice-state{ position: static; }
div.user{ position: absolute; left40%; bottom:5%; }
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

ユーザーID

Discordを開発者モードにして、ユーザーのアイコンを右クリックすると、ユーザーIDをコピペできます。

開発者モードに設定するには、歯車アイコンをクリック、

ユーザー設定　＞　テーマ　＞　開発者モード　＞　ON　です。

画像のリンクURL

Discordに投稿した画像のサムネイルを　右クリック　＞　リンクをコピー　で取得します。

その他の設定

無言時の立ち絵の明度。100％未満にすると暗くなります。

発言時に上下する速度。0.8s。数字を大きくするとゆっくりになります。

発言時に上下する幅。20px、10px。お好みで増減してください。

完成！

（CV:京町セイカ）

Discord Streamkit で設定したDiscordサーバのVoice Channelで発言すると、音声に反応して立ち絵が動いてくれます。かわいい！

……こんな手間をかけるより、仮想カメラでビデオ通話するほうが……そう思わなくもないんですね。

動け！動け！動いてよ！