※ 当ページには【広告/PR】を含む場合があります。
2020/09/02
Pスクール厳選・優良な教材プログラムの紹介コーナー① 〜 Pixel Town Remaster編
【Scratchで簡単なゲーム作成編②】スコアボードの作成と得点の表示
前回より紹介したゲームのアルゴリズムに習って、そのプログラミングで使われているテクニックを紐解きながらじっくり解説して行きます。Pスクール厳選・優良な教材プログラムの紹介コーナー① 〜 Pixel Town Remaster編プログラミング学習の上で優良だと感じたサンプルプログラムを紹介をしています。
この記事では、以前に紹介した記事 | コスチュームを変えてスプライトのアニメーション効果を付けるのサンプルブログラムであったタコのスプライトが画面を泳ぎ回るだけのゲームを改良していきます。【Scratch入門】コスチュームを変えてスプライトのアニメーション効果を付けるScratchでスプライトを移動させる時にコスチューム番号をずらしてアニメーションで動かす方法を解説します。
先に完成品を紹介すると、以下のようなプログラムに仕上がるまでをこの記事で説明します。
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選
画面の切り替え
まず初めに今回のプログラムの目玉である画面の切り替え
についてのお話をしましょう。ゲームをスタートした時に、タコの食べるエサおきば
としてグレーの四角に囲ったスプライト1つ置いてあると思います。このエサおきばをクリックすると、食べ物を選択する画面に切り替わります。選べるエサとして、りんごとタコ(メキシコのソウルフードの方です)の2つがありますので、どちらかをクリックしてもらうと、エサとして選択されて、再びタコの泳ぐ画面へと戻ります。このテクニックは、プレー画面とセレクト画面の切り替えとして、いろいろなゲームの中でも良く見かけます。では、スクラッチでは、どのようなプログラムで画面を切り替えているのかを具体的に手を動かしながらやってみます。
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選
材料の準備
スクラッチのプログラミングのやり方は人それぞれですが、材料集めを先にやっておいてから、後でまとめてブロックを組み合わせるという順番でやっていくと、個々の作業に集中しやすいと思います。というわけで、まずはスプライトと背景の素材集めから行います。スプライト
まずはスプライトから準備していきましょう。元にしていたプログラムまでは、たこ
のスプライトだけしかなかったわけですが、そこからおきばしょ
、りんご
、タコ
、たべものロゴ
の4つを追加しました。このスプライトの各コスチュームは以下のように設定しています。スクラッチのサンプルページなどでダウンロードできるコスチュームを使用していますが、簡単なコスチュームであればお絵かきツールで描きます。背景
背景は画面右下のステージ
から設定できます。背景は1つのプログラムにおいて、1つの画面しか持てませんが、背景に指定できる画像は何枚も登録できます。今回は2つの画像・うみのなか
とえらぶ
を追加して使います。ちなみに、えらぶ
の画像は、ただの四角い図形です。変数
プログラミングブロックで使う変数も先に素材として与えておきます。ちなみにこれらの変数は、の役割で利用します。
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選
ブロックコーディング
材料が揃ったら、次にブロックを組み立てていきます。おきばしょスプライト
まずは、お好きなところにおきばしょ
スプライトを配置させます。スプライトが画面に表示されないときは非表示になっているので、表示する
のアイコンを切り替えてみましょう。次に、おきばしょ
スプライトのブロックを作っていきます。黒く囲った1の部分では🚩
が押されてゲームがスタートしたときの条件を設定します。いわゆる初期化という処理です。イベントメッセージプレイモード
を他のスクリプトへ送ることで、ゲームの開始のタイミングを知らせています。新しいイベントメッセージを作成するには、[イベント] > [~を送る] のブロックの上で右クリック > [新しいメッセージ]
から新しいメッセージダイアログ
で新規に作成します。また最初のスプライトのコスチュームはおきば
(番号1)に設定します。黒く囲った2では、背景がどちらなのかを調べて、うみのなか
であればスプライトを表示、えらぶ
が背景のときは隠すように指定します。黒く囲った3は、スプライトにマウスを乗せたときを知らせるために、少し明るさを明るくして強調するような効果を与えています。次にこのスプライトが押されたとき
イベントを設定します。これはスプライトがクリックされたときの処理の定義です。変数おくばしょは
を1にします。これは、あとでプログラムを拡張して、食べ物の置き場を示す通し番号1,2,3,...と増やすために追加したブロックですので、今は1しかありません。次の条件分岐では、コスチュームの番号 = 1
とあります。コスチューム番号1のおきば
だったら、たべものモード
というイベントメッセージを送り、セレクト画面へ変えるようにイベントを送りだし、それ以外のコスチューム(りんごかタコ)になっていたら、既に設定されている食べ物を捨てて、おきば
コスチュームに戻しています。背景
次は背景のプログラミングブロックを作成します。🚩
が押されてゲームが開始したときは、背景はうみのなか
から始めるように設定しましょう。たべものモード
のメッセージイベントを受け取ったら、背景をえらぶ
の画面に変えて、セレクト画面にします。ブロックは以下のようになるでしょう。先ほどのおきばしょ
スプライトで設定したイベントのブロックを試しにクリックしてみると、背景の画像が切り替わっていたら成功です。セレクト画面を作る
無地の背景のままで食べもののセレクト画面を作成します。食べものやロゴは好きな位置に配置します。スプライトが表示されていない場合には、表示する
のボタンを切り替えてみると良いでしょう。ますはたべものロゴ
のブロックの中身から作成します。たべものモード
メッセージを受け取ったときにはセレクト画面になるので、このスプライトを表示します。反対にプレイモード
メッセージを受け取ったときにはゲーム画面なので隠します。食べ物(りんごとタコ)は、ゲームの処理に重要な役割をもちますので、初期化・ループ処理を設定する必要があります。まずは🚩
を押してゲームが開始されたときに、背景の名前 = うみのなか
であった場合には隠します。そうでない場合(=セレクト画面)であったら表示します。また、食べ物のスプライトにマウスを乗せたら明るくなるように強調効果も設定しておきます。以下、食べ物のスプライトの共通のブロックになります。スプライトをクリックしたときのイベントをこのスプライトが押されたとき
イベントブロックから設定していきます。まずりんごのスプライトから設定すると、りんごのスプライトがクリックされたとき、変数たべもの?
の値をりんご
にして、りんごが選択されたことを記録します。そして、(番号1の)おきばしょ
に置く食べ物が選ばれたことを教えるたべもの1
イベントメッセージを送ります。またゲーム画面に戻るためにプレイモード
イベントメッセージを併せて送ります。タコの場合も上のブロックとほぼ内容は一緒です。プレイモード
イベントでゲーム画面に戻れるように、背景
のプログラミングブロックへプレイモードを受け取ったとき
を使って、背景をうみのなか
に変えます。おきばしょ
スプライトは食べ物が選ばれたイベントを受け取った時に、その食べ物のコスチュームに変わる必要があります。先程のたべもの1
イベントを受け取ったときに、おくばしょは
で食べ物の置き場所番号を確認し、たべもの?
の値で選択された食べ物のコスチュームに変えます。これで、ようやくゲーム画面とセレクト画面の切り替えができました。たこの動きの修正
ゲーム画面とセレクト画面の切り替えで、セレクト画面表示中はたこの動きを止めて置かないと、ゲームを再開した時にいきなり違う位置にたこのスプライトが移動してしまって変な感じがすることでしょう。画面が切り替わるイベントで、たこの動きを止めたり、再開させたりできるようにブロックを以下のように改造します。黒く囲った1は、たこ
のスプライトがおきばしょ
に触れたときに起こるさわった1
イベントメッセージを送っています。これでたこが食べ物に当たったときに、ムシャムシャと食べる処理を行わせることができます。おきばしょ
のスプライトに、さわった1を受け取ったとき
ブロックを追加して、なにか食べ物が置かれている状態(コスチュームの番号 = 1
でない)なら、ムシャムシャというセリフのあとで、コスチュームをおきば
に戻します。以上の流れで、ゲーム画面とセレクト画面の切り替えができるプログラムの出来上がりです。
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選
まとめ
画面の切り替えができると、グッとゲームらしくなってきます。次回も、Pixel Town Remasterの中で使われいているプログラミングテクニックを使って、このプログラムをさらに進化させて行こうと思います。