目次
Scratchサイト
Scratchのサイトは以下です。
Scratchの用語
Scratch3.0で「何か作る」にあたって、知っておくと役に立つ用語とか基本的なことを確認してみます。
用語：プロジェクト
Scratch(スクラッチ)で作成したプログラムを保存する単位です。
プロジェクトにプログラムを保存することによって、プログラム途中でもデータが失われないようになるわけで、名前をつけることができます。
上記サイトでログインした画面で「作る」を選んでプロジェクトを生成します。
用語：Scratchデスクトップまたはエディター
作るから遷移すると以下のような画面を表示します。
この画面を「Scratchデスクトップ」といいます。
エディターをインストールせずにブラウザ上で使えるようにしたものです。
なので、同じ画面のハードコピーで「エディター」と書かれている場合もあります。
プログラムは、この「デスクトップ」上で作成します。
用語：ブロック
プログラミングのパーツ・・例えば。
とかみたいな部品のことは「ブロック」といいます。
一般的なプログラミング言語で「関数」とか「メソッド」にあたるものですかね。
用語：ブロックパレットとスクリプトエリア
エディタの左側の「ブロック」が並んでいる部分が「ブロックパレット」、その右の空白のエリアが「スクリプトエリア」です。
用語：スクリプト
Scratch（スクラッチ）のプログラムを「スクリプト」といいます。
スクリプトはブロックを組み合わせて作ります。
ブロックパレットは「動き」とか「見た目」のようなカテゴリに分けられていて、それぞれに関連するブロックがまとめてあります。
Scratch（スクラッチ）のスクリプトは、ブロックパレットから適切なブロックを選んで、スクリプトエリアにドラッグ＆ドロップして組み合わせて行います。
用語：ステージ
エディタの右側部分（スクリプトエリアの右側）は以下のようになってます。
上段は、デフォルトで猫の画像が表示されている白い長方形のエリアになってます。
この部分が「ステージ」です。
ステージは「背景」のことです。
用語：スプライト
そして「ステージ」の上に表示されている猫の画像を「スプライト」といいます。
ステージの下の段でスプライトの大きさを変えたり、表示非表示を切り替えたり、新しいスプライトを追加したり、ステージの背景を入れ替えたりできます。
スプライトの使い方
Scratch（スクラッチ）のプログラミングとは、ステージの上にスプライトを配置し、スプライトに対して「何をさせるか」を「ブロック」で指定するのが基本形です。
上記例ではスプライトは１つですが、ひとつのステージに「スプライト」を複数指定することも・・もちろん・・可能です。
その場合、スプライトごとにスクリプトを作成できます。
スプライトを選ぶと「スクリプトエリア」が切り替わります。
自分は「スプライト」とは、一般的なプログラミング言語における「クラス」みたいなものなんだなと考えるとしっくりきました。
スプライトの変更
猫の画像はスプライトのデフォルトです。
このままでもいいのですが、せっかくなので、スプライトを選ぶで一覧を表示して違う画像を選ぶことにしました。
今回は「Gabo」くんを選びました。
最初はこうなります。
猫は邪魔なので、猫のスプライトを選択して「ゴミ箱」アイコンを押して消します。
これで、Gaboくんだけになりました。
座標とスプライトの向き
スプライトに何かをさせる・・例えば「動かす」場合、今どの位置にいて、どこに動かすか・・は最低限必要です。
まずは座標です。
スプライトは「ステージ」上で動かすのが基本です。
ステージは、2次元（平面）上なので、位置は「X座標」と「Y座標」で表します。
Scratch（スクラッチ）の場合、X・Yともに0の状態が中心です。
そしてスプライトの向きです。
スプライトが向いている方向に動くのが基本です。
Gaboくんも、猫も、初期状態では右を向いてます。
この向きは角度で表します。
右を向いている状態は90度です。
X座標・Y座標ともに0、90度方向を向いている状態が以下です。
スプライトが動ける座標の範囲
座標の中心が0,0ですから。
右に移動するときは、X座標をプラス数字、左へはX座標をマイナス数字で与えます。
同様に、上への移動はY座標をプラス数字、下へはY座標をマイナス数字で与えます。
X座標を「-10」、Y座標を「-10」とかにすると、原点から左下に画像が移動するというわけですね。
どれくらいになればはみ出すか？を試してみると、X座標が「200」、Y座標が「130」くらいで、右上の端になりました。
つまり。
- X座標（横）が「-130 ～ 130」
- Y座標（縦）が「-200 ～ 200」
この範囲で動かせば、はみ出さないですむ・・ということです。
スプライト画像の向き（方向）
あと、画像の向きの確認です。
スプライトの向きと角度の対応は以下のとおり
- 右向きが「90度」
- 下向きが「180度」
- 左向きは「-90度」
- 上向きが「0度」
になります。
つまり、以下の状態は「0度を向いている」と考えればよいということになります。
100度とかにすると、右ちょっと斜め下を向くんだろうとか。
なんとなくわかりました。
スプライトを初期状態に戻す
座標とスプライトの向きについてわかったところで、大事なことをひとつ補足します。
プログラミングすると、試しに動かしてみて、その結果を見て修正する・・という試行錯誤を何回も繰り返すことになります。
試しに動かすと、結果ではスプライトは元の位置にはありません。
だから。
再実行するには、実行前の状態に戻す必要があります。
残念ながら、「元の状態にもどす」なんて便利な機能はありません。
元の状態に戻す処理も、自分でプログラミングしておく必要があります。
だから。
何をするにしても。
まず、最初は「初期状態に戻すスクリプト」を定義しておくことが必要です。
今回のサンプルで例をやってみます。
とりあえず、中心座標（0,0）にスプライトを右向き（90度）におくのが初期状態ですから、ブロックを以下のように配置すればいいことになります。
こうやって繋がったブロックは、どこかを押せばすべてを上から順番に処理しますので、このスクリプトをクリックして動かすと初期状態に戻せます。
スプライトの軌道に線を引く「ペン」
座標と向きがなんとなくわかり、いつでも初期状態（原点）に戻せるようになったので、いろいろ試してみます。
今回は、図形を描くつもりなので、ペンを追加します。
拡張機能を追加するボタンで、拡張機能の一覧を表示して「ペン」を選びます。
ペンを追加したら、描いたものを消せるようにしておかないだいけません。
さっこの、初期状態に戻すところに、ペンから「全部消す」追加します。
さて。
まずは、おためしにペンの「スタンプ」を使ってみます。
スタンプは画像のコピーを作ります
以下のようにブロックを選んでスクリプトエリアにドロップしていきます。
動かすきっかけは「イベント」のブロックパレットにいろいろあります。
今回は「スプライト」をマウスでクリックしたときに動くのを選んでみます。
今回のスクリプトは以下のようなシンプルなものです。
スプライト（画像）が押されたとき、画像のコピーをスタンプしてから、10歩動く。
まんま・・です。
これで画像をちょこちょこ押すと。
こういう感じになります。
ちなみに。
前にも書きましたが、10歩動かすというのは、顔のむいている方向に動くことです。
これ結構大事です。
90度（右）をむいているから、右に10歩動くわけです。
おれを向きを「0度（上向き）」に変えると同じ10歩動くでも、上に動くわけです。
こんな風に、向きを回転させて動かすだけで、ペンでいろいろな図形が描けます。
次回からしばらく、それをやってみたいと思います。
他の記事の一覧はこちらです。
さて・・。
今回はこんなところで。
ではでは。
