"BOKU"のITな日常

62歳・文系システムエンジニアの”BOKU”は日々勉強を楽しんでます

Scratch(スクラッチ)入門(2)/独特の用語・座標と向きの指定方法など

Scratch3.0で「何か作る」にあたって、知っておくと役に立つ用語とか基本的なことを確認してみます。

f:id:arakan_no_boku:20200824233948p:plain

 

基本的なことの確認から

 

Scratchのサイトは以下です。

scratch.mit.edu

上記サイトでログインした画面で「作る」を選んでプロジェクトを生成します。

f:id:arakan_no_boku:20200831213726p:plain

作るから遷移すると以下のような画面を表示します。

f:id:arakan_no_boku:20200906164111p:plain

この画面を「Scratchデスクトップ」といいます。

エディターをインストールせずにブラウザ上で使えるようにしたものです。

なので、同じ画面のハードコピーで「エディター」と書かれている場合もあります。

プログラムは、この「デスクトップ」上で作成します。


Scratch(スクラッチ)プログラミングの用語

 

Scratch(スクラッチ)のプログラミングで使う名称は独特の名前がついています。

プログラミングのパーツ・・例えば。

f:id:arakan_no_boku:20200831235103p:plain

とかみたいな部品のことは「ブロック」といいます。

自分は、「ブロック」は、一般的なプログラミング言語で「関数」とか「メソッド」にあたるものと理解しています。

 

エディタの左側の「ブロック」が並んでいる部分が「ブロックパレット」、その右の空白のエリアが「スクリプトエリア」です。

f:id:arakan_no_boku:20200831234852p:plain

Scratch(スクラッチ)のプログラムを「スクリプト」といいます。

スクリプトはブロックを組み合わせて作ります。

ブロックパレットは「動き」とか「見た目」のようなカテゴリに分けられていて、それぞれに関連するブロックがまとめてあります。

Scratch(スクラッチ)のスクリプトは、ブロックパレットから適切なブロックを選んで、スクリプトエリアにドラッグ&ドロップして組み合わせて行います。

 

エディタの右側部分(スクリプトエリアの右側)は以下のようになってます。

上段は、デフォルトで猫の画像が表示されている白い長方形のエリアになってます。

この部分が「ステージ」です。

ステージは「背景」のことです。

そして「ステージ」の上に表示されている猫の画像を「スプライト」といいます。 

f:id:arakan_no_boku:20200831235812p:plain

ステージの下の段でスプライトの大きさを変えたり、表示非表示を切り替えたり、新しいスプライトを追加したり、ステージの背景を入れ替えたりできます。

 

Scratch(スクラッチ)のプログラミングとは、ステージの上にスプライトを配置し、スプライトに対して「何をさせるか」を「ブロック」で指定するのが基本形です。

上記例ではスプライトは1つですが、ひとつのステージに「スプライト」を複数指定することも・・もちろん・・可能です。

その場合、スプライトごとにスクリプトを作成できます。

スプライトを選ぶと「スクリプトエリア」が切り替わります。

自分は「スプライト」とは、一般的なプログラミング言語における「クラス」みたいなものなんだなと考えるとしっくりきました。

 

そうしてステージ上にスプライトを配置して、スクリプトを仕込み、何かできるようにした作品のことを「プロジェクト」といいます。

保存とかは、プロジェクト単位で行います。

他にもありますが。

とりあえず、これくらいの用語を知ってれば何とかなります。

 

スプライトを変更する

 

猫の画像はスプライトのデフォルトです。

f:id:arakan_no_boku:20200831214057p:plain

このままでもいいのですが、せっかくなので、スプライトを選ぶで一覧を表示して違う画像を選ぶことにしました。

f:id:arakan_no_boku:20200827163912p:plain

今回は「Gabo」くんを選びました。

最初はこうなります。

f:id:arakan_no_boku:20200831214300p:plain

猫は邪魔なので、猫のスプライトを選択して「ゴミ箱」アイコンを押して消します。

f:id:arakan_no_boku:20200831214403p:plain

これで、Gaboくんだけになりました。

 

座標とスプライトの向きについて知っておく

 

スプライトに何かをさせる・・例えば「動かす」場合、今どの位置にいて、どこに動かすか・・は最低限必要です。

まずは座標です。

スプライトは「ステージ」上で動かすのが基本です。

ステージは、2次元(平面)上なので、位置は「X座標」と「Y座標」で表します。

Scratch(スクラッチ)の場合、X・Yともに0の状態が中心です。

そしてスプライトの向きです。

スプライトが向いている方向に動くのが基本です。

Gaboくんも、猫も、初期状態では右を向いてます。

この向きは角度で表します。

右を向いている状態は90度です。

X座標・Y座標ともに0、90度方向を向いている状態が以下です。

f:id:arakan_no_boku:20200827163650p:plain 

 

動ける座標の範囲

 

座標の中心が0,0ですから。

右に移動するときは、X座標をプラス数字、左へはX座標をマイナス数字で与えます。

同様に、上への移動はY座標をプラス数字、下へはY座標をマイナス数字で与えます。

X座標を「-10」、Y座標を「-10」とかにすると、原点から左下に画像が移動するというわけですね。

どれくらいになればはみ出すか?を試してみると、X座標が「200」、Y座標が「130」くらいで、右上の端になりました。

f:id:arakan_no_boku:20200827170422p:plain

つまり。

  • X座標(横)が「-130 ~ 130」
  • Y座標(縦)が「-200 ~ 200」

この範囲で動かせば、はみ出さないですむ・・ということです。

 

画像の向き

 

あと、画像の向きの確認です。

スプライトの向きと角度の対応は以下のとおり

  • 右向きが「90度」
  • 下向きが「180度」
  • 左向きは「-90度」
  • 上向きが「0度」

になります。

つまり、以下の状態は「0度を向いている」と考えればよいということになります。

f:id:arakan_no_boku:20200827172606p:plain

100度とかにすると、右ちょっと斜め下を向くんだろうとか。

なんとなくわかりました。

 

プログラミング時には初期状態に戻す処理は必須です

 

座標とスプライトの向きについてわかったところで、大事なことをひとつ補足します。

プログラミングすると、試しに動かしてみて、その結果を見て修正する・・という試行錯誤を何回も繰り返すことになります。

試しに動かすと、結果ではスプライトは元の位置にはありません。

だから。

再実行するには、実行前の状態に戻す必要があります。

残念ながら、「元の状態にもどす」なんて便利な機能はありません。

元の状態に戻す処理も、自分でプログラミングしておく必要があります。

だから。

何をするにしても。

まず、最初は「初期状態に戻すスクリプト」を定義しておくことが必要です。

今回のサンプルで例をやってみます。

とりあえず、中心座標(0,0)にスプライトを右向き(90度)におくのが初期状態ですから、ブロックを以下のように配置すればいいことになります。

f:id:arakan_no_boku:20200827164236p:plain

こうやって繋がったブロックは、どこかを押せばすべてを上から順番に処理しますので、このスクリプトをクリックして動かすと初期状態に戻せます。

 

線を引いてみようかな

 

座標と向きがなんとなくわかり、いつでも初期状態(原点)に戻せるようになったので、いろいろ試してみます。 

今回は、図形を描くつもりなので、ペンを追加します。

拡張機能を追加するボタンで、拡張機能の一覧を表示して「ペン」を選びます。

f:id:arakan_no_boku:20200827164832p:plain

ペンを追加したら、描いたものを消せるようにしておかないだいけません。

さっこの、初期状態に戻すところに、ペンから「全部消す」追加します。

f:id:arakan_no_boku:20200827165007p:plain

さて。

まずは、おためしにペンの「スタンプ」を使ってみます。

スタンプは画像のコピーを作ります

以下のようにブロックを選んでスクリプトエリアにドロップしていきます。

動かすきっかけは「イベント」のブロックパレットにいろいろあります。

今回は「スプライト」をマウスでクリックしたときに動くのを選んでみます。

今回のスクリプトは以下のようなシンプルなものです。

f:id:arakan_no_boku:20200827171435p:plain

スプライト(画像)が押されたとき、画像のコピーをスタンプしてから、10歩動く。

まんま・・です。

これで画像をちょこちょこ押すと。

f:id:arakan_no_boku:20200827171510p:plain

こういう感じになります。

ちなみに。

前にも書きましたが、10歩動かすというのは、顔のむいている方向に動くことです。

これ結構大事です。

90度(右)をむいているから、右に10歩動くわけです。

おれを向きを「0度(上向き)」に変えると同じ10歩動くでも、上に動くわけです。

こんな風に、向きを回転させて動かすだけで、ペンでいろいろな図形が描けます。

次回からしばらく、それをやってみたいと思います。

さて・・。

今回はこんなところで。

ではでは。