グリッドオーバーレイの使い方
- スプライト、シート、タイルセットをドロップします。セルサイズはフレームのグリッドから推測されます。
- セルの幅と高さを設定し（16×16 と 32×32 はワンクリック）、タイルが 0,0 から始まらないならオフセットも指定します。
- 線の色、不透明度、幅を選び、区切りが欲しければ 2・4・8セルごとに主線を追加します。
- 書き出し倍率を選びます。グリッド線は拡大したピクセルの間に入ります。
- PNG をダウンロードします。
得られるもの
- セルのグリッド付きの拡大 PNG
- 細かい 1px グリッドと主線（オプション）
- 外枠（オプション）
ゲーム制作で使って得たコツ
- チュートリアルには 8× 以上の倍率を使いましょう。1× だとグリッド線がピクセルを覆ってしまい、絵が隠れます。
- パレットにない線の色（シアンかマゼンタがたいてい無難）を選ぶと、読む人が線と絵を混同しません。
- 16×16 のタイルで組んだ 64×64 の部屋を説明するなら、4セルごとの主線が役立ちます。
- オフセット欄を使えば、Tiled やエンジンに取り込む前に、タイルセットに 1px の余白があるか確認できます。
活用例
- チームやストアページ向けにタイルセットの資料を作る
- ドット絵のチュートリアルや手順画像を作る
- 16 px や 32 px のグリッドに対するスプライトの位置を確認する
- レベルデザイナー向けの参考画像を用意する
よくある質問
グリッドでピクセルが隠れませんか？
倍率 2× 以上なら、線は拡大したピクセルの境界に描かれます。1× ではピクセルの間に隙間がないので、線がピクセルの1列を置き換えます。
正方形以外のグリッドも使えますか？
はい。セルの幅と高さは別々に設定できるので、16×24 や 32×16 のグリッドも作れます。
ピクセルグリッドのオプションとは？
セルのグリッドの下に薄い 1ピクセルのグリッドを表示する機能で、倍率が 4× 以上のときに表示されます。ピクセルを1つずつ数えやすくなります。
PNG のサイズはどうなりますか？
元のサイズに書き出し倍率を掛けたサイズです。最終サイズはダウンロードボタンの下に表示されます。
画像はアップロードされますか？
いいえ、すべてブラウザ内で描画されます。