はじめに
難易度
今回はスクラッチでスクロールを作る方法を解説していきます。単純な横スクロールからマリオのようなキャラクターを動かすスクロールまで3種類のスクロール方法について解説します。これをマスターしておけばいろいろな横スクロールゲームに対応できますのでぜひマスターしてください。
こちらの動画でもわかりやすく作り方を解説していますのであわせてチェックしてください。チャンネル登録もよろしくお願いします!
背景を設定
まずは、背景を用意します。スクロールを作る時には”ステージ”に背景を描くのではなく、背景用のスプライトを用意します。また、今回は2つのスプライトを用意する方法を解説します。
以下のように、スプライトを追加し、背景を描きます。今回は説明用にわかりやすい背景にしています。まずは1つ目の背景です。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-21.54.22.png?resize=492%2C846&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-21.59.25-1024x603.png?resize=1024%2C603&ssl=1)
次に2つ目の背景です。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-22.00.04.png?resize=494%2C846&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-22.01.22-1024x602.png?resize=1024%2C602&ssl=1)
スプライトの名前はそれぞれ背景1・背景2にしておきましょう。
最終的にはこの背景1と背景2が交互に右側からながれてくることでスクロールを作っていきます。
その① 単純横スクロール
まずは単純横スクロールを作っていきます。単純横スクロールというのはゲームがスタートしたらひたすらスクロールしていくゲームです。シューティングゲームやチャリ走ゲームなどで使われます。
ネコのコード
まずネコのコードです。単純横スクロールではネコの場所はずっと同じ場所です。そこで足だけ動かしていると、背景が左へ流れてくるのでネコが右に進んでいるように見えるのです。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-18-15.32.54.png?resize=489%2C344&ssl=1)
背景1のコード
次に背景1のコードです。スクロールxという変数を作って、背景の場所を管理しています。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-23.06.53-1.png?resize=843%2C482&ssl=1)
背景2のコード
つぎに背景2に以下のコードを書きます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-23.07.08.png?resize=843%2C482&ssl=1)
動きを確認してみよう
ではを押して動きを確認してましょう。
背景を変更する
背景がどのように動くかわかれば、背景を変更していきましょう。今回はもともとスクラッチで用意されている夜の街の背景を使います。ただし、背景はステージからしか選べないので、以下のようにステージから背景を選択しスプライトにコピーしていく必要があります。いかの6つの手順にしたがって背景を作っていってください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-23.08.37.png?resize=491%2C847&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-23.09.09-1024x638.png?resize=1024%2C638&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-23.09.37.png?resize=940%2C852&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-23.28.35.png?resize=402%2C364&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-23.28.57.png?resize=940%2C852&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-23.29.30.png?resize=940%2C852&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/08/ビンゴおじさんアイコン2.png?resize=92%2C92)
ふたつの画像を反転させて交互に表示すると一続きの背景に見えるのです!
では、を押して実際に動きを見ていきましょう。どこが切れ目かもわからないくらいスムーズにスクロールしていると思います。
その②矢印キーで横スクロール
次に、矢印キーを押した時だけスクロールするようにしてみましょう。
ネコのコード
まずはネコのコードです。次のコスチュームにする(つまりネコが動く)のを右向き矢印キーが押されたときだけにします。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-18-16.31.36.png?resize=501%2C375&ssl=1)
背景1のコード
スクロールxが-2ずつかわるのは右向き矢印キーが押された時だけです。その条件をコードに追加します。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-18-16.34.42.png?resize=812%2C472&ssl=1)
背景2のコードに変更はありません。
実際に動かしてみてください。右向き矢印キーが押された時だけスクロールするはずです。
その③マリオ型スクロール
最後にマリオ型スクロールについて解説します。マリオのようなアクションゲームはスクロールゲームでありながら、左右にも動けるようになっています。実はある場所で右矢印キーを押すと画面がスクロールされて、それ以上プレイヤーが画面の右側にはいけないようになっているのです。
ネコのコード
ネコのコードを以下のように変更します。左右矢印キーで動けるようにして、さらに、x=-50より右に行けないようにします。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-18-16.43.13.png?resize=721%2C537&ssl=1)
背景1のコード
次に背景1のコードを変更していきます。スクロールをしていく条件を右矢印キーが押されただけではなくネコのx座標が-50のときという条件を追加します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/10/スクリーンショット-2022-10-18-16.43.35.png?resize=721%2C537&ssl=1)
動きを確認してみよう
背景2は変更なしで大丈夫です。実際にを押して動かしてみましょう。以下のように動けば成功です。
解説は以上です。3種類のスクロールを駆使していろいろな横スクロールゲーム作りに挑戦してください。