コメントが届くたび、そのコメント専用の魔法陣が組み上がる。 ルーン、外周リング、多角形、中央紋章などの術式をリアルタイムに構築する、わんコメ / OBS向けの魔法陣コメント吹き出しテンプレートです。 あらかじめ用意された魔法陣画像を表示するのではなく、コメントごとに魔法陣の構成を変化させることで、ひとつひとつ異なる「術式」が完成します。 ファンタジー、魔法使い、錬金術、魔導書、異世界系などの配信画面におすすめです。 ■ 特徴 ・コメント受信時に魔法陣を動的に構築 ・線、外周リング、多角形、ルーン、中央紋章などが順番に出現 ・コメントごとに魔法陣の構造が変化 ・多角形の辺数やルーン数などをコメント内容から決定 ・同じ名前＋同じコメントなら同じ魔法陣になる決定論的生成 ・完成後は複数のリングがゆっくり回転 ・魔法陣を吹き出し内部の背景として表示 ・魔法陣の線幅を場所ごとに変えた立体感のある術式デザイン ・外周、補助円、多角形、ルーン、中央紋章で線の強弱を変更 ・四隅に術式を固定しているような装飾を配置 ・四隅の魔力結晶がコメント出現時に順番に発光 ・吹き出し内部を漂う微細な魔力粒子 ・魔法陣完成時に短い魔力火花エフェクト ・紫、水色、金を基調とした幻想的な発光表現 ・背景透過 ・名前とコメント本文を分けて表示 ・コメントは下から上へ積み上がる形式 ・時間経過によるコメントの自動削除なし ・最大表示件数を超えた場合のみ古いコメントから押し出し ・絵文字や画像を含むコメント表示に対応した構成 ・editor_schema.json による各種カスタマイズに対応 ■ コメントから「術式」が生成されます このテンプレートでは、すべてのコメントに同じ魔法陣を表示するのではなく、名前とコメント本文をもとに魔法陣を生成します。 コメントを受信すると、 線の描画 ↓ 幾何学模様 ↓ ルーン ↓ 外周リング ↓ 中央紋章 といった要素が順番に現れ、ひとつの魔法陣が完成します。 多角形の構成やルーンの数などはコメントによって変化するため、新しいコメントが届くたびに少しずつ異なる術式を見ることができます。 同じ名前と同じ本文の組み合わせでは同じ魔法陣が生成されるため、完全なランダムではなく「そのコメント固有の魔法陣」のような演出になっています。 ■ 魔法陣は吹き出し内部に収まります 魔法陣はコメント吹き出しの外側へ大きく張り出さず、吹き出し内部の背景として表示されます。 魔法陣が動いている状態でもコメントを読みやすくするため、名前や本文は前景レイヤーへ配置しています。 中央部分には文字の可読性を確保するための暗い背景処理を入れ、魔法陣の存在感とコメントの読みやすさを両立しています。 ■ 線の太さにも変化をつけています 魔法陣を構成するすべての線を同じ太さにはしていません。 外周リングはやや強く、補助円は細く、主要な多角形は中程度、内部の細かな術式やルーンには細線を使用するなど、役割に応じて線幅を変えています。 単純な幾何学模様ではなく、複数の術式を重ね合わせて描いたような魔法陣を目指しています。 ■ 四隅の魔力結晶 吹き出しの四隅には、魔法陣を固定・制御しているような装飾と魔力結晶を配置しています。 コメント受信時には、魔法陣の構築に合わせて結晶が順番に発光。 魔法陣が完成した後は弱く脈動し、常時派手すぎないアクセントとして残ります。 ■ 魔力粒子と完成エフェクト 吹き出し内部には、小さな魔力粒子が静かに漂います。 さらに魔法陣が完成する瞬間だけ、小さな火花のような魔力エフェクトが発生します。 常に激しく光り続ける演出ではなく、新しいコメントが届いた瞬間を強調するための短いアクセントとして使用しています。 ■ こんな配信におすすめ ・魔法使い、魔術師系の配信 ・ファンタジー系のVtuber配信 ・錬金術や魔導書をテーマにした配信 ・異世界、RPG系のゲーム配信 ・紫や青を基調とした幻想的な配信画面 ・コメントが届く瞬間にも演出を入れたい方 ・一般的なコメント枠とは違った、動きのあるコメント表示を使いたい方 ・コメントごとに異なるデザインが生成されるテンプレートを使いたい方 ■ カスタマイズ editor_schema.json に対応しており、配信画面に合わせて各種設定を変更できます。 主な調整項目は、 ・コメント文字サイズ ・名前文字サイズ ・吹き出し幅 ・上下左右の余白 ・本文カラー ・名前カラー ・パネルカラー ・魔法陣のメインカラー ・魔法陣のサブカラー ・アクセントカラー ・魔法陣の発光強度 ・魔法陣サイズ ・ルーンの密度 ・魔法陣の回転速度 ・魔法陣構築アニメーション速度 ・最大コメント表示件数 ・スタンプサイズ などです。 ■ コメントの表示について コメントは一定時間が経過しても自動では削除されません。 新しいコメントが届き、設定された最大表示件数を超えた場合のみ、最も古いコメントから順番に押し出されます。 コメント数が少ない配信でも、表示されたコメントが時間だけで消えてしまわない仕様です。 ■ 内容物 ・README_FIRST.txt ・わんコメ実配信用テンプレート ・OBS見た目確認用デモ ・HTML / CSS / JavaScript ・onecomme-bridge.js ・template.json ・editor_schema.json ・トラブルシューティング ■ 使用方法 実際のわんコメ配信では、 onecomme_template/magic_circle_dynamic_comment_bubble/index.html を使用します。 obs_demo/index.html は、魔法陣の構築やアニメーションを確認するためのデモページです。 obs_demoはわんコメSDKへ接続しない独立した見た目確認用ページとなっています。 ■ OBSで使用する場合 背景は透過しています。 OBSのブラウザソースとしてゲーム画面や配信背景の上へ重ねて使用できます。 魔法陣、ルーン、発光、粒子など複数のアニメーションを使用しているため、配信環境によって描画負荷には差があります。 ■ 注意事項 ・本商品は、わんコメ / OBS向けのHTMLコメント表示テンプレートです。 ・obs_demoは見た目確認用です。実際のコメント受信では実配信用テンプレートをご使用ください。 ・ブラウザやOBSの描画環境によって、発光やアニメーションの見え方が多少異なる場合があります。 ・コメントは時間経過では削除されません。最大表示件数を超えた場合のみ古いコメントから順番に削除されます。 ・実際の配信前に、OBS上でコメントサイズや魔法陣の発光強度をご確認いただくことをおすすめします。 コメントが届く。 線が走り、ルーンが刻まれ、リングが重なり、ひとつの術式が完成する。 コメントそのものを「魔法の発動」に見立てた、動的生成型の魔法陣コメント吹き出しです。