1枚の画像からタイルセットを切り出す方法

タイルセットとスプライトシート：要求が厳しい理由

スプライトシートは、独立した画像を収めています。歩行サイクルのあるフレームが次のフレームから1ピクセル中心を外れていても、各フレームは独立して描画され、小さな位置の揺れは自然な動きに見えるため、誰も気づきません。タイルセットは違います。各タイルはグリッド上で隣のタイルと端を接し、レベル全体に繰り返し置かれます。1つのタイルの1ピクセルのずれは、そのタイルだけにとどまりません。そのタイルが現れる境界ごとに繰り返され、地面や壁のタイル状のテクスチャでは、1回の悪い切り抜きから何十もの目立つ継ぎ目が生じることがあります。

これがタイルセットの設計上の制約すべてです。継ぎ目が見えないこと、そのために縁がピクセル単位で正確であること、したがって切り出す前に元画像に実在する検出可能なグリッドが必要です。

タイルサイズの選択

他の人の既存素材からタイルを抽出する場合、サイズは通常、画像ですでに決まっています。レンガ、草の房、床板など、繰り返す模様が画像の幅に何回現れるか数えて割ってください。参考画像や生成テクスチャから自分でタイルセットを定義する場合、一般的なサイズは16×16、32×32、48×48ピクセルです。

• 16×16 は古典的なレトロピクセルアートに見えます。細部には厳しく、非常に少ないピクセルで草・石・水などの素材を伝える必要があり、それ自体が本格的な技術です。
• 32×32 は現在最も一般的な標準です。通常ズームで明確に読めるためにサブピクセル精度を求めず、質感と陰影に十分な場所があります。
• 48×48 以上は、画面上のタイルが大きいゲームや、平坦なピクセルアートより質感の細部を見せたい絵画的なアートに適しています。

何を選んでもタイルセット全体で統一し、理想的にはプロジェクト内の全タイルセットで揃えてください。サイズが混在すると、実行時に絵を拡大縮小してピクセルアートが避けたいぼけを再発させるか、レベルエディターで複数の独立したグリッドを管理する必要があります。

グリッドがゼロから始まらない場合のオフセットの検出

ここでつまずく人が多くいます。タイルが32pxとわかっているので0、32、64、96…で切ると、タイルが半分に切れ、壁のテクスチャがある行ではほぼ床、次の行ではほぼ壁になります。実際のグリッドは画像左上から始まっておらず、数ピクセルずれています。元画像の枠、スクリーンショットの残りの余白、書き出し時に追加した余白などがよくある原因です。

オフセットを見つけるには、ピクセル単位まで拡大し、レンガ間の目地、草タイルの下部の影、上端のハイライトなど、繰り返す特徴を探します。最初に現れるピクセル座標を測り、同じ特徴が次の間隔で繰り返すか確認します： N ピクセル、条件は N がタイルサイズです。最初の目地がx = 6、次がx = 38なら、オフセットは6ピクセル、タイルサイズ32という推測が確定します。両軸を独立して調べてください。水平と垂直のオフセットは無関係で、片方だけ存在することもあります。

隙間ゼロのタイルとにじみの問題

スプライトシートには、フレーム間に透明な隙間があることがよくあります。タイルセットには通常ありません。配置後に継ぎ目なく敷き詰めるため、タイルは隙間ゼロで直接接しています。ただし、エンジンに取り込むと副作用があります。配置したタイルの端に隣のタイルの細片が現れる、テクスチャのにじみです。

色のにじみは、GPUのテクスチャサンプリング方法によって起こります。タイルを正確な1:1のピクセル対応ではないサイズで描くとき、少し拡大縮小した場合や、カメラがサブピクセルの位置にある場合、レンダラーはタイルの端のピクセルと元テクスチャでそのすぐ隣にあるもの、つまり隣のタイルを混ぜてサンプリングします。対処は元画像に隙間を加えることではありません。それではタイルの接続が壊れます。補間でにじまないようポイント/最近傍フィルタリングを使うか、エンジンが配置・取り込み時に1ピクセルの境界を自動で押し出すようにします。UnityのSprite AtlasとGodotのTileSetインポーターには、まさにこのための余白や押し出しのオプションがあります。拡大縮小したり、整数でない位置へ動かしたりするタイルセットでは有効にしてください。

重複タイルの削除

グリッド全体を切ると、ピクセル単位で同じ、またはほぼ同じタイルが複数できがちです。参考シートで単純な草が4回現れるのは、見た目のバランスのために繰り返した場合などです。重複を残しても誤りとは限りませんが、素材が肥大化し、レベルエディターのパレットが見づらくなり、後で「草タイル」の編集を複数箇所へ適用する必要が出ます。

何十もの小さな四角を目で見比べずに重複を見つける簡単な方法は、各タイルの生のピクセルデータをハッシュ化して比較することです。同じハッシュのタイルはピクセル単位で同一なので、安心して1つにまとめられます。例えば点灯中と消灯中のたいまつのように、1ピクセルだけ色が違う近似したタイルは別のハッシュになります。意味のある別タイルなのか、意図的に分けて残すべきバリエーションなのかは、人が判断する必要があります。

エンジンへ取り込む

Unity：Tile Palette

切り分けたタイルセットを、Sprite ModeをMultipleにしたSpriteとして取り込み、Sprite Editorでタイルサイズに合わせたGrid By Cell Sizeで切り分け、次を開きます Window → 2D → Tile Palette、新しいパレットを作成し、切り分けたスプライトをドラッグして追加します。その後、タイルはシーン内のTilemapコンポーネントに直接描画できます。Unityの外で個別のタイルPNGに切り分け済みなら、Sprite Editorの手順をすべて省略し、PNGのフォルダーをそのままパレットへドラッグできます。

Godot：TileSetリソース

TileMapLayerノードにTileSetリソースを作成し、そのAtlasソースに、タイルサイズを合わせて切り分けたタイルセット画像を追加してください。Godotのインポーターでは、アトラスソースにSeparationとMarginの設定もあり、上記の隙間なし配置ではなく、タイル間に小さな隙間があるシートに対応できます。元画像に隙間がなく、エディターの表示領域で色のにじみが出る場合は、アトラスのテクスチャ余白オプションを有効にしてください。内部で端のピクセルを複製し、サンプリングが隣のタイルに届かないようにします。

実用的な作業の順序

1. 画像全体で繰り返す特徴の数を数え、タイルサイズを特定してください。
2. 最初のタイルが実際に始まる場所を見つけ、xとyのオフセットを求めてください。
3. そのグリッドで分割します。グリッド線をドラッグできるブラウザーツールなら、数値計算だけに頼らず、見て確認できる手順になります。
4. タイルのハッシュを比較し、完全な重複を1つにまとめてください。
5. タイルを整数でない倍率や位置で描画する可能性がある場合、余白か押し出しを有効にしてエンジンへ取り込んでください。

よくある質問