今回は、OBS StudioやStreamlabs Desktopなの配信画面に、ソースファイルの追加で「ブラウザ」からHTMLファイルを追加するだけで、倒しても起き上がってくる「おきあがりこぼし」のようなアニメーションを持つ、キャラクター画像（PNG画像やAPNGファイル）を画面に簡単配置できる方法と、それらに必要なファイルのダウンロードが出来るようにしてみました。
本記事でダウンロードできるファイルと使うと可能になるイメージは下記の動画で確認していただけます。
上の動画の中央にいる、背中を向いたネコのキャラクターがユラユラと揺れているのが分かります。
この動きを、ココナラなどで作成をお願いしたり、自分で作成したキャラクター画像と組み合わせることで、アニメーションを実現することが可能になります。
「おきあがりこぼし」アニメーションファイルのダウンロードと準備
「おきあがりこぼし」アニメーションファイルのダウンロードは下記になります。
ファイルをダウンロードしたら、アニメーションをつけたいファイル名を「okiagari.png」というファイル名に変更して、元々ダウンロードしたファイル内にある、「SAMPLE」と書かれた画像と入れ替えてください。
これだけで準備完了です。
かならず、「okiagari-animation.html」と「okiagari.png」が、同じフォルダに格納されていることを確認してください。
「おきあがりこぼし」アニメーションファイルをOBSに読み込む
各OBSに本記事からダウンロードしたHTMLファイルを読み込む方法は簡単です。
OBS Studioの「ソース」エリアから「+」ボタンを押して「ブラウザ」を選択
「ローカルファイル」にチェックマークをつけてHTMLファイルを指定する
読み込んだ後は、自動的にアニメーションが始まってループで揺れ続けるので、その状態が出来ればセット完了です。
「おきあがりこぼし」アニメーションファイルを設定する
「おきあがりこぼし」アニメーションファイルは、一度、拡張子を「.txt」ファイルにすることで、揺れ具合を変更したりすることが可能です。
ファイル内にある、下記の部分を変更して設定することが可能になっています。
// 調整可能なパラメータ
let amplitude = 15; // 揺れ具合の大きさ (角度度数)
let randomness = 0.3; // 揺れ具合のランダム性 (0〜1)
let speed = 2.3; // 揺れ具合の速度 (秒)また、ソースの表示エリア内に配置されるキャラクターのオフセット位置調整自体をしたい場合は、ファイル内にある下記の部分を変更するが可能です。
#doll {
transform-origin: bottom center; /* 画像の下中央を回転軸に */
display: block;
position: relative;
top: 5px; /* 高さの変更 */
left: 140px; /* 横位置の変更 */APNGと組み合わせればアニメーション演出の方法も広がります
今回、本記事でダウンロードできる「HTMLファイル」に、APNG画像を組み合わせることで、配信画面に配置するキャラクターに様々な動きをつけることが可能です。
例えば、ユラユラ揺れながら手を振るマスコットキャラクターなど、可愛い動きをつける方法はアイデア次第です。
特にVTuber/Vライバーとして配信している方にとっては、マスコットキャラクターやサブキャラクターを一緒に配信画面に入れることで配信画面をスゴく彩ることが可能になります。
筆者の場合、YouTubeライブなどで配信する時は、VRMアバターとは別にマスコットキャラクタにアニメーションをつけて一緒に配信画面に入ってもらっています。
筆者は、打ち合わせする時もVアバターで参加していて、その時もサブキャラクターをアニメーションさせています。
本記事が、配信活動に役立てば幸いです。
最後まで読んでいただき、ありがとうございました。
