Scratchとmicro:bitでVRやってみる


自身のアルバイト先がITものつくり教室であり，Scratchを使ってゲーム作りを教えたりしています．最近ではワークショップでmicro:bitもよく使われ，何か出来ないかなーと考えていました．

そこに登場したScratch3.0！拡張機能でLEGOWeDoやマインドストームEV3などと無線で接続して，フィジカルコンピューティングが簡単に行えるようになりました．今回はmicro:bitを使ってScratchと無線通信し，ScratchでVRぽいゲームを作りたいと思います．

micro:bitのアドベントカレンダーにも記事を載せているのですが，Scratchの方では，その続きから書いていこうと思います．なので，この記事を読む前に[こちら](https://qiita.com/kikpond15/private/beb9b61712b9c9a25af8)の記事を読んでもらえると幸いです．


## VRぽいシューティングゲームを作る
micro:bitとScratchの接続が出来たら，micro：bitを使ってゲームを作っていきます．
今回作るゲームはVRぽいシューティングゲームです．VRぽいとはどんなものかというと，micro:bitには加速度センサーが入っており，傾きを検知することが出来ます．それを利用して，micro:bitを頭につけて首を傾けることで，画面のゲームを操作するものを作っていきます．

![スクリーンショット 2019-12-19 14.46.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/e6de6b99-6e85-4299-f563-fcd8aa29b04f.png)


## プログラミング
[micro:bitの記事](https://qiita.com/kikpond15/private/beb9b61712b9c9a25af8)では，接続方法とmicro:bitの加速度センサーを使うプログラムを紹介しました．ここでは，その続きから，よりゲームらしさを追加していこうと思います．

## 敵を作る
シューティングゲームなのでやはり敵が必要です．適当なスプライトを選んでプログラムを作成します．
![スクリーンショット 2019-12-23 21.03.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/deb5c256-18d8-50e8-2c45-bfcaaf03fabd.png)

micro:bitの傾きを持たせた変数microBitAngleを使って，敵の座標を傾きによって移動させるプログラムとなっています．

### 没入感，スピード感を出す
没入感，スピード感を出すために，宇宙船が画面奥に飛んでいるような演出を加えていきます．めちゃくちゃわかりづらいですが，線無しの白い小さい円のスプライトを作ります．これを通過する惑星と見立てて臨場感を出したいと思います．![スクリーンショット 2019-12-24 15.46.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/d9ca2d9e-84ba-0406-dc4d-9e22040bc710.png)
![スクリーンショット 2019-12-24 15.49.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/c1a94bd8-4242-04bf-7af8-f3dc66c661a1.png)
プログラムはこんなかんじで，クローンを作って中心からランダムな角度に移動させます．徐々に大きさを大きくすることで向かってくるような演出になります．
![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/bd1cded4-65ee-785c-3f1c-266eae1cd2cd.gif)

### 敵と自分の攻撃，勝敗判定
最後に敵と自分の攻撃を作り，勝敗判定を追加します．
まずは敵の攻撃です．ボールをスプライトの色を変えながらため攻撃するようにします．発射前には，音がなるようにし，いつ撃ってくるか分かるようにします．一発でも当たったらゲームオーバーにします．
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/2efbc46f-1ecb-a455-30fc-e128502b14c8.png" width="100">
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/4526d04d-4f0f-59c1-d5b5-290082e2e182.png" width="800">
次に自分の攻撃です．自分の攻撃は自動で連射するようにします．敵にはHPを用意し，0になったらクリアにします．スプライトにはボールを横長に変形させ，向きを変えて進ませます．敵のHPに変数alienHPを用意します．
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/568c362d-3821-22c2-cfbc-b2b3510733f6.png" width="100">
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/f3db7d3d-c325-4bbf-649a-82213beef1f2.png" width="800">
最後に勝敗判定とHPを設定します．
スプライトを作成し，コスチュームを勝ちと負けの2つ用意します．敵のHPもここで初期化しておきます．
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/5cf58501-adff-aa4b-8906-81203120e9cd.png" height="50"> <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/99de0dc8-09a3-a5b3-e5a3-5bce8bceafe5.png" height="50">
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/ff0a582d-dc7e-2be6-6278-67ef5f030046.png" width="800">


## 遊んでみた
microbitを頭にくくりつけて，遊んでみました．プロジェクターなど大画面でやると結構臨場感あります．意外と面白かったです．
※勢いよく首を傾けると危険です．
![vr.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191122/f78d18e3-6f50-6d07-cc8a-7a57a7f87158.gif)


## リンク
[micro:bit アドベントカレンダー](https://qiita.com/kikpond15/items/beb9b61712b9c9a25af8)