スクラッチプログラミング - やじるしキーでうごかすよこスクロール
アクションゲーム(プラットフォーマー)などにつかわれる、よこスクロールする背景(はいけい)のつくりかたをしょうかいします。プログラムのポイントとなるブロックは、「クローン」「変数(へんすう)」「演算(えんざん)」です。
更新日:2023年12月27日
サンプルさくひんであそんでみよう
下のプロジェクトでは、はいけいの「山」「木」「地面(じめん)」がよこにうごきます。スクロールすると地面(じめん)のかたちがかわるところに注目(ちゅうもく)して、あそんでみてください。
ゲームのあそびかた
- 左右のやじるしキーをおすと、はいけいがうごく
- 上やじるしきーをおすと、ネコがジャンプする
- たかくジャンプして、ゴールのはたポイントをたくさんゲットしよう!
(スクロールしているはいけいは「クローン」です。クローンは、ストップボタンをおすと表示(ひょうじ)されなくなります。プロジェクトは、ScratchのPyxofyページでもごらんになれます。)
今回(こんかい)は、サンプルさくひんの地面(じめん)のように、見た目をかえながらスクロールするはいけいのつくりかたを説明(せつめい)します。すすむ方向(ほうこう)は右で、とちゅうで左へもどれるようなスクロールです。
はいけいをよういしよう
さいしょに、スクロールさせるはいけいを用意(ようい)しましょう。見た目のちがうコスチュームを、いくつかつくってください。ここでは、ちがいがわかりやすいように、いろべつのコスチュームを5つ、つくっておきます。
- はいけいとしてつかうスプライトをえがく

スクロールにつかうのは、はいけいの クローンです。もとのスプライトはかくしておいて、クローンされたときに表示(ひょうじ)するようにしましょう。
- はたがおされたとき「かくす」、クローンされたとき「ひょうじする」

へんすうをつくろう
つぎに、変数(へんすう) をふたつ用意(ようい)します。「コスチュームのかず」と「クローンid」というなまえの変数(へんすう)をつくりましょう。
コスチュームのかず
「コスチュームのかず」は、コスチュームの個数(こすう)を入れるための変数(へんすう)です。この変数(へんすう)をつかって、クローンをいくつつくるのかをきめます。
- 「コスチュームのかず」を(5)にする

クローンid
「クローンid」は、クローンにべつべつの「id」(かず)をふるための変数(へんすう)です。この変数(へんすう)をつかって、それぞれのクローンを表示(ひょうじ)する位置(いち)をきめるので、変数(へんすう)をつくるときには、「このスプライトのみ」をえらんでくださいね。
- 「クローンid」を(0)にする

はいけいのクローンをつくろう
コスチュームのかず、クローンid、ふたつの変数(へんすう)をつかって、はいけいのクローンをつくりましょう。
見た目のちがうクローンをつくる
クローンidのかずとコスチュームをかえながら、用意(ようい)したコスチュームのかずとおなじ回数(かいすう)、くりかえしつくります。
- はいけいのクローンを5つつくる

クローンのいちをきめる
スクロールしたときに、クローンが順番(じゅんばん)に表示(ひょうじ)されるように、さいしょの位置(いち)をきめます。ステージのよこはばは、「480」です。クローンごとにxざひょうを「480」ずつかえて、よこにならべましょう。
- xざひょうを、それぞれのクローンidに480をかけた値(あたい)にする

さいしょのクローンidは「0」にしておきましたね。0かける480は、ゼロ。xざひょうがゼロになるので、ステージのまん中にさいしょのクローンが表示(ひょうじ)されますよ。

スクロールにつかうはいけいのクローンができました!
クローンidのあたいを「4」にする
上の画像(がぞう)でもわかるように、コスチューム5のクローンidは「4」です。でも、クローンをつくるときにくりかえした回数(かいすう)はコスチュームのかず、つまり5かいだったので、クローンidには「5」が入っている状態(じょうたい)です。

クローンidの値(あたい)はこのあと、右スクロールをとめるためにつかいたいので、クローンをつくりおわったあとに、クローンidを「4」にしておきましょう。
- クローンidを、コスチュームのかずマイナス(1)にする

やじるしキーでうごかそう
はいけいのクローンができたら、左右の やじるしキー でスクロールさせます。よこにうごかす値(あたい)を入れるための変数(へんすう)、「スクロールx」をつくって、やじるしキーをおしたときにクローンのxざひょうがかわるようにしましょう。
- やじるしキーがおされたとき、スクロールxの値(あたい)をかえる

やじるしキーではいけいをうごかすための準備(じゅんび)ができました!
クローンをじゅんばんにひょうじしよう
やじるしキーをおしてスクロールxの値(あたい)がかわったときに、クローンのxざひょうもかわるようにします。xざひょうを、やじるしキーとぎゃくむきにすることで、はいけいをスクロールさせますよ。
- クローンのxざひょうを、スクロールxとはぎゃくの方向(ほうこう)にする

やじるしキーをおすと、はいけいが左右にうごくようになりました!でもよく見ると、ステージの右はしに、ほかのクローンが見えてしまっていますね。

ほかのクローンをかくそう
ほかのクローンがステージのはしに見えてしまうのを解決(かいけつ)しましょう。方法(ほうほう)は、ふたつ。すきなほうを、ためしてみてください。
これより下は、Pyxofyメンバー限定公開です。メンバーになると読むことができます。登録方法は、『メンバー登録・ログイン方法』をご覧ください。

「きょうからはじめるスクラッチプログラミング入門」by Pyxofy
Pyxofy から Scratch の基本をまとめた電子書籍を出版しました。
Apple Books・Kindle でご購入ください。