10分で反射神経ゲームを作ろう【MindRender】

# MindRenderとは
MindRenderはスクラッチのようにブロックを使ってプログラムをする
ビジュアルスクリプト環境です。
無料で使うことができ、3Dゲームを簡単に作ることができるのが特徴です。

PCのほかタブレットやスマホでも動作します
https://mindrender.jp/download_mindrender/

# めっちゃシンプルなゲーム
スタートして待つとキューブが落ちてくるので
落ちてきた瞬間にストップするだけ
なるべくはやく止められたほうが高スコア
![ezgif-2-3451e813d1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/398d9cea-73fe-e4fd-085f-f4064be2897a.gif)


# リミックス用プロジェクトを用意しました
いちからオブジェクトを配置するのは大変なので
あらかじめ素材を配置したプロジェクトを用意しました。

起動したら「ロッカー」に移動
![gd_215.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/9d9ba5f6-e1ef-3698-7262-ed635ad023a5.png)

ロッカーを使うときはログインが必要です。
アカウントは「新規登録」ボタンから無料で作ることができます。
![gd_217.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/ff03e771-8cf3-35bf-9668-fb888bf34bfa.png)

ロッカーは自分のゲームを保存しておく場所です。

「共有ロッカー」のタブを開き
共有キーに「logi-05」と入力して「更新」ボタンをクリックすると
反射神経ゲームが表示されますので、「リミ用」のプロジェクトの右にある
ダウンロードボタンをクリックしましょう。
![gd_216.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/d78c5b1b-90fe-bd77-a318-72166fc7488c.png)

リミックス用のプロジェクトを自分のロッカーにコピーすることができます。

「マイロッカー」のタブをクリックすると
「リミ用反射神経ゲーム」がコピーされていますので、クリックして開きましょう。
![gd_218.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/60640eb6-b977-4b90-1c0f-6b216833d09e.png)

リミックス用のプロジェクトが開きました
![gd_219.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/0709cf6b-4da7-60a0-1a9c-339eacf09c1f.png)

# ボタンにプログラム
MindRenderはスクラッチと違い、自分以外の他のオブジェクトを操作することができます。
今回は、ボタンが押されたときにキューブを落としたいので
「可変ボタン」にプログラムしましょう。

### ボタンのテキストを変更
ゲーム説明はボタンに書いてしまいましょう。
「せりふ」タブの「textを自分に表示」ブロックを使うと
好きなテキストをボタンに表示することができます。
テキストの中身は改行することもできますので、長文もボタンに書くことができます。
![ezgif-2-c8da666dc0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/ccacf1c7-fa74-8310-8732-ec29fa8192f6.gif)

### ボタンが押されたらテキストを変更
「イベント」の「自分がタップされたら」を使うと
ボタンが押されたときのプログラムをすることができます。
説明文を、ストップボタンに切り替えてみましょう。
![gd_221.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/25440c75-6e1b-5d5f-66eb-33fa5fb31ac4.png)

# フラグをつかった条件分岐
説明文をタップした時にキューブが落ちてくると困るので
１回目のタップ　→　ボタンの表示変更
２回目のタップ　→　ゲームスタート
となるようにしましょう。

まずはボタンがタップされたときに
条件ブロックを追加します。
![ezgif-2-bef9fec672.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/630478c6-a8e2-2e57-4a88-3a897aa0ee56.gif)

条件に合っているかどうかで
プログラムを切り替えることができます。

「もし< on >なら」の部分に、好きな条件を入れることができます。
今回は「ゲーム開始＝０」ならという条件にしました。
![ezgif-1-10270f593f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/3a836309-a416-a55b-688a-be947c677bb3.gif)

２回目のタップで「ちがう場合は」のプログラムを動かしたいので
「ゲーム開始」変数を１にしておきましょう。

# 変数がかわったときのイベント
MindRenderはイベントが豊富で
「変数が変更されたら」というイベントがあります
かなり便利なイベントなので使ってみましょう。

「イベント」の下の方にある「〇〇が変更されたら」が
変数が変更されたときのイベントです。
![gd_222.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/f170634a-6f16-c16f-ca0d-b7e4a2ffc771.png)

ゲーム開始時は「ゲーム開始」の値は０
ボタンが押されて、「ゲーム開始」の値が１になったタイミングで
このイベントが実行されることになります。

ゲーム開始したら、キューブが落ちてきてほしいので
立方体の「重力」と「物理エンジン」をオンにしましょう。
![gd_223.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/b155e651-0585-c8b3-cc11-dc447292fc84.png)

これで、ゲーム開始時に下に落ちるようになりました。
![ezgif-5-06a1d0bd9d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/e6ec1624-fb34-9af2-1b4d-c7dfcf86bf9e.gif)

このままだとすぐに落ちてきちゃうので
ランダムな秒数待ってから落ちてくるようにします。
![ezgif-5-7bda6c31a7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/59b2a2b4-2137-cc72-58b9-bfc2a419ed96.gif)

演算の「乱数」を使うとランダムな値を使うことができます。
これで、いつ落ちてくるか分からなくなりました。

# 落ちてきたキューブを止める

キューブを止めるのも物理エンジンのブロックを使います。

物理をオフにすると落ちてこなくなるので
「もしゲーム開始＝0」のブロックの「ちがう場合は」のほうに
物理エンジンoffのブロックを入れましょう。
![gd_225.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/47f9d75a-1325-4d26-f8e8-59feb9e49401.png)
ボタンを連打できちゃうと困るので
テクニックの中にある「自分の表示」をoffにし、ボタンを連打できなくしておきます。

# ゲームオーバーを作ろう
キューブの初期位置はY10の位置なので
初期位置に近いほど、スコアが良いということにしましょう。

まずは落ちる前にボタンが押されたらゲームオーバーにしたいです。

キューブが落下していないときはY＝10の位置にいるので
それを条件にしましょう。

「もし < 立方体の座標Y ＝ 10 > なら」という条件を作ります
![ezgif-3-7361d39aaf.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/de79ca50-9e9b-2d29-8070-796a51f5d850.gif)

Y=10なら落下していないのでゲームオーバーです。
立方体の表示をoffにして、ゲームオーバーのメッセージを出しましょう。
![gd_226.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/6ce8f4d7-dde8-fbef-a20e-1622c34a0f90.png)

タイトルオブジェクトを使うと、画面に文字を出すことができます。
はじめは非表示にしているタイトルも
「textを〇〇に表示」のブロックを使うと自動的に表示onになります。

オブジェクト名の左にあるチェックボックスのチェックを外しておくと
ゲーム開始時にオブジェクトを非表示にすることができます。
今回はあらかじめoffにしてありました。
![gd_227.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/605673be-1ad2-35ea-47c4-c12652f7ea93.png)

# スコアを表示しよう
落下が始まってからストップボタンを押した場合は
スコアを表示しましょう。

図のように「反射神経レベル」と「スコア」を表示したいです。
![gd_228.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/b8bcda94-111a-82ec-fe28-f2de0859e199.png)

まず、ゲームオーバーを表示するプログラムの下の
「ちがう場合は」の中に、スコアを表示するためのブロックを入れます。
さらに「効果」の「紙吹雪を表示」のブロックも入れておきましょう。
![gd_229.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/5ca6c565-9a93-a62d-82d0-d150937be4ed.png)

MindRenderには多くのエフェクトが用意されています。
紙吹雪のブロックは画面の手前にエフェクトを出すブロックです。
![ezgif-2-ed1a886ee0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/6f7a2a5c-f19c-61f0-2927-5655ab55d65d.gif)

つぎに、「反射神経レベル」と「スコア」を組み合わせて
タイトルに表示してみましょう。
![ezgif-2-9887d032d8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/1b3c22d2-7b40-c0b4-b76e-51e9b781c17c.gif)

Y=10のときを100点
Y=0のときを0点にしたいので、
単純にY座標の10倍をスコアにします。

文字列結合には「+」演算子を使います。

# 完成！
これで反射神経ゲームは完成です。
![ezgif-2-47edf6b220.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/4b811ce6-6984-583e-f942-91351f426d8d.gif)

MindRenderにはスコアを記録するブロックもあるので
ユーザー同士でスコアを競えるようにするのも楽しいと思います。

キューブのオブジェクトを面白いキャラクターに変えたり
ゲームオーバー時にもエフェクトをつけてみたりと
色々アレンジしてみてくださいね。

「共有ロッカー」の共有キー「logi-05」から
完成版を見ることもできるので
うまく行かないときは完成版をチェックしてみて下さい。