テクスチャアトラス作成・タイリング画像化(スプライトシート/シームレス化)

テクスチャアトラス作成・タイリング画像化ツールについて

ゲームやWeb、3DCGの素材づくりでよく必要になる「複数の画像を1枚にまとめる」「1枚の画像をつなぎ目のない繰り返し素材にする」という2つの作業を、ブラウザだけで行える無料ツールです。インストールや会員登録は不要で、読み込んだ画像はお使いの端末の中だけで処理されます。

アトラス化は、アイコンやキャラクターのパーツ、アニメーションの連番画像などをまとめて読み込み、1枚のテクスチャアトラス(スプライトシート)を作る機能です。配置方法は2種類から選べます。「自動で詰める」は、大きさの違う画像を空いている場所へ効率よく詰め込むMaxRects法という配置アルゴリズムで、仕上がりの面積ができるだけ小さくなるサイズを自動で探します。「グリッド」は全画像を同じ大きさのマスに等間隔で並べる方式で、コマの位置が規則的になるため、ゲームエンジンのスプライト分割機能やCSSアニメーションで扱いやすいのが特徴です。

ゲーム用テクスチャで問題になりやすいにじみ対策として、画像同士の間隔(パディング)に加え、画像の外周1列の色を外側へコピーする「フチの押し出し(エクストルード)」にも対応しています。縮小表示やミップマップ、UVの丸め誤差で隣の画像の色が混ざる現象を防げます。ほかに、透明な余白の切り詰め(トリミング)、2のべき乗サイズ(512・1024・2048…)や正方形への拡張、背景色の指定ができます。配置結果は、TexturePacker互換のJSON(Hash形式・Array形式)、0〜1のUV座標つきJSON、CSSスプライトのいずれかで書き出せるので、Phaser・PixiJS・Cocos・Unity・Godot向けの変換スクリプトや、Webページのアイコン表示にそのまま使えます。

タイリング化は、写真や手描きの素材を上下左右に並べても継ぎ目が見えないシームレステクスチャに変換する機能です。「クロスフェード」は画像の端の部分を反対側の端に重ねて少しずつ混ぜ合わせる方式で、元の見た目をほぼ保ったまま継ぎ目を消せます(なじませ幅の分だけタイルが小さくなります)。「ミラー」は左右・上下に反転した画像を並べて2倍サイズにする方式で、必ず完全につながりますが左右対称の模様になります。「半分ずらす」は画像を縦横に半分ずつずらすだけの方式で、中央に現れる継ぎ目をペイントソフトで直す下準備に使えます。写真素材で起きがちな「端が暗い・片側だけ明るい」といった明るさのムラは、「明るさムラ補正」で平らにできるので、並べたときに大きな濃淡の繰り返し模様が目立ちにくくなります。

用途の例: 2Dゲームのキャラクターやエフェクトのスプライトシート作成、UIアイコンのアトラス化による読み込み枚数の削減、3Dモデルで使う複数テクスチャの1枚化、Webサイト用CSSスプライト、地面・壁・布などの写真からの繰り返しテクスチャ作成、イラスト背景用の連続模様素材の下準備など。複数の素材を配置して柄を作りたいときは、姉妹ツールの「タイリングパターン作成」も便利です。

使い方

アトラス化

1. 「アトラス化」タブの枠に画像をまとめてドラッグ&ドロップするか、クリックして選択します(複数可。Ctrl+Vでの貼り付けや追加読み込みもできます)。連番画像は「並べ替え」で名前順にすると番号どおりに並びます。
2. 「2. 配置」で配置方法を選び、画像の間隔・外周の余白・フチの押し出し・最大サイズなどを設定します。設定を変えるとプレビューがすぐ更新されます。
3. プレビューで配置を確認します。枠にマウスを乗せると画像名と座標が表示されます。
4. 「3. 書き出し」で座標データの形式を選び、「画像+データをZIPで保存」を押します。画像だけ、データだけの保存もできます。

タイリング化

1. 「タイリング化」タブの枠に画像を1枚読み込みます。
2. 方法(クロスフェード・ミラー・半分ずらす)とつなげる方向を選び、必要ならなじませ幅や明るさムラ補正を調整します。
3. 並べたプレビューで継ぎ目を確認します。「長押しで元画像と比較」を押している間は、元画像をそのまま並べた状態が表示されます。
4. 保存時の枚数を選んで「PNGで保存」を押します。1×1ならタイル1枚、2×2などを選ぶと並べた状態の画像を書き出します。

よくある質問

画像はアップロードされますか?

いいえ。画像の読み込み・配置・変換・書き出しはすべてブラウザ内(お使いの端末内)で行われ、当サイトを含むどこにも送信されません。ページを閉じると結果は消えるので、必要なものは保存してください。

テクスチャアトラス(スプライトシート)とは何ですか?

複数の小さな画像を1枚の大きな画像にまとめ、各画像の位置を座標データで管理する方式です。ゲームやWebでは画像ファイルの読み込み回数や描画命令(ドローコール)を減らせるため、表示が軽くなります。アニメーションのコマをまとめたものは特にスプライトシートと呼ばれます。

「自動で詰める」と「グリッド」はどう使い分けますか?

大きさがばらばらのアイコンやパーツをできるだけ小さな1枚にまとめたいときは「自動で詰める」、同じ大きさのアニメーションのコマを規則正しく並べたいときは「グリッド」が向いています。グリッドのマスの大きさは既定で一番大きい画像に合わせ、マス幅・高さを指定した場合は、はみ出す画像を縦横比を保って縮小して収めます。

フチの押し出し(エクストルード)は何のためにありますか?

ゲームエンジンなどでアトラスを拡大・縮小表示すると、画像の境目で隣の画素(透明部分や別の画像)の色が混ざり、線やにじみが出ることがあります。押し出しは各画像の外周の色を外側へ指定ピクセル分コピーして、混ざっても同じ色になるようにする対策です。座標データの位置とサイズは押し出し前の画像本体の範囲を指します。

書き出せる座標データの形式は?

TexturePacker互換のJSON(Hash形式・Array形式)、UV座標つきのシンプルなJSON、CSSスプライトの4種類です。TexturePacker形式は多くの2Dゲームライブラリ(Phaser・PixiJSなど)で読み込めます。UV形式には左上原点と左下原点(OpenGL系)の両方の0〜1座標が入るので、3DCGソフトやシェーダーでの利用に便利です。

画像を回転して詰めることはできますか?

できません。回転配置は読み込む側が回転情報に対応している必要があり、扱いを間違えやすいため、このツールでは常に元の向きのまま配置します。

「最大サイズに収まりません」と表示されます

画像の合計面積や一番大きい画像が、選んだ最大サイズ(既定4096px)に入りきらない状態です。最大サイズを大きくする、間隔・余白・押し出しを減らす、「透明な余白を切り詰める」をオンにする、2のべき乗・正方形をオフにする、画像を2つのアトラスに分ける、のいずれかをお試しください。出力の上限は8192pxです。

タイリング化の「クロスフェード」で画像が小さくなるのはなぜですか?

画像の端をなじませ幅の分だけ反対側に重ねて混ぜることで継ぎ目を消しているため、重ねた分だけタイルの幅・高さが短くなります。なじませ幅を広げるほど継ぎ目は目立ちにくくなりますが、重なった部分がぼやけて二重に見えやすくなるので、15〜25%程度から調整するのがおすすめです。

並べると同じ模様の繰り返しが目立ちます

画像の中に目立つ形や、明るさの大きなムラがあると、継ぎ目が消えていても繰り返しが目につきます。「明るさムラ補正」を上げると画像全体の濃淡の偏りが平らになり改善することがあります。目立つ形がある場合は「半分ずらす」で書き出してペイントソフトで修正するか、なるべく均一な部分を切り抜いた画像を使ってください。

透過PNGや大きな画像も使えますか?

透過PNGはどちらの機能でも透明度を保持して処理・保存します。読み込める画像は各辺16384pxまで(タイリング化は8192pxまで)、書き出しは各辺8192pxまでです。対応形式はPNG・JPEG・WebP・GIF(先頭フレーム)など、お使いのブラウザが表示できる画像です。