タイルをずらさず、余白と間隔のあるタイルセットを分割
最初のタイルは正しく見えるのに、シートの先へ進むほど、各タイルに隣のタイルが多く混ざることがあります。このパターンは通常、タイル間隔をタイルの一部として数えたか、まったく数えなかったことを意味します。シートを切り出す前に、独立した3つの値を測ってください。
タイルサイズ、外枠、隙間を個別に測る
幅と高さは各出力画像に欲しいピクセル数です。外側余白は四辺共通の枠幅、タイル間隔は隣接タイル間の隙間です。32 pxのタイルの後に1 pxの隙間があれば、次の切り抜き位置は33 px進みますが、出力画像は32 pxのままです。
ピクセル座標があるエディターで、元画像を実寸で確認してください。縮尺を変えたブラウザーのサムネイルから推測しないでください。この分割ツールには余白の値と間隔の値が1つずつしかないため、非対称の枠や縦横で違う隙間には、前処理や手動の切り分けが必要です。
135 × 102の元画像で実践
- 32 × 32のタイルが4列3行に並ぶPNGかWebPをアップロードします。
- タイル幅を32、タイル高さを32、外側余白を2、タイル間隔を1に設定します。
- 最初のテストでは、想定出力が12ファイルになるよう、スキップと重複除去をオフにしてください。
- 抽出してプレビューを確認し、ZIPを開いて最後の列と一番下の行を調べてください。プレビューは、書き出した最初の16タイルだけを表示します。
幅は2 × 2 + 4 × 32 + 3 × 1 = 135、高さは2 × 2 + 3 × 32 + 2 × 1 = 102です。切り抜きのx位置は2、35、68、101、y位置は2、35、68です。これらの数値により、推測せず設定を具体的に確認できます。
設定を変える前にエラーのパターンを読む
| パターン | 考えられる測定の問題 | 確認 |
|---|---|---|
| すべてのタイルが同じだけずれる | 外側余白が違う | 最初のタイルの座標 |
| 増えていく横方向のずれ | 幅または間隔が違う | 列の開始位置の間隔 |
| 増えていく縦方向のずれ | 高さまたは間隔が違う | 行の開始位置の間隔 |
| 最後の行または列が欠ける | 末尾の不完全なセル | 実際の画像寸法と枠線 |
完全なセルだけを抽出します。実際より大きな余白を入力すると、最後のタイルが許可範囲の外になる場合があります。残りの一部を引き伸ばして完全なタイルを作ることはしません。無関係な寸法で補わず、測定を直すか原画像を準備してください。
グリッドが正しくなってから、スキップと重複除去を有効にする
スキップされる空のセルは、すべての場所のアルファ値が0です。薄いピクセルが1つでもあると残されます。重複除去には厳密なRGBAの一致を使い、アルファ0の下に隠れたRGB値も含めます。近似したテクスチャは統合せず、見た目が同じ透明画像でも別々に残る場合があります。
これらのオプションを有効にすると、ファイル番号と元のセル番号は一致しない場合があります。tilemap.jsonを保持してください。cellsには行と列の位置が記録され、保持した素材にはタイルID、スキップした空白にはnullが入ります。重複した位置は同じIDを参照することがあります。マニフェストは今回の抽出のマップであり、エンジンですぐ使えるタイルマップではありません。
切り抜きの誤りとエンジンの継ぎ目を区別する
書き出したPNGにすでに隣の境界が含まれるなら、切り抜き設定を直してください。PNGはきれいなのに、ゲームでカメラを動かすと細い線が出るなら、エンジンのフィルタリング、倍率、テクスチャの余白、取り込み設定を調べます。きれいなタイルを任意の追加ピクセル付きで切り直すと、違いを隠し、画像を損ねる場合があります。