今回はOBS Studioで使える「ホタルがフワフワ飛んでいる」ようなパーティクル素材を作成して、ダウンロードできるようにしました。
ホタルのパーティクル素材を使う
OBS Studioで「ソースを追加」して「ブラウザ」を選びます。
次に「ローカルファイル」のチェックボックスをON状態にして、本記事からダウンロードしたHTMLファイルを指定してください。
それだけで利用可能になります。
ホタルのパーティクルイメージは下記の動画のような感じです。
上記の動画では、フェードイン有りと無しの2種類を重ねて再生しています。
若干カクついていますが、この動画で利用しているPCは、中古で購入した3万円程度のPCです。
通常、このようなエフェクトをアルファチャンネル付きの動画や、APNGなどで２レイヤーも使用したら昔のワンセグ放送よりもガタガタになりますが、「HTML」ソースの付加なら、ほとんど問題なく再生できます。
今回720/30pになっていますが、1080/60pで設定したシーンでも十分に利用できます。
ホタルのパーティクル素材をダウンロードする
フェードイン・フェードアウト 有りのHTMLは下記になります。
フェードイン・フェードアウト 無しのHTMLは下記になります。
上記２つのHTMLファイル両方をソース追加して、より彩ったホタルの光エフェクトを背景などに利用しても問題ありません。
透過付き情報のあるエフェクト動画やAPNGでも、ファイルサイズは大きく、再生処理のために必要なリソースに比べれば、HTMLファイルのファイルサイズと処理の負荷はかなり小さくすることもできます。
ぜひ試しに使ってみてください。
ホタルのパーティクル素材になっているHTMLをカスタムしたい場合
光の色やその他、設定を変えてみたいという場合の、カスタム方法ですが、対応する項目と値を下記に記しておきます。
| 色合い | rgba(255, 255, 200, alpha) の数値を変更（例: 青系なら rgba(100, 150, 255, alpha)） |
| 数量 | for (let i = 0; i < 100; i++) の数を増減 |
| サイズ | this.radius = Math.random() * 2 + 1 を調整 |
| スピード | this.vx / this.vy の範囲を調整 |
| ホタルの光の透明度 | alphaの光の透明度（0〜0.6の間で増減） |
| フェードインの切り替え | alphaDirectionのフェードイン（+1）とフェードアウト（-1）を切り替え |
| 光のランダムな動き | alphaStepはフェードの速さをランダムにして個体差を演出 |
| エフェクト位置の再利用 | .reset()内のフェードアウト終了後に位置や動きをリセットして再利用 |
本素材やこの情報が配信や打ち合わせ環境を彩るための素材としてお役に立てば幸いです。
