HaxeFlixel でタイルマップを読み込む

HaxeFlixel での簡単なタイルマップ読み込み方法（配列とCSV）

タイルマップを作成する準備

まずMain.hxで画面の大きさを指定します。

上図のようにブロックの大きさ16×16、ブロック数300（横20×縦15）でブロックを配置したいので、画面の大きさがX:16×20=320、Y:16×15=240で表示される様に Main.hx を変更します。

Main.hx内、super();下

- addChild(new FlxGame(0, 0, PlayState));
+ addChild(new FlxGame(320, 240, PlayState));

assets ⇒ images に配置するブロックのスプライトシートを保存します。（名前： tile.png ）

1.単純な配列から読み込む場合

PlayState.hx で、要素数が横×縦の数となる配列を作成します。（20×15で要素数300）

PlayState.hx内、super.create();の下

final data = [
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
	1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
	1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
	1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
	1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
	1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
	1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
	1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1,
	1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
	1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1,
	1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
	1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1,
	1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1,
	1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1,
	1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
];

そして、FlxTilemap() の loadMapfromArray を使用してdata配列を読み込みます。
インポートへ flixel.tile.FlxTilemap を追加

PlayState.hx

import flixel.tile.FlxTilemap;

PlayStateクラスで FlxTilemap オブジェクトを宣言

PlayState.hx

var _map:FlxTilemap;

data配列の下でマップの読み込みを行います。

PlayState.hx

_map = new FlxTilemap();
_map.loadMapFromArray(data, 20, 15, AssetPaths.tile__png, 16, 16);
add(_map);

loadMapFromArrayの引数について

loadMapFromArray(配列,マップのcolumn,マップのrow,タイルのスプライト,タイルのwidth,タイルのheight)

ターミナルからテストを実行

terminal

$ cd プロジェクトフォルダー
$ lime test neko

2.CSVから読み込む場合

配列をCSVに変更して、エクセル等を利用してマップを編集出来る様にします。

コードエディタで直接配列を入力するよりこちらの方が編集し易いです。

下記の様にエクセルなどでタイルマップのCSVファイルを作成します。
（画像はLibreのCalcです）

assets ⇒ data に、このCSVファイルを保存。（名前： map1.csv ）

先ほどPlayState.hxに入力した配列から読み込む為のコードを次の3行に変更します。

PlayState.hx

_map = new FlxTilemap();
_map.loadMapFromCSV(AssetPaths.map1__csv, AssetPaths.tile__png, 16, 16, 0, 1, 1);
add(_map);

loadMapFromCSVの引数について

loadMapFromCSV(マップデータ,タイルのスプライト,タイルのwidth,タイルのheight,空のタイルの番号,表示するタイルの先頭の番号,コライドさせるタイルの先頭の番号)

PlayState.hxのコード全体

PlayState.hx

package;

import flixel.FlxState;
import flixel.tile.FlxTilemap;

class PlayState extends FlxState
{
	var _map:FlxTilemap;
	override public function create()
	{
		super.create();

		/*final data = [
			1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
			1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
			1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
			1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
			1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
			1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
			1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
			1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1,
			1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
			1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1,
			1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
			1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1,
			1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1,
			1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1,
			1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
		];
		final tileSize = 16;
		_map = new FlxTilemap();
		_map.loadMapFromArray(data, 20, 15, AssetPaths.tile__png, tileSize, tileSize);
		add(_map);*/

		_map = new FlxTilemap();
		_map.loadMapFromCSV(AssetPaths.map1__csv, AssetPaths.tile__png, 16, 16, 0, 1, 1);
		add(_map);
	}

	override public function update(elapsed:Float)
	{
		super.update(elapsed);
	}
}

ターミナルからテストを実行

terminal

$ cd プロジェクトフォルダー
$ lime test neko

終わりに

簡単ですが情報が少ないので記事にしました。HaxeFlixelを触り始めた方の参考になればと思います。