墨が落ち、にじみ、混ざり合う。 **「SUMINAGASHI MARBLE」**は、日本の墨流しやマーブリングをイメージした、わんコメ対応のOBS用コメント吹き出しテンプレートです。 コメントが届くと、水面へ落ちた墨や色インクがゆっくりと広がり、複数の流れが重なってマーブル模様を形成。 最後に中央の濁りが澄み、その奥からコメントが現れます。 単純に模様付きの枠を表示するのではなく、 インク滴 → 水面へにじむ → 流線が伸びる → 渦を作りながら混ざる → マーブル模様が完成 → 中央が澄む → コメント表示 という一連の形成演出を楽しめます。 ■ 墨とインクが水面へ広がる 登場時は、小さなインク滴から演出が始まります。 滴は水面へ染み込むように膨らみ、周囲へじわっと拡散。 複数色のインクがそれぞれ異なる形で広がり、徐々に一つの模様へ変化します。 均一な輪郭ではなく、にじみや揺らぎを含んだ不規則な形状で描画しています。 ■ 流線と渦が作るマーブル模様 インクが広がったあと、太い流れと細い流線が水面を横切り、複数の色が重なります。 SVGによる変位表現も加え、輪郭そのものを少し歪ませることで、単純な線画ではなく水面でインクが混ざっているような有機的な模様を表現しています。 同じ角丸枠を色違いにしたデザインではなく、「墨流しそのもの」をコメントの登場演出にしています。 ■ 最後に中央だけが澄む マーブル模様が形成されている間は、中央のコメント面もインクに覆われています。 演出が進むにつれて中央だけが徐々に澄み、名前と本文が見えるようになります。 周囲には墨流し模様が残るため、完成後はコメントを囲む装飾として楽しめます。 登場演出終了後は激しく動き続けず、静止したコメント吹き出しになります。 ※長文を横スクロール表示している場合は、本文のスクロールのみ継続します。 ■ 墨・インク4色を自由に変更 配色は細かくカスタマイズできます。 主な設定項目： 【配色】 ・墨／インク1 ・インク2 ・インク3 ・差し色 ・水面の色 ・中央表示面の色 ・本文カラー ・名前カラー 【墨流し表現】 ・墨流し形成時間 ・インク滴の数 ・渦の強さ ・にじみの広がり ・インク縁のやわらかさ ・水面の光沢 ・中央面の透明感 ・登場演出ON／OFF 【コメント表示】 ・吹き出し幅 ・本文サイズ ・名前サイズ ・最大表示数 ・吹き出し間隔 ・画面端の余白 ・アイコン表示 ・絵文字サイズ ・スタンプ最大サイズ ・長文表示方法 ・横スクロール速度 ■ 4種類の配色プリセット 設定用デモには、配色のベースとして使用できるプリセットを用意しています。 Sumi 黒墨・藍・赤紫・金を組み合わせた基本カラー。 Indigo 藍色・青系を中心とした落ち着いた配色。 Sakura 赤紫・桜色を使ったやわらかな配色。 Jade 深緑・翡翠色を中心とした和風カラー。 プリセット選択後に、各色を個別に変更することもできます。 ■ 長文コメントにも対応 長文表示は、 ・自動 ・折り返し ・横スクロール から選択できます。 自動モードでは、本文が約3行を超えると横スクロールへ切り替わります。 横スクロールは右から左へ進み、最後まで表示すると先頭位置へ戻ります。 短いコメントは静止表示です。 ■ 絵文字・画像スタンプ表示 通常のテキストに加え、画像形式の絵文字やスタンプを表示する処理も実装しています。 画像は縦横比を維持したまま表示し、最大サイズも設定できます。 ※受信データの形式や画像URLの状態によっては表示できない場合があります。すべての形式での表示を保証するものではありません。 ■ コメントの表示仕様 新しいコメントは下から追加され、古いコメントが上へ移動します。 最大表示数を超えた場合のみ、古いコメントから押し出されます。 時間経過だけでコメントが自動的に消える仕様ではありません。 名前と本文は別行で表示します。 ■ 背景透過 実配信用テンプレートの吹き出し外は透明です。 ゲーム画面・雑談背景・配信オーバーレイなどへ、そのまま重ねて使用できます。 接続状態やデバッグ情報などの不要なステータス文字は表示しません。 ■ 設定・演出確認用デモを同梱 商品ZIP内の obs_demo/index.html をブラウザで開くと、実際の配信コメントを使用せずに、墨流しの形成演出や設定変更を確認できます。 デモ画面は、 左側：設定UI 右側：コメントプレビュー に分離しています。 設定スライダーと吹き出しが重ならない構造です。 設定後はconfig.jsを書き出し、わんコメへ導入済みのテンプレート内にある同名ファイルと置き換えてください。 その後、OBSのブラウザソースを再読み込みすると設定が反映されます。 ※obs_demoは見た目・設定確認専用で、実際の配信コメントは受信しません。 ■ こんな配信におすすめ ・和風の配信画面 ・墨、書道、日本画系の雰囲気 ・幻想的な配信レイアウト ・アート系・クリエイティブ系配信 ・落ち着いた大人っぽいコメント欄 ・マーブル模様が好き ・コメントが形成される過程も楽しみたい ・一般的な角丸コメント枠とは違うものを使いたい 和風だけでなく、使用するインク色を変更することで、モダン・幻想系・ダーク系など幅広いデザインへ調整できます。 ■ 内容物 ・わんコメ用コメントテンプレート ・わんコメ追加用ZIP ・見た目・設定確認用デモ ・config.js ・editor_schema.json ・README ・設定ガイド ・トラブルシューティング ・検証内容 ・利用規約 ■ 導入方法 商品ZIPをすべて展開してください。 わんコメへの導入には、 install/suminagashi_marble_onecomme_v1.0.0.zip を使用します。 商品全体のZIPではなく、installフォルダ内の導入用ZIPをわんコメへ追加してください。 追加したテンプレートをOBSへ読み込みます。 OBSブラウザソースは、 幅：1920 高さ：1080 を基準としています。 詳しい手順は、同梱の README_FIRST.txt をご確認ください。 ■ 動作確認について Chromium上で以下を確認しています。 ・墨滴の初期表示 ・インクのにじみ拡大 ・マーブル流線の形成 ・中央面が澄んでコメントが現れること ・演出終了後に静止すること ・通常コメント表示 ・同一IDコメントの重複防止 ・チャンネル単位のclear ・deletedによる単一コメント削除 ・最大表示数を超えた際の古いコメント押し出し ・新しいコメントが下へ追加されること ・長文の横スクロール ・画像形式の絵文字 ・時間経過だけではコメントが消えないこと ・設定UIとプレビュー領域の分離 ・JavaScript / JSON / ZIP構成 ただし、以下は未確認です。 ・実際のOBS Studio上での表示 ・実際のわんコメへのZIPインポート ・YouTube実配信コメントの受信 ・Windows環境での長時間運用 ご使用環境によって動作が異なる可能性がありますのでご了承ください。 ■ 利用条件 購入者ご自身の配信・動画で使用できます。 収益化した配信・動画にも使用可能です。 ご自身で使用する範囲で、色・サイズ・コードなどを調整できます。 以下は禁止しています。 ・元データの再配布、再販売 ・改変データの再配布、再販売 ・第三者とのファイル共有 ・自作発言 ・本商品の全部または一部を組み込んだテンプレートや素材の配布、販売 ・第三者がファイルを取得できる状態での公開サーバー等へのアップロード 詳しくは同梱の利用規約をご確認ください。 制作：たっくん