QRコードの読み取りでFPSの当たり判定#protoout pic.twitter.com/3OoPiwgkBg
— sawa (@sawakoshi_yy) November 16, 2020
使ってみたい人はこちらのリンクからどうぞ
スマホ対応はまだできていませんので、、PCでお願いします。。
射撃ボタン押すと、ページ下の方に判定に使う画像が表示されます。
https://musing-thompson-7d10a0.netlify.app/
かざすQRコードはこちらで。
ARのシューティングゲームを作りたい
ので、当たり判定の部分をどう実現するか検討中です。
以前、機械学習で当たり判定をする処理を作成しましたが、（↓のリンク）
画面に照準を入れて、その照準に入っているときに撃つと当たるようにしたいのと、
機械学習では別の人と判定される可能性があるので、
今回は、照準部分にQRコードの読み取りを使い当たっているかどうか判定しました。
機械学習を使って、PCのカメラでザクを補足して撃てるようにしてみた。
構成
・カメラ映像をcanvas（画像）に変換
・変換したcanvasの照準部分だけを切り出し
・照準部分でQRコードを読み込めた場合、当たったこととする
コード（CodePen）
See the Pen QRコードの生成 & 読取 by sawa (@sawakoshi_yy) on CodePen.
大きく表示できないのでCodePenのURLも貼っておきます
https://codepen.io/sawakoshi_yy/pen/GRqeojK
嫁さんに使ってもらいました
嫁：照準の中にQRコード2つ並べたら両方反応するの？
私：それは、、無理ちゃうかな。。
嫁：画像にはちゃんとQRコード入ってるのに、当たらんことがあるんやけど。当たってるやん！ってなるんやけど。
私：せやねん。。。写真がぶれると駄目みたいですね。。
嫁：シューティングゲームなのに。
私：そう、ですね。。
嫁：近づきすぎると当たらないね。
私：そう、ですね。。枠からはみ出しちゃうので、敵が近すぎると当たらなくなりますね。。
嫁：ガンダムにQRコード付けるの？
私：そうそう。ガンダムじゃないけど、QRコードを体に付けて戦う。
嫁：頭に1つだけ？
私：体中に付けないといけないですね。。
嫁：お風呂沸いたよ。
私：あ、はい。
まとめると、
■課題
・QRコードが並んでいると上手く判定できない
・写真がぶれると外れる側に判定されてしまう
・近づきすぎるとQRコードが照準からはみ出すので、外れる側に判定されてしまう。
・QRコードを体に複数貼る必要がある
課題まとめ
・QRコードが並んでいると上手く判定できない （フィードバック）
・写真がぶれると外れる側に判定されてしまう （フィードバック）
・近づきすぎるとQRコードが照準からはみ出すので、外れる側に判定されてしまう。 （フィードバック）
・QRコードを体に複数貼る必要がある （フィードバック）
・スマホ対応が必要
・ネイティブアプリ化が必要
ARのシューティングゲームとなると、動画から画像を切り出したときに、
どうしてもぶれてしまう気がしています。
もっと上手いこと当たり判定できる方法を考えていきたいです。
参考
【JavaScript】ブラウザ上でQRコードを生成/解析
Canvasリファレンス
drawImage()メソッド(画像類の貼付け)。
HTML5のCanvasで画像をリサイズ＆トリミングして中央表示する方法