ゲーム経験者の誰もが通る道、それは２Dプラットフォームアクション。

というわけで、今回は2Dプラットフォームを作る上で欠かせない、「背景のスクロールアクション」について説明します。

長いですが、写経で頑張りましょう！コピペ厳禁！

後編は背景画像のスクロール機能の実装からスタートです！前編はこちら！

【前編】Scratchでなめらかなスクロールを作ろう

完成品

背景画像のスクロール実装

こんな感じのスクロールを目指します

まず、今回作るスクロールの仕組みについて考えます。

• 2枚の背景を左右に動かすことでスクロールを実現します。
• 画面に映る背景は、最大2枚です。
• 最初に1枚目と2枚目の背景を設置しておきます。
• 1枚目の背景が左に動くと、2枚目の背景が表示されます。
• 1枚目の背景が表示されなくなったらすぐさま3枚目の位置へ移動し、コスチュームを3枚目に変えます。

この処理を、プレーヤーの変数【位置】を使って判定していきます

変数の設定（「このスプライトのみ」の変数【ステージ】は、メイン背景と、床のみの背景どちらのスプライトにも設定しておきます）

「メイン背景」全体のプログラム

スクロール実装のポイント

1. 本体とクローンを1つ出すことで、2枚のスプライトを使います
2. 位置を0ではなく10にしておくことで、最初から2枚目を表示した状態にします。
   
3. あくまで背景なので、常に最背面に設定します
   
4. 左右の矢印キーを押すことで、変数【位置】を変更します
   
5. 【位置】が0より小さい場合はそれ以上左に進まないようにしています。
   
6. 【位置】が背景の大きさ(今回は 480 × 7 + 97 – 480 = 2977 – 480)よりも右側に行かないように設定しています。
   この時、一番最後の背景の幅が480よりも小さい場合は、１画面分左に寄せないと、背景がはみ出してしまうので注意が必要です。
   
   
7. 【位置】の値によって、本体・クローンそれぞれのスプライトの【ステージ】の値を変更しています。この変数【ステージ】を別々に管理することで、コスチュームや座標の調整をしています。
   ここ、大事です！
   難しい場合は自分で紙とペンを用意して考えてみてください。
   コピペで完成してもあなたの作品にはなりません。
   
   
   
8. 1枚目がもっとも左側の背景になるので、【位置】を指定してステージが1より小さくならないようにしています。
   
9. 1. x座標を設定します。
   2. コスチュームを設定します。
   3. 1枚目のステージと、2枚目のステージ、それぞれの変数をお互いに使えるように、すべてのスプライト用の変数【1枚目のステージ】【2枚目のステージ】にそれぞれのステージの値を代入しています。
      

完成したら、動かしてみましょう！

 

床のみ画像のスクロールの実装

こちらも完成画像とポイントを載せておきます。
なお、先ほどお伝えした通り、変数の設定はメイン背景と同じようにします。
（「このスプライトのみ」の変数【ステージ】を設定を忘れずに！）

メイン背景スプライトと違うプログラム部分

1. 幽霊の効果で透明にする
2. 当たり判定なので、最前面に設定
3. x座標を変更するとき（左右の矢印キーが押された時）に、移動差分で10ずつ変えている（本体もクローンもどちらも必要）
   ※これを入れない場合と比べてみてください！

プレーヤーの動き

今回はすでにプログラムは埋め込んであるので、まとめだけ載せておきます

1. 走り・立ち・ジャンプのコスチュームをそれぞれ別々に設定しています。走りのところで「0秒待つ」を入れているのはScratchの仕様によるものです
2. 当たり判定の床に触れたら落下を止める処理にしています。
3. 簡易版なので上下の判定だけなので、左右の壁判定は入れていません。
4. 2段ジャンプに対応しています。難易度次第でジャンプ力の設定を変えてください。

修正・アレンジポイント

これでほぼ完成ですが、まだ改善点はたくさんあります。

1. 壁の判定：横から床背景にぶつかると、壁を突き抜けてしまいます。これを防ぐためには「○歩ずつ動かす」を使うと良いです。
2. ステージの解像度：ベクターの方がブレが少なかったかも…
3. 速さの判定：走りの速さについて、変数を入れたほうがアイテムや演出面で工夫しやすいです。
4. 敵の配置
5. ボスの配置
6. ステージの設定（扉・土管・ワープホールなどで、背景の雰囲気を変える）
7. BGM・効果音・セリフ演出・ストーリー設定
8. ゲームメニュー

 

上記を実装することで、よりクオリティの高い作品になるでしょう。
ぜひ設計して、最高の2Dアクションゲームを作ってみてください！
また改めて素敵な素材を貸していただいたansimuzさんに感謝いたします。

https://ansimuz.itch.io/

最後までお読みいただきありがとうございました🙌
好評ならまた何かチュートリアル作ってみたいと思います！

Sachooの授業は【カリキュラム×個性】。
カリキュラムの例として下記の記事を公開しています。
よろしければご参考にしてください☺︎

【初心者〜中級者向け】Scratchのスキルチェック表