【Scratchで簡単なゲーム作成編①】プレイモードとセレクトモードの画面の切替

前回

より紹介したゲームのアルゴリズムに習って、そのプログラミングで使われているテクニックを紐解きながらじっくり解説して行きます。

Pスクール厳選・優良な教材プログラムの紹介コーナー① 〜 Pixel Town Remaster編

プログラミング学習の上で優良だと感じたサンプルプログラムを紹介をしています。

この記事では、

以前に紹介した記事 | コスチュームを変えてスプライトのアニメーション効果を付ける

のサンプルブログラムであったタコのスプライトが画面を泳ぎ回るだけのゲームを改良していきます。

【Scratch入門】コスチュームを変えてスプライトのアニメーション効果を付ける

Scratchでスプライトを移動させる時にコスチューム番号をずらしてアニメーションで動かす方法を解説します。

先に完成品を紹介すると、以下のようなプログラムに仕上がるまでをこの記事で説明します。

【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選

画面の切り替え

まず初めに今回のプログラムの目玉である

画面の切り替え

についてのお話をしましょう。
ゲームをスタートした時に、タコの食べる

エサおきば

としてグレーの四角に囲ったスプライト1つ置いてあると思います。

このエサおきばをクリックすると、食べ物を選択する画面に切り替わります。

選べるエサとして、りんごとタコ(メキシコのソウルフードの方です)の2つがありますので、どちらかをクリックしてもらうと、エサとして選択されて、再びタコの泳ぐ画面へと戻ります。

このテクニックは、プレー画面とセレクト画面の切り替えとして、いろいろなゲームの中でも良く見かけます。では、スクラッチでは、どのようなプログラムで画面を切り替えているのかを具体的に手を動かしながらやってみます。

【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選

材料の準備

スクラッチのプログラミングのやり方は人それぞれですが、材料集めを先にやっておいてから、後でまとめてブロックを組み合わせるという順番でやっていくと、個々の作業に集中しやすいと思います。というわけで、まずはスプライトと背景の素材集めから行います。

スプライト

まずはスプライトから準備していきましょう。

元にしていたプログラム

までは、

たこ

のスプライトだけしかなかったわけですが、そこから

おきばしょ

、

りんご

、

タコ

、

たべものロゴ

の4つを追加しました。

このスプライトの各コスチュームは以下のように設定しています。スクラッチのサンプルページなどでダウンロードできるコスチュームを使用していますが、簡単なコスチュームであればお絵かきツールで描きます。

背景

背景は画面右下の

ステージ

から設定できます。

背景は1つのプログラムにおいて、1つの画面しか持てませんが、背景に指定できる画像は何枚も登録できます。今回は2つの画像・

うみのなか

と

えらぶ

を追加して使います。

ちなみに、

えらぶ

の画像は、ただの四角い図形です。

変数

プログラミングブロックで使う変数も先に素材として与えておきます。

ちなみにこれらの変数は、

開く/閉じる

            タコのじかん:
    たこのスプライトの動きの速さを調整する値です。
たて:
    たこのスプライトのいる位置の縦軸の値です。
よこ:
    たこのスプライトのいる位置の横軸の値です。
おきば１:
    おきばしょのスプライトの通し番号です。
おくばしょは:
    食べものをおく場所の通し番号を記録します。
たべもの？:
    選択した食べものの名前を記録します。

の役割で利用します。

【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選

ブロックコーディング

材料が揃ったら、次にブロックを組み立てていきます。

おきばしょスプライト

まずは、お好きなところに

おきばしょ

スプライトを配置させます。

スプライトが画面に表示されないときは非表示になっているので、

表示する

のアイコンを切り替えてみましょう。
次に、

おきばしょ

スプライトのブロックを作っていきます。

黒く囲った１の部分では

🚩

が押されてゲームがスタートしたときの条件を設定します。いわゆる初期化という処理です。
イベントメッセージ

プレイモード

を他のスクリプトへ送ることで、ゲームの開始のタイミングを知らせています。
新しいイベントメッセージを作成するには、

[イベント] > [~を送る] のブロックの上で右クリック > [新しいメッセージ]

から

新しいメッセージダイアログ

で新規に作成します。

また最初のスプライトのコスチュームは

おきば

(番号１)に設定します。
黒く囲った２では、背景がどちらなのかを調べて、

うみのなか

であればスプライトを表示、

えらぶ

が背景のときは隠すように指定します。
黒く囲った３は、スプライトにマウスを乗せたときを知らせるために、少し明るさを明るくして強調するような効果を与えています。
次に

このスプライトが押されたとき

イベントを設定します。これはスプライトがクリックされたときの処理の定義です。

変数

おくばしょは

を1にします。これは、あとでプログラムを拡張して、食べ物の置き場を示す通し番号1,2,3,...と増やすために追加したブロックですので、今は1しかありません。
次の条件分岐では、

コスチュームの番号 = 1

とあります。
コスチューム番号１の

おきば

だったら、

たべものモード

というイベントメッセージを送り、セレクト画面へ変えるようにイベントを送りだし、それ以外のコスチューム(りんごかタコ)になっていたら、既に設定されている食べ物を捨てて、

おきば

コスチュームに戻しています。

背景

次は背景のプログラミングブロックを作成します。

🚩

が押されてゲームが開始したときは、背景は

うみのなか

から始めるように設定しましょう。

たべものモード

のメッセージイベントを受け取ったら、背景を

えらぶ

の画面に変えて、セレクト画面にします。
ブロックは以下のようになるでしょう。

先ほどの

おきばしょ

スプライトで設定したイベントのブロックを試しにクリックしてみると、背景の画像が切り替わっていたら成功です。

セレクト画面を作る

無地の背景のままで食べもののセレクト画面を作成します。食べものやロゴは好きな位置に配置します。
スプライトが表示されていない場合には、

表示する

のボタンを切り替えてみると良いでしょう。

ますは

たべものロゴ

のブロックの中身から作成します。

たべものモード

メッセージを受け取ったときにはセレクト画面になるので、このスプライトを表示します。反対に

プレイモード

メッセージを受け取ったときにはゲーム画面なので隠します。

食べ物(りんごとタコ)は、ゲームの処理に重要な役割をもちますので、初期化・ループ処理を設定する必要があります。
まずは

🚩

を押してゲームが開始されたときに、

背景の名前 = うみのなか

であった場合には隠します。そうでない場合(=セレクト画面)であったら表示します。
また、食べ物のスプライトにマウスを乗せたら明るくなるように強調効果も設定しておきます。
以下、食べ物のスプライトの共通のブロックになります。

スプライトをクリックしたときのイベントを

このスプライトが押されたとき

イベントブロックから設定していきます。
まずりんごのスプライトから設定すると、りんごのスプライトがクリックされたとき、変数

たべもの？

の値を

りんご

にして、りんごが選択されたことを記録します。
そして、(番号1の)

おきばしょ

に置く食べ物が選ばれたことを教える

たべもの１

イベントメッセージを送ります。またゲーム画面に戻るために

プレイモード

イベントメッセージを併せて送ります。

タコの場合も上のブロックとほぼ内容は一緒です。

プレイモード

イベントでゲーム画面に戻れるように、

背景

のプログラミングブロックへ

プレイモードを受け取ったとき

を使って、背景を

うみのなか

に変えます。

おきばしょ

スプライトは食べ物が選ばれたイベントを受け取った時に、その食べ物のコスチュームに変わる必要があります。
先程の

たべもの１

イベントを受け取ったときに、

おくばしょは

で食べ物の置き場所番号を確認し、

たべもの？

の値で選択された食べ物のコスチュームに変えます。

これで、ようやくゲーム画面とセレクト画面の切り替えができました。

たこの動きの修正

ゲーム画面とセレクト画面の切り替えで、セレクト画面表示中はたこの動きを止めて置かないと、ゲームを再開した時にいきなり違う位置にたこのスプライトが移動してしまって変な感じがすることでしょう。
画面が切り替わるイベントで、たこの動きを止めたり、再開させたりできるようにブロックを以下のように改造します。

黒く囲った１は、

たこ

のスプライトが

おきばしょ

に触れたときに起こる

さわった1

イベントメッセージを送っています。これでたこが食べ物に当たったときに、ムシャムシャと食べる処理を行わせることができます。

おきばしょ

のスプライトに、

さわった１を受け取ったとき

ブロックを追加して、なにか食べ物が置かれている状態(

コスチュームの番号 = 1

でない)なら、ムシャムシャというセリフのあとで、コスチュームを

おきば

に戻します。

以上の流れで、ゲーム画面とセレクト画面の切り替えができるプログラムの出来上がりです。

【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選

まとめ

画面の切り替えができると、グッとゲームらしくなってきます。
次回も、

Pixel Town Remaster

の中で使われいているプログラミングテクニックを使って、このプログラムをさらに進化させて行こうと思います。