FlutterとSkyWayでオンライン麻雀ゲーム作ってみた

この記事について

昨年末、タイトルのようにオンライン麻雀ゲームを作成したので、振り返りを兼ねてゲームの紹介記事を作成しました。

ゲームのURL

以下のURLで公開しています。

どんなゲーム？

ボイスチャット付きオンライン対戦麻雀ゲームです。
アカウントなどの登録作業不要なので気軽に遊べます。

個人開発のため機能やUIはしょぼいです。
点数計算機能がなく。また、フリテンや間違った鳴き方を防ぐ機能もありません。
やり直し機能は付けているので、ミスしてもやり直し可能です。
細かなルールはプレイヤー同士で話し合って決める必要があります。
また、プレイヤーとしてだけでなく、観戦者としても参加できます。
参加者でワイワイお喋りしながら楽しく遊んで貰えると嬉しいです。
Flutterの習作として作ったので、作りが粗い部分が多々ありますがご容赦ください。

なんで作ったの？

<オンライン飲み会にて>
先輩「コロナで雀荘に行けないから、いい感じのオンライン麻雀ゲーム探してきて」
私　「かしこまり」
先輩「あ、アプリインストールとかアカウント登録とかめんどいから、そういうの無しのね」
私　「か、かしこまり」

<一週間後>
私　「見つかりませんでしたぁ！」
先輩「無いなら作れば良いんだよ！」
私　「」

という感じで、自作してみることにしました。
Webのフロントエンドの経験はなかったのですが、当時お仕事で使っていたFlutterがWebアプリに正式対応したこともあり、習作のつもりで作成を開始しました。
また、以前から興味のあったWebRTCの勉強にも良い機会だと思ったのもあります。

<完成後>
私　「どやさ！」
先輩「え？ホントに作ったん？」
後輩「ていうか、天鳳ならアプリインストールもアカウント登録も不要っｽよ」
私　「」

作成期間

仕事終わりや休日にほそぼそと作業して、約4ヶ月かかりました。

• SkyWay調査：2週間
• システム面：1.5ヶ月
• GUI関連：1.0ヶ月
• 不具合修正：1.0ヶ月
• 説明書作成：2週間

SkyWayについて

WebRTCのSDKとして、SkyWayを選択しました。
選定理由としては、

• 無料枠がある。
• サンプルコードが分かりやすい。

などです。
実際に使ってみて、ボイスチャットの音質はZoomやMeetsなどに比べて、特に悪いとは感じませんでした。
5人程度で会話していましたが、ハウリングや音割れは起きませんでした。

工夫したこと

ゲームサーバレス

個人開発で手数が少ないこともあり、このゲームにはゲーム管理用のサーバを構築していません。
サーバは、SkyWayのWebRTCサーバと、Githubのホスティングサーバのみです。

参加者の内、一人がゲームサーバ役を担うシステムになっています。
もしサーバ役の人が落ちても、別の人がサーバ役を引き継ぐようになっています。
全員が同時に落ちない限りはゲームの続行が可能な作りになっています。

このシステムの実現にあたって、参加者全員がゲームデータを保持しています。
そのため、頑張れば相手の牌や山牌を見ることができてしまいます。
このゲームは身内で行う想定なので、そこまでズルい行為しないと割り切って作成しました。

大変だったこと

麻雀システム

鳴きの処理など、通常のゲームでは発生しないような割り込みイベントがあり、排他処理や誰がどの操作が可能かの管理が大変でした。
中でも、加槓は牌の処理も、描画でも例外的な処理を書く必要があり一番苦戦しました。
正直、「麻雀のゲーム化なんて点数計算機能以外は楽勝でしょ」と舐めていました。

テスト

とにかく4人分の操作を1人でするはきつかったです。1局分の操作をすると10分以上掛かっていました。
最後の方は、かなり虚無ってました。

デバイスごとの違い

デバイスごとの挙動の違いは懸念していたほどではなかったのですが、canvasへの描画でAndroid端末のブラウザでは、画像データを半透明で描画することができないなどがありました。
それ以上に、モバイル端末とデスクトップ両対応のUI構築が大変でした。

操作説明

想定外に苦戦したのが操作説明の作成でした。
お仕事では１つの操作毎に機械的に説明を書いていけば良いのですが、個人開発のゲームの説明にそこまでの労力を割く気力がありませんでした。
個人開発のゲームやアプリの操作説明をちゃんと書いている人を尊敬します。

電気通信事業の届出

クローズド・チャットを提供する場合は、電気通信事業の届出が必要になるようです。
事業としてこのゲームを提供するつもりは無いのですが、念の為、届け出ました。
提出する書類の記述内容は簡単なのですが、事業の届出など普通の生活では行わないことをしたので提出時は緊張していました。

作ってみて

これまで自分で使うアプリなどは幾つか作っていましたが、他の人にも使ってもらうアプリは初めてでした。
UIの構築から操作説明の作成まで全て一人で作業していると、「使い難く無いだろうか」、「分かりにくく無いだろうか」などの不安に襲われ、何度も作成を中断しそうになりました。
普段、職場で気軽に意見を聞ける状態がどれだけありがたいか身にしみました。
コロナで他にやることもなかったので、なんとか作業を続けて身内への公開まで漕ぎ着けましたが、逆にコロナでなければモチベーションを保てなかったかもしれません。
そんなモチベーションの遷移も含めて良い経験になりました。
今後もFlutterを使ってWebアプリを作ろうと思っていますが、モチベーション維持とノウハウの蓄積のために小マメに記事を書いていこうかと思います。

なお、これまで身内で4回ほど遊びました。
ダラダラ喋りつつ、チョンボや点数計算どうやるか等でわちゃわちゃしながら遊ぶことができたので、このゲームでやりたかったことは達成できたかなぁと思います。

あとがき

天鳳。。。
そっかぁ、アプリインストールもアカウント登録も不要なのか。
orz

以上