読者です 読者をやめる 読者になる 読者になる

フニゲの開発日記

Electronとか...

cc.TMXTiledMap

cocos2d-html5


後回しにしていたTiledの勉強。

タイルセット(*.png)とマップデータ(*.tmx)の2つが出力されるので、これをresource.jsで先読みしておく。

// resource.js
var s_tile = "res/test.tmx";
var s_tile_png = "res/test.png";
...

var g_ressources = [
    {src:s_tile},
    {src:s_tile_png},
    ....
];

あとProjectionを2Dにする。デフォルトのDIRECTOR_PROJECTION_3Dのままだと計算誤差でタイルの継ぎ目が見えてしまう。

// game.js
...
    init:function () {
        this._super();

        // これをどこかで呼ばなければならない
        cc.Director.getInstance().setProjection(cc.DIRECTOR_PROJECTION_2D);
        ...

        // 表示
        var tilemap = cc.TMXTiledMap.create(s_tile);
        this.addChild(tilemap);

        // アンチエイリアスはよくわからんので保留にしておく
        //var layer = tilemap.getLayer("タイル・レイヤー1");
        //layer.getTexture().setAntiAliasTexParameters();

        ...
        return true;
    },

スケールやポジションは整数でないとエッジがおかしくなる。強制的に整数に揃えるには

    tilemap.setPosition(Math.floor(x), Math.floor(y));

とか書いておけばいいだろう。でも回転拡大のアニメーションをするとやっぱりタイルの境界が見えてしまうんだよな。

Tiledのサンプルデータでは、タイルの間は1ピクセルずつマージンがある。
f:id:funige:20131001203453p:plain
見えているのはこの黒い線なのでこれを隣のピクセルで埋めてやればいい。
検索するとspritesheet-artifact-fixer.pyというそのものズバリな感じのスクリプトが見つかるので、埋めるとこうなる。
f:id:funige:20131001203435p:plain
spritesheet-artifact-fixer.py -f test.png -x 32 -y 32 -m 1 -s 1

まあこれはインチキだ。たまたま問題が目立たないというだけのこと。
f:id:funige:20131001204648p:plain

実際にデータを作るときは、マージンを2ピクセル取って各タイルを外側に1ピクセルずつ伸ばしてやればいいと思う。

広告を非表示にする