【配信】洞窟の中 12種｜配信用の全画面背景｜鍾乳洞・地底湖・水晶・溶岩・坑道・氷・苔・遺跡・滝・砂・光の柱・入口｜動画ではなくコードで描画・OBS用・設定ボタン(⚙)つき

配信画面いっぱいに敷く「洞窟の中」の背景です。水滴が落ち、水面が揺れ、光る苔や結晶が脈打ち、光の柱に埃が舞います。待機画面・雑談配信・作業配信・探索系ゲーム配信の下地にどうぞ。12種そろえました。

動画のループではありません。水滴も、さざなみも、炎や光のゆらぎも、そのつど計算して描いています。同じ動きが戻ってくることがなく、継ぎ目もありません。長時間つけっぱなしにしても、使うメモリは増えていきません。

12種は明るさも色も違います。青い氷、赤い溶岩、緑の苔、紫の結晶、外の光が入る入口まで。暗い背景ばかりにならないよう、明るい場所も入れてあります。

単一HTML・インストール不要・アカウント不要・オフライン動作。ブラウザソースに入れて、ソース一覧のいちばん下（いちばん奥）に置くだけです。日本語／English 切替対応。

━━━━━━━━━━━━━━━━━━

◆ 収録している12種

━━━━━━━━━━━━━━━━━━

・dripstone.html … 鍾乳洞（天井のつらら石と石筍／落ちる水滴／浅い水たまり）

・lake.html … 地底湖（天井が映る水面／もやい綱の小舟／岩棚のランタン）

・crystal.html … 水晶の間（脈打つ結晶／中央の群晶／床に落ちる色）

・lava.html … 溶岩洞（黒い殻の割れ目が光る／落ちてくる溶岩／火の粉）

・mine.html … 坑道（奥へ続く支保工／レールとトロッコ／壁のランプ）

・ice.html … 氷の洞窟（青い氷の層／つらら／凍った床に映る光）

・moss.html … 苔の洞（光るキノコ／天井の穴からの光／垂れる蔓）

・ruins.html … 地底の遺跡（彫りのある壁／崩れた柱／灯明の火）

・falls.html … 滝のある洞（落ちる水／滝つぼのしぶき／立ちこめるもや）

・sandfall.html … 砂の落ちる洞（割れ目から流れ落ちる砂／積もった砂の山）

・shaftroom.html … 光の柱（天井の穴から差す太い光／その下だけ生えた草）

・entrance.html … 洞窟の入口（内側から見た外の森／入口に差し込む光）

12種とも仕組みは同じで、変わるのは場所と初期設定だけです。

━━━━━━━━━━━━━━━━━━

◆ 変えられるところ

━━━━━━━━━━━━━━━━━━

・光の強さ（0.5〜1.6倍。小さくするともっと暗い洞窟になります）

・水滴の多さ（0〜200％。0で水滴が止まります）

・もやを出す・消す

・全体を暗くする濃さ（0〜100。上に文字を置くときに）

・寄り（1〜1.8倍）

・動きの速さ（0.2〜3倍）

━━━━━━━━━━━━━━━━━━

◆ 設定ボタン（⚙）

━━━━━━━━━━━━━━━━━━

ソースを右クリック →「対話」→ 画面にマウスを乗せると右上に ⚙ が出ます。光の強さ・水滴・もや・暗さを、そこから変えて「保存して閉じる」だけです。普段 ⚙ は見えないので配信画面には映りません。歯車が見つからないときは、対話ウィンドウ内で S キーでも開きます。設定は保存され、OBSを再起動しても残ります。「設定を初期化」でいつでも元に戻せます。

設定の保存先はブラウザごとに別々です（localStorage の仕様）。Chromeで開いて設定してもOBS側には反映されませんので、OBSで使うぶんは対話の画面の中で設定してください。同じ洞窟を複数のシーンで別々の設定にしたいときは、URLの末尾に ?key=a ?key=b を付けて保存先を分けてください。

━━━━━━━━━━━━━━━━━━

◆ 使いかたの例

━━━━━━━━━━━━━━━━━━

・待機画面の下地に（そのまま置くだけ）

・作業配信の下地に（暗くすると、上に乗せた文字が読みやすくなります）

・静かにしたいときは、水滴を止めて速さを下げる

・明るめが良いときは entrance.html か shaftroom.html

・暗い雰囲気にしたいときは、光の強さを下げる

━━━━━━━━━━━━━━━━━━

◆ ご注意

━━━━━━━━━━━━━━━━━━

・効果音はありません（表示のみです）。水音や滴る音は付いていません

・時計や文字は出ません。背景専用です

・人・動物・虫・コウモリは出てきません。岩と、水と、光と、置かれた物だけです

・視聴者コメントの集計や、外部アプリ・APIとの連携はありません

・実在の洞窟を写した物ではありません

・絵の比率は 16:9 です。それ以外の形の枠に入れると、はみ出した分が切れます（つぶれたり歪んだりはしません）

━━━━━━━━━━━━━━━━━━

◆ 動作環境

━━━━━━━━━━━━━━━━━━

OBSのブラウザソース（Chromium）で使うために作っています。こちらでの動作確認は Chrome / Edge で行いました。Streamlabs など、ブラウザソースがある配信ソフトでも同じ形で読み込めます。ネット接続は不要で、外部へは一切通信しません（Webフォントも広告も入っていません）。

画像素材を使わないコード製です。画面の大きさに合わせて描き直すので、どの解像度でもぼやけません。1920 x 1080 で 30コマ/秒で動くように作ってあります。

━━━━━━━━━━━━━━━━━━

◆ 同梱

━━━━━━━━━━━━━━━━━━

HTML 12本 ／ はじめにお読みください.txt ／ READ ME FIRST (English).txt ／ 利用規約.txt ／ Terms of Use (English).txt