スクラッチで背景を横に動かす(スクロールする)方法

背景を横に動かす(スクロールさせる)方法

スクラッチでゲームの画面のように背景を横に動かすカンタンな方法を解説します。

 

【完成イメージ】
スクラッチで背景を動かす

 

スクラッチで背景を横スクロールさせる方法としては次のようなやり方が知られています。

  • 背景をスプライトとし、X軸を少しずつずらしていく
  • スプライトとする背景画像は標準の2倍の長さのものを用意する

難しいですよね。
2倍の長さの背景画像を用意するの段階で挫折してる人も多いと思います。

 

そこで、ここでは最もカンタンな方法を紹介します。

  • 画像を用意する必要はありません(スクラッチにあらかじめある背景画像でOK)
  • 背景をスプライトにする必要もありません
  • X軸を少しずつ変えていく必要もありません

紹介する方法は、正確には背景が横に動いているわけではないのですが、目の錯覚を利用して横に動いているように見える方法です。

 

背景を横に動かすカンタンな方法

背景を選択します

 

※この方法で使える背景画像は決まっています。
まずは「Night City(道路があるほう)」で説明します。

 

 

同じ操作を繰り返し、背景を2つセットします

コード、背景、音と並んでいる上のタブで「背景」を選択して確認します。

 

最初にあった不要な背景を削除します

 

自分がセットした同じ背景画像2つだけになるようにします。
(下記のようになればOK)

 

 

1つの背景を選び、「選択」ボタンをクリック

 

この選択ボタンを押すことで画面上部に左右反転ボタンが表示されます(詳細は次)。

 

表示された左右反転ボタンをクリック

 

背景画像が左右反転されます。

 

【参考】元の画像(上)と左右反転させた画像(下)

 

背景を入れかえるコード(スクリプト)を設定

次のようにコードを設定します。
「1秒待つ」の秒数で背景が動く(動いて見える)スピードが変わります。

 

 

完成です

これで実行すると背景が右から左に動いているように見えます。

 

【おまけ】スプライト(キャラクター)のコード
スプライト(ネコ)に下記のようなコードを設定すると走っているように見えます。

 

左右反転で背景が動いているように見える画像一覧

最初に説明したように、このやり方で背景が動いているように見える画像は種類が決まっています。上で説明した「Night City」以外では次の背景が使えます。

 

Blue Sky

Boardwalk

Moon

Stars

Wall 1

 

以上、参考にしてみてください。

PR

関連ページ

セリフを言う
スクラッチで基本となるキャラクター(スプライト)がセリフを言うプログラミングの例です。「…と言う」と「…と考える」を使った応用プログラムも紹介しています。応用プログラムはキャラクターが場所をワープするものです。
キャラクターをキーボード操作で左右に動かす
キーボード操作でキャラクターを動かすスクラッチのプログラムの紹介です。矢印キー「←」「→」が押されたときに左右に動くプログラムの見本になります。動かないときに確認すべきポイントも記載しているので参考にしてみてください。
キャラクターをジャンプさせる簡単な方法
スクラッチでキャラクター(スプライト)をジャンプさせる方法はいくつもありますが、ここでは最も簡単なプログラミングサンプルを紹介したいと思います。これを見本に、より自然にジャンプしているように見えるものに挑戦するのもイイかもしれません。
キャラクターを回転
スクラッチでキャラクターを回転させるプログラムの見本です。回転だけでもいろいろなバリエーションを持たせることができるので、参考にしてみてください。使用するブロックは3つだけ。
キャラクターが上下左右に動き回るプログラム例
スクラッチでキャラクター(スプライト)が上下左右に動き回るプログラムの例を紹介したいと思います。空中を飛び回っているように見えるサンプルです。
「大きさを変える」
小学校の授業でも出来るような初心者向けのスクラッチプログラミング事例の紹介です。スプライト(キャラクターのこと)の大きさを変更するスクリプト(命令のこと)を使って出来る簡単なプログラムです。
色の変更を使ったスクラッチプログラム例
スクラッチのスクリプト(見た目カテゴリ)の中にある「色の効果を変える」を使って出来るプログラム例の紹介です。照明が切り替わっているように見えるプログラムになります。
スクラッチでのX座標、Y座標の考え方をマスター
スクラッチでは画面の中の位置をX座標とY座標で表します。この考え方は慣れていないと小学生にとっては難しく感じるかもしれません。ただ、理解してしまえばカンタン。キャラクター(スプライト)を思った位置に動かすために考え方をマスターしておきましょう。
スクラッチ3でのペンの使い方と色に指定する数値の最大値
スクラッチ3でペン機能を使って線を引くには、拡張機能を追加しなければなりません。といっても、ややこしいインストールは不要でボタンを押すだけ。その方法を解説します。スクラッチの開発画面の左下にある「拡張機能」ボタンをクリック。