『逆転じゃんけん』
1. 概要・コンセプト
2. アプリの画面２つ
3. アプリの動作（Gif）
ユーザーの手を識別してじゃんけんをします。
4. ダウンロードリンク
5. 今後の改善予定
今後は手の認識の速度を向上させます。 現在、グーとパーの識別率はほぼ100%ですが、チョキの識別率が約90%なので、チョキの識別率を100%に近づけます。
6. MVVMの構成図
View
| ファイル名 | 概要・解説 |
|---|---|
| StageView | キャラクターと難易度をScrolleViewで表示するViewです。 |
| HandGestureView | 手を検知してじゃんけんをするViewです。 |
| ResultView | じゃんけんの結果を表示するViewです。 |
| BackgroundView | StageViewの背景のViewです。GeometryReaderを用いてスクロールに応じて背景が動きます。 |
ViewModel
| ファイル名 | 概要・解説 |
|---|---|
| StageViewModel | StageModelのインスタンス、ボタンを押した時の効果音メソッドを記述したクラス |
| HandGestureViewModel | 勝率からゲーム結果を算出するメソッドや動画フレームから手のジェスチャーを検出するメソッドなどを記述したクラス |
Model
| ファイル名 | 概要・解説 |
|---|---|
| StageModel | キャラクターのレベルや初期勝率、逆転の有無などの情報を格納した構造体 |
| SoundPlayer | 効果音を再生するメソッドなどを記述したクラス |
| JankenTextModel | じゃんけんの掛け声とタイミングのメソッドを記述したクラス |
| HandGestureModel | ゲーム終了を判定するメソッド、HPを計算するメソッドなどを記述したクラス |
| HandGestureDetector | 動画フレームからVisionを用いてジェスチャーを判別するメソッドなどを記述したクラス |
7. 工夫したコード／設計
ポイント１ じゃんけんの手を判別
開発初期段階では、じゃんけんの手を3000枚撮影して、CreateMLを用いてモデルを作成して、CoreMLを用いて手を判別しました。しかし３度モデルを作り直しても判別の制度が良くならなかったのでVisionのみで手の判別をすることにしました。
Visionでは、手の骨格の座標情報が取得できます。そこで、以下のような手順で手の判別を行うことで精度を向上させました。
・手順１：Visionを用いて指先、第二関節、手首の座標を取得 https://github.com/ryuprogrammer/CheatingJanken/blob/7743c188fa222dc87bd5faeda04d9fae7c5a0ed2/CheatingJanken/CheatingJanken/Model/HandGestureDetector.swift#L59-L70
・手順２：三平方の定理より２点の距離を求めるメソッド作成 https://github.com/ryuprogrammer/CheatingJanken/blob/7743c188fa222dc87bd5faeda04d9fae7c5a0ed2/CheatingJanken/CheatingJanken/Model/HandGestureDetector.swift#L112-L115
・手順３：手首から親指以外の指までの距離を求める https://github.com/ryuprogrammer/CheatingJanken/blob/7743c188fa222dc87bd5faeda04d9fae7c5a0ed2/CheatingJanken/CheatingJanken/Model/HandGestureDetector.swift#L72-L82
・手順４：どの指が曲がっているかによってグーチョキパーを判別 https://github.com/ryuprogrammer/CheatingJanken/blob/7743c188fa222dc87bd5faeda04d9fae7c5a0ed2/CheatingJanken/CheatingJanken/Model/HandGestureDetector.swift#L84-L106