オートタイリングのアルゴリズム

RPGツクールVX準拠のオートタイリング処理例をjsdo.itに上げてみました

.. マイクラ作者さんの影響で、アクセスが急増しているみたいなので
見てくれる人が増えるカナーと ..（アサマシイ）

もし、上記に表示されなかったら、jsdo.it本家 へどうぞ

サンプルを動かそうと思うとゴチャゴチャしすぎてしまったので
伝えたかったアルゴリズムについての補足です

VXだと1マップチップは32×32の大きさですが、
実際は16×16の4枚の画像を結合して構成されています。

なぜかというと、
同じ種類のマスでも、周辺8マスに同じ種類のマスが有るか無いかで
境界線部分の表示が変わる仕様だからです。
全パターンを静的な画像で持つと、重すぎるんですね。

VXでは、16×16パーツの集合を 64×96 画像にして管理しており、
これが1マップチップに対応するタイルセットとして規格化されています。
Ref) RPGツクールVX素材規格

というところで、結論としては
　「周辺8マスの状況によって算出される16×16画像4枚が
　64×96画像内で、それぞれどの座標に位置するかがわかれば良い」
ということになって、
それが今回のソースコードの AutoTiling.createPartsData() に該当します

// 渡す周囲8マスのデータ, 左側3マスが同じタイルならこう設定する
var neighborhood = [
    [1, 0, 0],
    [1, 1, 0],
    [1, 0, 0]
];
var data = AutoTiling.createPartsData(neighborhood);
//
// このdataに座標構成が含まれている、例えばこんな風
//
// data[0] = [[0, 0], [32, 32]]
// data[1] = [[0, 16], [32, 48]]
// data[2] = [[16, 16], [80, 48]]
// data[3] = [[16, 0], [80, 32]]
//
// 16x16画像の4枚中 top=0,left=0 に位置する1枚目は
//   64x96内の top=32,left=32 から 16x16サイズでクリップする
// 2枚目は.. という感じ 
//

オートタイリング処理の本体は、このAutoTilingクラスによる部分だけで
他のクラスや関数は、算出された座標リストに従ってHTML要素を吐いたり
サンプルの為にマップらしきものを作っているだけです