🦜
Goだけで子供向けのブラウザゲームをつくる
この記事はGo 2 Advent Calendar 2020の２１日目の記事です。
はじめに
こどもがショッピングモールに展示してあるようなモニタに映る自分自身のジェスチャーで何かすると反応がえられるという仕掛けに夢中になっていたのでいつでも自宅でできるように自作してみた。
必要なモノ
- フロントカメラ（Webカメラ外付けでもOK）付きのPCやスマホ
成果物
ゲーム内容と遊び方
- タイトルでスタートを押す
- カメラに全身が映る程度に十分離れる
- ３秒カウントダウンの後風船がどんどん飛んでいく
- カメラに映る自分の手首を風船に当てると風船は割れる
- ３０秒以内にできるだけ多くの風船を割る
- 結果表示のスコアをみんなで競い合うと楽しい
使われているノウハウ
- PoseNet/TensorFlow-JS
- WebAudio
- 2D-Canvas
- SpaGo/Go
ソースコード
つまづいたところ
映像を表示用とPoseNet用に別のvideoタグに載せた
- PoseNetには必要なサイズに設定したvideoタグを渡す必要がある(不必要に高解像度だと重くなる)
- 表示にはそれなりに解像度が欲しい
というわけでメディア展開先である「２つのvideoタグ」のそれぞれのsrcObjectには同一のメディアストリームをセットし、それぞれのvideoタグのwidthやheightを設定することで対応した。
PoseNetは左右を意外と誤認識する
- 右手首と左手首が結構入れ替わったりしていた
- なのであまり高い追従性の必要な認識条件は採用しないようにすることで対応した
WebAudioはブラウザごとに差異が残っている
- SafariはまだレガシーなAPIインターフェースのままだった。
- Polyfillを入れて対応。
WebAudioで音を鳴らす制約
- 一度でもユーザークリックを契機に何らかの音を鳴らす必要がある。
- ゲームスタート時に音を鳴らすことで解決した。
まとめ
まだできたてほやほやでこどもが楽しんでもらえるかどうかはまだ未知数だけど、
自分で遊んでみて意外と熱中してしまった・・・。
Discussion