小さなガラス玉が、ぷくっと膨らむ。 横へ伸び、揺らぎ、冷えていく。 **「BLOWN GLASS」**は、吹きガラスが形成される過程をモチーフにした、わんコメ対応のコメント吹き出しテンプレートです。 コメントが届くと、小さなガラス玉から透明な吹き出しが作られていきます。 ただフェードインするだけではなく、 ガラス玉 → 膨張 → 横へ伸びる → 表面が波打つ → 内部の気泡が上昇 → 熱を帯びた縁が冷える → 透明な吹き出しが完成 という一連の形成演出を楽しめます。 ■ ガラスそのものが形を変える登場演出 新しいコメントが届くと、最初に現れるのは小さなガラスの塊。 そこから徐々に膨らみ、横方向へ引き伸ばされながらコメント吹き出しの形へ変化します。 形成途中は表面がわずかに波打ち、内部の小さな気泡も移動。 熱を帯びたような色の縁が徐々に冷えていき、最後は透明感のあるガラス吹き出しとして静止します。 文字そのものを歪ませるのではなく、ガラス部分と文字表示を分離しているため、演出後もコメントを読みやすい構成です。 ■ 内部を漂う気泡 ガラスの内部には、小さな気泡を表現しています。 形成中は気泡が上方向へ移動し、吹きガラスらしい「まだ柔らかい素材が形になっていく」雰囲気を演出します。 完成後は激しく動き続けず、落ち着いた透明素材として表示されます。 常時派手に動き続けるタイプではないため、コメント数が増えても画面が騒がしくなりすぎません。 ■ ガラスの色・透明感・質感をカスタマイズ 同梱の設定用デモから、配信画面に合わせて見た目を調整できます。 変更できる主な項目： ・ガラスの色 ・差し色 ・形成中の熱色 ・コメント表示面の色 ・本文カラー ・名前カラー ・ガラスの揺らぎ ・屈折感、ハイライト ・文字面の不透明度 ・内部の気泡数 ・気泡サイズ ・形成演出の長さ ・登場アニメーションON／OFF さらに、 ・吹き出し幅 ・本文サイズ ・名前サイズ ・最大表示数 ・吹き出し同士の間隔 ・画面端の余白 ・アイコン表示 ・絵文字サイズ ・スタンプ最大サイズ ・長文表示方法 ・横スクロール速度 なども調整できます。 ■ 設定用デモを同梱 商品ZIPを展開し、 obs_demo/index.html をブラウザで開くことで、実際の配信コメントを使用せずに見た目や形成演出を確認できます。 調整した設定は config.js として書き出せます。 書き出したconfig.jsを、わんコメへ導入したテンプレート内の同名ファイルと置き換え、OBSのブラウザソースを再読み込みすると設定が反映されます。 ※デモ画面は見た目・設定確認専用です。実際の配信コメントは受信しません。 ■ コメント表示仕様 新しいコメントは下から追加され、古いコメントが上へ移動します。 最大表示数を超えた場合のみ、古いコメントから押し出されます。 時間経過だけでコメントが自動的に消える仕様ではありません。 名前と本文は別行で表示します。 長文については、 ・自動 ・折り返し ・横スクロール から表示方法を選択できます。 横スクロール時は右から左へ流れ、最後まで表示すると先頭位置へ戻ります。 短いコメントは静止表示です。 ■ 絵文字・画像スタンプにも対応した表示処理 通常テキストだけでなく、画像形式の絵文字やスタンプを表示する処理も実装しています。 画像は縦横比を維持したまま表示し、サイズも設定から調整できます。 ※実際の表示可否は、受信データの形式や画像URLの状態によって異なる場合があります。すべての形式での表示を保証するものではありません。 ■ 背景透過 実配信用テンプレートの吹き出し外は透明です。 ゲーム画面・雑談背景・配信レイアウトなどへ、そのまま重ねて使用できます。 ステータス表示や接続状態などの不要な文字は配信画面には表示しません。 ■ こんな配信におすすめ ・透明感のある配信画面にしたい ・幻想的、涼しげなデザインが好き ・水、ガラス、クリスタル系の世界観に合わせたい ・一般的な四角いコメント枠とは違うものを使いたい ・コメントが届いた瞬間にも演出を入れたい ・素材が実際に形成されるようなアニメーションが好き 雑談、ゲーム、作業配信など幅広い配信で使用できます。 ■ 内容物 ・わんコメ用コメントテンプレート ・わんコメ追加用ZIP ・見た目・設定確認用デモ ・設定ファイル ・editor_schema.json ・導入説明 ・設定ガイド ・トラブルシューティング ・検証内容 ・利用規約 ■ 導入方法 商品ZIPをすべて展開してください。 わんコメへの導入には、 install/blown_glass_onecomme_v1.0.0.zip を使用します。 商品全体のZIPをそのままわんコメへ追加するのではなく、installフォルダ内の導入用ZIPをご使用ください。 追加した「BLOWN GLASS」をOBSのブラウザソースとして読み込みます。 OBSブラウザソースは、 幅：1920 高さ：1080 を基準としています。 詳しい手順は同梱の README_FIRST.txt をご確認ください。 ■ 動作確認について 以下の内容を確認しています。 ・通常コメントの生成、表示 ・吹きガラス形成演出 ・ガラス玉から膨張、伸長、冷却、完成までの状態変化 ・形成途中の熱色表現 ・内部気泡 ・完成後のガラス面 ・名前と本文の別表示 ・長文表示 ・画像形式の絵文字処理 ・同一IDコメントの重複防止 ・最大表示数を超えた際の押し出し ・時間経過だけでは消去されないこと ・clear、削除イベント処理 ・登場演出OFFなど各種設定 ・販売用ZIP、導入用ZIPの再展開確認 Chromium上では、模擬わんコメ受信を使用してコメントが実際に生成・表示されるところまで確認しています。 ただし、以下は未確認です。 ・実際のOBS Studio上での表示 ・実際のわんコメへのZIPインポート ・YouTube実配信コメントの受信 ・Windows環境での長時間運用 ご使用環境によって動作が異なる可能性がありますのでご了承ください。 ■ 利用条件 購入者ご自身の配信・動画で使用できます。 収益化した配信・動画でもご利用いただけます。 ご自身で使用する範囲で、色・サイズ・コードなどを調整していただいて構いません。 以下は禁止しています。 ・元データの再配布、再販売 ・改変データの再配布、再販売 ・第三者とのファイル共有 ・自作発言 ・本商品の全部または一部を組み込んだテンプレートや素材の配布、販売 ・第三者がファイルを取得できる状態での公開サーバー等へのアップロード 詳しくは同梱の利用規約をご確認ください。 制作：たっくん