シューティングゲームの当たり判定をQRコード読み取りでやってみた

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">QRコードの読み取りでFPSの当たり判定<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/3OoPiwgkBg">pic.twitter.com/3OoPiwgkBg</a></p>&mdash; sawa (@sawakoshi_yy) <a href="https://twitter.com/sawakoshi_yy/status/1328324639131504647?ref_src=twsrc%5Etfw">November 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#使ってみたい人はこちらのリンクからどうぞ
スマホ対応はまだできていませんので、、PCでお願いします。。
射撃ボタン押すと、ページ下の方に判定に使う画像が表示されます。
https://musing-thompson-7d10a0.netlify.app/

かざすQRコードはこちらで。
<img width="200" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737363/aba6085d-8674-af55-96be-d04fba5ea53e.png">



#ARのシューティングゲームを作りたい
ので、当たり判定の部分をどう実現するか検討中です。

以前、機械学習で当たり判定をする処理を作成しましたが、（↓のリンク）
画面に照準を入れて、その照準に入っているときに撃つと当たるようにしたいのと、
機械学習では別の人と判定される可能性があるので、
今回は、照準部分にQRコードの読み取りを使い当たっているかどうか判定しました。

[機械学習を使って、PCのカメラでザクを補足して撃てるようにしてみた。]
(https://qiita.com/sawakoshi_yy/items/a4ffe7cc0a5dd36dcddf)

#構成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737363/1c2132a3-cf87-2def-ee24-8059e155b7ba.png)

・カメラ映像をcanvas（画像）に変換
・変換したcanvasの照準部分だけを切り出し
・照準部分でQRコードを読み込めた場合、当たったこととする


#コード（CodePen）
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="sawakoshi_yy" data-slug-hash="GRqeojK" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="QRコードの生成 &amp;amp; 読取">
  <span>See the Pen <a href="https://codepen.io/sawakoshi_yy/pen/GRqeojK">
  QRコードの生成 &amp; 読取</a> by sawa (<a href="https://codepen.io/sawakoshi_yy">@sawakoshi_yy</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

大きく表示できないので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/)