スクラッチプログラミング - よこへスクロール!はいけいをうごかそう

はいけいがよこにうごいているようなプロジェクトをつくってみましょう。はいけいとしてつかうスプライトをはしからはしへうごかすと、スクロールしているように見せることができますよ。

スクラッチプログラミング - よこへスクロール!はいけいをうごかそう
Photo by Sean Thomas on Unsplash
👉
Pyxofy が電子書籍を出版しました!Scratch の基本をまとめた「きょうからはじめるスクラッチプログラミング入門」 詳細はこちら → Pyxofy Books

サンプルさくひんをみてみよう

今回(こんかい)は、はいけいをスクロールさせる方法(ほうほう)をしょうかいします。

(プロジェクトがひょうじされないばあいは、ScratchのPyxofyページをごらんください)

ネコとオウムはコスチュームをきりかえているだけで、そのばから移動(いどう)していません。でも、右へすすんでいるように見えますよね。

どうやってスクロールさせてるの?

はいけいがよこにうごいているように見えるのは、木や草などが左へうごいているからです。

背景の絵が左へ動き続ける

はいけいといっても、ステージに設定(せってい)するはいけいには「うごき」のブロックがつかえないので、うごかすことができません。

スクロールさせるためには、スプライトをはいけいとしてつかうところがポイントです!

はいけいをスプライトでつくろう

はいけいとしてつかうスプライトを、じぶんでえがいてみましょう。

背景として使うスプライトを描く
  • スプライトのなまえを、「はいけい1」にする
描いた背景のスプライトの名前を変える

ざひょうをしらべよう

スクロールさせるためには、はいけいをステージのいちばんはしまでうごかすひつようがあります。

「はいけい1」の座標(ざひょう)をしらべてみましょう!

「ひだりはし」のざひょうをしらべる

スプライトをずっと左へうごかすと、いちばん左はしの座標(ざひょう)がわかります。

つぎのようにブロックをくみあわせたら、ブロックをタップしてみてください。

  • 「ずっと」
  • 「(-10)ほうごかす」
スプライトがステージの左はしから少しだけ見えている状態

「はいけい1」が、いちばん左はしへ移動(いどう)しました!

ステージの下を見てください。xざひょう「-469」まで表示(ひょうじ)できることがわかりますね。

「みぎはし」のざひょうをしらべる

こんどは、右はしの座標(ざひょう)をしらべましょう。つぎのようにブロックをくみあわせたら、ブロックをタップしてみてください。

  • 「ずっと」
  • 「(10)ほうごかす」
スプライトがステージの右はしから少しだけ見えている状態

「はいけい1」が右はしへ移動(いどう)して、xざひょう「469」まで表示(ひょうじ)できることがわかりました!

はいけい1をプログラミングしよう

いましらべた座標(ざひょう)をつかって、ステージの右から左へうごきつづけるように、プログラミングしましょう。

  • さいしょは、ステージのまん中に表示(ひょうじ)する
x座標を0、y座標を0にしてステージの中央に表示する
  • ずっと、左へうごかす
-3ほうごかすをずっとで囲んでつなげる
  • いちばん左はしまでうごいたら
もしxざひょう=-469ならブロックをずっとの中に追加する
  • いちばん右はし、「xざひょうを(469)にする
もしならブロックの間にxざひょうを469にするを追加する

プログラムかんせい

「はいけい1」が左へうごきつづけるようになりました!

左はしまでうごいたあとは、右はしに表示(ひょうじ)されます。そしてまた、左へうごきます。

はいけい1の完成プログラム

ふたつめのはいけいをつくろう

はいけいとしてつかうスプライトを、もうひとつ用意(ようい)しましょう。ふたつのはいけいがつながってうごいているように、プログラミングしていきますよ。

スプライトをコピーする

おなじスプライトをつかいたいときは、かんたんにコピーすることができます。

  • 「はいけい1」をえらんで、ながおし(パソコンでは右クリック)
  • 出てきたメニューから、「ふくせい」をえらぶ
スプライトを右クリックするとコピーするメニューが出る

スプライトがコピーされて、「はいけい2」ができました!「はいけい1」でつくったプログラムも、そのままコピーされます。

背景1がコピーされて背景2ができた

はいけい2をプログラミングしよう

「はいけい1」は、さいしょにステージのまん中に表示(ひょうじ)しましたね。「はいけい2」は、ステージの右はしからスタートしますよ。

「はいけい1」の右がわにつながってうごき出すイメージです。

背景1の右隣に背景2がつながって表示されている画像

さいしょのxざひょうを「469」にかえましょう。

最初のx座標を469にしてステージの右端に背景2が表示されている

プログラムかんせい

ふたつのはいけいがつながって、左へスクロールするようになりました!

背景2の完成プログラム

「きょうからはじめるスクラッチプログラミング入門」by Pyxofy

Pyxofy から Scratch の基本をまとめた電子書籍を出版しました。
Apple Books・Kindle でご購入ください。

特設ページはこちら

まとめ

今回(こんかい)は、はいけいをよこにうごかす方法(ほうほう)をしょうかいしました。

スプライトをステージのはしからはしまでうごかしつづけると、はいけいがうごいているようなプロジェクトをつくることができます。

次回(じかい)は、はいけいをスクロールさせながらあそぶ《ジャンピングゲーム》をしょうかいします。

\この記事が参考になったら おねがいします/

かんれんきじ

スクラッチプログラミング - 上下左右にスクロール!はいけいをうごかそう
プレイヤーのうごきにあわせて画面(がめん)をうごかすプログラムをつくります。つかうはいけいはひとつだけの、かんたんなスクロールです。ゲームづくりに応用(おうよう)してみてくださいね。
スクラッチプログラミング - やじるしキーでうごかすよこスクロール
アクションゲーム(プラットフォーマー)などにつかわれる、よこスクロールする背景(はいけい)のつくりかたをしょうかいします。プログラムのポイントとなるブロックは、「クローン」「変数(へんすう)」「演算(えんざん)」です。
Start Here - Scratch (スクラッチ)
Scratch (スクラッチ)記事(きじ)のレベル別一覧です。初級、中級、上級、拡張機能にわけてまとめました。