リンク

今回作成したTwitchのチャットを利用したクイズゲームのオーバーレイは下のリンクから使用することができます。

↓リンクはこちら↓
★☆Quiz☆★

使い方

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

まず、リンクをクリックするとこのような画面が出てきます。

まず初めに画面の右上にある入力欄にチャンネル名とワードの設定を行います。

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

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

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

↓ももちょこ(momochoco_jp)のTwitch↓
https://www.twitch.tv/momochoco_jp

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

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

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

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

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

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

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

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

【デモプレイ】
デフォルトの状態でスタートボタンを押すと、ももちょこのチャンネルでデモプレイが出来ますので、ぜひお試しください。
チャット欄に「りんご」と入力すると正解が出てくると思います。
↓ももちょこ(momochoco_jp)のTwitch↓
https://www.twitch.tv/momochoco_jp

使用例

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

今回は使用例としてOBSから絵当てゲームを配信することを例として使い方を説明していきます。

まず初めに、ペイントソフトをキャプチャします。

次に、今回作成したオーバーレイをキャプチャします。

このとき、ウィンドウキャプチャでオーバーレイをキャプチャしてください。

キャプチャが出来たら緑色が画面いっぱいになるようにALTキーを押しながら大きさ調節をしてください。(緑色は16:9の比率になっています)

うまく出来たら下のような画面になっていると思います。

余談ですが、初めはシーン追加のブラウザソースですべて完結するようにプログラムを書いていたのですがOBSのCEFの仕様か分からないですが上手く動かなかったんですよね...(chromeでは動くのに...)

次にキャプチャしたオーバーレイの背景を透過します。

フィルタの項目からクロマキーを追加します。
多分デフォルトの状態(規定値)で背景の緑色が消えると思います。

上手く出来たら下のような画面になっていると思います。

ここまで出来たら設定は完了です。

お疲れ様でした！

あとは、使い方の項目で説明したように諸々の設定をしてスタートボタンを押してもらえれば始めることができます。

注意点

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

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

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

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

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

--disable-features=CalculateNativeWinOcclusion

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

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

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

さいごに

今回はこれで以上になります。
最後まで読んでいただきありがとうございました！

何か質問などあればTwitterのDMにて受け付けております。
【Twitter】@momochoco_wld

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

ももちょこの活力になり投稿頻度が上がります（多分）