アウトラインジェネレーターの使い方
- スプライトかシートをドロップします。
- 色を選びます。「最も暗い色を使う」で、スプライト内で一番暗い色を拾います。
- 太さを設定し、外側、内側、両方から選びます。
- 角を切り替えます。オフは斜めの角が欠けた定番のドット絵アウトライン、オンは角を埋めます。
- シートなら「フレームごとにアウトライン」をオンのままにしてグリッドを確認し、ダウンロードします。
得られるもの
- はみ出さないようキャンバスを広げた、アウトライン付きの PNG
- 全フレームにアウトラインを付け、同じだけ広げたシート
ゲーム制作で使って得たコツ
- 手描きのドット絵の多くは、1px のアウトラインで斜めの角を入れません。2px 以上のアウトラインや太めの UI アイコンでは角をオンにしましょう。
- さまざまな背景に対しては、純粋な黒より暗めの色味（深い紫や紺）のアウトラインのほうがきれいに見えることが多いです。
- スプライト自身の色を暗くした内側アウトラインは、サイズを変えずに輪郭を引き締める手軽な方法です。
- シートにアウトラインを付けると、各フレームが上下左右に太さの分だけ大きくなります。エンジン側のフレームサイズも合わせて変更してください。
活用例
- ごちゃついた背景でもスプライトを見やすくする
- アイテムやユニットに選択・ホバー時のアウトラインを付ける
- AI 生成のスプライトに統一したスタイルのアウトラインを付ける
- アウトライン付きの UI アイコンを作る
よくある質問
角のオプションは何をするのですか？
オフでは上下左右の隣接ピクセルだけを使うので、斜めの角が空いたままになります。手描きのドット絵でよく見る形です。オンでは斜めの隣接も使うので角が埋まり、丸く太いアウトラインになります。
画像が大きくなったのはなぜですか？
外側のアウトラインにはスプライトの外の余白が必要なので、キャンバスが上下左右に太さの分だけ広がります。内側のアウトラインなら元のサイズのままです。
シートのフレーム間でアウトラインがはみ出しませんか？
「フレームごとにアウトライン」がオンなら大丈夫です。各フレームを切り出してアウトラインを付け、余白を足して戻すので、フレーム同士が触れることはありません。
「選択中」のハイライトを作れますか？
はい。黄色や白のような明るい色で外側のアウトラインを作り、別の画像として保存して、実行時にスプライトの下か上に描画してください。
半透明のピクセルも扱えますか？
アルファが0より大きいピクセルはすべてスプライトの一部として扱います。アウトラインがデコボコになる場合は、先にドット絵シャープ化ツールで柔らかいエッジをきれいにしてください。