Scratch(スクラッチ)の背景を横にスクロールさせてみよう

Scratch(スクラッチ)の背景を横にスクロールさせてみよう

現役SEの佑です。

今回はスクラッチで背景をスクロールさせて、アニメーションプログラムを作ってみたいと思います。
画像と動画ありで解説していきますので、参考にしてみてくださいね。

こちらの記事でやっていることは、コスチュームの設定ができるとスムーズに進みます。
なのでスクラッチのコスチュームを設定する方法の記事を先に読まれてみてくださいね。

Scratch(スクラッチ)でコスチュームを変えてアニメーションを作ってみよう Scratch(スクラッチ)でコスチュームを変えてアニメーションを作ってみよう


Scratch(スクラッチ)で背景を変える方法をマスターしよう

Scratchで背景を変更してみよう

早速スクラッチで背景を変える方法を見ていきましょう!

背景を変える方法はとてもかんたんです。

背景を変える方法

1.背景タブをクリック

2.右下のステージの背景と書いてあるところをクリック

3.左下の「背景を選ぶ」をクリック

スクラッチで背景を変える方法!

背景は

・自分のパソコンから画像をアップロードする
・Scratchで用意されている背景画像から選ぶ
・自分で描く

などの方法があります。

今回は背景を自分のパソコンの画像からアップロードしてみました!

スクラッチで背景画像を変更する方法!

Scratchにぴったりな背景素材をご紹介!

「何かいい背景ないかしら?」と思っている人に、僕がよく使っている画像サイトを3つご紹介します。
1.イラストAC

スクラッチの背景素材のおすすめ!

イラストACには可愛いイラストがたくさんあります。
先ほどのレンガの背景画像はこのサイトから持ってきました。
無料の会員登録が必要ですが、たくさんの種類の画像があって重宝しています。
参考 イラストAC
2.Town illust

スクラッチの素材のおすすめ!

街や建造物のイラストが中心にあって、ハイクオリティです…!

背景を横にスクロールさせるときに使えそうは画像がたくさんありますね。

参考 Town illust
3.Free stock photos – Kaboompics

Scratchの背景のおすすめ!

おしゃれな自然風景を背景にしたいなら、Free stock photos – Kaboompicsというサイトがおすすめです。

画質がとてもよく、サイトの画像を選ぶときにもよく使います。
英語で書かれているので、ちょっと使いづらい部分はありますが、おしゃれな画像がたくさんあります。

参考 Free stock photos - Kaboompics

Scratch(スクラッチ)で背景をスクロールさせてみよう

それでは背景を横にスクロールさせて、アニメーションを作ってみましょう。
STEP.1
先ほどご紹介した方法で背景を変えよう
Scratchで背景をスクロールさせる方法!
STEP.2
スプライトを新たに追加してみよう
背景の一部となるスプライトを追加してみましょう。
スクラッチのスプライトの追加方法!

今回は木を選んでみました!
Scratchでスプライトを追加する方法!

STEP.3
木を横に動かすプログラムを作ろう
背景が横にスクロールして見えるようにするために、木をちょっとずつ左に動かすプログラムを作ってみましょう。
左端についたら、右端にまた表示させるようにしています。
このプログラムを作るときに考えたことは、あとから解説しますのでとりあえず作ってみてくださいね。
また右下のスプライトで木を選択することを忘れないようにしてください。
スクラッチで背景を横にスクロールさせる方法!
Scratchで背景を横移動させる方法!
STEP.4
もう1つ木を追加して、同じプログラムを作ってみよう
STEP.3と同じように木をもう1つ追加してみましょう。
スクラッチで背景を横移動させる方法!

気をつけなければいけないことは、2つ目の木の最初のX座標を変更するようにしてくださいね。
今回は、1つ目の木のX座標は-100、2つ目の木のX座標-100にしています。

STEP.5
スクラッチキャットの動きをプログラムしてみよう
今回は実際にスクラッチキャットを横に移動させるのではなく、歩いているように見せかけています。
スクラッチキャットを歩いているように見せかける方法は、Scratchでコスチュームを変えてアニメーションを作る方法で解説していますので、参考にしてみてくださいね。
スクラッチキャットを歩かせてる風に見せよう!

それでは、完成したプログラムを実際に動かしてみます。
こちらの動画をみて観てください!

木が左に移動し、スクラッチキャットがてくてく歩いていることがわかるかと思います。

それでは、今回のプログラムを作るときに考えたことを解説していきます。

まずは背景の一部である木です。
考えたことは

・実行ボタン(旗ボタン)が押されたら、プログラムを開始したいな
・プログラムの最初の位置を設定しておきたいな
・そのあとは、プログラムが停止するまで木を左(X座標を-1)に移動させたいな
・左端まで木が移動したら右端に表示させたいな

ということです。
最初は難しいかもしれませんが、プログラムは作れば作るだけ感覚がわかってきます。
マネでもいいので、作りながら慣れていってくださいね。

スクラッチ入門のまとめはこちら!

スクラッチをもっと学びたい!という人は、こちらのスクラッチ入門まとめ記事をチェックしてみてください。
Scratch(スクラッチ)入門まとめ!子供と一緒に楽しく学ぼう Scratch(スクラッチ)入門まとめ!子供と一緒に楽しく学ぼう

背景の設定をマスターしたら、音を鳴らすプログラムをつくってみましょう。
キーボードを鍵盤にしてドレミファソラシドを鳴らす方法を解説していますので、下の記事をチェックしてみてください。
【かんたん】Scratchで音を出す方法!実際に曲を作ってみよう 【かんたん】Scratch(スクラッチ)で音を出して曲を作ってみよう

子供がプログラミングを効率的に楽しく学ぶには?

スクラッチは自宅で親子一緒に楽しくプログラミングを学ぶことができます。

ただ、自宅で勉強するプログラミングには限界がありますし、お子さんが飽きてしまう可能性があります。
なので、自宅である程度スクラッチに触れさせてみたあとは、子供向けのプログラミング教室に行ってみることをおすすめします。

子供向けプログラミング教室では

・プロの先生がわかりやすく教えてくれて、子供の考える力を伸ばしてくれる
・PCが初めてのお子さんでも、基本的な操作からしっかり教えてくれる
・本格的なプログラミングにも挑戦できる
・周りのお友達と切磋琢磨しながら、プログラミングを学ぶことができる
・みんなの前で自分がつくったプログラムを発表する機会があるので、プレゼン能力が身につく

などのメリットがたくさんあります。

こちらの記事で、現役SE目線で子供におすすめのプログラミング教室をご紹介しています。
どの教室も無料体験ができますので、チェックしてみてくださいね。

【2019年最新版】子供プログラミング教室のおすすめを現役SEがご紹介! 【2019年最新版】子供プログラミング教室のおすすめを現役SEがご紹介!



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です