茨香祭で作ったカジノ的なもの

はじめに

こんにちは、かんきと申します。茨城高専で学生やってます。
茨香祭について記事を書いてほしいと言われたので3Iで作ったカジノの話をさせてもらいます。
※こんな感じの記事書くの初めてなので、稚拙な文章だったらすいません

何を作ったのか

スロット

高専らしい絵とか演出が入ったスロットです。
映像、絵、音声は別の人に作ってもらいました。(デザインが壊滅的な僕)
僕はスロットを主に担当しました。

ルーレット

最初の画像みたいにプロジェクターにルーレットを映して、お客さんが席においてあるPCで賭ける形にしました。

チップ管理

QRコードにIDを入れてサーバーで管理しました。
(ここは完全に委託したのでよくわかっていない)

技術的なお話

Unityの共同開発の方法

Unityで共同開発しようってなったとき、最初 "Unity Collaborate" というUnity公式のサービスを使おうと思いました。
しかし「有料？情報が全然ない！」となり、結局GitHubになりました。
今回作った限り問題はなかったのでUnityで共同開発するならとりあえずGitHubでいいと思います。

サーバーとの通信

チップの数をサーバーから取得、更新する必要があり、"UnityWebRequest"というライブラリを使ってHTTP通信しました。
なんですが、このライブラリ、プロキシ設定ができません。
時間もなかったのでしょうがなくWindows自体にプロキシをかけて強引に通したんですが、このせいでPCのセットアップがめちゃ面倒になっちゃいました...(反省)

QRコードの読み取り

今回Unity内からQRコードを読み取る必要があり、ぜっっったい面倒くさいだろうと思ってましたが、なんとこれだけですんじゃいました。

QRReader.cs

using UnityEngine;
using UnityEngine.UI;
using System.Collections;
using TMPro;
using ZXing;

public class QRReader : MonoBehaviour{
    public TMP_Text ID;
    public RawImage rawImage;
    public TMP_Text toggleButtonText;
    private WebCamTexture webCamTexture;
    [SerializeField] private static int INPUT_SIZE = 512;
    [SerializeField] private static int FPS = 30;

    private void Start(){
        rawImage = GetComponent<RawImage>();
        webCamTexture = new WebCamTexture(INPUT_SIZE, INPUT_SIZE, FPS); //カメラを起動
        rawImage.texture = webCamTexture;
    }

    //読み込み状態を切り替え
    public void ToggleRead(){
        if(webCamTexture.isPlaying) EndCam();
        else StartCam();
    }
    
    // 読み込み開始
    public void StartCam(){
        rawImage.enabled = true;
        toggleButtonText.text = "Stop reading";
        webCamTexture.Play();
        ID.text = "";
        StartCoroutine(readQRcode());
    }

    //読み込み終了
    public void EndCam(){
        rawImage.enabled = false;
        toggleButtonText.text = "Start reading";
        webCamTexture.Stop();
        StopCoroutine(readQRcode());
    }

    private IEnumerator readQRcode(){
        while(webCamTexture.isPlaying){
            string result = Read(webCamTexture); //カメラの画像からQRコードを検出
            if (!string.IsNullOrEmpty(result)){ //読み込めたらresultにQRの内容が入る
                ID.text = result; 
            }
            yield return new WaitForSeconds(0.5f);
        }   
    }
    //ウェブカメラの画像からQRコードを探し、内容を返す
    private static string Read(WebCamTexture texture){
        try{
            var reader = new BarcodeReader();
            var rawRGB = texture.GetPixels32();
            var width = texture.width;
            var height = texture.height;
            var result = reader.Decode(rawRGB, width, height); //画像からQRコードを検出
            return result != null ? result.Text : string.Empty;
        }
        catch (System.Exception ex){
            Debug.LogError("Error reading QR code: " + ex.Message);
            return string.Empty;
        }
    }
}

"WebCamTexture"で簡単にウェブカメラの映像にアクセスできるし、"ZXing"で簡単に画像からQRコードを認識できてすごかったです。(小並感)

映像の切り替え

スロットの映像を切り替えるんですが、１つのVideoPlayerでそのclipを切り替えると動画のロードの間、背景が一瞬見えてしまうという問題が起きました。
結果として、VideoPlayerを２つ準備し、片方のロードが完了したらもう片方の再生を止めることで解決したのですが、想定より面倒なことになって、だいぶ時間を取られました。

PC間通信

ルーレットを回すPCとお客さんのPCとの接続はWebSocketを使用しました。
しかし、本番でWebSocketの接続が悪いのか結果がPCによって送られたり送られなかったりしたことがあったらしく、時間がなかったためデバッグを十分にできなかったことを後悔...

裏話

準備は夏休み前から始まってはいたのですが、夏休み中ほとんど何も進まず、本格的に開発を始めたのは本番２週間前とかでした(!?)。
で、完成したのが５日前とかだったので開発遅れたら普通に出店できない可能性がありました(!?!?)。
次回はちゃんとスケジュールを立てて、もっとクオリティの高い出し物を作りたいところです...

おわりに

なかなか大変でしたが開発も面白かったし、いい経験になったと思います。
売上がなかなか多く、給料もそれなりにもらって嬉しかった。
最後までご覧いただきありがとうございました。