スクラッチでスプラトゥーン風ゲームの作り方

中級

今回つくるゲーム

難易度3 out of 5 stars

今回はペンキを発射して、画面を塗りつぶし、その塗りつぶした面積を競う、スプラトゥーン風ゲームの作り方を解説します。ゲーム制作を通してsin/cosの使い方やスタンプの使い方などが学習できます。

※スクラッチ初心者の方は、まずこちらの、
もぐらたたきゲームの作り方(初級)
からチャレンジしてみてください。

準備

まずは、こちらにアクセスして、リミックスをしてください。
スプラトゥーン風ビンゴおじさん(素材)

ゲーム作りに必要なスプライトが一通り用意されています。

スクラッチでスプラトゥーン風ゲームの作り方



リミックスの方法が分からないという方はこちらの記事を参考にしてください。

おばさん(敵)の動きを作る

まずはおばさん(敵)の動きから作っていきます。
おばさんは画面右下に配置します。

スクラッチでスプラトゥーン風ゲームの作り方
スクラッチでスプラトゥーン風ゲームの作り方

次に、おばさんの可動範囲を決めていきます。スクラッチの向きの考え方はこのようになっています。

スクラッチでスプラトゥーン風ゲームの作り方

つまり、今回のおばさんの可動範囲は0〜90になります。
おばさんは敵なので、この0〜90に自動的にランダムに向くようにします。

スクラッチでスプラトゥーン風ゲームの作り方

次に、ペンキを発射するのですが、発射するには発射する方向を決めなければなりません。

ターゲットを設置する

発射する方向を定めるためにおばさんが向いている先にターゲットを設置します。まずはおばさんのスプライトのコードを以下のように追記します。おばさんの向きおばさんのパワーという変数を追加します。おばさんの向きはターゲットの位置を決めるのにつかいます。おばさんのパワーはペンキを飛ばす距離に影響してきます。そして最後におばさん発射のメッセージを送ります。

スクラッチでスプラトゥーン風ゲームの作り方



ここからターゲット2の位置の指定に入っていきます。
ここで使用するのが、sin(サイン)とcos(コサイン)です。下図のように長さ(正確には斜辺の長さ)に対して向きのsinをかけるとタテ、向きのcosをかけるとヨコの長さになります。

スクラッチでスプラトゥーン風ゲームの作り方

これを今回に当てはめると、おばさんからターゲットまでの距離を150とすると、下図のようになり、ターゲットの座標は
X:225-(150×おばさんの向きのcos)
Y:-165+(150×おばさんの向きのsin)
となります。

スクラッチでスプラトゥーン風ゲームの作り方

これをターゲット2のスプライトに記述していきます。動画のように、おばさんにターゲットがついてこれば成功です。

スクラッチでスプラトゥーン風ゲームの作り方

ペンキを発射する

さて、ここまでできたらペンキ発射のコードを書いておばさんの動きは終了です。まず、おばさん発射のメッセージを受け取った時のペンキ2の動きを作っていきます。下図のように、おばさん発射のメッセージを受け取った時、まずはおばさんにいきます。そして、そこからターゲット2にむけて進んでいくのですが、進む距離をおばさんのパワーで調整しています。
また、最初は”つぶ”で発射されて、到達した時にペンキが広がるようにします。またペンキの広がりを3種類用意してランダムで出現するようにしています。

スクラッチでスプラトゥーン風ゲームの作り方

この状態で、緑の旗をおすとどうなるでしょうか。下の動画のように、発射するごとに一つ前についたペンキが消えてします。

これを解消するためには、ひとつはクローンを使うという選択肢が考えられます。ペンキのクローンを作成して、到達地点に配置するという考え方です。しかし、クローンを作りすぎるとデータが重くなってしまいますし、今回のゲームではペンキは表示されるだけでアクションは一切ないので、そのような時はスタンプという便利なツールがあります。

スタンプ機能を使うには拡張機能を活用します。画面左下の+ボタンを押し、拡張機能にある”ペン”を追加します。

スクラッチでスプラトゥーン風ゲームの作り方
スクラッチでスプラトゥーン風ゲームの作り方

そうすると、以下のようにペンのツールが追加されます。上から二つ目に”スタンプ”のツールがあるのでこちらを使用していきます。スタンプはそこに存在したスプライトを残像のように残すことができます。

スクラッチでスプラトゥーン風ゲームの作り方

さきほど作ったペンキ2のコードの最後に”スタンプ”を追加するだけです。旗が押されたときにスタンプを消すのも忘れないようにしましょう。

スクラッチでスプラトゥーン風ゲームの作り方

これで、画面にペンキがどんどん塗られていくことを表現することができます。

スタンプ機能はスクラッチでゲームを作るときにはよく使います。たとえばビームで壁を削っていくときなどもスタンプ機能を使います。

おじさんの動きをつくる

次におじさんの動きを作っていきます。おじさんはおばさん(敵)と違って、ペンキを発射する向きや強さを自分で調整できるようにします。
まずはペンキを発射する向きを決めるコードを作っていきます。

スクラッチでスプラトゥーン風ゲームの作り方

画面左下におじさんを配置し、右矢印と左矢印で発射する向きを調整します。そして、おばさんの時と同様に、”おじさんの向き”という変数を作り、この向きにターゲットを配置していきます。

スクラッチでスプラトゥーン風ゲームの作り方

ターゲット配置の前に、ペンキを発射する時の強さを設定していきます。今回はスペースキーを押したときにペンキが発射されるようにして、スペースキーを押している長さでペンキが飛ぶ距離が変わるようにします。ここでは”タイマー”の機能を使っていきます。下図のようにスペースキーが押されたときにタイマーをリセットして”スペースキーが押されたでないまで待つ”という指示を加えることによって、スペースキーが押されている間タイマーが進むことになります。そしておじさんのパワーという変数をつくり、タイマーの値を代入します。例えば1.5秒間スペースキーを押し続けるとおじさんのパワーは1.5になります。

スクラッチでスプラトゥーン風ゲームの作り方

そして、ゲームっぽくするためにすこしギミックを加えます。スペースキーを教えている間だけ、色の効果を加えると、パワーが溜まっているような表現になります。

スクラッチでスプラトゥーン風ゲームの作り方

タイマーおじさんのパワーの値を表示して、緑の旗を押してみてください。スペースを押すとタイマーがリセットされ、スペースキーから指を話すとおじさんのパワーにタイマーの数値が代入されているのがわかります。また、スペースが押されている間は少し色が赤味がかり、パワーが溜まっている印象になります。

ターゲットを設置する

次にターゲットを配置していきます。こちらはおばさん(敵)で行なった内容と同じです。
ターゲット1に以下のコードを書いていきます。おじさんは左下にいるため、向きが90〜180になってしまうため、180からおじさんの向きを引いた角度のcos/sinを適用します。

スクラッチでスプラトゥーン風ゲームの作り方
スクラッチでスプラトゥーン風ゲームの作り方

ペンキを発射する

次にペンキを発射していきます。ここの考え方はおばさんの時と同様です。ターゲット1の方向に向かっておじさんのパワーに応じて”つぶ”が発射され、到達した場所でスタンプが押されます。

スクラッチでスプラトゥーン風ゲームの作り方

ここまでできたら緑の旗を押してプレイしてみてください。お互いペンキを打ち合って、敵のペンキの上に自分のペンキを重ねると、ペンキが上塗りされるようになります。

スコアをつける

次にスコアをつけていきます。まず、ゲーム自体に制限時間をつけましょう。制限時間のコードはステージに書いていきます。

スクラッチでスプラトゥーン風ゲームの作り方

そして、ゲーム終了を受け取ったときに、おじさんとおばさんの動きを止めます。

スクラッチでスプラトゥーン風ゲームの作り方
スクラッチでスプラトゥーン風ゲームの作り方

次に”おじさんスコア””おばさんスコア”の変数を作ります。以下のようにステージに記載したコードに変更を加えていきましょう。

スクラッチでスプラトゥーン風ゲームの作り方

ここから、スコアをつけていくのですが、赤色五角形の”判定”というスプライトにコードを書いていきます。
仕組みとしてはこの赤色五角形が画面中を移動して、紫色に触れたらおじさんのスコアにして、緑色に触れたらおばさんのスコアにします。

スクラッチでスプラトゥーン風ゲームの作り方

下の動画では102対98でおじさんの勝ちとなります。

最後の微調整

お気づきかもしれませんが、このままのコードだと、ゲーム終了後もおじさんはペンキを発射することができてしまいます。それは”ゲーム終了を受け取ったとき”にスクリプトは止まりますが、スペースを押すと”スペースを押したとき”の指示が生きてしまうためです。それを解消するために”スペースキー無効”という変数を作って、ゲーム終了時にスペースキーの操作が無効になるようにします。

スクラッチでスプラトゥーン風ゲームの作り方

以上で完成です。

完成版のコードはこちらになります

スプラトゥーン風ビンゴおじさんゲーム