今回は、OBS StudioやStreamlabs Desktopなどの配信画面に、HTMLソースファイルを追加するだけで夜空に輝く星が降り続けるアニメーション効果を追加することができる方法を紹介します。
次章でダウンロードできるHTMLファイル1つだけで追加でき、色の変更や降り続ける星の数や動きなども、ファイルの値を変更するだけで様々な変更ができるようになっています。
下記の動画では、実際に本記事でのデータを使ったサンプルイメージ動画を作成したので、それが参考になれば幸いです。
星と輝く軌跡がそれぞれの星について降り続け、その振り続く星は基本的にランダムで降り続けるので同じ画になることはありません。
配信画面の背景で「星が降り続ける」アニメーションファイルのダウンロードと準備
配信画面の背景で「星が降り続ける」アニメーションファイルのダウンロードは下記になります。
上記のファイルをダウンロードしていただき、OBS Studioなどの配信ソフトウェアに素材登録してください。
次章では、素材の登録事例と、降り続ける星々のアニメーションに変更を加えたい場合の設定方法を記述していきます。
配信画面の背景で「星が降り続ける」アニメーションファイルを読み込む
各OBSに本記事からダウンロードしたHTMLファイルを読み込む方法は簡単です。
OBS Studioの「ソース」エリアから「+」ボタンを押して「ブラウザ」を選択
「ローカルファイル」にチェックマークをつけてHTMLファイルを指定する
読み込んだ後は、自動的にアニメーションが始まります。
配信画面の背景で「星が降り続ける」アニメーションファイルを設定する
配信画面の背景で「星が降り続ける」アニメーションファイルは、一度、拡張子を「.txt」ファイルに変更することで、様々な変更をすることが可能です。
HTMLファイルをテキストファイルに変換してから、下記の部分を変更して設定することが可能になっています。
| starCount | 表示領域内で表示される星の数（最大値） |
| spawnInterval | 星が降る頻度（ms）小さいほど多く降る |
| rotationSpeed | 星自体の回転速度 |
| fallSpeed | 星が降る速度 |
| starBrightness | 星の光る強さ (0〜1) |
| trailBrightness | 軌跡の光る強さ (0〜1) |
| useGradient | 星の色をグラデーションにするか (true/false) |
| starColor | 星の色 (単色の場合の色: 000000〜FFFFFF) |
| gradientColors | グラデーションの場合の各色を指定 |
| fixedSize | 星の大きさを一定にするか (true/false) |
| fixedStarSize | 星の大きさを一定にする場合のサイズ |
| minStarSize | 星の大きさを一定にしない場合の最小サイズ |
| maxStarSize | 星の大きさを一定にしない場合の最大サイズ |
| fps | アニメーションのフレームレート |
各設定値を変更後は、ファイル形式を「HTML」に戻していただいて、OBS上でファイルを更新していただければ反映されます。
「星が降り続ける」アニメーションは様々な配信企画で利用できます。
本記事で紹介した「星が降り続ける」アニメーション「HTML」ファイルの使用感は、多くのVtuber / Vライバー のみなさんに使っていただき、アニメーションを改善してきました。
特に、「メン限配信（メンバー限定配信）」での
- 同時視聴企画
- 朗読企画
- おやすみASMR系
で利用していただき今回、全て無償で配布できるようになりました。
ご協力いただいた配信者の皆様には感謝しております。
筆者自身も、2020年から自身がVTuber / Vライバーとして、特にライブ配信を中心に色々なことを試しながら情報発信しています。
下記の記事は、よくテスト配信をする時のライブ配信環境ですが、紹介している配信環境のように費用を抑えた機器でも十分に品質の高い配信構成を組むことが可能なので紹介しています。
これら、本記事の内容が配信活動に役立てば幸いです。
最後まで読んでいただき、ありがとうございました。
