基礎から学ぶスクラッチ入門!<第2回>「コスチューム」「スクリプト」「スプライト」を理解しよう

基礎から学ぶスクラッチ第2回です!

前回の「3つの基本パターン」は覚えていますでしょうか?

今回の内容で出てくるプログラムは全てこの3つのパターンに当てはまります。

そこの部分も意識しながらチャレンジ頂ければと思います。

 

今回は「コスチューム」「スクリプト」「スプライト」の3つについて説明します。

スクラッチでプログラミングを進めるうえで、この3つの言葉は良く出てきます。

言葉が少し独特ですので、弊社の生徒の人もよく間違える箇所で、ここを理解しているかどうかで今後の理解度が大きく変わります。

 

1つずつ着実に理解していきましょう

1.コスチュームとは

コスチュームとはその名の通り、ネコなどのキャラクターの見た目を指す言葉となります。

画面の上部に「コスチューム」のタブがありますが、このタブをクリックすると、コスチュームを見ることができます。

コスチュームは複数持っておくことができ、画面には選ばれているコスチュームの見た目で表示される事になります。

なお、複数同時に表示する事ができませんので注意してください。

コスチュームの追加は、画面左下のボタンより可能となります。

追加は、スクラッチに予め登録されている画像を選ぶ方法、自分で描く方法、画像をアップロードする方法があります。

2.スクリプトとは

スクリプト(script)とは、単純にプログラムの事を指します。

「じゃあ、プログラムって言えばいいじゃん」と思いますが、厳密にはプログラムとスクリプトの意味は異なるため、使い分けられています。

ただ、スクラッチ内では「プログラム」という言葉は使われず「スクリプト」と記載されていますので、スクリプト=プログラムと理解しておいてください。

次に説明する「スプライト」と名前が似ていますが、全く別物なので気を付けてください。

ちなみに、命令ブロックで「スクリプト」が使われているのはこれだけとなります。

この命令ブロックの意味は、このブロックがくっついているスクリプトのプログラムを停止します。

.スプライトとは

スプライト(Sprite)とは英語で「妖精」などの意味ですが、スクラッチでは「プロジェクト内でアクションを行うオブジェクト」と定義されています。

イマイチよく分かりませんよね。(プログラミングとかIT系の説明では、このように単語の意味を分かってないと理解しにくい事がよくあります・・・)

簡単に言うと、スクラッチで動くキャラクターを「スプライト」と言います。

そのキャラクターには、スクリプト(プログラム)やコスチューム、音が含まれており、これらを含めてスプライトとなります。

スプライト、スクリプト、コスチュームの関連イメージは下記のようになります。

スプライトの中に、スクリプト(プログラム)、コスチューム、音が存在するということですね

4.実際に作って理解しよう

ここまで、スクリプト、コスチューム、スプライトを説明しましたが、実際にプログラムを作ってみるとよりイメージが明確になります。

下記動きのプログラムを作ってみます。

 

(a)スプライトの準備

ここでは、キャラクターが2つ存在しており、それぞれ別の動きをする事になります。

つまり、ネコとクマはそれぞれ別のスプライトという事になります。

 

スクラッチを立ち上げたらネコがすでに存在していますので、クマを追加しましょう。

画面右下のスプライトを選ぶから、Bear-walkingを選びます。

 

(b)ネコのスプライト

準備ができたら、まずネコのスクリプト(プログラム)から作っていきましょう。

ネコのスプライトを選ぶためには、画面右下のスプライトより、ネコをクリックしてください。

このようにネコがフォーカスされていればOKです。

ネコを動かす時に歩いているアニメーションにするために、コスチュームを変えながら動かします。

 

先ほど説明したように、スプライト毎にコスチュームを持っています。

ネコのコスチュームを確認してみましょう。

画面上の「コスチューム」のタブをクリックすると、そのスプライトが持っているコスチュームを閲覧する事ができます。

デフォルトのネコは2つコスチュームを持っている事が分かりますよね。


ではネコのプログラムを作っていきましょう。

①緑の旗をクリックするとスタートします。

②ネコを右に動かすので右(90度)の向けます。

③ネコを右に動かすため、コスチュームを変えて動かす命令を繰り返します。

④ネコが歩き終わったら、次はクマを動かします。このメッセージという機能を使うと、他のスプライトのプログラムを動かす事ができます。(詳しくは4日目で説明します。)

 

なお、これは順次処理と反復処理の組み合わせですね。

 

(c)クマのスプライト

次はクマのスプライトを選びましょう。

先ほどのネコと同じように、クマのスプライトをクリックします。

先ほど選んだクマのスプライトは、あらかじめ歩くアニメーション用にコスチュームが用意されています。

コスチュームタブより確認してみましょう。

ではクマのプログラムを作っていきましょう。

①先ほどのネコがメッセージを送っているので、それを受け取ってプログラムを動かします。

②右に動かすので右(90度)の向けます。

③クマを右に動かすため、コスチュームを変えて動かす命令を繰り返します。

ほとんどネコのスクリプトと同じですね。

 

 

(d)完成です!!

これで完成です。

実際に動かしてネコが動いた後にクマが動いている事を確認してみましょう。

実際にプログラムを作って、スプライト、コスチューム、スクリプトのイメージが理解できたでしょうか?

先ほど説明したように、スプライトにスクリプトとコスチュームが含まれているイメージを忘れないようにしてください。

 

5.まとめ

おつかれさまでした!

今回は「スプライト」「コスチューム」「スクリプト」について学んでいただきました。

今後も必ず使う内容ですので、理解がいまいち出来ていなければ、プログラムを改造しながら色々動かしてみてください。

次回はスプライトを動かすための必要となる、向きと座標について学んでいただきます。

向きと座標を理解すると、スプライトを自在に操る事ができます。

次回の投稿をお待ちください!

6.今回のプログラミング上達のアドバイス

プログラミングを習得するにあたって、「目標」というものが大切となります。

弊社プログラミング教室の生徒さんを見ていても、「○○が作りたい!!」という子の方が、積極的にプログラミングにチャレンジして上達する傾向があります。

とは言っても、特に作りたいものはないけど、プログラミングに興味があるという場合もありますよね。

そういう人は、他人のプログラムに興味を持ってみるというのも良いでしょう。

スクラッチでは世界中の人が作ったプログラムが公開されており、気軽に動かしたりプログラムを閲覧したり、コピーして自分で改造する事ができるようになっています。

興味がある物を探して、「こういうのを作ってみたい」と思えることが大切ですので、一度見てみてください。

スクラッチ公式サイト