はじめに

こんにちは！ももちょこです！

今回は私が作成したTwitchのチャットを利用したクイズゲームのオーバーレイをご紹介します。

このオーバーレイは、なぞなぞ・クイズ・絵当てゲームなどお題を当てるゲームに使うことが出来ます。

使い方

それでは、今回作成したオーバーレイの使い方を説明します。

OBSで配信をしていることを想定して説明をしていきますのでご了承ください。

まず、OBSにブラウザソースを追加して下記のURLを貼り付けます。

このとき、幅を1920・高さを1080にしてください。

設定ができると下のような感じになると思います。

表示されたらグリーンバックが画面を覆うようにしてフィルタからクロマキーを設定してください。

次に動作開始するための設定を行います。

ブラウザソースを選択して「対話(操作)」ボタンを押します。

表示されたら画面の右上にある入力欄にチャンネル名とワードの設定を行います。

チャンネル名はTwitchのアカウント名(アルファベットのやつ)を入力してください。

※手入力が上手くいかない場合はコピペで入力するといいかもです！

Twitchのアカウントを持っていない方(YouTubeなどで活動をしている方)はチャンネル名はそのままでも構いません。

そのまま(チャンネル名:momochoco_jp)で使用する場合は下記のリンクのチャット欄を使用してください。

ワード設定は正解となるワードを設定してください。

プログラムの仕組み上、正解ワードと完全一致したワードのみを正解とする使用になっています。

正解ワードを"ひらがなのみ"にするなど工夫するといいかもです。

入力が完了したら画面中央のスタートボタンを押してください。

すると、クイズがスタートします。

クイズがスタートして正解者が出ると下のような画面が出てきます。

正解ワードと正解者の表示とともに正解音も流れます。

正解ワードを変更する場合はお手数ですがページを再読み込みして頂いて、再度チャンネル名とワードの設定をお願い致します。

基本的な使い方は以上です。

デモプレイ

デフォルトの状態でスタートボタンを押すと、ももちょこのチャンネルでデモプレイが出来ますので、ぜひお試しください。

チャット欄に「りんご」と入力すると正解が出てくると思います。

↓ももちょこ(momochoco_jp)のTwitch↓

使用例

作成したオーバーレイは、なぞなぞ・クイズ・絵当てゲームなどお題を当てるゲームに使うことが出来ます。

使い方は様々なので自由に使ってください！

注意点

chromeなどブラウザによってはオーバーレイをバックグラウンドで表示しているときに上手く動かない(止まってしまう・再度表示されたときに動く)ことがあります。

この場合の対処方法として一例ではございますがご紹介します。

chromeをお使いの方はデスクトップ画面にあるアイコンを右クリックしてプロパティを開いてください。

すると、下のような画面が表示されると思います。

次に、リンク先という項目の末尾に以下の文字列を付け足してください

--disable-features=CalculateNativeWinOcclusion

注意点として文字列の前に半角スペースを入れないと上手く動かない場合があります。

また、１回目はうまく動かなかったけどページを更新したら上手く動いたという場合もございますので、お手数ですが色々試してもらえるとありがたいです。

「ブラウザ バックグラウンド 止まる」などでググってもらえると色々出てくると思います。

さいごに

今回はこれで以上になります。

最後まで読んでいただきありがとうございました！

何か質問などあればContactからお気軽にお問い合わせください。

最後にTwitterなどのSNSで共有拡散していただけるとありがたいです。