スクロールするマップチップのマップを表示する
この記事は「ActionScript Game Utility Library ‘ヤスメ’」v0.61 を対象にしています。
Yasumeにはマップチップによるマップ描画と、マップに対するオブジェクトの当たり判定を行う機能があります。 サンプル(ソース) サンプルでは、マウスカーソルをカメラが追従する形でマップスクロールします。マップ上には、2つの●が跳ね回っています。マップ上には4つの部屋があるように見えますが、マップデータとしては1部屋分のデータだけを定義しており、マップをループ描画することによって同じ部屋が4つ並んだように見えています。
サンプルの作り方は以下です。
1. マップデータ作成 まずは、マップデータを定義した XML ファイルを作成します。今回のサンプルでは sampleMapData.xml を作成しました。 XML の詳細は以下です。
2~16行目
- mapSize
- マップの全体サイズがマップチップ何個分であるかを設定します。
- chipSize
- マップチップのサイズが何ピクセルかを設定します。
- screenSize
- マップを一度に表示する画面サイズが、マップチップ何個分であるかを設定します。
- chipGraphicsFilePath
- マップチップを定義した画像ファイルへのパスです。swfからの相対パスを設定します。サンプルで使用している画像は以下です。
- loop
- マップをループ描画する場合 true、マップデータをループせずにそのまま描画する場合 false を設定します。
- backgroundColor
- マップの背景色です。ARGB形式で0xを使った16進数で指定します。
17~110行目
- layer
- マップを表示するレイヤー単位で定義します。例えば、前景、背景という単位で layer タグを定義します。
- scrollSpeed
- マップスクロールスピードです。1 を指定すると、カメラの移動量とマップのスクロール移動量が同じになります。1 未満を指定すると、カメラの移動量よりもマップの移動量が小さくなります。1 より大きい値を設定すると、その逆です。
- frameRate
- マップのアニメーションスピードです。
- hitData
-
マップの当たり判定データです。マップチップ単位に、以下の2進数を16進数にした値を設定します。各ビットの意味は以下です。
0000 0000 0000 マップチップの種類です。例えば、通常のチップなら 0、毒沼のチップなら 1 と設定しておくことで、チップ毎の特徴を分けることが出来ます。 すり抜け可能なチップである場合、そのビットに 1 を設定します。右のビットから順に、右から、左から、上から、下からのすり抜けが可能であることを意味します。(未疎通・・・) 当たり判定があるチップである場合、当たり判定がある方向のビットに 1 を設定します。右のビットから順に、右から、左から、上から、下からの当たりの有無を設定します。 - frame
-
マップのアニメーションのコマ数分定義します。設定する値は、描画するマップチップ番号です。マップチップの番号は、chipGraphicsFilePath の画像を左上右へ向かってからマップチップサイズで切り取っていった順番の番号です。サンプルで使用する画像サイズは、チップ横7×縦5なので、以下のようにマップチップの番号を付けて画像を切り取ります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
2. プログラムへ組み込む
65~72行目
マップデータを使用するには、MapData クラスを使用します。インスタンスを生成し、1.で作成した XML ファイルを読み込みます。
74~86行目
マップデータのロード完了を待ち、ロード完了したならマップチップとする画像データのロードを行います。
88~102行目
マップチップの画像データのロードの完了を待ち、完了したならこの MapData を使用して MapViewer クラスのインスタンスを生成します。また、マップ当たり判定を行うために MapHitTester クラスのインスタンスを生成し、デフォルトイベントハンドラを設定します。 そして _mapHittables へ●のオブジェクトを登録しておきます。
133~153行目
毎フレーム、カメラ位置の調整、前景、背景の描画、オブジェクトの実行、マップ当たり判定を行います。 なお、マップ当たり判定を行う対象オブジェクトは、IMapHittable インターフェイスを実装する必要があります。詳しくは IMapHittable の asdoc を、実装例は以下のクラスを御覧ください。
292~294行目
マップのスクロールに合わせて、オブジェクトの描画位置を調整するには、上記のようにします。
他にも マップスクロールだけでなく、マップスクロールによってオブジェクトが画面に表示されたら、そのオブジェクトが表示されたり、キャラクターが乗れるリフトを作ったり等、マップに関連する機能は他にもいくつかあります。それらの説明はまた別の機会に。 ご質問や要望がありましたら、@asahiufoやコメント欄にて。