【わんコメ対応】氷結・結晶成長 コメント吹き出しテンプレート|OBS用HTML
- ダウンロード商品¥ 2,000

氷晶が伸び、霜が溶け、その奥からコメントが現れる。 **「ICE CRYSTAL GROWTH」**は、氷の結晶が枝分かれしながら成長していく様子をモチーフにした、わんコメ対応のOBS用コメント吹き出しテンプレートです。 コメントが届くと、小さな氷晶を起点に結晶が次々と伸びていきます。 外周に大小の氷晶が形成されたあと、中央を覆っていた霜が徐々に溶け、透明感のあるガラス面の奥からコメントが現れます。 単純なフェードインではなく、 氷晶の種 → 枝分かれして成長 → 大型結晶・霜枝を形成 → 中央の霜が溶ける → ガラス面が現れる → コメント表示 という一連の氷結演出を楽しめます。 ■ 氷晶が枝分かれしながら成長 新しいコメントが届くと、吹き出しの周囲から小さな氷晶が発生します。 そこから結晶の枝が次々と伸び、外周を囲むように成長。 直線的なフレームを表示するのではなく、氷そのものが成長して吹き出しを作る演出になっています。 角には六方向へ伸びる大きな氷晶、周囲には細かな氷片や霜枝を配置。 完成後も結晶は装飾として残り、透明感のある氷のフレームとしてコメントを囲みます。 ■ 中央を覆う霜が溶けてコメントが現れる 結晶が成長している間、中央のコメント面は霜に覆われています。 成長が進むと、霜が少しずつ薄くなり、その奥にある透明なガラス面が見えてきます。 最後に名前と本文が現れ、吹き出しが完成します。 「凍る」だけではなく、「霜が溶けて中身が見える」までを一連の登場演出として表現しています。 ■ 透明な氷・ガラスの質感 完成した吹き出しには、 ・半透明の氷晶 ・氷の縁の青い反射 ・細かな霜 ・ガラス面のハイライト ・屈折感 ・淡い発光 を組み合わせています。 単純な水色の枠ではなく、氷の厚みや透明感を感じられるデザインです。 演出終了後は激しく動き続けず、氷晶フレームとして静止します。 ※長文を横スクロール表示している場合は、本文のスクロールのみ継続します。 ■ 氷晶の密度・大きさまでカスタマイズ 同梱の設定用デモから、配信画面に合わせて見た目を調整できます。 主な設定項目: 【氷・霜】 ・氷晶の芯色 ・氷晶の縁色 ・霜の色 ・氷の発光色 ・中央ガラス面の色 【結晶表現】 ・結晶の密度 ・結晶の大きさ ・霜の濃さ ・氷晶の輝き ・ガラスの屈折感 【登場演出】 ・結晶成長時間 ・霜が溶け始めるタイミング ・登場演出ON/OFF 【コメント表示】 ・吹き出し幅 ・本文サイズ ・名前サイズ ・最大表示数 ・吹き出し間隔 ・画面端の余白 ・アイコン表示 ・絵文字サイズ ・スタンプ最大サイズ ・長文表示方法 ・横スクロール速度 ・本文カラー ・名前カラー 淡い氷色だけでなく、青・紫・白系など、配信画面の雰囲気に合わせて調整できます。 ■ 文字は氷と一緒に歪ませない設計 氷晶や霜は大きく変化しますが、名前や本文そのものを変形させる仕様ではありません。 名前と本文は中央のガラス面に別行で表示します。 演出を楽しみながらも、コメントの読みやすさを維持できるようにしています。 ■ 長文コメントにも対応 長文は、 ・自動 ・折り返し ・横スクロール から表示方法を選択できます。 自動モードでは、約3行を超える長いコメントを横スクロール表示へ切り替えます。 横スクロールは右から左へ進み、最後まで表示すると先頭位置へ戻ります。 短いコメントは静止表示です。 ■ 絵文字・画像スタンプ表示 通常テキストに加え、画像形式の絵文字やスタンプを表示する処理も実装しています。 画像の縦横比を維持した状態で表示し、最大サイズも設定できます。 ※受信データの形式や画像URLの状態によっては表示できない場合があります。すべての形式での表示を保証するものではありません。 ■ コメント表示仕様 新しいコメントは下から追加され、古いコメントが上へ移動します。 最大表示数を超えた場合のみ、古いコメントから押し出されます。 時間経過だけでコメントが自動的に消える仕様ではありません。 名前と本文は別行表示です。 ■ 背景透過 実配信用テンプレートの吹き出し外は透明です。 ゲーム画面、雑談背景、配信オーバーレイなどへ、そのまま重ねて使用できます。 接続状態やデバッグ情報などの不要なステータス表示はありません。 ■ 設定・演出確認用デモを同梱 商品ZIP内の obs_demo/index.html をブラウザで開くことで、実際の配信コメントを使用せずに氷晶の成長演出や設定変更を確認できます。 デモ画面は、 左側:設定UI 右側:コメントプレビュー に分離しています。 設定スライダーとコメント吹き出しが重ならない構造です。 設定後はconfig.jsを書き出し、わんコメへ導入済みのテンプレート内にある同名ファイルと置き換えてください。 OBSのブラウザソースを再読み込みすると設定が反映されます。 ※obs_demoは見た目・設定確認専用で、実際の配信コメントは受信しません。 ■ こんな配信におすすめ ・氷、雪、クリスタル系の世界観 ・透明感のある配信画面 ・幻想的・ファンタジー系の配信 ・冬らしいデザインを使いたい ・水色、白、青系の配信レイアウト ・コメントの登場演出にもこだわりたい ・普通の角丸フレームとは違うものを使いたい ・素材そのものが成長するアニメーションが好き 冬季だけでなく、クリスタル・氷属性・幻想系のデザインとして通年使用できます。 ■ 内容物 ・わんコメ用コメントテンプレート ・わんコメ追加用ZIP ・見た目・設定確認用デモ ・config.js ・editor_schema.json ・README ・設定ガイド ・トラブルシューティング ・検証内容 ・利用規約 ■ 導入方法 商品ZIPをすべて展開してください。 わんコメへの導入には、 install/ice_crystal_growth_onecomme_v1.0.0.zip を使用します。 商品全体のZIPではなく、installフォルダ内の導入用ZIPをわんコメへ追加してください。 その後、追加したテンプレートをOBSへ読み込みます。 OBSブラウザソースは、 幅:1920 高さ:1080 を基準としています。 詳しい導入手順は、同梱の README_FIRST.txt をご確認ください。 ■ 動作確認について Chromium上で以下を確認しています。 ・氷晶シードの表示 ・枝分かれする結晶成長 ・結晶成長途中の描画 ・中央の霜が溶ける演出 ・霜融解途中の描画 ・完成状態 ・通常コメント表示 ・長文コメント ・長文の自動横スクロール ・画像形式の絵文字 ・金額表示 ・同一IDコメントの重複防止 ・チャンネル単位のclear ・最大表示数を超えた際の古いコメント押し出し ・時間経過だけではコメントが消えないこと ・設定UIとプレビュー領域の分離 ・JavaScript / JSON / ZIP再展開 ただし、以下については未確認です。 ・実際のOBS Studio上での表示 ・実際のわんコメへのZIPインポート ・YouTube実配信コメントの受信 ・Windows環境での長時間運用 ご使用環境によって動作が異なる可能性がありますのでご了承ください。 ■ 利用条件 購入者ご自身の配信・動画で使用できます。 収益化した配信・動画にも使用可能です。 ご自身で使用する範囲で、色・サイズ・コードなどを調整できます。 以下は禁止しています。 ・元データの再配布、再販売 ・改変データの再配布、再販売 ・第三者とのファイル共有 ・自作発言 ・本商品の全部または一部を組み込んだテンプレートや素材の配布、販売 ・第三者がファイルを取得できる状態での公開サーバー等へのアップロード 詳しくは同梱の利用規約をご確認ください。 制作:たっくん
