Scratch(スクラッチ)でゲームを作ろう!: もぐらハイタッチ

伊東 けいこ

前回「矢印キーで上下左右にネコを歩かせる」プログラムを作成したので、今回はこのネコを使ってシンプルなゲームを作ってみましょう。懐かしいゲームの ”もぐらたたき” を元に、色々な位置に現れるもぐらを叩く……のは可哀想なので、触るともぐらが挨拶するゲームにしました。
Scratchの基本的な使い方、これまでの記事についてはこちらからご参照ください。

Scratch(スクラッチ)でゲームを作ろう!: もぐらハイタッチ

今回のポイント

【1】どんなゲームを作る?登場するものと必要なプログラムを考えてみよう

矢印キーで上下左右に進むネコ(もしくは好きなキャラクター)、このプログラムを利用してどんなゲームを作ることができるでしょうか?

  • 何かに出会う、つかまえる
  • 何かを選ぶ、開ける、調べる
  • 何かから逃げる、避ける
  • 迷路
  • 動いた軌跡で絵を描く

様々なアイデアがでてくると思いますが、まずはシンプルなものから始めたいと思います。
今回は「もぐらたたき」に似た「もぐらハイタッチ」を作ります。

  • (1)もぐらがどこかに現れる
  • (2)ネコがもぐらに触れるともぐらが挨拶(ハイタッチ)をする

この動きを繰り返すゲームです。「もぐら」と「ネコ」にどんなプログラムが必要かを書き出してみましょう。

【もぐら】

  • 画面内のどこかに現れる
  • ネコに触られると動きを変える(ハイタッチする)
  • 消える (→ 最初に戻って繰り返す)

【ネコ】

  • 十字矢印キーで上下左右に操作できる
  • もぐらに触れると少し動きを止める

ではもぐらから見ていきましょう。

【2】もぐらのスプライトを作ろう

ネコのスプライトとは別に、新しいスプライトを追加してもぐらのスプライトを作ります。

パラパラ漫画の要領でアニメーションを作ろう

アニメーションを作ろう

もぐらのスプライトにはパラパラ漫画のように動きが少しずつ違う5枚のコスチュームを作成します。スプライトの編集の仕方は こちらの記事 を参照してください。

もぐらの5コマ

ここでは5枚のコスチュームを作成しました。もぐらが出てくる位置がそれぞれのコスチュームでずれないように気をつけます。画面の真ん中に中心点が表示されているのでそちらを参照しつつ、絵を描きます。一番大きな絵から作っていくと作りやすいです。

もぐらの動き

ハイタッチしている4枚目を最初に作ってコピーし、もぐらの位置を下げて動きを変えてアレンジすることで3枚目、2枚目を作りました。

【3】もぐらのプログラムを作ろう

もぐらのスプライトを選んで、プログラムを作成します。ひとまずできあがったプログラムを見ながら、全体の流れを確認してみましょう。
まず、もぐらの出てくる穴がステージ上に現れ、もしそこにネコが触れたら、もぐらが顔を出して引っ込み、また別の場所に土が出現するというプログラムです。

このプログラムの ❶ ❷ の部分を詳しく解説しましょう。

何かに「触れる」と何かが起きる、アクションを設定しよう

ネコが触れたときのプログラムです。もぐらは最初は土だけが表示されているのですが、ネコが触れると出てきて両手を上げてまた土の中に戻ります。

[もし に触れたなら] のブロックを使って、何かに触った時のアクションを設定します。

[もし ネコ に触れたなら] の一連のプログラムがこちらです。

もぐらのプログラム(部分)

もぐらのスプライトのコスチュームを順番に表示することで、パラパラ漫画の要領で動いているように見せています。コスチュームとコスチュームの合間の時間 [ 秒待つ] を変えることで、それらしく動いて見えるタイミングになるように調整しましょう。もぐらが土の中に戻った後は、幽霊の効果を使ってフェードアウトで消えるようにしています。

❷ – 1「乱数」を使って、色々な場所にもぐらが現れるようにしよう

ネコに触れた時のプログラムができたので、次はもぐらが色々な場所に現れるようにしましょう。何が出てくるかわからない設定にしたい時、ランダムな選択肢の中から何かを選びたい時に便利なのが「乱数」です。

何かの「位置」は x, y 座標で指定できます。x座標の数値、y座標の数値を乱数で指定することで「予測できないどこか」をランダムに指定することが可能です。
Scratchのステージサイズはx方向(水平方向)が -240 から 240、 y方向(上下方向)が-180 から 180 です。

座標軸

もぐらのサイズを考慮して、x座標は -170から170、 y座標は -120から120の範囲で何かの数字が当てはまるように位置をプログラミングします。

同じ形をしたブロックは、ブロックの中にブロックを入れ込むことができます。

プログラムの組み合わせ

[x座標を 、y座標を にする] ブロックの — 部分に [ から までの乱数] ブロックを近づけると中にはめ込むことができることがわかります。

ランダムな位置指定

これで、ステージ内の「どこか」にランダムにもぐらを表示させる準備ができました。

❷ – 2「乱数」の応用:「右向き」「左向き」どちらかをランダムに表示させよう

左向きに作られているもぐらを「右か左」のどちらかの向きでランダムに表示させたい、そんな時はどうしたらよいでしょうか?
向きを指定するのは [ 度に向ける] ブロックです。
ここでは現在の向きに 0 度足す(現在の向きから変わらない)、もしくは180度足す(現在とは反対側を向く)という2択を 0 もしくは 1 の乱数を当てはめることで実現しました。

右か左かをプログラム

「向き」に足す「0から1の乱数 * 180」の部分は、
乱数が「0」のときは、0×180=0なので、「0」
乱数が「1」のときは、1×180=180なので「180」
となります。

このようにして、最初に出てくる位置と向きを指定し、その後はネコに触れるともぐらが出てきて消え、どこかに表れるのを繰り返すプログラムができました。もう一度、もぐらのプログラムの完成形を次の図で確認してください。

もぐらのプログラム再掲

【4】ネコのプログラムを作ろう

ネコのスプライトを選んで、次の図の通りのプログラムを作成してください。前回の十字矢印キーを押して動くものとほぼ同じです。
前回のプログラムと違うのは、ネコの最初に表れる位置を少し左寄りにしているのと、もぐらに触れた時に少しだけ動きを止めるようにプログラムを追加している点です。

ネコのプログラム

もぐら、ネコのプログラミングができたら背景画像を追加しましょう。草原を置いてできあがった「もぐらハイタッチ」がこちらです。

「もぐらハイタッチ」 実際のプログラム

【5】今回のまとめ

今回は

  • 触ることで変化するアニメーション
  • 乱数を使ったランダムな位置を指定するプログラム

を作成してもぐらたたきに似た簡単なゲームを作りました。シチュエーションやキャラクターを工夫することで様々なアレンジができますので、ぜひ自分だけの楽しいゲームを作ってみてください。

伊東 けいこ
Web制作者&ライター。2017年よりオランダ在住。 サイト構築の傍らオランダにおける教育&テクノロジー、社会&テクノロジー周辺を追っています。 https://chari-kamo.com

コメント

コメントを書く