====== Tiled Map Editorのデータを扱う ======

[[http://www.mapeditor.org/|Tiled Map Editor]]を使用すればゲームのマップを作成することができます。このツールはXML形式でファイルを保存しますが、JavaScript形式でエクスポートすることができ、エクスポートされたjsファイルを取り込むとTileMapsというグローバル変数にファイルの内容が格納されます。

以下は指定されたレイヤーから画像を作成する例です。Tiled Map Editorで使用したタイルセットと同じ名前でphina.jsのアセットに登録されていることを前提としています。（参考: [[https://qiita.com/minimo/items/b55b792c2fa19964acb4|phina.jsでTiledMapEditorを利用する - Qiita]]

<code>
var TileMapManager = TileMapManager || {}; 

/**
 * @function getIamge
 * @brief レイヤー画像取得処理
 * 指定したマップ、レイヤーの画像をテクスチャとして取得する。
 *
 * @param [in] mapName マップ名
 * @param [in] layerName レイヤー名
 * @return マップ画像のテクスチャ
 */
TileMapManager.getIamge = function(mapName, layerName) {

    // マップ名に対応するマップを取得する。
    var map = TileMaps[mapName];

    // マップの幅と高さのドット数を求める。
    var width = map.width * map.tilewidth;
    var height = map.height * map.tileheight;

    // canvasを作成する。
    var canvas = phina.graphics.Canvas().setSize(width, height);

    // レイヤー名に対応するレイヤーを取得する。
    var layer;
    for (var i = 0; i < map.layers.length; i++) {
        if (map.layers[i].name == layerName) {
            layer = map.layers[i];
        }
    }

    // 各タイルを作成したcanvasに描画していく。
    for (var i = 0; i < layer.data.length; i++) {

        // タイルが配置されている場合
        if (layer.data[i] > 0) {

            // 一次元配列になっているので、x座標とy座標を計算する。
            var x = i % layer.width;
            var y = Math.floor(i / layer.width);

            // タイルを描画する。
            this._drawTile(canvas, map.tilesets, layer.data[i], x * map.tilewidth, y * map.tileheight);
        }
    }

    // テクスチャを作成し、描画結果として返す。
    var texture = phina.asset.Texture();
    texture.domElement = canvas.domElement;
    return texture;
};

/**
 * @function _drawTile
 * @brief タイル描画処理
 * canvasにタイルを描画する。タイルセットの名前と同じ名前でphina.jsのassetに登録をしておくこと。
 * 
 * @param [in/out] canvas canvas
 * @param [in] tilesets タイルセット配列
 * @param [in] index タイルのgid
 * @param [in] x 描画先x座標
 * @param [in] y 描画先y座標
 */
TileMapManager._drawTile = function(canvas, tilesets, index, x, y) {

    var imageName;
    var tileX;
    var tileY;
    var tileWidth;
    var tileHeight;

    // gidに対応するタイルセットを検索する。
    for (var i = 0; i < tilesets.length; i++) {
        if (index >= tilesets[i].firstgid && index < tilesets[i].firstgid + tilesets[i].tilecount) {
            imageName = tilesets[i].name;
            tileX = ((index - tilesets[i].firstgid) % tilesets[i].columns) * tilesets[i].tilewidth;
            tileY = Math.floor((index - tilesets[i].firstgid) / tilesets[i].columns) * tilesets[i].tileheight;
            tileWidth = tilesets[i].tilewidth;
            tileHeight = tilesets[i].tileheight;
            break;
        }
    }

    // 画像を取得する。
    var image = phina.asset.AssetManager.get('image', imageName);

    // 画像のタイルを切出してcanvasに描画する。
    canvas.context.drawImage(image.domElement, tileX, tileY, tileWidth, tileHeight, x, y, tileWidth, tileHeight);
};
</code>

シーン内などで、以下のように使用すればSpriteとして作成できます。

<code>
this.map1 = Sprite(TileMapManager.getIamge('map1', 'layer1')).setOrigin(0, 0).setPosition(0, 0).addChildTo(this);
</code>