はじめに
NMというオンラインネット麻雀をtypescriptとjavascriptだけで作ってみました
javaなどのサーバーサイド言語を書かず、RDBSを設計せずネット麻雀を作成してみようと思いたち開発しました。
後発のネット麻雀なので、どうせならと思ってスタンダード？な開発を行わずに極力スピード優先で開発できるように技術選定を行いました。
この記事では採用した技術を紹介したいと思います。
まだバグなども残っている状況ですが、反響があれば詳細やなども記述して行きたいと思います。
プレイ画面イメージ
（この画像、シャンテン取得ロジック開発中のものです）全身動かせるようになって、表情もナチュラルに感じる。いつか麻雀系VTuberさんにプレイして欲しいものだ pic.twitter.com/Nm6dYff6Up
— なみもん@オリジナルネット麻雀作りました (@MahjongNm) November 11, 2021
優位ポイント
ユーザー目線
ビデオチャット
マイクとカメラがあればビデオチャットが使用可能。VRMを使ったVRMチャットも実装済み。
VRMをサイトにアップすれば、独自のアバターに変更可能。
もちろん、VRM同士のビデオチャットも可能です。
言語変更可能
非日本語圏の人が初見で麻雀をプレイできるように、言語変更できるようにし、漢字を使わない麻雀牌をデザインしました。
Mahjong without Chinese tiles.#mahjong #riichimahjong pic.twitter.com/YJmsbRRuKg
— なみもん@オリジナルネット麻雀作りました (@MahjongNm) November 19, 2021
運用目線
ゲーム進行がサーバーレスなので、サーバー負荷などを気にせず運用できる（はず）
この辺はfirebase代がどうなるのかわかりません（バズってないので）。
使用技術
フロントエンド
vue vuetify
vueの勉強をしたかったので
skyway
skyway
ゲーム中の情報のやり取りをサーバーレスにするので、P2P通信を行うため
typescript
説明略
VRモデル
ML関連
機械学習のモデルをビデオチャットとVRチャットで使ってます
bodypix
bodypix
ビデオチャットで背景を隠したりするために使用
face-api
face-api
表情の取得とVRMへの反映
holistic
holistic
体勢の取得とVRMへの反映。kalidofaceを参考にさせていただきました
kalidoface
サーバーサイド
firebase
firebase
P2Pの接続、ユーザー管理機能、配牌作成など。コードは全てjsで書いています
今後の課題
バグ再現が難しい
クライアント側でロジックが走るかつ非同期で動かしているので、プレイヤーAで発現するバグがプレイヤーBからは見えなかったりする。サーバーサイドで管理していないので異常な状況を監視できない。
スマホアチアチ問題
vueの作りが良くないのか。特にビデオチャット中は熱い。リファクタリングしないと…
雀魂にハマる
これも勉強だから…とやってたら聖1になってた。カンにゃ！