こどもから目指すゲーム開発者 #2『Scratchで絵を動かす』

こんにちは、KTです。
この回ではScratchですごく簡単なゲームを作ります。

前回までのおさらい

前回はゲームの完成形の絵と何がどう動くかを書き出しました。
下に置いておきますね。

あとはこれをScratch上で作るだけです。

ではScratchを起動しましょう。

https://scratch.mit.edu/
上をクリックして『作る』または『作ってみよう』をタップかクリックします。

下の画面が出たと思います。これをScratch（スクラッチ）と言います。

絵を配置しよう

最初に絵の部品を配置しましょう。

まずは猫のいるところが真っ白なので後ろに絵をつけます。
下の赤色の矢印がさしているところをタップかクリックしてください。

下の画面が出てくると思うので「Blue Sky」をえらびましょう。

猫の後ろの絵が変わりました。

次に絵の部品を置いていきますが、その前に猫を左下にうごかしましょう。

猫をタップかクリックしながら左下へうごかしてください。

猫がうごきました。

次にのういている床とゴールをおきます。

下の赤色の矢印がさしているところをタップかクリックしてください。

ういている床として下の赤色の矢印がさしている「Cloud」をえらびましょう。

すると下のようにくもがでます。
くもをタップかクリックをしながら猫のすぐ右上あたりまでうごかしましょう。

同じように２回くりかえし「Cloud」をえらんでくもを３つに増やしてみましょう。

また、くもをタップかクリックしながらうごかして完成形の絵のように並べましょう。

できましたか？それではゴールをおきます。

下の赤色の矢印のさした「Green Flag」をさがしてタップかクリックしてください。

みどり色のはたがでるのでタップかクリックで右上のくもの上までうごかしましょう。

できましたか？見た目はゲームみたいになりましたね。

座標について

Scratch（スクラッチ）では絵のある位置を数学の座標（ざひょう）を使ってあらわしています。座標については中学校で学ぶことになると思います。

下に学習指導要領の座標の部分を載せておきます。
※むずかしいと思うので読まなくても大丈夫です。

小学校算数科では，第４学年で，座標の意味につながる平面上や空間にあるもの
の位置の表し方について学習している。また，変化の様子を折れ線グラフに表すことを第４学年から学んでいるが，二つの数の組を用いて平面上の位置を表すという座標の概念に基づいたものではない。

　中学校数学科では，これらの学習の上に立って，座標を理解し，数量の関係を座標を用いてグラフに表す。

　平面上にある点の位置は，一般に，交わる２本の数直線を軸として，その点に二つの数の組を対応させることによって表現できる。これが平面における座標の概念である。中学校数学科では，座標の意味として，原点Ｏで直交した２本の数直線によって平面上の点が一意的に表されることを理解する。

文部科学省 中学校学習指導要領（平成 29 年告示）解説 数学編 ８５頁 座標の意味

Scratchでの座標の話をします。

下の図を見てください。Scratchの絵は右のｘ,ｙの図によって位置を決めています。

位置はｘのめもりとｙのめもりであらわします。

下の図で真ん中の点を原点O（げんてんオー）といいます。
また原点Oを通る横（よこ）の線をｘ軸（エックスじく）、縦（たて）の線をｙ軸（ワイじく）といいます。

下の図ではそれぞれの猫は「ｘがいくつでｙがいくつ」の場所にいるでしょうか？

答えは下のようになります。

このように絵の位置はｘとｙの数字であらわすことができます。
また、ｘの値をｘ座標（エックスざひょう）、ｙの値をｙ座標（ワイざひょう）といいます。

次に絵をうごかすにはｘとｙの値をどう変えればいいでしょうか？

下の図を見てください。
「ｘが１、ｙが１」の猫を「ｘが２、ｙが１」にすると猫が右へ移動しました。
ｘ座標を１ずつ変えると猫が右へ動くということです。
これこそが絵が動く仕組みになります。
猫を左へ動かしたい場合は「ｘが１、ｙが１」の猫を「ｘが０、ｙが１」にする。
つまり、ｘ座標をー１ずつ変えると猫が左へ動くということになります。

もちろん「ｘが１、ｙが１」の猫を「ｘが１、ｙが２」にすると猫は上に移動します。
また、「ｘが１、ｙが２」を「ｘが１、ｙが１」に戻せば下に移動します。
猫が上に移動して下に移動する、つまりジャンプに見えますね！

このようにｘ座標とｙ座標を増やしたり減らしたりして猫を動かします。

猫をうごかしてみよう

いよいよプログラミングをやります。

下のプログラミングのところをつかいます。

プログラミングで作るものをおさらいしましょう。

まずは「・さいしょはスタート地点にいる」を作ります。

下の赤色の矢印がさしている猫をタップかクリックしてください。

すると、青色の矢印がさしているところが猫になります。

これは「猫をうごかすプログラミングをします」という意味です。

下の赤色の矢印がさしている「イベント」をタップかクリックしてください。

「イベント」というのは「スタートを押すとはじまる」や「キーを押すとはじまる」のようにプログラムがはじまる、君の操作（そうさ）になります。
※「キー」とはパソコンのキーボードの文字を打つボタンのことです。

• 「君がスタートボタンを押したとき」猫がスタート地点にもどる
• 「君が←キーを押したとき」猫が左に動く
• 「君が→キーを押したとき」猫が右に動く
• 「君が↑キーを押したとき」猫がジャンプする

今から「君がスタートボタンを押したとき」猫がスタート地点にもどるを作ります。

下のように赤色のまるの「🏴が押されたとき」をタップかクリックしながら赤色の矢印のさしている赤色のまるまでうごかしましょう。
※まちがえたときはブロックをマウスの右クリックして削除してください。

できましたか？「🏴が押されたとき」の🏴とは下の「動きをみるスタートのボタン」のことです。

ブロックはこのように左の一覧（いちらん）からひっぱって真ん中のプログラミングの場所におきます。

次に下のように「X座標を〇、Y座標を〇にする」ブロックをひっぱり「🏴が押されたとき」にくっつけます。

今の猫の絵がある位置をスタート位置として座標を確認したいので今の猫の座標を調べます。

下の絵の赤色のまるの左の数字がｘ座標で右の数字がｙ座標です。

ｘ座標がー１８８、ｙ座標がー１０８なので「X座標を〇、Y座標を〇にする」ブロックを「X座標を-188、Y座標を-108にする」に変更します。
数字は必ず半角数字で入力してください。※半角：123、全角：１２３

できましたか？このプログラムの意味は下のようになります。

次にこれを動かしてみましょう。

まず絵の猫をクリックしてどこかに引っ張って移動させてください。

そして下の図の青〇の🏴をクリックしてください。

猫が左下（ｘ座標‐188、ｙ座標-108）に移動したかと思います。

これで「・さいしょはスタート地点にいる」はできました。

次に「・←ボタンで左に動ける」と「・→ボタンで右に動ける」を作ります。

• 「君が←キーを押したとき」猫が左に動く
• 「君が→キーを押したとき」猫が右に動く

これをScratchのブロックで考えましょう。

「君が←キーを押したとき」は「〇〇キーが押されたとき」ブロック
「猫が左に動く」は「ｘ座標を〇ずつ変える」ブロック
ということになります。

下の図のように「〇〇キーが押されたとき」ブロックをおいてください。

最初はスペースキーが押されたときになっているのでブロックの「スペース▼」をクリックして下の図のように左向き矢印にしてください。

次に下の図のように「ｘ軸を〇ずつ変える」ブロックを「左向き矢印が押されたら」ブロックにくっつけてください。

ここで座標の話を思い出してください。
「ｘ座標を-1ずつ変えると猫が左へ動く」という話でしたね。

今回は-1だと少ししか動かないので-10にします。

「ｘ軸を10ずつ変える」となっているので「10」をクリックして「-10」とキーボードでいれてください。

上の図のようになりましたか？
それでは←キーを押してみてください。猫が左に動いたと思います。

これと同じように「君が→キーを押したとき」猫が右に動くを作ってみましょう。

猫が右や左に動くようになりましたか？
また、スタートボタンを押したときに猫はスタート地点にもどっているでしょうか。

だいぶゲームらしくなってきました。

次回は猫をジャンプさせてみましょう。

Scratchの保存と読み込み

現在のScratchを保存するために下の図のようにデータをダウンロードしましょう。
「ファイル＞コンピューターに保存する」を選んでください。

また、続きから始めるときは「ファイル＞コンピューターから読み込む」を選び、ダウンロードしたファイルを選んでください。