国内最大級のハックイベント「JPHACKS2020」にて開発したサービスです. ビデオ通話にトランプゲームを通したインタラクションを取り入れ, オンラインコミュニケーションにおける空気感共有をサポートします.

フロントエンド(トランプの描画や操作) / バックエンド(ゲームのアルゴリズム,ゲームデータへのアクセス)

 コロナ禍において,オンライン帰省やリモート飲みといった言葉が登場し, 対面に代わるコミュニケーション手段としてビデオ通話が普及してきました. しかしビデオ通話には,対面に比べてその場の空気感が共有できないという 問題があります.また,他の参加者との間に心理的な壁を感じてしまい, 主体性が生まれにくいことも難点です.
 これらの課題の解決を目指して取り組みました.

 私たちのサービスは,よく見るビデオ通話アプリにトランプのババ抜き ゲームを組み合わせ,ゲームの流れを共有したり,ユーザ同士で密なインタラクションを とらせたりすることで上記の問題の解決を目指しました.単にビデオ通話と トランプゲームを組み合わせるだけでなく,既存のオンライントランプゲームにはない 機能や仕様を複数実装することで,インタラクション性を高めました.
 具体的に実装した機能としては,以下の3つがあります.

①カードを好きな位置に移動できる機能

 ユーザは自分のフィールド上であれば,ドラッグ&ドロップで 手札を好きな位置に移動させることができます.これにより, リアルのババ抜きと同じような駆け引きができ,ゲームが一層盛り上がります. また.自分の手番かどうかに関わらず好きなタイミングでカードの移動ができるため, いつでも当事者としてゲームの流れに関わることができます.

②カードを手で掴んで移動できる機能

 本サービスでは,ビデオ映像とトランプのカードが同一のフィールド上に 重なって配置されます.さらに,ユーザが自分の手札の前に手を持っていき, 手を握ることによって,その手札を掴むことができます.掴んだ状態で 手を動かせば手札を移動させることができ,握った手を開けば 掴んでいた手札を放すことができます.現実の操作感に近づけることによって リアルとバーチャルの垣根を曖昧にし,ユーザの心理的な壁を和らげることができます.

③他のユーザのフィールドにインクをかける機能

 ユーザは1ゲームに1回,任意のタイミングでスキルを発動することができます. スキルボタンを押し,発動させたい相手のフィールド上で任意の箇所を クリックすることで,画面中央にアバターが現れ,その箇所に向かってインクを 投げつけます.この機能はインタラクション性を高めるだけでなく, インクのかかったカードはしばらく相手から透視されてしまう仕様も ついており,ゲームの盛り上げにも貢献します.

 本サービスは,クライアントサイドとサーバサイドでソケット通信を行うことで 同じルームにいる全てのクライアントでゲームの情報を同期しています. プレイヤーが手札を動かす,インクをかけるなど何らかのアクションを起こすと, サーバに命令が送られます.サーバ側では,該当の処理によってゲームデータの 更新やインターバルの設定を行い,結果を同じルームのクライアント全員に反映します. サーバサイドはnodejsで実装し,ゲームデータはRedisに保存して管理しています.
 カードを手で掴んで移動させる機能は,まず手を握っているか開いているかを 判定し,判定結果と現在ホールドしているカードの有無によって処理を分けることで 実装しています.手を握っているか開いているかの判定は,Tensorflowのモデルを 使用して関節位置を検出したのち,すべての指のすべての 関節角度の合計がある一定値を下回っているかどうかで行っています.
 ビデオ通話にはSkyWayのAPIを使用しています.

ハッカソンにてKDDIブロックスポンサー賞(北海道・関西ブロック全40チーム程の中で唯一の企業賞)
特定企業へ有償で導入,実用化

JPHACKS2020 イベントページ

JPHACKS2020 実績ページ

Webアプリ ソースコード