ScratchCatを歩かせてみよう!

今回からは実際にブロックパレットからスクリプトエリアにブロックを動かしてプログラムを組んでいきたいと思います。まずはScratchの基本となるScratchCat(スプライト)が動くスクリプトを作ってみましょう。真ん中から右端まで歩くスクリプトです。

初回ということでわかりやすいようにまずは難しい制御は使わないで作成します。制御を使った同様のプログラムについてはこちら(準備中)で解説していますので、このページを読み終わったらぜひ目を通してみてください。

ScratchCatを歩かせてみよう!

ScratchCatを歩かせるためのポイントは以下の3つです。

(1)座標を少しずつ右に動かす

(2)スプライトのコスチュームを切り替える

(3)動くごとに待ち時間を作る

(1)歩くという行為は進行方向に向かって座標を少しずつ動かすことによって表現されます。初期設定のScratchCatは右を向いているため、右に座標を少しずつ動かしていきます。

(2)ただ右に動かすだけでは歩いているように見えません。歩くときには足を曲げたり伸ばしたりしますよね?このため、”足を伸ばしている画像と曲げている画像の2種類を交互に切り替える“ことによってより歩いているように見えるようにします。

(3)上記の(1)と(2)で歩くスクリプトは完成します。ただし、コンピュータの処理速度はかなり早く、ただ(1)と(2)を実行してしまうと目で見えない速度で完了してしまいます。このため、待ち時間を作って目で見える速度に調整します。

特にこれからプログラミングをやっていく上で(3)が重要になってきます。パソコンの処理速度が早いことは計算や分析においては嬉しいことですがアニメーションやゲームを作る際には調整する必要があります。

では早速作っていきましょう。

1.プロジェクトを作成する

はじめにScratchのプロジェクトを作成します。

メインメニュー上部のツールバーにある”作る“、または”Scratchでプロジェクトを作るには“をクリックして新規プロジェクトを作成しましょう。

プロジェクトの作成ができたら、プロジェクト名を任意の名前に変更(赤枠部分)しておきましょう。今回は「ScratchCatを歩かせてみよう!」としました。

2.ScratchCatを10歩動かす

では、Scratchを10歩動かすプログラムを作ってみましょう。

まずは、ブロックパレットの「スクリプト」→「動き」の中にある”10歩動かす“をスクリプトエリアにドラッグ&ドロップでコピーしましょう。

これで10歩動かすというプログラムが完成しました。「え?」って思うほど簡単ですよね。

ただし、これだけではプログラムは動きません。なぜなら、どのタイミングでこの”10歩動かす”というプログラムが実行されるか書かれていないからです。

今度はこのプログラムにどのタイミングで実行するか(実行条件)を追加しましょう。ブロックパレットの「スクリプト」→「イベント」から”スペースキーが押されたとき“をドラッグ&ドロップでスクリプトエリアの”10歩動かす”の上に繋げてみましょう。

これで実行条件が書かれたプログラムの完成です。試しにキーボードの”スペースキー”を押してみてください。ScratchCatが右に10歩動くのがわかると思います。ちなみに、実行してみると分かりますがScratchCatの10歩はものすごく小さいです。これはScratchでは1歩が1pxになっているためです。

Point!:Scratchのステージについて

Scratchのステージは横480px(X軸) × 縦360px(Y軸)の長方形となっており、中心が(X軸0、Y軸0)となっています。このため、横軸はー240〜240、縦軸はー180〜180の値が画面に表示される領域となります。

ただし、実際に設定できることのできる値は表示領域よりも大きく設定されています。これにより、スプライトが少し隠れるまで動かすことができます。実際に設定できる範囲は横軸が−272〜271、縦軸がー215〜215となります。

3.待ち時間を作りながら連続で歩かせる。

先ほどのプログラムでは、ScratchCatは1度だけ右に10px歩きました。そしてスペースを押すごとに10歩右に動いたと思います。今度は1度スペースを押しただけで100歩(10歩×10回)動くプログラミングをしてみましょう。

まずはシンプルに考えて10歩動かすプログラミングを10個並べてみましょう。

ブロックをつなげたら実行してみましょう。

「あれ?」

となるはずです。これが最初に書いたポイントの「(3)動くごとに待ち時間を作る」ということです。上記のプログラムでも、10歩ずつ10回動いています。ただし、プログラムの処理速度が速すぎて1回10歩動くのが人の目で追えなくなっています。ScratchのFPS(Frames Per Second : フレームレート)は重たい処理ではない場合、30fps程度と言われています。

今度は10歩動かした後に1秒間の待ち時間を作るようにしましょう。ブロックパレットの「スクリプト」→「制御」の中にある”1秒待つ“を”10秒動かす”の後に入れるようにしましょう。

もう一度、スペースキーを押して実行してみましょう。

今度は1歩(10px)ずつScratchCatが右に進んでいくはずです。

4.コスチュームを変更する

ScratchCatを歩かせてみましたが、まだ歩いているというにはイマイチだと思います。イマイチな理由は、固定された画像が右に動いているだけになっているから。歩くと言えば足が組み換わりますよね。

ということで、今度はScratchCatが1歩歩くごとに足の位置が変わるようにプログラミングを変更していきましょう。足を組み替えるためにはもう1枚、変更後の画像を用意します。準備するといっても、ScratchCatの画像はいくつかパターンがあらかじめ用意されているため、自分で描く必要などはありません。

中央上部に表示されているメニューの中に「コスチューム」というのはあるので、クリックします。その後、”ライブラリーからコスチュームを選択“があるのでクリックします。

コスチュームライブラリーが表示されます。これは、Scratchがあらかじめ用意したスプライト用の画像で自由に使うことができます。カテゴリーで分類されているので目的に合ったものを見つけやすい、とても便利なライブラリーになっています。

今回はこの中からカテゴリー”動物”の中にある”cat1-b“を利用します。しっかりと歩いているように見えるかはなんとも言えないですが、ただ画像が右に動いているよりはそれっぽく見えるようになります。

先ほど「コスチューム」を開いた段階では”costume1″しかありませんでしたが、今度は”cat1-b”が表示されています。これでこの新しいコスチュームを利用できるようになっています。

次にプログラミングを変更します。

10歩動かすごとにコスチュームを変更するようなプログラムにします。「スクリプト」→「見た目」の中に”コスチュームを◯◯にする“というブロックがありますので、スクリプトエリアの”10秒動かす”の下に追加しましょう。

ブロックパレットからブロックを追加した段階では全てが”コスチュームをcat1-bにする“になっているはずです。このため、スクリプトエリアの各ブロックをクリックして2回に1回は”コスチュームをcostume1にする“に変更しましょう

さて、これで完成です。スペースキーを押して実行してみましょう。10歩ずつ、足を動かしてXcratchCat(スプライト)が右に動いていくはずです。このスプライトを動かすというのはScratchの基本となりますのでしっかりと覚えて理解しておきましょう。

完成品

今回、実際に作ったプログラムを実行すると下記になります。Scratchでは、サイト上で共有するだけでなく、このように自分のブログやサイトに埋め込んで表示させることもできます。

動かない場合はフラッシュが省電力になっている可能性がありますので画面内を1度クリックしましょう。そして、中央に表示される緑の旗をクリックしてスタートです。それでも動かない場合は、フラッシュがインストールされているかなどをご確認ください。

“スペースキー押下で右に10歩動きます。”

慣れていなくても30分から1時間程度で完成すると思いますので、まずはこのScratchCatを歩かせるプログラムを完成させて

Scratchのサイトで見たい場合、中身のプログラムを直接見たい場合、リミックスしてオリジナルにしたい場合は以下のリンクをご使用ください。

スペースキーを押すとScratchCatが右に10歩動きます。 ※参考サイトにはない、スペースキー押下時に初期位置(0,0)に戻る動作が追加されています。

今回作成したプログラミングですが、わかりやすく説明するために同じような記述を複数回書いています。

しかし、この書き方はプログラムが長くなってしまい後から見直すのが大変になるため好ましくありません。プログラミングにおいては同じような処理、つまり繰り返し行われる処理はプログラムにおいては関数で簡潔に書くことができます。

次回は、今回と同様の動きをするプログラムを見やすく書く方法について解説します。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする