Scratchはアメリカの大学、MIT（マサチューセッツ工科大学）メディアラボで開発されたビジュアルプログラミング言語です。
はじめに
ゲーム性を高くする為には、「背景」画像を切り替え、状況を変えることで臨場感を出したいものです。同じ「背景」を固定で表示する場合は、差し替えるだけでよいのですが、「ボタンを押したとき」、「スプライトが右にいったとき」、「スコアが増えたとき」などなど、条件分岐を使って、「背景」切り替えるためにはプログラムが必要です。
とはいっても、「条件」と「背景」をプログラムすれば簡単に切り替えることはできます。ここでは、「背景」を変更し簡単な加工と、キーボードのカーソルを左右に押したときに切り替わるプログラムを作っていきたと思います。
また「背景」の切り替えや変更については、こちらの記事もご覧ください。
今回作成するプログラム（の旗をクリックして動作を確認することができます）
背景を追加
背景の初期設定は真っ白で、何もないものです。
スクラッチ には、「背景」として使える画像がいくつかあり、その中の画像を変更していきたいと思います。画面右下の「背景を選ぶ」というところをクリックします。
「背景」となる画像の一覧が表示されます。お好みの「背景」で結構ですが、解説を進める上で、ここではその中から「Blue Sky」をクリックで選択してください。
「Blue Sky」をクリックで選択すると、「背景」の画像一覧の画面から最初の画面に切り替わります。切り替わったタイミングで、先ほどクリックで選択した「Blue Sky」の背景に変更されます。
ずっとこの「背景」を表示するプログラムであれば、これで「背景」画像の操作終了です。次は引き続き、この「背景」を加工する操作をしていきます。
背景を加工
画面左上に「コード」「背景」「音」とあるタブの中から「背景」をクリックで選択します。
クリックすると、「Blue Sky」の「背景」が表示された画面に切り替わります。
「Blue Sky」の背景の右上側に「丸い赤」を配置し、「太陽」っぽいものを追加していきたいと思います。
「ツール」を選択できるところがあるので、その中から「○」をクリックで選択します。クリックで選択できたら紫色でハイライトされます。
「Blue Sky」の画像の右上あたりをドラッグして、丸い画像を追加します。
追加したあとも角をドラッグすることで大きさを変更できます。
このままでは、紫の丸のままなので、赤色に変更していきます。
「塗りつぶし」という紫色のところがあるので、そこをクリックします。
色を調整するスライダーが表示されるので、赤色になるようにスライドしてください。
枠線が紫色で残ったままになるので、枠線の色を透明にします。
「枠線」をクリックし、スライダーが表示された中の左したの「赤い斜線」のアイコンをクリックします。
これで「枠線」は透明になり、背景色の赤色のみになります。
さらに背景を追加
さらに切り替える背景を追加していきたいと思います。左下に「背景を選ぶ」があるのでクリックします。
最初に「Blue Sky」を選択したときと同じく、「背景」として利用できる画像一覧が表示されます。
お好みのもので結構ですが、ここでは「Desert」をクリックで選択します。
画面が切り替わり、左の背景一覧の3番目に選択した「Desert」が追加され、選択されている状態なので、真ん中にも同じ「背景」が表示されています。
同じ操作で、もう一つ「背景」を追加します。ここでも何でも良いのですが、「Underwater2」を選択します。
これで切り替えたい「背景」を設定することができたので、プログラムを追加し、切り替えられるようにしていきたいと思います。
プログラムする対象を選択する
左上の「コード」というタブをクリックします。
4つめの「背景」が反映された状態で最初の画面に遷移します。
画面右下を見ると、「ステージ」のところが紫色でハイライトされています。
これは現在、「ステージ」が選択されている状態ということになります。
今回は「ネコ」のスプライト に対して「背景」を切り替えるプログラムを追加しますので、「ネコ」のスプライト をクリックで選択します。選択できたら、「ネコ」のスプライト が紫色にハイライトされます。
背景を切り替える
いよいよ「背景」を切り替えるプログラムを作っていきます。
先ず起点となる「が押されたとき」のコードブロックをドラッグします。
固定の「背景」を切り替えるには、すぐしたに「背景を〜にする」をドラッグし、「が押されたとき」のコードブロックの下にドラッグします。
画像では、「Underwater 2」になっているので、クリックして選択できる「背景」の一覧を表示させます。ここでは最初の画像として「Blue Sky」をクリックで選択します。
をクリックすると、「赤い丸」を追加した「Blue Sky」の「背景」に切り替わります。
続いて、キーボードのカーソルの左右を押すと「背景」が切り替わるプログラムを作っていきます。
まず、「ずっと」のブロックをドラッグし、ブロックの下にくっつけます。
「ずっと」の中に「もし〜なら」を2つドラッグして入れます。
「もし〜なら」の「〜」の中に条件となるブロック、「スペースが押されたら」をドラッグして入れます。（どちらにも入れてください）
「スペース」の部分を左右それぞれになるようにします。
それぞれ、「左向き矢印」「右向き矢印」をクリックで選択してください。
これで「背景」を切り替える条件については完了です。
今度は、その条件の場合に表示したい「背景」を「もし〜なら」の中に入れていきます。
それぞれの「もし〜なら」の中に「背景を〜にする」をドラッグして入れてください。
画像では、「Underwater 2」になっているので、ここでは「左向き矢印」の方を「Desert」に変更します。
「右向き矢印」の方は「Underwater 2」にします。
なっていればそのままで大丈夫です。
これで条件とその条件に対応する処理（「背景」の切り替え」）が完了しました。
動作確認
きちんと「背景」の切り替えができるか動作確認していきます。
をクリックします。
このタイミングでは、途中で動作確認しているので、「Blue Sky」のままになります。
キーボードのカーソルの左を押してください。「Desert」の背景に切り替わると思います。
今度は、キーボードのカーソルの右を押してください。「Underwater 2」に切り替わると思います。
まとめ
- 背景の画像を追加する
- 背景を切り替えたい条件「もし〜なら」を入れる
- 「もし〜なら」に「背景」を切り替えたい条件を入れる
- その条件になったときに表示したい「背景」を入れる
今回は、最初に使いたい「背景」をセットしましたが、もちろんあとから「背景」を選択しなおすこともできます。またご自身で作成した画像を「背景」としてアップロードし使用することもできます。
条件には、「背景」だけを入れましたが、「ネコ」のスプライト の動きも入れることで、ゲームのように横スクロールで「背景」が切り替えることもできるので、アクションゲームのようなものを作ることもできますので、活用していきましょう。
