Scratchの基本操作

Scratchでリストを使いセリフを出し分ける。敵のスプライトを追加する

Scratchはアメリカの大学、MIT(マサチューセッツ工科大学)メディアラボで開発されたビジュアルプログラミング言語です。

前回の続き

ここまで作ってきたプログラムにさらに敵キャラクターとなるスプライトを追加し、もう少しゲームっぽくしていきたいと思います。

ここまでは、ネコの「スプライトが」Butterfly 2(蝶)の「スプライト」に触れるとスコアが入り、スコアが加算されるようしてきました。ここではさらにButterfly 2(蝶)の「スプライト」を追加し、ネコの「スプライト」がButterfly 2(蝶)に触れたらスコアが減るプログラムを追加していきます。

また、ここでは「リスト」というものを使っていきます。「リスト」は簡単に説明すると、データを格納する場所です。 「リスト」は単にデータを格納しておくだけでなく、動的に「追加」や「削除」「表示」することができます。今回は先ず「リスト」に事前にデータを格納しておき、「Butterfly 2(蝶)に触れた場合」と「Snake(ヘビ)に触れた場合」でネコの「スプライト」から出る吹き出しのセリフを「リスト」からデータを取り出して、吹き出しのセリフの表示を切り替えていきたいと思います。

▼ 今回作成するプログラム(の旗をクリックして動作を確認することができます)

ヘビのスプライトを追加する

画面右下の「スプライトと背景」のところから、「スプライトを選ぶ」をクリックします。

画面が遷移し、「スプライト」のリストが表示されます。その中から「動物」をクリックすると、動物に関するスプライトが表示されるので、Snake(ヘビ)の「スプライト」を見つけクリックで選択します。
(下記画像を参考にしてください。)

「スプライトと背景」に3つめの「スプライト」として、Snake(ヘビ)の「スプライト」が追加されているか確認します。あれば、「Snake」の「スプライト」をクリックで選択します。

Snake(ヘビ)の「スプライト」を選択したら、ブロックの画面を見ていただき、「コスチューム」のタブをクリックします。Snake(ヘビ)のコスチュームを確認したり、編集できる画面に遷移します。

このSnake(ヘビ)の「スプライト」には3つのコスチュームがあることがわかりまます。

ヘビ(Snake)のスプライトのアニメーションを作る

ここでは、すでに作成している蝶のスプライトで作ったアニメーションと同じものを作ります。位置やスピードについては、Snake(ヘビ)のスプライト用に変えたいと思います。

まずブロックを組むので、Butterfly 2(蝶)の「スプライト」を見ながらつくっていっても良いです。左上のコードのタブをクリックし、コスチュームからコードブロックの画面に切り替え、確認しながら作っていただいても大丈夫です。

面倒だと思う方は、次に紹介するコピーする方法に進んでください。

同じものをつくるのは面倒だと思う場合は、Butterfly 2(蝶)の「スプライト」からコードブロックをコピーしてSnake(ヘビ)の「スプライト」にコピーして使いまわしたいと思います。

先ずコピーする側となるButterfly 2(蝶)の「スプライト」をクリックします。

蝶のブロックのかたまりは2つあります。どちらからでも構いませんが、ここでは大きい方からコピーしていきます。

かたまりの先頭のブロックをクリックし、キーボードの操作でコピーをします。
コピーの方法はお使いのOSによって異なります。

  • Window:「Ctrl」を押しながら「C」を押す
  • Mac:「command」を押しながら「C」を押す

明らかにコピーできているという表示は出てこないので、操作ができたら次に進みます。

今度はコピーしたものをSnake(ヘビ)の「スプライト」にもっていきたいので、Sake(ヘビ)の「スプライト」をクリックします。

コピーしたブロックをペースト(貼り付け)します。場所はどこでも構いません。
ペースト(貼り付け)も方法はOSによって異なります。

  • Windows:「Ctrl」を押しながら「v」を押す
  • Mac」「command」を押しながら「v」を押す

もしペースト(貼り付け)ができなかった場合、コピーができてないかと思うので、Butterfly 2(蝶)の「スプライト」に戻り、改めてコピーをしてください。

できたら小さい方のかたまりのブロックも同じくコピーしていきます。
Butterfly 2(蝶)の「スプライト」をクリックします。

ここも同じく先頭のブロックをクリックして、コピーをします。

  • Windows:「Ctrl」を押しながら「c」を押す
  • Mac:「command」を押しながら「c」を押す

できたら再度Snake(ヘビ)の「スプライト」に戻ります。

同じくペースト(貼り付け)します。

  • Windows:「Ctrl」を押しながら「v」を押す
  • Mac:「command」を押しながら「v」を押す

ここまでできたら、一旦ステージを見て現在のSnake(ヘビ)の「スプライト」の位置を確認したいと思います。

現在はButterfly 2(蝶)の「スプライト」のブロックをそのまま持ってきただけなので、Butterfly 2(蝶)の「スプライト」と同じ位置に表示されています。

ブロックがすべて組み終わったら、下記の4箇所のパラメータを変更します。
もし、パラメータが下記と同じであれば変更の必要はありません。

  • の旗が押されたとき」のところから3つ下にある「スピード〜にする」を「20」に変更
  • 「大きさを〜%にする」を「25」に変更
  • 「x座標を〜、y座標を〜にする」をそれぞれ「120」、「-100」に変更
  • 「捕まったを受け取ったとき」のすぐ下の「スピードを〜ずつ変える」を「5」に変更

ネコのスプライトのアニメーションを変更する

Snake(ヘビ)のスプライトを追加したことで、ネコの「スプライト」も表示位置や、ジャンプの速さも変えて、お互いの「スプライト」が触れたり、避けたりできるようにしていきたい思います。

ネコのコードブロックを操作していくので、ネコの「スプライト」をクリックで選択します。

の旗が押されたとき」のすぐ下に「y座標を〜にする」をドラッグで入れ、数値を「-70」に変更します。

そこから下の方のブロックにあるジャンプの速さと高さも変更していきます。
下記の4つブロックの数値も変更します。図も参照してください。

  • 「〜秒待つ」の2つを「0.05」に変更
  • 上の「y座標を〜ずつ変える」を「15」に変更
  • 下の「y座標を〜ずつ変える」を「-15」に変更

ネコのスプライトにリストを追加する

いよいよ「リスト」を追加していきます。冒頭で記載したとおり、「リスト」はデータを格納するもので、今回は吹き出しの内容をデータとして「リスト」へ格納したいと思います。
そのままネコの「スプライト」が選択された状態で、ブロックの「変数」のところにある「リストを作る」をクリックします。

リストをクリックすると、モーダルの画面が表示されます。
リストの名前は任意ですが、ここでは「セリフ」と入力しています。
次にこの「リスト」は、ネコの「スプライト」でしか使わないので、「このスプライトのみ」の方にチェックを入れます。

完了したら、最後に「OK」をクリックし「リスト」を作成します。

「リスト」が作成されると、先ほど「リストを作る」とクリックしたところの下に「リスト」に関するブロックが追加されています。またステージ内にも「リスト」が表示されます。

ステージに表示されたリストを操作して、「リスト」内にデータを格納します。今回は、ネコのセリフを2つ入れて、状況によってそのセリフを出し分けていきたいと思います。

ステージのリストの左下の「+」を2回クリックします。

2つ空の「リスト」が追加されますので、それぞれ下記のセリフを入力します。

  1. 捕まえた
  2. かまれた

もし間違って「+」をクリックしてしまっても、「リスト」の右側にある「×」マークをクリックすると削除することができます。

「リスト」にデータを追加できたら、表示から消したいのでブロックの中の「セリフ」のチェックをクリックで外します。

外れるとステージの「リスト」は非表示になります。非表示になっているだけで、「リスト」にデータは格納された状態なので大丈夫です。

今度は「リスト」に設定したセリフを設定していきます。

まず、「捕まえた!と1秒言う」となっているところの「捕まえた!」を「リスト」に変更します。
「リスト」のブロックの中から、「〜の〜番目」のブロックをドラッグし、「捕まえた!」と手入力しているところに入れます。次に最初の「〜」は「セリフ」を選択し、さらに次の「〜」は「1」と入力します。
これで「リスト」の1番に入れた「捕まえた!」の吹き出しがでるようになりました。

次にSnake(ヘビ)の「スプライト」に触れた場合のアニメーションを追加していきたいと思います。

この部分だけのブロックを作ってから、大きなかたまりのブロックにいれたいので、「もし〜なら」のブロックを空いているスペースにドラッグします。

「〜に触れた」を空いているスペースにドラッグします。ドラッグできたら、「もし〜なら」の「〜」の中に「〜に触れた」を入れます。
「〜に触れた」の「〜」には、「Snake」になるよう選択してください。

今度は、「もし〜なら」の処理の中に3つのブロックを入れていきます。
先ずブロックの中から、「〜と〜秒言う」のブロックを「もしSnakeに触れたなら」の中にドラッグします。

「〜の〜番目」のブロックを「〜」ととなっているところにドラッグし、「2」番目に変更します。これで「リスト」の2番目にいれたデータがセリフとして表示されます。
セリフの長さも1秒にします。(セリフの長さはそのままでも大丈夫です。)

「〜を〜ずつ変える」を「もしSnakeに触れたなら」の中にドラッグします。
ヘビ(Snake)に触れるとスコアを減らしたいので「-1」に変更します。

これでSnake(ヘビ)に触れた場合のプログラムができたので、「ずっと」の中、蝶に触れたときのブロックの下に入れます。
わかりにくいかもしれませんが、画像を参照して入れてください。

動作を確認する

動作確認をステージでみてみましょう。

Snake(ヘビ)に触れると「かまれた」と吹き出しがでて、蝶に触れると「捕まえた」とでるかと思います。「リスト」に入れたセリフが条件によって切り替わっていることがわかるかと思います。
以前作成したスコアについてもSnake(ヘビ)に触れると減っていきます。

まとめ

  • Snake(ヘビ)の「スプライト」を追加し、Butterfly 2(蝶)の「スプライト」と同じコードブロックを組む
  • Snake(ヘビ)のコードブロックの数値を変更する
  • ネコの「スプライト」の位置とジャンプを調整する
  • データをリストを追加・格納し、条件に応じてデータを出し分ける

今回は「リスト」に固定のデータとして吹き出しのセリフを格納しましたが、動的にデータを追加したり、削除することができます。また、どのようなデータが含まれているのかも調べることができます。うまく作り込んでいけば、現在の状態をデータとして格納したり消したりすることで、さらにゲーム性を高めることができるかと思います。

Snake(ヘビ)の「スプライト」を追加したことで、ゲームっぽくなってきたかと思いますが、ゲームとしては延々と続く状態です。次回はゲームオーバーの条件を追加し、ゲームオーバーの場合は背景も差し替え、ゲーム自体が止まるようにしていきたいと思います。

次の記事:Scratchで切り替える背景画像を設定し、切り替えの条件を追加する