Twitchのチャンネルポイントでアニメーションを表示させる方法

Twitchのチャンネルポイントでアニメーションを表示させる方法

独自のチャンネルポイント演出を作成する

 

Twitchのチャンネルポイントには予め「メッセージを強調表示する」「プレイキャラリクエスト」など用意されたものがありますが、他にも画像を表示したり音を出したり動画を流したり様々な演出を設定できることを知っていますか?

今回は中でもアニメーションを設定する方法を紹介します。

 

ここでのアニメーションは、”AfterEffectsで作成した背景透過のアニメーション”を想定していますが、背景が透過されている動画ならなんでも大丈夫です。

ちょっと限定されすぎていますが、要は「背景透過になっている動いているものを使用したいけど設定方法がわからない」という場合の設定方法です。

 

画面全体的にフレームや花びらが降るアニメーション、自分の立ち絵やSDキャラが動くなどのアニメーションを設定したいという方には役に立つ情報です!

 

 

アニメーションなんて作れない…!

という方は「PIXTA」がおすすめ。

 

こんな派手な紙吹雪の動画や、

 

 

クラッカーなど、配信画面を盛り上げてくれる素材がたくさんあります。

 

>>動画素材【PIXTA】

アニメーションを設定する手順

手順1
OBSでWebSocketを設定する

OBSでWebSocketを設定する

 

上部にあるタブの「ツール」から「obs-websocket」を選択。

 

OBSでWebSocketを設定する

 

「WebSocktサーバーを有効にする」にチェックを入れる。

 

 

【サーバー設定】

ここの情報は後から必要になります。

 

・サーバーポートはいじらない

・サーバーパスワードは任意のものも設定できるけど、セキュリティの面から考えてもそのままのパスワードを使用することを推奨します

 

【ソースにメディアを追加する】

OBSのソースに「+」で「メディア」を追加してください。

表示させたいアニメーションのファイルを選んで、非表示にしておきます。

OBSでWebSocketを設定する

目のマークをクリックすることで非表示にできます。

 

手順2
TriggerFyreで設定する

TriggerFyreで設定する

 

以下のURLから「TriggerFyre」に飛んでください。

TriggerFyre

 

右上のリンクからTwitch連携をしましょう。

 

TriggerFyreで設定する

 

上のメニューから「OBS」を選択し、ポートとパスワードを”手順1″で設定したものに変更します。

 

TriggerFyreで設定する

 

右下の「+」をクリック。

 

TriggerFyreで設定する

 

「! Command name」に任意のチャンネルポイント名を入力。

その右のコインマークをクリックして! Command nameに入力したものをそのまま入力します。

 

TriggerFyreで設定する

 

TriggerFyreで設定する

 

この画面に戻ってきたら「SELECT IMAGE」をクリックします。

 

TriggerFyreで設定する

 

  • Type…操作対象の種類を指定(シーン・ソース・フィルター)
  • Mode
    Hold:操作対象の表示/非表示を変更し、指定した時間が経過すると元に戻る
    Switch:操作対象の表示/非表示を変更
  • Direction…Switchを指定した際の操作対象の動作を指定
    Toggle:現在の操作対象の状態を逆にする(表示なら非表示、非表示なら表示)
    Set:現在の操作対象の状態に限らず状態を指定
  • Visibility…Setを指定した際の状態指定
    Visible:表示
    Hidden:非表示
  • Hold duration…Holdを指定した際の指定時間、この指定時間経過後に元に戻る

参照:kurocha blog

 

 

 

  •  Type→Source
  •  Mode→Hold
  •  Direction→Toggle

 

Scene name…OBSのシーンのことです。アニメーションを表示させたいシーンを選択します。

Source name…手順1で非表示にしておいたメディアファイルを選択します。

Hold duration…アニメーションを表示させる秒数です。好きな数値に設定してください。

 

上記のように設定します。

これで、

ソースに追加してあるメディアを非表示の状態から表示に変更し、指定した時間が経過すると非表示の状態に戻る

という設定になりました。

 

 

今のところ複数のシーンで同じアニメーションを設定するには、同じ内容のものを別名で設定する方法しかわかっていません。

そうすると例えば「A(ゲーム画面用)」「A2(雑談用)」のように並ぶので、視聴者にとってはわかりづらいものとなってしまいます。

もし別の良い方法があれば追記や記事の修正で対応します。

 

手順3
Twitch側で設定する

Twitch側で設定する

 

「ビデオプロデューサー」か「クリエイターダッシュボード」をクリック。

 

Twitch側で設定する

 

「視聴者向け報酬」の中の「報酬とチャレンジの管理」をクリックします。

 

Twitch側で設定する

 

スクロールして「カスタム報酬」の「新たなカスタム報酬を追加」をクリック。

 

Twitch側で設定する

 

「報酬の名前」を手順1の「! Command name」に入力した名前と全く同じ名前にします。

不安な人はコピペが確実です。

 

「価格」は必要チャンネルポイント数です。

任意の数字を設定します。

 

両方設定できたら「作成」をクリック。

 

手順4
OBSの設定をする

OBSの設定をする

OBSの設定をする

 

OBSで「+」から「ブラウザ」を選択。

 

OBSの設定をする

OBSの設定をする

OBSの設定をする

 

「URL」にTriggerfyreからコピーしたリンクを貼ります。

幅と高さはOBSの解像度と同じにしておきます。

 

解像度はOBSの設定から映像を選択すると確認できます。

 

OBSの設定をする

 

手順5
テストする

これですべての設定が完了しました。

実際に自分でチャンネルポイントを使用して上手く表示されるか確認しましょう。

 

特別な演出で配信を豊かにしよう

 

チャンネルポイントは配信を見ると貯まるものなので、長時間視聴してもらえるような工夫をして配信を盛り上げましょう!

 

▼高品質な背景透過の動画素材が欲しい方は下記バナーをクリック