継ぎ目の測り方
チェッカーは行ごとに最後のピクセルと最初のピクセル(横の境界)、列ごとに最下のピクセルと最上のピクセル(縦の境界)を比べます。2つのピクセルの差は、アルファを含む4チャンネルの差のうち最大の値(0〜255)です。軸ごとに平均と最大、ヒートマップ用の行ごとの値が出ます。
基準はタイル内で隣り合うすべての列(または行)のペアの平均差です。境界の平均がmax(2, 1.25 × 隣接の平均)以下ならその軸は合格で、両方の軸が合格すれば継ぎ目なしと判定します。だから境界の差が21段階ある粗い石のテクスチャは合格し(隣どうしも21違う)、252跳ぶなめらかなグラデーションは不合格になります(隣どうしは4しか違わない)。ヒートマップも同じ隣接の平均で目盛りを合わせるので、継ぎ目のないタイルが真っ赤に塗られず暗いままです。
シームレス化はタイルを幅と高さの半分ずらして元の境界を中央で出会わせ、その中央線の両側の帯を半分ずらしたコピーとなめらかな重みでクロスフェードします。帯の既定はタイルの12%(64pxのタイルなら8px)で、0〜64pxに設定できます。新しい境界は構造上つながりますが、代わりに中央にブレンドされた十字ができ、大きな模様が二重に見えることがあります。新たに描き足すものはありません。
- 境界のペア
- タイルを繰り返したときに接する2本の線:最後の列と最初の列、最下行と最上行。
- 隣接の平均
- タイル内で隣り合う線どうしの平均差。テクスチャ自体の変化。
- 比
- 境界の平均 ÷ 隣接の平均。1前後なら見えず、63ならはっきりした継ぎ目。
- ブレンド帯
- 移動した継ぎ目の両側で、シームレス化がクロスフェードする帯。
例:不合格のグラデーションと合格のノイズタイル
どちらのタイルも64 × 64です。チェッカーが報告する数値です。
ランプタイル グレー 0 → 252、左から右へ(列ごとに+4)、全行同じ
横 63列目(252)と0列目(0):平均252、最大252
隣接の平均 4.00 → 比 252 / 4 = 63;上限 max(2, 4 × 1.25) = 5 → 継ぎ目あり
縦 全行同じ:境界0、隣接0 → 合格
シームレス化 ずらし32, 32;帯 round(64 × 0.12) = 8px → 境界平均4、隣接5.78、比0.69 → 継ぎ目なし
ノイズタイル 値96〜160:境界平均 20.8 / 18.8、隣接の平均21.5 → 比0.97 / 0.87 → 継ぎ目なし
ノイズタイルは修正後のランプより境界の差が大きいのに、内部も同じくらい変化しているので合格します。生の数値1つにしきい値を置くと、この2つをどちらも誤判定します。
結果の確認
- 3 × 3リピートの中央を100%と200%で見ます。境界に沿って線、明るさの段差、質感の密度の変化がないはずです。
- 両方の軸を読みます。比が1前後かそれ以下で、ヒートマップに辺全体に沿った明るい帯がないはずです。
- シームレス化の後は、ブレンド帯の中で模様が二重になっていないか前後を比べ、判定をもう一度確認します。
- ダウンロードしたPNGをエンジンの広い繰り返し面に貼り、カメラを継ぎ目の上で動かしてみます。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|
| チェッカーは継ぎ目なしなのにゲームで線が見える | エンジンが繰り返しではなく端の固定(clamp)でサンプリングしている、またはミップマップや圧縮が縁のテクセルを変えている | 同じ拡大率で3 × 3プレビューとゲームを比べ、ミップマップを切って試す | エンジンのサンプラー設定でテクスチャを繰り返し(wrap)にし、圧縮後のテクスチャも確認する |
|---|
| 縁が透明なスプライトに継ぎ目が出る | 差にはアルファも含まれ、透明な縁と不透明な縁は実際に大きく違う | そのタイルが繰り返す用途かを確認 | スプライトなら結果は無視する。このチェックは繰り返すテクスチャとタイル向け |
|---|
| シームレス化の後、中央にぼやけた・二重の十字が残る | クロスフェードが帯の中でテクスチャの別々の部分を混ぜている | 中央線の周りで前後を比べる | 詳細設定で帯を狭くするか、画像エディターで中央を描き直す |
|---|
| 合格したのに面が明らかに繰り返して見える | 目立つ模様がタイルの周期で繰り返されている。継ぎ目ではなく繰り返しの問題 | 3 × 3プレビューを離れて見る | 大きいテクスチャ、複数のバリエーションタイル、デカールで模様を崩す |
|---|
ほかの方法
| 方法 | こんなときに向いています |
|---|
| 画像エディターで半分ずらし、十字の部分を手で描き直す | ブレンドではなく本当に描く必要がある継ぎ目(ひび、板の境目)のとき。 |
|---|
| テクスチャを作ったツールのタイリング設定で書き出す | プロシージャルや素材のツールで作ったテクスチャのとき。ツール自身のタイリングなら後から直す必要がありません。ノーマルマップは繰り返すノーマルマップの継ぎ目を参照。 |
|---|
この方法の限界
- 判定は境界のピクセル差を測ります。目立つ繰り返しや、タイル内で変わるライティングは検出しません。
- 保存されるのは修正したPNGだけで、測定値は画面上に表示されます。
バージョンと出典
docs/TILE-LAB.mdとtests/game-seams.test.mjsで測定しました。つながるコサインのタイルは比1.3未満で継ぎ目なし、ランプは平均240超・比20超で継ぎ目ありと判定され、シームレス化の後は平均が8未満に下がりました。上の例は同じモジュールで計算し直したものです(64pxのランプとシード固定のノイズタイル)。
タイルの継ぎ目チェック
2×2・3×3の繰り返しと左右・上下の境界差で継ぎ目を確認し、修正も試せます。
使い方
- 画像を追加
- 設定を調整して結果を確認
- 新しいファイルを保存
対応形式
PNG / JPG / WebP / AVIF / HEIC → PNG + JSON (ZIP) — 入力のデコードはブラウザ対応と追加エンジンに依存します。
このツールでできること
2×2・3×3の繰り返しと左右・上下の境界差で継ぎ目を確認し、修正も試せます。
処理方式と検証状況
advanced · wrap-edge channel difference against an in-tile baseline / half offset + cross blend. 品質検証中です。Pro・Flagship水準はまだ実証されていません。
書き出す前に
継ぎ目の修正は絵を実際に変更します(半タイル移動+境界ブレンド)。内容の新規生成は行いません。
よくある質問
このツールにはどのような制限がありますか?
継ぎ目の修正は絵を実際に変更します(半タイル移動+境界ブレンド)。内容の新規生成は行いません。
ファイルはアップロードされますか?
このツールで開いたファイルはアップロードせず端末で処理します。コミュニティの投稿に明示的に添付する画像は別途アップロードされます。一部のエンジンやモデルは外部から取得するため、IPアドレスなどの接続情報は配信元に伝わります。
作業は自動保存されますか?
いいえ。画像と編集状態はこのタブに保持され、メディア出力は端末の一時保存を利用する場合があります。言語を変えても作業は残りますが、再読み込み、タブを閉じる操作、別のページへの移動で失われることがあります。