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


※ 当ページには【広告/PR】を含む場合があります。
2020/09/02
Pスクール厳選・優良な教材プログラムの紹介コーナー① 〜 Pixel Town Remaster編
【Scratchで簡単なゲーム作成編②】スコアボードの作成と得点の表示

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

合同会社タコスキングダム|タコキンのPスクール
Pスクール厳選・優良な教材プログラムの紹介コーナー① 〜 Pixel Town Remaster編

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

この記事では、
以前に紹介した記事 | コスチュームを変えてスプライトのアニメーション効果を付けるのサンプルブログラムであったタコのスプライトが画面を泳ぎ回るだけのゲームを改良していきます。

合同会社タコスキングダム|タコキンのPスクール
【Scratch入門】コスチュームを変えてスプライトのアニメーション効果を付ける

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

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


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選

画面の切り替え

まず初めに今回のプログラムの目玉である画面の切り替えについてのお話をしましょう。

ゲームをスタートした時に、タコの食べる
エサおきばとしてグレーの四角に囲ったスプライト1つ置いてあると思います。

合同会社タコスキングダム|タコキンのPスクール

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

合同会社タコスキングダム|タコキンのPスクール

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

合同会社タコスキングダム|タコキンのPスクール

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


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選

材料の準備

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

スプライト

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

元にしていたプログラムまでは、たこのスプライトだけしかなかったわけですが、そこからおきばしょりんごタコたべものロゴの4つを追加しました。

合同会社タコスキングダム|タコキンのPスクール

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

合同会社タコスキングダム|タコキンのPスクール

背景

背景は画面右下のステージから設定できます。

合同会社タコスキングダム|タコキンのPスクール

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

合同会社タコスキングダム|タコキンのPスクール

ちなみに、
えらぶの画像は、ただの四角い図形です。

変数

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

合同会社タコスキングダム|タコキンのPスクール

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

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


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選

ブロックコーディング

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

おきばしょスプライト

まずは、お好きなところにおきばしょスプライトを配置させます。

合同会社タコスキングダム|タコキンのPスクール

スプライトが画面に表示されないときは非表示になっているので、
表示するのアイコンを切り替えてみましょう。

次に、
おきばしょスプライトのブロックを作っていきます。

合同会社タコスキングダム|タコキンのPスクール

黒く囲った1の部分では
🚩が押されてゲームがスタートしたときの条件を設定します。いわゆる初期化という処理です。

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

新しいイベントメッセージを作成するには、
[イベント] > [~を送る] のブロックの上で右クリック > [新しいメッセージ]から新しいメッセージダイアログで新規に作成します。

合同会社タコスキングダム|タコキンのPスクール

また最初のスプライトのコスチュームは
おきば(番号1)に設定します。

黒く囲った2では、背景がどちらなのかを調べて、
うみのなかであればスプライトを表示、えらぶが背景のときは隠すように指定します。

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

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

合同会社タコスキングダム|タコキンのPスクール

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

次の条件分岐では、
コスチュームの番号 = 1とあります。

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

背景

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

🚩が押されてゲームが開始したときは、背景はうみのなかから始めるように設定しましょう。

たべものモードのメッセージイベントを受け取ったら、背景をえらぶの画面に変えて、セレクト画面にします。

ブロックは以下のようになるでしょう。

合同会社タコスキングダム|タコキンのPスクール

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

合同会社タコスキングダム|タコキンのPスクール

セレクト画面を作る

無地の背景のままで食べもののセレクト画面を作成します。食べものやロゴは好きな位置に配置します。

スプライトが表示されていない場合には、
表示するのボタンを切り替えてみると良いでしょう。

合同会社タコスキングダム|タコキンのPスクール

ますは
たべものロゴのブロックの中身から作成します。

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

合同会社タコスキングダム|タコキンのPスクール

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

まずは
🚩を押してゲームが開始されたときに、背景の名前 = うみのなかであった場合には隠します。そうでない場合(=セレクト画面)であったら表示します。

また、食べ物のスプライトにマウスを乗せたら明るくなるように強調効果も設定しておきます。

以下、食べ物のスプライトの共通のブロックになります。

合同会社タコスキングダム|タコキンのPスクール

合同会社タコスキングダム|タコキンのPスクール

スプライトをクリックしたときのイベントを
このスプライトが押されたときイベントブロックから設定していきます。

まずりんごのスプライトから設定すると、りんごのスプライトがクリックされたとき、変数
たべもの?の値をりんごにして、りんごが選択されたことを記録します。

そして、(番号1の)
おきばしょに置く食べ物が選ばれたことを教えるたべもの1イベントメッセージを送ります。またゲーム画面に戻るためにプレイモードイベントメッセージを併せて送ります。

合同会社タコスキングダム|タコキンのPスクール

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

合同会社タコスキングダム|タコキンのPスクール

プレイモードイベントでゲーム画面に戻れるように、背景のプログラミングブロックへプレイモードを受け取ったときを使って、背景をうみのなかに変えます。

合同会社タコスキングダム|タコキンのPスクール

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

先程の
たべもの1イベントを受け取ったときに、おくばしょはで食べ物の置き場所番号を確認し、たべもの?の値で選択された食べ物のコスチュームに変えます。

合同会社タコスキングダム|タコキンのPスクール

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

たこの動きの修正

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

画面が切り替わるイベントで、たこの動きを止めたり、再開させたりできるようにブロックを以下のように改造します。

合同会社タコスキングダム|タコキンのPスクール

黒く囲った1は、
たこのスプライトがおきばしょに触れたときに起こるさわった1イベントメッセージを送っています。これでたこが食べ物に当たったときに、ムシャムシャと食べる処理を行わせることができます。

おきばしょのスプライトに、さわった1を受け取ったときブロックを追加して、なにか食べ物が置かれている状態(コスチュームの番号 = 1でない)なら、ムシャムシャというセリフのあとで、コスチュームをおきばに戻します。

合同会社タコスキングダム|タコキンのPスクール

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


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選

まとめ

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

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