リスナーだけど転生したらOBSにいたのだが

素材サイト「DOT ILLUST」コラボの
わんコメ・オリジナルテンプレ

使ってみるOBSへの導入手順

このツールは「わんコメ」という配信者向けのコメント管理アプリを使用します。以下導入手順はわんコメ導入済みを前提の説明になります。まだ導入していない方はわんコメサイトから導入にチャレンジしてみてくださいね。
※わんコメはバージョン5.0以上でご利用ください

機能追加とバグ対応のアップデートをしました。
  • わんコメ5.2に伴うTwitchのBitsへの対応
機能追加とバグ対応のアップデートをしました。
  • メンバーシップ関連の表示対応
  • メンバーシップメンバーだけなど出現設定追加
  • TwitchのCheerやSubscriberにも対応
  • その他バグ対応
導入済みの方の更新方法を見る
導入済みの方の更新方法

下記本体ダウンロードボタンから新しく本体をダウンロードして、ダウンロードできた「horaiken-dotillust-tensei.zip」ファイルを開きます。

続いて、わんコメを開き下記画像のようにテンプレのフォルダアイコンを開いて、中にある4つ全てのフォルダやファイルを新しくダウンロードしてきたものに上書きしてください。

OBSが起動中の場合は、上書き後にOBSを再起動してください。

config.jsを上書きしてしまうため、現在設定を調整していた場合に再設定が必要になることご了承ください🙏

設置方法

  1. 下記ボタンから本体をダウンロードしてください。
    本体ダウンロードわんコメテンプレ
  2. わんコメ画面右上「…」から「テンプレート」を開きます。
  3. テンプレート画面にダウンロードした「horaiken-dotillust-tensei.zip」をドラッグ&ドロップします。すると同画面のリスト内に「horaiken-dotillust-tensei」が追加されます。
  4. 他のテンプレート同様に「ここをドラッグしてOBSに入れる」でOBSに追加します。
  5. OBSのソース欄に「index.html」みたいな名前で追加されるので、ダブルクリックして「リス転」などわかりやすい名前に変更して「OBSで音声を制御する」にチェックをいれてOKします。
  6. OBSの音声ミキサー欄の歯車ボタンを押して先ほど追加した「リス転」の音声モニタリングを「モニターと出力」に設定することで効果音が自分でも聞こえるようになります。

これで設置は完了ですので、わんコメのコメントテスターからテストコメントを送信してみてください。

その他設定

文字やキャラのサイズなどいくつかの設定を調整することができます。

  1. わんコメのテンプレート画面を開きます。
  2. テンプレートのリストの中から「horaiken-dotillust-tensei」の枠内にあるフォルダアイコンを押します。
  3. 開いたフォルダの中にある「config.js」をメモ帳などテキスト編集ソフトで開きます。
  4. 以下のコードが書いてあるので、「=」の後ろの数値を変更して調整できます。編集の際は半角数字で書き換えてください。
    // 基礎フォントサイズ(%)
    const fontSize = 100
    
    // コメントの1行の最大文字数
    const maxCols = 10
    
    // コメントの最大行数
    const maxLines = 5
    
    // キャラクターサイズ(○倍)
    const characterScale = 6
    
    // キャラクター出現エリア設定
    const areaLeft = 10		// 出現エリアの左端(画面左端から◯◯%)
    const areaRight = 90	// 出現エリアの右端(画面左端から◯◯%)
    
    // コメント残留時間(秒)
    const commentLife = 8
    
    // コメント消滅後のキャラクター残留時間(秒)
    const characterLife = 8
    
    // リスナー名を非表示に(0:表示/1:非表示、基本は0推奨)
    const hideName = 0
    
    // 出現条件(0:みんな/1:メンバーシップメンバーのみ/2:スパチャコメントだけ)
    const appearsType = 0

キャラクター出現エリア設定の数値がイメージしづらい・設定しづらい場合は、下記ボタンから「キャラクター出現エリア確認レイヤー」画像をダウンロードしてご利用ください。ダウンロードした画像をOBSのソースに追加して画面上に載せると何%に設定するかの目安になります。
画像ダウンロードエリア確認画像

注意事項など

  • この素材で発生したトラブルについては一切責任を負いかねます
  • 商用利用なども構いませんので常識の範囲でご自由に

コラボサイト素材サイト「DOT ILLUST」

かわいいドット絵フリー素材サイト - DOT ILLUST

Special Thanks先行テスターの皆様(しゅき)