オタコールシステムとは？
コロナ時期で客席で声出しを禁止されているファンのために、手元のスマホ操作と連動してコールできる「オタコールシステム」という画期的なシステム
https://protopedia.net/prototype/2066
添付ファイルについて
| ファイル名 | 備考 |
|---|---|
| counter.html | カウント用HTML |
| OtacallSystemCounter.zip | Unityプロジェクト |
動作環境
- Windows 10
- Unity Hub
- Unity 2019.4.1f1
- OBS Studio
動作確認
Unityプロジェクトの起動
1．OtacallSystemCounter.zipを解凍します
2．Unity Hubを開き、「リストに追加」をクリックします
3．解凍したフォルダを選択します
4．追加されたら、「OtacallSystemCounter」をクリックし、Unity2019.4.1f1で開きます
5．開いたら、Gameビューの「Maximize On Play」をONにし、Playボタンを押します
6．全画面で開始されます
オタコールシステムの起動
1．「otacall-v1.2.5.1」を用います
2．otacall-v1.2.5.1/helloworld/helloworld/templatesフォルダに「counter.html」をコピペしてください
3．otacall-v1.2.5.1に「ngrok.exe」をコピペしてください
4．「otacall_subdomain.bat」を編集してください
変更前
cd /d %~dp0
start ./helloworld/helloworld.exe runserver 0.0.0.0:80
start ./udp/udp.exe
start ./ngrok.exe http -subdomain=name 80
今回、UnityプロジェクトがUDPサーバーになるため、「udp.exe」は開かないでください。サブドメインの名前は適宜変更してください。
変更後
cd /d %~dp0
start ./helloworld/helloworld.exe runserver 0.0.0.0:80
start ./ngrok.exe http -subdomain=name 80
5．「otacall_subdomain.bat」をクリックし、オタコールシステムを起動します
6．ブラウザからローカルIPもしくはngrokのURLにアクセスし、counter.htmlを開きます
7．ボタンを押すと、カウントされます（動画はこちら）
8．Unityプロジェクトをクリックして、「R」キーを押すと、カウンタがリセットされます
OBS Studioの設定
Unityの画面をOBS Studioで調整し、プロジェクターで表示します。
1．OBS Studioを開き、ソースの「＋」からウィンドウキャプチャを追加します
2．新規作成し、OKをクリックします
3．ウィンドウに「Unity.exe」を選択します
4．UnityのPlayボタンを押してから、ウィンドウのサイズ（赤枠）を合わせましょう
5．ソースのウィンドウキャプチャを右クリックして、フィルタを追加します
6．エフェクトフィルタの下にある「＋」をクリックし、クロマキーを追加します
7．クロマキーでOKをクリックします
8．これでグリーンバックが透明化されます
8．プロジェクタを接続してから、OBS Studioの画面を右クリックし、全画面プロジェクタを選択、プロジェクタを選ぶことで全画面で表示されます
6．Unityの画面は最大化したまま、「R」キーでリセットする際はUnity画面が選択されている必要があります
counter.htmlについて
ボタンタグのsubmitする「value」を今まで音源のファイルパスとしていましたが、0から順番に数値を送るようにしています。カウントするボタンを増やしたい場合はvalueを"2"、"3"のように増やしてください。
<button type="submit" name="button" value="0" class="btn-circle-border-simple">タイガー</button>
<button type="submit" name="button" value="1" class="btn-circle-border-simple">ファイアー</button>
OtacallSystemCounter（Unityプロジェクト）について
1．Hierarchyビューは以下のようになっています
2．カウント時の文字を変更するには、Animated CounterのInspectorビューを変更してください
3．文字の背景の画像を変更するには、任意の画像をAssets/Materialsフォルダに入れて、AnimatedCounterBackgroundの画像を変更してください
4．カウンタを増やす場合、HierarchyビューのAnimatedCounterを選択し、Ctrl+Dで複製し、位置情報を変更し調整してください
5．CounterControllerのCountersのサイズ変更と、各ElementにHierarchyビューのAnimatedCounterをドラッグ＆ドロップして割り当ててください。そして、Audio Clipのサイズ変更と、各Elementに音源をドラッグ＆ドロップして割り当ててください。
6．ボタン押したときに音がいらない場合は、Element右の丸いのをクリックして、Noneを指定してください。
