スクラッチで３種の横スクロールを作る方法【完全版】

はじめに

難易度

今回はスクラッチでスクロールを作る方法を解説していきます。単純な横スクロールからマリオのようなキャラクターを動かすスクロールまで３種類のスクロール方法について解説します。これをマスターしておけばいろいろな横スクロールゲームに対応できますのでぜひマスターしてください。

背景を設定

まずは、背景を用意します。スクロールを作る時には”ステージ”に背景を描くのではなく、背景用のスプライトを用意します。また、今回は２つのスプライトを用意する方法を解説します。

以下のように、スプライトを追加し、背景を描きます。今回は説明用にわかりやすい背景にしています。まずは１つ目の背景です。

次に２つ目の背景です。

スプライトの名前はそれぞれ背景１・背景２にしておきましょう。
最終的にはこの背景１と背景２が交互に右側からながれてくることでスクロールを作っていきます。

その① 単純横スクロール

まずは単純横スクロールを作っていきます。単純横スクロールというのはゲームがスタートしたらひたすらスクロールしていくゲームです。シューティングゲームやチャリ走ゲームなどで使われます。

ネコのコード

まずネコのコードです。単純横スクロールではネコの場所はずっと同じ場所です。そこで足だけ動かしていると、背景が左へ流れてくるのでネコが右に進んでいるように見えるのです。

背景１のコード

次に背景１のコードです。スクロールxという変数を作って、背景の場所を管理しています。

背景２のコード

つぎに背景２に以下のコードを書きます。

動きを確認してみよう

ではを押して動きを確認してましょう。

背景を変更する

背景がどのように動くかわかれば、背景を変更していきましょう。今回はもともとスクラッチで用意されている夜の街の背景を使います。ただし、背景はステージからしか選べないので、以下のようにステージから背景を選択しスプライトにコピーしていく必要があります。いかの６つの手順にしたがって背景を作っていってください。

では、を押して実際に動きを見ていきましょう。どこが切れ目かもわからないくらいスムーズにスクロールしていると思います。

その②矢印キーで横スクロール

次に、矢印キーを押した時だけスクロールするようにしてみましょう。

ネコのコード

まずはネコのコードです。次のコスチュームにする（つまりネコが動く）のを右向き矢印キーが押されたときだけにします。

背景１のコード

スクロールxが-2ずつかわるのは右向き矢印キーが押された時だけです。その条件をコードに追加します。

背景２のコードに変更はありません。

実際に動かしてみてください。右向き矢印キーが押された時だけスクロールするはずです。

その③マリオ型スクロール

最後にマリオ型スクロールについて解説します。マリオのようなアクションゲームはスクロールゲームでありながら、左右にも動けるようになっています。実はある場所で右矢印キーを押すと画面がスクロールされて、それ以上プレイヤーが画面の右側にはいけないようになっているのです。

ネコのコード

ネコのコードを以下のように変更します。左右矢印キーで動けるようにして、さらに、x=-50より右に行けないようにします。

背景１のコード

次に背景１のコードを変更していきます。スクロールをしていく条件を右矢印キーが押されただけではなくネコのx座標が-50のときという条件を追加します。

動きを確認してみよう

背景２は変更なしで大丈夫です。実際にを押して動かしてみましょう。以下のように動けば成功です。

解説は以上です。３種類のスクロールを駆使していろいろな横スクロールゲーム作りに挑戦してください。