【スクラッチ】ドラクエ風RPGマップスクロールを作ってみよう

しくみ全体を理解しよう

まず頭の中で全体像をイメージしておきましょう。

9つのスプライトを3×3のグリッドに並べます。それぞれのスプライトは画面1枚分のマップを担当します。

┌──────┬──────┬──────┐
│ タイルA │ タイルB │ タイルC │
├──────┼──────┼──────┤
│ タイルD │ タイルE │ タイルF │ ← 最初はEが画面中央
├──────┼──────┼──────┤
│ タイルG │ タイルH │ タイルI │
└──────┴──────┴──────┘

プレイヤーが右に歩くと、9枚全員が左にスライドします。タイルCが画面の右端から外に出たら、左端に瞬間移動してコスチュームを切り替えます。

これを繰り返すことで、マップが無限に続いているように見えます。

スプライトとコスチュームを準備しよう

スプライトの準備

マップ用のスプライトを9つ作成します。名前は管理しやすいように次のようにしましょう。

スプライト名	初期位置の担当
タイルA	左上
タイルB	上
タイルC	右上
タイルD	左中
タイルE	中央（最初に表示）
タイルF	右中
タイルG	左下
タイルH	下
タイルI	右下

コスチュームの準備

9つのスプライトそれぞれに、同じ9枚のコスチュームを用意します。

コスチュームは「どのマップエリアを表示するか」を決めるものです。

コスチューム番号	表すエリア
1	左上エリア
2	上エリア
3	右上エリア
4	左中エリア
5	中央エリア
6	右中エリア
7	左下エリア
8	下エリア
9	右下エリア

変数を準備しよう

スクロール全体を動かすために、次の変数を用意します。

変数名	種類	役割
スクロールX	全スプライト共通	マップ全体の横方向のずれ量
スクロールY	全スプライト共通	マップ全体の縦方向のずれ量

この2つの変数を全スプライトで共有するのがポイントです。プレイヤー側でこの変数を書き換えるだけで、9枚全員が一斉に動きます。

プログラムを作成しよう

初期配置のコード

ゲーム開始時に、9つのタイルを正しい位置に並べます。

スクラッチのステージは幅480・高さ360なので、タイル1枚のサイズも幅480・高さ360にしておくとぴったり並びます。

タイルEの場合はこのようになります。

各タイルの初期座標は次のようになります。

スプライト	初期x座標	初期y座標	初期コスチューム
タイルA	-480	360	1
タイルB	0	360	2
タイルC	480	360	3
タイルD	-480	0	4
タイルE	0	0	5
タイルF	480	0	6
タイルG	-480	-360	7
タイルH	0	-360	8
タイルI	480	-360	9

スクロールのコード

プレイヤースプライト側で、キー入力に合わせてスクロール変数を更新します。

各タイルスプライト側では、スクロール変数を使って毎フレーム座標を更新します。

「自分の初期x座標」はタイルごとに異なります。タイルEなら0、タイルFなら480、という具合です。

端に出たときの処理

特大のマップを作りたい場合は、折り返してコスチュームを切り替えるという方法もありますが、今回は、範囲を越えないように、強制的に座標を調整するように設定します。

まとめ

9つのスプライトを使ったリアルタイムマップスクロールの作り方を解説しました。

今回のポイントをまとめます。

• 9つのスプライトを3×3に並べて同時にスライドさせる
• スクロール量は共通の変数で管理し、全スプライトに共有する

この仕組みはマップの枚数を増やしても同じ考え方で対応できます。

さらに上級者になると、クローンで作成することも可能なので、自信のある人は挑戦してみてください。

アクションゲームやシューティングのスクロール背景にも応用できるので、ぜひマスターしてみてください( ・∇・)