Tiledで作成したタイルマップjsonファイルをphaser.jsに読み込む方法

JavascriptゲームエンジンのPhaser.jsは、タイルマップを読み込めるのだけれど、Tilemapデータの作成や読み込みに苦労したので、その手順を記述する。

結論から書くと、Tiledでエクスポートする前に、タイルセットレイヤーで「Embed Tilelayer」ボタンをクリックしておく。

準備

タイルマップのパーツになるタイルセット画像を用意しておく。

ここでは、32x32ピクセルの画像を組み合わせて、「tilesets.png」というファイルにしている。

tilesets.png

Tiled

クロスプラットフォームのタイルマップ作成ツール。

jsonファイルを作成するには、次のように操作する。

  1. Tiledを起動する
  2. 新しいマップを作る
  3. レイヤー名を「ground」にする(重要)
  4. タイルセットとして、tilesets.pngを読み込む
  5. タイルセット名として「tileset」を指定する(重要)
  6. タイルセットを使って、タイルマップを描く
  7. タイルセットレイヤーで「Embed Tilelayer」ボタンをクリック(重要)
  8. 「ファイル」>「名前を付けてエキスポート」。jsonフォーマットで保存する。 ファイル名は「tilemap.json」。

Tiled

読み込むファイル

phaser.jsに読み込むとき、必要になるファイルと情報は下記のとおり。

  • タイルマップのjsonファイル:tilemap.json
  • タイルセット画像ファイル:tilesets.png

  • タイルマップレイヤー名:ground

  • タイルセット名:tileset

phaser.js

preload()の記述

// Load tileset and tilemap
function preload() {
  game.load.tilemap('map1', 'images/test11.json',
       null, Phaser.Tilemap.TILED_JSON); // タイルマップのjsonファイル
  game.load.image('tiles', 'images/tilesets.png');  // タイルセット画像ファイル
}

create()の記述

var map;
var layer;

// Set name of tileset and name of tilemap layer
function create() {
  map = game.add.tilemap('map1');  // 引数はpreloadでロードしたマップ名
  map.addTilesetImage('tileset', 'tiles');  // 第1引数にタイルセット名
  layer = map.createLayer('ground');  // タイルマップのレイヤー名
  layer.resizeWorld();
}

関連ページ