QRコードの読み取りでFPSの当たり判定#protoout pic.twitter.com/3OoPiwgkBg
— sawa (@sawakoshi_yy) November 16, 2020
#使ってみたい人はこちらのリンクからどうぞ
スマホ対応はまだできていませんので、、PCでお願いします。。
射撃ボタン押すと、ページ下の方に判定に使う画像が表示されます。
https://musing-thompson-7d10a0.netlify.app/
かざすQRコードはこちらで。
#ARのシューティングゲームを作りたい
ので、当たり判定の部分をどう実現するか検討中です。
以前、機械学習で当たり判定をする処理を作成しましたが、（↓のリンク）
画面に照準を入れて、その照準に入っているときに撃つと当たるようにしたいのと、
機械学習では別の人と判定される可能性があるので、
今回は、照準部分にQRコードの読み取りを使い当たっているかどうか判定しました。
[機械学習を使って、PCのカメラでザクを補足して撃てるようにしてみた。]
(https://qiita.com/sawakoshi_yy/items/a4ffe7cc0a5dd36dcddf)
#構成
・カメラ映像を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コードを生成/解析]
(https://qiita.com/dojyorin/items/78c22be5411ad68cdff9)
[Canvasリファレンス]
(http://www.htmq.com/canvas/getImageData.shtml)
[drawImage()メソッド(画像類の貼付け)。]
(https://www.marguerite.jp/Nihongo/WWW/RefCanvas/drawImage.html)
[HTML5のCanvasで画像をリサイズ＆トリミングして中央表示する方法]
(https://sterfield.co.jp/designer/html5%E3%81%AEcanvas%E3%81%A7%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB%E3%82%92%E4%B8%AD%E5%A4%AE%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/)