フリーソフト 「tiled」について

スプライトシートから画像をセレクトしタイル状に並べると、その画像が何番目に該当するかを配列にしいて出力してくれるソフト。
便利だが、用途は迷路ゲームなどの経路マップを作る程度しか思いつかない。

以下にて詳しく解説してくれている。

http://d.hatena.ne.jp/tetsuroh/20111120/1323254681

上記右下の絵柄が並んでいる画像（スプライトシート）から、絵柄をセレクトし、画面中央にプチプチと配置していく。
手順としては

１．画像を読み込む

２．サイズ（一つの絵柄のサイズと横いくつ縦いくつで並んでいるかを指定）

３．配置しcsv出力

結果以下のようなxmlが出力される（該当のみ抜粋）。

<data encoding="csv">

32,31,31,31,1,31,31,31,31,32,

1,1,1,1,1,1,1,1,1,1,

32,1,26,1,26,1,26,1,1,32,

32,26,1,1,26,1,1,26,1,32,

32,1,1,1,26,26,1,26,1,32,

32,1,1,26,1,1,1,26,1,32,

32,1,1,1,1,1,1,26,1,32,

1,1,26,1,26,1,26,1,1,1,

32,1,1,1,1,1,1,1,1,32,

32,31,31,31,1,31,31,31,31,32

</data>

これをjavascript向けに2次元配列に加工。

var tileMap=

[

[32,31,31,31,1,31,31,31,31,32],

[1,1,1,1,1,1,1,1,1,1],

[32,1,26,1,26,1,26,1,1,32],

[32,26,1,1,26,1,1,26,1,32],

[32,1,1,1,26,26,1,26,1,32],

[32,1,1,26,1,1,1,26,1,32],

[32,1,1,1,1,1,1,26,1,32],

[1,1,26,1,26,1,26,1,1,1],

[32,1,1,1,1,1,1,1,1,32],

[32,31,31,31,1,31,31,31,31,32]

];

ただし、tiledで生成されるデータは「0」ではなく「1」始まり。

ループするときは-1を加算する必要があるため、オフセットを設ける

var mapIndexOffset=-1

後は回して描画。

for(var r=0 ; r<mapRows ; r++){

for(var c=0 ; c<mapCols ; c++){

var tiled=tileMap[r][c]+mapIndexOffset;

//元が1行に８つだから

var sourceX=(tiled%8)*32;

var sourceY=Math.floor(tiled/8)*32;//1行8つで割っていくつ目が行

context.drawImage(tileSheet , sourceX , sourceY , 32, 32 , c*32 , r*32 , 32 , 32);

}

}

上述した通り用途が今のところ思い浮かばないため、セカンドマシンにインストールしたのみ。

今後cssスプライト(※1)を使うことも増えるように思う。

が、アニメーションの場合はFlashCS6あたりからHTMLへ出力したほうが早そうだし、そもそもアニメの場合は素直に配置したスプライトシートを作るだろうからtiledは必要ないだろう。

今後使うことがあったら追記する。

※1 cssスプライト：
数個の画像を1枚のファイルにまとめ、部分だけ表示させボタンエフェクトやアニメに用いる 技法。以下で解説してくれている。
http://www.designwalker.com/2008/02/css-sprite.html