Peraravatar+ (ぺららばたーぷらす)

ブラウザで PNGTuber を作ってOBS用に書き出すツール

隠す (H)
※ 書き出した HTML は、ここで選んだマイクを名前で探して使います(見つからなければパソコンの既定のマイク)
音量
0.0
口: 閉じる
※ 口パクを母音で切り替える場合に登録 母音: 未登録

フリーアバターも配布しています(配信・動画・SNS のアイコンに使えます)

作り方を選ぶ

違うのは瞬き・口パク・表情の作り方です。「1枚絵から作る」では、カスタム表情も目と口のパーツの組み合わせで作れます(表情ごとに1枚の画像を使うこともできます)。

口パクの決め方

用意する画像

推奨画像仕様
・サイズ: 600 × 900 〜 1080 × 1620px(縦長 2:3 比率)
・形式: 背景が透明な PNG または WebP(JPEG と BMP は背景を透明にできません)
・取り込める拡張子:
・PNG / JPEG / BMP は取り込み時に自動で最適化します
・「位置と大きさ」で、画像ごとに位置と大きさを調整できます
画像をまとめてドロップ ファイル名に次の語(アンダーバーやハイフンで区切った語)が入っていれば、自動的に割り振ります(大文字小文字は区別しません。複数当てはまるときは、表の並び順で上にあるものから優先されます)。
口 段階1〜9mouth1〜mouth9(mouth_1 mouth-1 も可)
口 段階1mouth_o / mouth_u
口 段階2mouth_i / mouth_e
口 段階3mouth_a
口「あ」〜「お」mouth_a / mouth_i / mouth_u / mouth_e / mouth_o
口 いちばん大きい段階open(口を開けた画像)
口「あ」open(口を開けた画像)
寝ているsleep / sleeping / asleep / 寝 / 眠
瞬き(閉じた目)blink / close / eye_closed / 瞬き / まばたき / 目閉 / 閉眼
よそ見(左)left / 左
よそ見(右)right / 右
通常normal / default / base / idle / closed(口を閉じた画像) / 通常
カスタム表情上のどれにも当てはまらないもの(ファイル名が表情の名前になります)

口パク

・各段階の値は、その口を出す音量の下限です(小さい順に並びます)
・1つの段階に画像を複数入れると、その中から選んで出します
・段階1 の値が「無音とみなす上限」を兼ねます。これを下回る音量では口を閉じます
・音量への追従が 100 なら音量どおりの段階、0 なら話している間はランダムな段階を出します

ベースの画像

この1枚に、目と口のパーツを重ねて瞬きと口パクを作ります。

顔が小さい全身の画像では作れません(目の幅が 40px 以上ある画像が目安)。

ベース・よそ見・表情の画像をまとめてドロップ ※ 重ねるパーツ(目・眉・口)はここでは入れられません。下の「重ねるパーツ」に入れてください。 ファイル名に次の語(アンダーバーやハイフンで区切った語)が入っていれば、自動的に割り振ります(大文字小文字は区別しません。left / right / 左 / 右 が入っていればよそ見になります。例: normal_left はよそ見(左))。
ベースの画像normal / default / base / idle / closed(口を閉じた画像) / 通常
よそ見(左)left / 左
よそ見(右)right / 右
カスタム表情上のどれにも当てはまらないもの(ファイル名が表情の名前になります)
mouth や close などの名前の画像は、この作り方では使わず、「各画像を用意する」用の画像として保存します。

ベースの画像の状態

目と口の位置

・のっぺらぼうのベースに眉の画像を重ねて、表情や瞬きで目とは別に動かします
・目の画像に眉を描いているとき、ベースに眉が描かれているときはチェックしないでください

目と口を隠すときの肌の色

・元の目と口をこの色で塗りつぶしてから、パーツの画像を重ねます
・髪や眉がかかっていない肌を選んでください
・枠の外側は、この色に近いところにだけ塗ります(眉や髪は消えません)

重ねるパーツ

重ねるパーツの画像
・形式: 透過PNG / WebP
・大きさ: ベースの画像から切り出した目や口が収まるサイズ(ベースの画像が 1024 × 1536px なら 200 × 200px 程度)。パーツはだいたい中央に配置
・自分で入れた画像は元のサイズのまま表示します(プリセットは枠の幅に合わせて拡大縮小します)
・枠に合わせて自動で配置します。左右・上下・大きさは画像ごとに「位置と大きさ」で調整できます
・目と眉は、画像を入れると「左右どちらの目(眉)か」を確認する画面が表示されます。オッドアイや片目が潰れているなどの非対称な目でない限り、片目だけ用意すれば足ります
・画像が入っていないパーツは使用されません

口パク

・上で入れた口の画像を、どの音量で出すかを決めます
・段階1 の値が「無音とみなす上限」を兼ねます。これを下回る音量では口を閉じます
・音量への追従が 100 なら音量どおりの段階、0 なら話している間はランダムな段階を出します

カスタム表情(ホットキーで切り替え)

・笑い・泣き・怒りなど、好きな表情を割り当てられます
・キーのボタンを押してから、割り当てたいキーを押します(Shift と組み合わせても可。Backspace で割り当てなし、Esc で中止)
・ここで割り当てたキーは、編集画面とコントローラー(ドック)で使います。OBS のホットキー(ゲーム中でも効くキー)は、書き出したスクリプトを OBS に入れると最初のキーが入り、OBS の「設定 → ホットキー」で変えられます
・1枚の画像の表情を出している間は、口パクと瞬きが止まります

よそ見

必要に応じて設定してください。目を追加するときは、瞳の向きがそろうよう左目と右目(あなたから見た左右)を別々に入れます。

表情の切り替えと動作

表情とよそ見に切り替わるとき、前の画像から短くフェードします(0 で一瞬で切り替え)。

各カスタム表情のカードで選んだ動作の細かい動きを調整します。

ホップ / リコイル
震える
バウンス
ゆらゆら
うなずく
首を振る

装飾パーツ

・メガネ・猫耳・ヘアピンなどの画像を、好きな位置に重ねます(形式は透過PNG / WebP)
・数は16個までを目安にしてください。それより多いと、動きが重くなることがあります
・ベースの画像と同じ大きさの画像は、描いた位置にそのまま置きます
・追加するか「配置」を押すと、アバターの上で直接動かせます(Shift で縦か横だけ・15° ずつ、Alt でガイドを無視、矢印キーで 1px、Delete で削除)
・「切り替え画像」はその装飾パーツの画像と同じ大きさで用意してください
・一覧で下にあるものほど手前に重なります

装飾パーツのスイッチ

・メガネの着け外しや衣装の入れ替えのように、装飾パーツを表情とは別に切り替えます(4個まで)
・各装飾パーツの「表示」か「切り替え方」で、どのスイッチに従うかを選びます
・割り当てたキーか、OBS のホットキーとドックのボタンで ON と OFF を切り替えます。開き直すとすべて OFF に戻ります

アバター全体の動きです。装飾パーツの動きは「装飾」タブの各パーツで決めます。

待機中の動き

関連パラメーターを自動で調節します。

呼吸 / 揺れ

黙っている間に跳ねる

ぽよん

喋るとお餅のように伸び縮みして弾みます。

胸の揺れ

・ベースの画像の胸を、体の動きに合わせて揺らします
・胸を囲むように枠を指定します。枠の中は形を保ったまま大きく動き、周りの点線の箇所までが伸び縮みします
・枠の中のベースの画像をゆがめて揺らすので、胸の画像を別に用意する必要はありません

輪郭の毛の揺れ

・獣人のような、全身がふさふさしたキャラクター向けです。輪郭の外側の毛を、根元を止めたまま、毛の流れに直角にしならせます
・「毛束の太さ」より細く飛び出した部分を毛として揺らします。指など揺らしたくない部分まで揺れるときは小さく、毛が揺れないときは大きくしてください
・耳や手など揺らしたくない所は「揺らさない範囲」で囲みます
・装飾パーツやカスタム表情の画像の輪郭も一緒に揺れます

瞬き

喋っている間の首かしげ

何もしていないときの視線の揺れ

大声を出したときのリアクション(一瞬拡大)

大声を出した瞬間、アバターが一瞬だけビクッと大きくなります。発火音量は、ぽよんと装飾パーツの声に合わせた動きの動きにも使います。

よそ見

ときどき自動でよそ見します。よそ見を「パーツを組み合わせる」で作ったときは、口パク中もよそ見します。「1枚の画像」で作ったときと、作り方が「各画像を用意する」のときは、黙っている間だけよそ見します。Y キーを押したときもよそ見します(完全就寝している間と、カスタム表情を出している間は除きます)。

おねむ状態

無音が続くと徐々に瞬きが長くなり、最終的に目を閉じっぱなしになります。

HTML 書き出し

・今の状態を1つの HTML に書き出します。書き出した後のHTML内では調整できません
・OBS の「ブラウザ」ソースでは「ローカルファイル」にチェックを入れず、URL 欄に書き出した HTML の場所を入れます(チェックするとマイクが使えません)
・URL は、使っている OS に合わせて下の形で書きます
・マイクを使うには、OBS の起動フラグ --use-fake-ui-for-media-stream が必要です。マイクは、編集画面で選んだものを名前で探して使います(見つからなければパソコンの既定のマイク)
・詳しい手順は公式ドキュメントを見てください

複数のアバターを使い分けるときは、アバターに名前を付けてください。書き出すファイル名、OBS のホットキーの項目、コントローラーの一番上の行(Peraravatar+ コントローラー(名前))に入ります。

書き出した HTML の背景は自動的に透明になります。下のチェックを入れると、ヘッダの「表示設定」で選んだ背景のまま書き出します(単色で書き出して OBS 側で色を抜くときなど)。

配信中に表情を切り替える

・ゲーム中に切り替える: 書き出したスクリプトを OBS の「ツール → スクリプト」で追加すると、「設定 → ホットキー」に表情ごとの項目が並びます。割り当てたキーは OBS を操作していなくても効きます
・デフォルトでは Ctrl+Shift+1〜8 に表情、Ctrl+Shift+9 によそ見、Ctrl+Alt+1〜4 に装飾パーツのスイッチが入ります(「設定 → ホットキー」で変えられます)
・カスタム表情やスイッチを追加したり削除したり名前を変更した場合は、peraravatar-plus-hotkeys.lua も更新が必要です。再度書き出して古い peraravatar-plus-hotkeys.lua を上書きし、「ツール → スクリプト」で再読み込みしてください(割り当てたキーは残ります)
・ボタンで切り替える: OBS の「ドック → カスタムブラウザドック」に、ブラウザソースの URL の末尾に ?controller を付けたものを入れると、表情のボタンが並んだ操作パネルになります(例: file:///C:/Users/…/peraravatar-plus-avatar.html?controller)
・ドックのエリア内のどこかをクリックしてから、ボタンに書いてあるキーを押しても切り替えられます
・コントローラーの URL を Chrome などの普段使っているブラウザで開いても、OBS のアバターは切り替わりません。OBS のドックに入れて操作してください
・詳しい手順は公式ドキュメントを見てください

設定の移行・バックアップ

別の端末に設定を移すときや、ブラウザのデータが消えたときに備えて、設定をファイルに保存できます。書き出したアバターの HTML からも読み込めます。

URL パラメータ

・書き出した HTML の URL の末尾に付けて使います
・?custom=z Z キーに割り当てた表情を固定で表示(デフォルトではびっくり)
・?custom=笑い 表情の名前でも指定できます