今回つくるゲーム
難易度
今回はポケモンGO風のARゲームを作っていきます。ポケモンGOのモンスターボールでポケモンをゲットする場面をビデオモーションセンサーを活用して再現しています。このゲーム作りをとおしてビデオアクションセンサーの活用方法についてより深く理解することができるとともに、スタンプ機能や幽霊の効果についても学習できます。
以下が今回つくるゲームの完成版の動画です。モンスターボールを手で真上に投げるアクションを上手にできるとモンスターをゲットできます
以下より完成版をプレイいただくこともできます。是非一度プレイして仕上がりをイメージしてみてください。
ARゲームとしてはこちらの方が簡単なので、こちらもトライしてみてください。
スクラッチでARゲームの作り方[ビデオモーションセンサーの使い方]
準備(素材の作成)
まず、ゲーム作りに必要な素材を作成していきます。
こちらに素材だけ用意した状態のものも用意していますので、素材を作るのが面倒な方はこちらをリミックして次の章からスタートしてください。
ポケモンGO風ゲーム(素材)
※リミックスされた方はこちらからスタート
新しいプロジェクトを作り、まずはネコのスプライトを削除します。ここから以下の順番でスプライトを追加していってください。
モンスター
今回は、モンスターとしてDinosaur4(今後モンスターと呼びます)を採用します。デフォルトで用意されているキャラクターから選択してください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-20.29.27-1-1024x639.png?resize=502%2C313&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-20.32.21-1024x639.png?resize=505%2C315&ssl=1)
モンスターゲット時の光効果
次にゲット時の光の効果を作っていきます。モンスターに向けて閃光が走って、光を放ち、発散されていくような動きを作ります。
まず、閃光部分ですが、以下のようなコスチュームを作ってください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-20.32.58-1024x639.png?resize=582%2C363&ssl=1)
後ほど詳しく解説しますが、こちらの素材を連続してスタンプしていくことで閃光が走っているように見せます。また、なぜ横向きで作成するかということについて記載しておきます。スクラッチには”●●歩動く”という便利なブロックがあります。それを使うと自分が向いている方向に簡単に動かすことができます。そして、デフォルトが90度方向(=右向き)になっています。ですのでコスチュームを作るときにはコスチュームの進行方向を右向きに設定しなければなりません。その上で、今回は右下から左上に閃光が走るので角度を−45度(=左上向き)に向けて動かすということになります。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-09-1.02.46-1024x590.png?resize=609%2C350&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/08/ビンゴおじさんアイコン2.png?resize=92%2C92)
コスチュームを作るときに中心をあわせることと、動く向きについて意識することを忘れないようにしてください。
続いて、閃光がモンスターにあたり光を放ち、発散される部分を作ります。以下のようなコスチュームを作成してください。いずれも丸を変形させて作っています。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-20.34.01-1024x639.png?resize=595%2C371&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-20.35.15-1024x639.png?resize=595%2C371&ssl=1)
ゲット後にモンスターボールの周りに放たれる光も作ります。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-20.36.28-1024x639.png?resize=600%2C374&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/08/ビンゴおじさんアイコン2.png?resize=92%2C92)
スプライトは作られた順番に最背面から重なっていくので、作る順番も重要です。
モンスターボール
次にモンスターボールを作っていきます。中心からグラデーションを引いた白い円と赤い円をそれぞれ半分消して合体させ中央部分も合成して作成しています。比較的簡単な作業なので是非自分で作ってみてください。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-20.37.56-1024x639.png?resize=603%2C376&ssl=1)
最後に、やったーのメッセージのスプライトも作成します。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-09-0.41.07-1024x640.png?resize=609%2C381&ssl=1)
モンスターボールの動きを作る
素材の準備が整いましたので、ここからは実際にプログラミングをしていきます。まずは、モンスターボールの動きを作っていきます。
ここではモンスターとボールだけをみていくので、それ以外のスプライトは下図のように非表示マークにしといていただくか、緑の旗を押したときに隠すというプログラムを組んでおいてください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-21.01.01.png?resize=352%2C505&ssl=1)
次に、デフォルトの配置を作っていきます。ボールとモンスターそれぞれ以下のようにコードを書いてください。モンスターはコスチュームを変化させて動きをつけます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-21.04.10.png?resize=335%2C166&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-21.04.34.png?resize=335%2C278&ssl=1)
次にボールを投げる動きを作ります。実際はビデオモーション センサーを活用しますが、まずはスプライトが押されたら(クリックされたら)たら投げるという動きを作っていきます。
ボールのコードに以下のように追加をしてください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-21.09.07.png?resize=593%2C424&ssl=1)
0度に向けるというのはつまり真上に向けるということです。進行方向に20歩づつ15回動かしますが、その間に大きさが少しづつ小さくなっていきます。さらに下向きに小さくなりながら動きます。これにより、ボールが投げられるような動きを再現することができます。実際にスプライトを押すと以下のような動きになります。
下図のように、角度と動く歩数を変えることで、ボールの投げられる向きと距離が変化します。実際にいろいろ数字をいじってみてください。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-21.09.07のコピー.png?resize=593%2C424&ssl=1)
最後にゲットの条件を追加します。今回はボールが、モンスターのスプライトに触れたらゲットということにします。ゲットしたら”ポケモンゲット”失敗したら”もう一回チャレンジ”のメッセージが発せられるようにします。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-21.13.43.png?resize=605%2C577&ssl=1)
ポケモンゲット時の光の動き
ポケモンをゲットしたときの、閃光が走り、光を放ち拡散するという一連の動きを作ります。
まずは閃光の部分です。前章でも記載した通り、素材が進む方向にスタンプされていくことで、閃光が走る様子を作ります。スタンプは拡張機能からペン機能を追加していくことで利用可能です。左下の+ボタンを押して拡張機能のペンを選択してください。
閃光(ゲット光1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-21.14.39-1024x638.png?resize=618%2C385&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-21.14.46-1024x638.png?resize=619%2C385&ssl=1)
そうすると、ペンに関するブロックが追加されるのがわかります。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-21.15.11.png?resize=205%2C348&ssl=1)
この中にある”スタンプ”のブロックを使って閃光を作ります。ゲット光1のコードに以下のように記載してください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-21.17.23.png?resize=490%2C421&ssl=1)
動かしている間、スタンプを押し続けるということになります。例えばわかりやすいように、上記のコードで大きさを20%に変更すると、以下のようになります。この点線になっているのは動いている方向にスタンプが押されていっている様子を示しています。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-21.19.58.png?resize=336%2C280&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/08/ビンゴおじさんアイコン2.png?resize=92%2C92)
スタンプとは動いた足跡のようなものです。クローンをつくるよりグッと楽なので是非活用してみてください。
では、大きさを50%に戻してプレイしてみてください。以下のように閃光が走るのがわかります。
今回は、調整済みのコードを記載していますが、大きさや、初めの位置、向かう方向、一度に何歩動かして何回繰り返すか、などは実際は少しずつ値を変えながら調整することになります。
モンスター
次にモンスターです。モンスターは閃光が当たるとボールに吸収されていくので小さくなっていく演出が必要になります。以下のように追記してください。その場で小さくなるというより、少し光に押されながら小さくなるという印象の動きにしています。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-21.25.19.png?resize=610%2C335&ssl=1)
光を放ち拡散する(ゲット光2・3)
閃光がモンスターに当たると光を放ち拡散します。
ゲット光2・3のコードにそれぞれ以下のように記載します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-21.27.05.png?resize=610%2C386&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-22.07.42-1.png?resize=612%2C462&ssl=1)
っこで幽霊の効果というものが出てきますが、幽霊の効果100というのが完全に消えている状態で、50は半透明、0は通常の表示となります。
光は放たれて消えていくので透明効果を上げていくようなプログラムを組んでいます。ここまでできた状態の動画は以下のようになります。
モンスターボールをまとう光(ゲット光4)
最後にモンスターボールをまとう光のコードも書いていきます。大きく広がっていき、色が薄くなっていきます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-22.12.39.png?resize=585%2C435&ssl=1)
ポケモンゲット時のボールの動き
次にゲット時のボールの動きです。ボールはまずおおまかな動きを定義しましょう。モンスターをゲットしたボールは、空中にじわっと現れ、下に落ちてきて、バウンドし、左右に揺れる(モンスターが入ってるから)という動きをとります。ブロック定義を使ってまずは動きを書いてみることをオススメめします。そのうえでそれぞれのブロック定義を作っていくと、頭の中が整理されますし、見直すときもわかりやすいです。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-09-2.12.46.png?resize=402%2C561&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/08/ビンゴおじさんアイコン2.png?resize=92%2C92)
あとから見返したり、他の人が見ることも想定して、ブロック定義を多用するようにしましょう。
動きが大体決まったところで、それぞれのブロックの動きを定義していきます。それぞれの定義はいかのとおりとなります。これらのコードがすべて並んでしまうと後から見たら全くわからないようなコードになってしまいます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-22.20.45.png?resize=844%2C746&ssl=1)
あと、”やったー”のメッセージを受け取ったときにやったーのスプライトが表示されるようにしましょう。以下のような感じです。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-22.23.31.png?resize=490%2C247&ssl=1)
それでは実際にプレイしてみます。
ビデオモーションセンサーを追加
ここまでできたら、ビデオモーションセンサーを追加していきます。動きを確認するためにボールを押したら必ずゲットできるようにしていましたが、実際のゲームでは手の動きでボールを前に飛ばします。まずはビデオモーションセンサー機能を追加していきます。ペンを追加した時と同様、画面左下のプラスボタンから拡張機能の追加を行います。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-22.27.19-1-1024x635.png?resize=1024%2C635&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-22.27.54.png?resize=321%2C647&ssl=1)
ビデオモーションセンサーのブロックが追加されたことが確認できたら、ボールのコードを書き換えていきます。下図のように、元々のコードと比較して矢印の3箇所を書き換えました。
ボールの投げられる方向:スプライトのビデオの向き(手を動かす方向)
ボールの投げられる速さ:スプライトのビデオのモーション(手を動かす大きさ)
と定義し、さらにビデオモーションが30以上のときだけに反応するようにします。そうしなければ、ささいな動きでもボールが飛んで行ってしまいゲームになりません。
また「もう一回チャレンジ」を受け取った時に、初めの位置と大きさに戻るようにしておきます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-09-15.42.27.png?resize=824%2C576&ssl=1)
これで、ボールの上で手を動かすとボールが飛ぶようになりますが、下の動画のように飛んで行ったボールをさらに飛ばしてしまうことができてしまいます。
この挙動を回避するために、”投球回数”という変数を新たに加えます。そして、初期値を0として、ボールを投げると1になります。ボールが投げられる条件を「投球回数=0」とすることで、投げられたボールにモーションをかけても何もならないようになります。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-08-22.38.24.png?resize=812%2C674&ssl=1)
効果音を追加
最後に効果音を追加していきます。以下のように今回はボールを投げる時の音を「Low Whoosh」、ゲットした時の音を「Teleport3」に設定しました。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-09-0.15.55.png?resize=710%2C721&ssl=1)
次に、ボールが落ちてきてバウンドする音を追加します。どこに追加すれば良いかと考えるときに、先ほどブロック定義を行なってきたことが役に立ちます。バウンドするというブロック定義を行なっていたので、そこに音を追加するだけです。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-09-0.16.12.png?resize=259%2C321&ssl=1)
ここで追加している「TennisHit2」という効果音は「TennisHit」という元々ある効果音を少し加工しています。元々の音は以下のような波形になっています。テニスを打つ音が1回なっているので、山がひとつです。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-09-0.18.41.png?resize=1021%2C482&ssl=1)
今回はボールが2回バウンドするので、この山をコピーして後ろの方に貼り付けます。1回目と2回目のバウンドのタイミングに音をあわせるために伸びの部分を少し削除して間隔を縮めています。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/09/スクリーンショット-2021-09-09-0.18.48.png?resize=1021%2C482&ssl=1)
これで完成です。
実際にプレイしてみてください。モーションセンサーが思った通りに反応してくれず、まっすぐ投げるのに意外と苦労すると思います。
同じ空間に何匹もモンスターを配置したり、ゲットしたら次のモンスターが出てきたり、ゲットしても逃げられたり・・・いろいろ考えられますので是非工夫してみてください。
今回作ったコードはすべてこちらからも確認できます。