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

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

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

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

![cap2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957376/6d70f7ae-955a-1ac2-0418-b3d56ef62187.png)
上図のようにブロックの大きさ16×16、ブロック数300（横20×縦15）でブロックを配置したいので、画面の大きさがX:16×20=320、Y:16×15=240で表示される様に <code>Main.hx</code> を変更します。
```diff_ruby:Main.hx内、super();下
- addChild(new FlxGame(0, 0, PlayState));
+ addChild(new FlxGame(320, 240, PlayState));
```

<code>assets</code>  ⇒  <code>images</code> に配置するブロックのスプライトシートを保存します。（名前： tile.png ）
![tile.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957376/d3110aa6-fe91-9620-093f-3d9e1cab64dd.png)

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

<code>PlayState.hx</code> で、要素数が横×縦の数となる配列を作成します。（20×15で要素数300）
```ruby: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
];
```
そして、<code>FlxTilemap()</code> の <code>loadMapfromArray</code> を使用してdata配列を読み込みます。
インポートへ <code>flixel.tile.FlxTilemap</code> を追加
```ruby:PlayState.hx
import flixel.tile.FlxTilemap;
```
PlayStateクラスで <code>FlxTilemap</code> オブジェクトを宣言
```ruby:PlayState.hx
var _map:FlxTilemap;
```
data配列の下でマップの読み込みを行います。
```ruby:PlayState.hx
_map = new FlxTilemap();
_map.loadMapFromArray(data, 20, 15, AssetPaths.tile__png, 16, 16);
add(_map);
```

```ruby:loadMapFromArrayの引数について
loadMapFromArray(配列,マップのcolumn,マップのrow,タイルのスプライト,タイルのwidth,タイルのheight)
```

ターミナルからテストを実行
```ruby:terminal
$ cd プロジェクトフォルダー
$ lime test neko
```

### 2.CSVから読み込む場合

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

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

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

![map1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957376/3fc699d8-ba45-4d65-a584-04aa2862fe69.png)

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

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

```ruby:PlayState.hx
_map = new FlxTilemap();
_map.loadMapFromCSV(AssetPaths.map1__csv, AssetPaths.tile__png, 16, 16, 0, 1, 1);
add(_map);
```

```ruby:loadMapFromCSVの引数について
loadMapFromCSV(マップデータ,タイルのスプライト,タイルのwidth,タイルのheight,空のタイルの番号,表示するタイルの先頭の番号,コライドさせるタイルの先頭の番号)
```

PlayState.hxのコード全体
```ruby: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);
	}
}
```

ターミナルからテストを実行
```ruby:terminal
$ cd プロジェクトフォルダー
$ lime test neko
```

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