今回は、OBS StudioやStreamlabs Desktopなどの配信画面に、ソースファイルの追加で「ブラウザ」からHTMLファイルを追加するだけで、CRTディスプレイ風デザインの素材の上に画像やアニメーションデータ（PNGやAPNG）を配置すると揺らぎのエフェクトが追加される素材を作成してみました。
次章でダウンロードできるファイルと使うと、CRTディスプレイ（昔のブラウン管テレビ等）の上に配置する画像や動画に揺らぎエフェクトが付加されるのですが、下記の動画では、実際に本記事でのデータを使ったサンプルイメージ動画を作成したので、それが参考になれば幸いです。
上記の動画で表示されている、動画の真ん中、下側に置いてあるテレビと、そこに揺らいでいるように表示されている画像が、実際に本記事でダウンロードできるHTMLを利用した時のイメージです。
毎度、同じことを書いていますが、揺らいだりさせる画像のデザインは、さらにアニメーションを付けたり、このアニメーションに使用するキャラクターなどを、ココナラなどで作成をお願いしたり、自分で作成したキャラクター画像と組み合わせることで、様々なアニメーションを組み合わせて表現することが可能になります。
「画像に揺らぎを追加する」アニメーションファイルのダウンロードと準備
「CRT風の揺らぎ」アニメーションファイルのダウンロードは下記になります。
ファイルをダウンロードしたら、アニメーションをつけたいファイル名を「crt-display.png」というファイル名に変更して、元々ダウンロードしたファイル内にある、「SAMPLE」と書かれた画像と入れ替えてください。
これだけで準備完了です。
かならず、「crt-display.html」と「crt-display」が、同じフォルダに格納されていることを確認してください。
OBSで「画像に揺らぎを追加する」アニメーションファイルを読み込む
各OBSに本記事からダウンロードしたHTMLファイルを読み込む方法は簡単です。
OBS Studioの「ソース」エリアから「+」ボタンを押して「ブラウザ」を選択
「ローカルファイル」にチェックマークをつけてHTMLファイルを指定する
読み込んだ後は、自動的にアニメーションが始まります。
ダウンロードしたファイルの中にあるHTMLファイルは、PNGやAPNGなどの画像に直接「揺らぎエフェクト」をかけるだけなので、テレビの筐体画像などは、別途デザインして用意する必要があります。
同梱されているブラウン管風テレビのデザインを、そのまま利用した抱くことも可能です。
「CRTディスプレイの揺らぎ」アニメーションファイルを設定する
「CRTディスプレイの揺らぎ」アニメーションファイルは、一度、拡張子を「.txt」ファイルにすることで、揺らぎ具合を変更したりすることが可能です。
ファイル内にある、下記の部分を変更して設定することが可能になっています。
// 調整可能なパラメータ
const intensity = 5; // 揺らぎの強度（ピクセル単位）
const speed = 0.1; // アニメーションの速さ（時間加算量）
const randomness = 0.6; // 揺らぎのランダム度（0〜1）揺らぎ系のアニメーションは配信画面の背景小物に配置することで演出になります
今回、本記事でダウンロードできる「HTMLファイル」に、PNGやAPNG画像を組み合わせることで、配信画面に配置するキャラクターに様々な動きをつけることが可能です。
また、配信画面をレトロ的な感じにするときに、昔のブラウン管テレビ風のエフェクトを追加することによって、時代感を演出することが可能になります。
筆者のところでは、特に年末年始、「こたつ」に「みかん」、「ブラウン管テレビ」など、昭和感を出した背景をデザインしたときに使ったりしたことがあります。
これら、本記事の内容が、配信活動に役立てば幸いです。
最後まで読んでいただき、ありがとうございました。
