Cocos2d-html5で TiledMapEditorから出力したマップを並べる

TiledMapEditorでマップを作成する

1.tiled map editorをダウンロード

http://www.mapeditor.org/download.html

2.新規プロジェクトの作成

使用するタイルセットによって設定します。
TiledMapEditorのsampleについているdesertで使用されているpngを使う場合は
32*32で1pxのmerginがはいっているので、その通りに設定します。
注：TiledMapEditorのSampleにある.tmxをそのまま使用するとmapのサイズが大きすぎてうまく描画できませんでした。
新規プロジェクトで適切なサイズで作り直しましょう。

3.画像をdrag & drop でタイルセットに読み込みます。

4.あとはタイルセットでチップを選んだ状態で、ペイントソフトのように画面を塗るとマップが作成されます。

5.レイヤーも使用できます。

6.tmxで書き出しを行います。

cocos2d-html5からマップを読み込む

1.resource.jsに .tmxと.pngを追記します

var s_sample_map_tmx = "res/sample_map.tmx";
var s_sample_map_png = "res/tmw_desert_spacing.png";
var g_resources = [
{src:s_sample_map_tmx},
{src:s_sample_map_png},
]

2.gameLayerで読み込む

var gameLayer = cc.Layer.extend({
    ctor:function () {
        this._super();
        this.init();
    },
    init:function () {
        this._super();
        cc.Director.getInstance().setProjection(cc.DIRECTOR_PROJECTION_2D);
        var tilemap = cc.TMXTiledMap.create("res/sample_map.tmx");
        this.addChild(tilemap,1);

3.完成