【スクラッチ】画面切り替えを再現する方法を紹介!スプライトの表示する・隠すタイミングが重要

当ページのリンクには広告が含まれています。

前回、前々回とスクラッチでスクロールゲームを作ってきました。

あわせて読みたい
【スクラッチ】初心者でも簡単なスクロールゲームの作り方を紹介!チュートリアルをうまく活用しよう! 前回の記事で、スクラッチのアカウントを作りました。 https://kmb042303.com/first_step_of_scratch/ 早速ゲームを作るニャ! しかし、最初からスクラッチのトップ画面...
あわせて読みたい
【スクラッチ】ゲームクリア&ゲームオーバー判定の作り方!「メッセージを送る」を活用しよう! 前回の記事で、猫が流れてくるフグをよけながら、ハートをとるスクロールゲームを作りました。 https://kmb042303.com/scratch_scrollgame/ 自分でゲームを作れたニャ!...

だいぶゲームらしくなってきました。

しかし、今の状態だと旗を押すとすぐにゲームが始まってしまいます。

そこで、今回はオープニング画面を作ってスタートボタンを押したら、ゲームが始まるようにしたいです。

ただし、スクラッチには画面を切り替える機能はないので、『メッセージを送る』『隠す』『表示する』などの機能を使って、画面切り替えを再現します。

この記事で作る機能は以下の2つです。

  • オープニング画面でスタートボタンを押すとゲームが始まる
  • ゲームクリア画面、ゲームオーバー画面でもう1回ボタンを押すとオープニング画面に戻る

今回目指すのは↓のような画面切り替えです。

ゲームクリアの場合

ゲームオーバーの場合

ぜひ最後までご覧ください。

記事を読んでいて、「スクラッチの使い方を調べるのは大変」「自分で子どもに教えられそうにない」と感じた方もいるかと思います。

そんな方は、「Tech Kids School【テックキッズスクール】」を試してみては?

スクラッチを教材にプログラミング思考を体系的に学べるオンラインプログラミングスクールです。

無料体験できるので、まずはやってみることをおすすめします。

詳しくは↓のボタンから

目次

オープニング画面を作るにはどうすればいいか

色々調べてみたのですが、スクラッチには、画面切り替え機能がないようです。

そのため、画面の切り替えを再現するには、表示する・隠すブロックをうまく使う必要があります。

今回は、オープニング画面→ゲーム画面→ゲームクリア/ゲームオーバー画面→オープニング画面に切り替えられるように作っていきます。

まずは、スプライトを全て隠す

オープニング画面を作ろうと思ったものの、今のままだといろいろなスプライトがいるので作りづらいです。

そこで、まず猫・ハート・フグのスプライトを隠します。

ぞれぞれのスプライトに↓のような「旗をおしたら、隠す」のプログラムを作ります。

これで、すべてのスプライトが画面から消えて、オープニング画面を作りやすくなりました。

オープニングに必要なスプライトを作る

オープニングに必要なスプライトは、以下の3点です。

  • タイトルのスプライト
  • スタートボタン
  • もう一回ボタン

それぞれ解説します。

タイトルのスプライト

オープニングに表示するゲームのタイトルのスプライトを作ります。

これまでタイトルは決めていませんでしたが、「Heart Catching Cat」にします。

ゲームクリアやゲームオーバーと同じように『描く』を押します。

T』を押して、テキストボックスを表示させましょう。

テキストボックスに『Heart Catching Cat!』と入力します。

今回は、フォントを『Sans Serif』、色はオレンジにします。

フォントと色はお好みで決めてください。

画面におさまるように大きさと位置を整えましょう。

今回の位置は『X=0、Y =28』とします。

これでタイトルは完成です。

スタートボタン

続いて、タイトルと一緒に表示するスタートボタンを作ります。

スプライトの一覧から『Button2』を選びましょう。

コスチュームタブを表示します。

T』をクリックし、テキストボックスに『START』を入力します。

文字の色は、お好みで選んでください。

今回は、黄緑色にしました。

ボタンの大きさに合わせて、文字の大きさを調整します。

また、ボタンの位置は『X=0、Y =-50』とします。

もう一回ボタン

ゲームクリア・ゲームオーバー画面に表示するもう一回ボタンを作ります。

スプライト一覧から『Button2』を選びます。

スタートボタンと色を区別するために、コスチュームタブで『Button2-b』に変えましょう。

T』をクリックした後、『もう一回』と入力します。

文字の色と大きさを調整します。

ボタンの位置は『X=0、Y =-50』とします。

オープニング用のスプライトにプログラムする

オープニング用のスプライトに、以下のプログラムを設定します。

  • タイトルのスプライト:表示・隠す
  • スタートボタン:表示・隠す・メッセージを送る
  • もう一回ボタン:表示・隠す・メッセージを送る

それぞれ解説します。

タイトルのスプライト:表示・隠す

タイトルの動きは、以下の通りです。

  • ゲーム開始時(旗をおしたとき)、表示する
  • スタートボタンを押したとき、隠す
  • もう一回ボタンをおしたとき、表示する

まずは、ゲーム開始時にタイトルを表示するプログラムです。

イベントの『旗をおしたとき』と見た目の『表示する』を組み合わせます。

続いて、スタートボタンを押したとき、タイトルを隠すプログラムを作りましょう。

イベントの『~を受け取ったとき』と『隠す』を組み合わせます。

そして、『新しいメッセージ』をクリック。

入力欄に『スタート』と入力してOKを押します。

最後に、もう一回ボタンをおしたとき、タイトルを表示するプログラムを作ります。

イベントの『~を受け取ったとき』と『表示する』を組み合わせます。

新しいメッセージ』をクリックした後、『もう一回』と入力してOK。

以上で、タイトルのプログラムは完成です。

スタートボタン:表示・隠す・メッセージを送る

スタートボタンの動きは以下の通りです。

  • 旗を押したとき、表示する
  • スタートボタンを押したとき、メッセージを送って隠す
  • もう一回ボタンを押したとき、表示する

まずは、旗を押したとき、に表示するプログラム。

イベントの『旗をおしたとき』と見た目の『表示する』を組み合わせます。

これは、タイトルのプログラムと同じです。

続いて、スタートボタンを押したとき、メッセージを送って隠すプログラムです。

イベントの『このスプライトが押されたとき』と『~を送る』、見た目の『隠す』を組み合わせます。

そして、送るメッセージは、『スタート』を選びます。

最後にもう一回ボタンを押したとき、表示するプログラムです。

~を受け取ったとき』と『表示する』を組み合わせます。

そして、『スタート』をセットします。

これで、スタートボタンのプログラムはOKです。

もう一回ボタン:表示・隠す・メッセージを送る

もう一回ボタンの動きは、以下の通りです。

  • 旗が押されたとき、隠す
  • もう一回ボタンを押したとき、メッセージを送って隠す
  • ゲームクリアを受け取ったとき、表示する
  • ゲームオーバーを受け取ったとき、表示する

上から順に作ります。

イベントの『旗が押されたとき』と見た目の『隠す』を組み合わせます。

これで1つ目はOK。

続いて、もう一回ボタンを押したときのプログラムです。

イベントの『このスプライトを押したとき』と『~を送る』、見た目の『隠す』を組み合わせます。

スタートボタンのプログラムをコピーしてもOKです。

送るメッセージは、『もう一回』を選びます。

最後にゲームクリア、ゲームオーバーを受け取ったときのプログラムです。

イベントの『~を受け取ったとき』と見た目の『表示する』を組み合わせます。

メッセージは、『ゲームクリア』をセット。

このプログラムを複製して、『ゲームオーバー』をセットします。

これで、もう一回ボタンのプログラムは完成です。

その他のスプライトのプログラムを修正する

修正が必要なスプライトのプログラムは以下の通りです。

  • ハート
  • ふぐ
  • ゲームクリア
  • ゲームオーバー

それぞれ解説します。

まずは、表示するプログラムを修正します。

旗が押されたとき』を消して、『~を受け取ったとき』+『表示する』に変え、『スタート!と2秒言う』の上にのせます。

メッセージは『スタート』を選択。

続いて、ポイントを増減するプログラムを修正します。

旗を押したとき』を『~を受け取ったとき』にして、『スタート』をセットします。

最後に『~を受け取ったとき』+『隠す』を作り、『もう一回』をセットしましょう。

これで、猫のプログラムの修正はOKです。

ハート

次は、ハートのプログラムを修正します。

ハートはスタートを受け取った後、猫が「スタート!」と言い終わってから表示させたいです。

なので、まずは『旗を押したとき』を消します。

そして、『~を受け取ったとき』+『~秒待つ』+『表示する』を組み合わせ、『ずっと』の上にのせます。

メッセージには『スタート』、『~秒待つ』には『3』を入力しましょう。

最後に『~を受け取ったとき』+『隠す』を作り、『もう一回』をセットしてハートのプログラムの修正は完了です。

ふぐ

ふぐには、ハートと同じ修正をします。

『旗を押したとき』を消し、『~を受け取ったとき』+『~秒待つ』+『表示する』を組み合わせ、『ずっと』の上にのせます。

そして、『スタート』と『3秒』をセット。

『~を受け取ったとき』+『隠す』を作り、『もう一回』をセットしてふぐのプログラムの修正は完了です。

ゲームクリア

ゲームクリアには、もう一回ボタンを押したときに隠すプログラムを追加します。

↓のように『~を受け取ったとき』と『隠す』を組み合わせ、『もう一回』をセットします。

ゲームオーバー

ゲームオーバーにも、ゲームクリアと同様にもう一回ボタンを押したときに隠すプログラムを追加します。

これで、プログラムの修正は完了です。

スクラッチで画面切り替えを再現するには、スプライトの表示する・隠すをうまく使おう!(まとめ)

スクラッチで画面切り替えを再現する方法を紹介しました。

『表示する』と『隠す』をタイミングよく使うことで、画面切り替えをすることができます。

今回やってみて思ったのが、「画面切り替えを設計のときに考えておけばよかった」ということです。

結構修正がめんどくさかったので、、、、。

いずれ、このゲームの作り方を整理して、まとめられればと思います。

今回の記事を参考に、画面切り替えに挑戦してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次