今回は、OBS StudioやStreamlabs Desktopなどの配信画面に、ソースファイルの追加で「ブラウザ」からHTMLファイルを追加するだけで、PNG画像（透過情報あり）が設定された値をもとにしてジャンプするアニメーションを作成してみました。
本記事では、キャラクター画像（PNG画像やAPNGファイル）を画面に簡単配置できる方法と、それらに必要なファイルのダウンロードが出来るようにしてみました。
次章でダウンロードできるファイルと使うと、キャラクターなどを描いて保存したPNG画像などが、下記動画の左端にいる帽子を被ったキャラクターがジャンプしているのですが、これと、同じように動きます。
上の動画の左にいる、帽子を被ったキャラクターが一定時間ごとにジャンプしているのが分かります。
この動きに、さらにアニメーションを付けたり、このアニメーションに使用するキャラクターなどは、ココナラなどで作成をお願いしたり、自分で作成したキャラクター画像と組み合わせることで、様々なアニメーションを実現することが可能になります。
「キャラクターがジャンプする」アニメーションファイルのダウンロードと準備
「ジャンプ」アニメーションファイルのダウンロードは下記になります。
ファイルをダウンロードしたら、アニメーションをつけたいファイル名を「bound.png」というファイル名に変更して、元々ダウンロードしたファイル内にある、「SAMPLE」と書かれた画像と入れ替えてください。
これだけで準備完了です。
かならず、「jump-animation.html」と「bound.png」が、同じフォルダに格納されていることを確認してください。
OBSで「キャラクターがジャンプする」アニメーションファイルを読み込む
各OBSに本記事からダウンロードしたHTMLファイルを読み込む方法は簡単です。
OBS Studioの「ソース」エリアから「+」ボタンを押して「ブラウザ」を選択
「ローカルファイル」にチェックマークをつけてHTMLファイルを指定する
読み込んだ後は、自動的にアニメーションが始まってループでジャンプを続けるので、その状態が出来ればセット完了です。
「ジャンプ」アニメーションファイルを設定する
「ジャンプ」アニメーションファイルは、一度、拡張子を「.txt」ファイルにすることで、揺れ具合を変更したりすることが可能です。
ファイル内にある、下記の部分を変更して設定することが可能になっています。
// 調整可能なパラメータ
jumpHeight = 200; // バウンドのジャンプの高さ（ピクセル）
deformIntensity = 0.2; // バウンドの形状変化の具合（0〜1）
bounceSpeed = 500; // バウンドのスピード（ミリ秒）
intervalSeconds = 13000; // 何秒ごとにバウンドジャンプするか（ミリ秒）
airTime = 200; // ジャンプの一番高いところで静止する 滞空時間（ミリ秒）また、ジャンプする高さの設定値によっては、各ソースの素材で設定されているOBSの画面内での表示領域を超えてしまい、ジャンプアニメーションをした時に見えなくなってしまうことがあるかもしれません。
その時は、登録したHTMLソース自体の表示領域に関する「幅」と「高さ」を直接変更して、ジャンプしても画像が途切れない領域まで広げてください。
このアニメーションもAPNG等や並べ方の工夫で演出方法が広がります
今回、本記事でダウンロードできる「HTMLファイル」に、APNG画像を組み合わせることで、配信画面に配置するキャラクターに様々な動きをつけることが可能です。
画像を3枚用意して、それぞれがバラバラなタイミングでジャンプするようにしたり、前回のブログ記事で作成した「おきあがりこぼし」エフェクトと併用したりすることで、配信画面を彩ることが可能になります。
筆者の場合、YouTubeライブ配信以外でも、打ち合わせで使用する背景に、ゆらゆら揺れる人形とジャンプする色々なキャラクターを組み合わせて配置しています。
本記事の内容が、配信活動に役立てば幸いです。
最後まで読んでいただき、ありがとうございました。
