ゲームアセットのPNGサイズを変えずに外側のストロークを含めるには、固定サイズのアートボード内にストローク用の余白を確保します。Mac版Affinityでは、輪郭線を含むアートワーク全体がその境界内に収まるようにしてから、指定したピクセルサイズで名前付きアートボードを書き出します。

このワークフローは、32 × 32 pxの幾何学的なアイコンなど、小さなベクターゲームアセットを準備する場合を対象としています。現在のAffinityデスクトップ版ヘルプセンターに記載された操作を使用します。Affinity Designer 2にはExport Personaという独立した書き出しワークスペースがあります。現在のAffinityのドキュメントでは、これをSlice Studioと呼んでいます。以下の基本ワークフローでは、現在のデスクトップ版の書き出しダイアログを使用します。Affinityの最新の書き出しドキュメント、Designer 2のExport Personaドキュメント。

外側のストロークを追加しても、何を変えずに保てますか？

編集前に、図形の寸法、ストロークを含むアートワークの表示範囲、書き出す画像のピクセル寸法という3つの測定値を分けて考えます。AffinityのStrokeパネルでは、オブジェクトの境界線を基準に、ストロークを中央、内側、または外側に配置できます。これらの配置方法によって、アウトラインが占める領域が決まります。Strokeパネル。

外側のストロークには、元の図形の外側に余白が必要です。図形がすでに出力範囲いっぱいに広がっている場合、ストローク全体を収めるには、アートワークを縮小または変形する、使用可能な透明部分を使う、あるいは合成全体を指定サイズに収まるよう拡大縮小する必要があります。ストロークが元の境界を越える場合、元の輪郭位置、外側のストローク全体、同じ出力範囲のすべてを保つことは幾何学的に不可能です。

Affinityのドキュメントでは、アートボードの境界が明確に定められています。アートボードからはみ出したオブジェクトは、その端で切り取られます。したがって、アートボードを使えば書き出しサイズは一定にできますが、境界の外に残ったストローク部分を保持することはできません。アートボードについて。

公式の書き出しドキュメントでは、書き出し範囲の選択と、出力幅および高さの変更方法が説明されています。元のアートワークの拡大率と固定画像境界の両方を保ちながら、はみ出した外側のストロークを含める切り替え方法は記載されていません。対応する方法は、表示範囲全体を選択した書き出し範囲内に収めることです。書き出しダイアログ、書き出し設定。

要件 適した方法 変わるもの
真の外側ストロークと正確なPNG寸法を保つ 固定アートボード内に図形を収める 図形サイズまたは余白
既存の図形境界を表示上の外側境界として保つ 適切な場合は内側揃えのストロークを使う アウトラインの配置と塗りの表示領域
合成全体の比率を保ち、指定サイズに合わせる 書き出す画像のサイズを変更する 書き出しピクセル上のアートワークの拡大率
余白がない状態でアートワーク全体を元の拡大率のまま保つ 出力範囲を広げる 書き出し寸法。固定サイズの要件は満たさない

32 × 32 pxの書き出し範囲内に外側のストロークを収めるには？

以下の例では、幅2 pxの均一な外側ストロークを付けた、軸に沿った正方形を使います。余白の計算を分かりやすくするため、エフェクト、可変幅ストローク、角から突き出すディテールは使用しません。

この正方形の表示幅は、図形の幅に左右それぞれのストローク幅を加えたものです。そのため、出力サイズが32 pxの場合、図形の幅は32 − 2 − 2 = 28 pxにできます。同じ計算で高さも28 pxになります。図形を中央に配置すると、元の輪郭から各アートボード端まで2 pxの間隔ができ、その空間に外側のストロークが収まります。

1. 固定の出力範囲を設定する

Vector Studioでファイル > 新規を選択します。ドキュメントの単位をピクセルに設定し、ページ幅とページ高さを32 pxにして、アートボードを有効にします。アセットの周囲を透明にする必要がある場合は、透明背景を有効にします。この例では72 DPIを使用し、ドキュメントを作成をクリックします。これらのドキュメント設定については、Affinityの新規ドキュメントのヘルプに記載されています。新規ドキュメントの作成。

既存のドキュメントに書き出し専用のアートボードを追加する場合は、アートボードツールの幅と高さの設定で新しいアートボードの寸法を指定し、アートボードを挿入を選択できます。選択したアートワークに合わせてアートボードのサイズを決めるのではなく、必要なピクセル寸法を明示的に入力します。アートボードツール。

2. 図形のサイズとストロークを設定する

正方形を作成するか選択します。ウィンドウ > 一般 > 変形を開き、幅：28 px、高さ：28 pxと入力します。このパネルでは、正確な寸法と変形の基準点を設定できます。正方形を中央に配置し、元の輪郭がアートボードの内側2 pxに来るようにします。変形パネル。

ウィンドウ > ベクター > ストロークを開きます。実線を選び、幅：2 pxと入力して、ストロークを外側に揃えるを選択します。この簡単な例では、角の結合にラウンドを使います。Affinityのドキュメントでは、ストロークパネルの配置、幅、結合の設定が説明されています。ストロークパネル。

既存のアートワークのサイズを変更するときは、ストロークがどう拡大縮小されるかを確認します。オブジェクトとともに拡大縮小では、閉じた図形のサイズ変更に合わせてストローク幅を変えるかどうかを設定できます。変形パネルには、ストローク幅などのプロパティを強制的に拡大縮小できる拡大縮小のオーバーライドもあります。サイズ変更後は、幅が一定だったと思い込まず、意図した2 pxになっているか再確認します。ストロークの拡大縮小設定、変形の拡大縮小オーバーライド。

3. 表示範囲全体を確認する

幅28 pxの正方形に外側ストロークを加えると、各方向の表示範囲は32 pxになります。これはここで指定した例に基づく幾何学的な計算であり、書き出し結果を実測したものではありません。アウトラインの周囲にも透明な余白を設ける場合は、その分も確保します。各辺に1 pxの余白を設けると、正方形は26 × 26 pxになります。

すべてのアセットに同じ引き算をそのまま当てはめないでください。Affinityのマイター結合は鋭角の先端を伸ばすことがあり、線端の形状はキャップの設定によって変わります。複雑なシルエットでは、特に角や端点でアウトライン全体を確認する必要があります。単純な幅の計算は、規則的な図形を扱う際の出発点です。ストロークの結合とキャップ。

寸法を変えずにアートボードを書き出すには？

ファイル > 書き出し > 書き出しを選び、PNGプリセットを選択します。範囲を名前付きアートボードに設定します。Affinityでは、重なり合うレイヤーも含める選択範囲や、選択解除された重なり合うレイヤーを除外する選択範囲のみと区別されています。名前付きアートボードを選ぶと、意図した書き出し範囲が明確になります。書き出しダイアログ。

出力幅と高さを確認します。この例ではどちらも32 pxです。Affinityでは別の寸法も設定でき、縦横比を固定するオプションもあります。アートワークがまだアートボードからはみ出している場合、出力サイズを変更して帳尻を合わせるのは避け、先にアウトラインを境界内に収めます。書き出し設定。

保存する前に書き出しプレビューを確認します。Macでは**⌘1で100%、⌘2で200%のプレビューが表示されます。四辺すべてを確認してアウトラインが切れていないか調べ、意図した透明余白があることも確認します。次に場所を尋ねるを選んで書き出しをクリックし、ファイル名と保存先を指定して保存**をクリックします。書き出しダイアログとMacのプレビュー用ショートカット。

最後に、保存したPNGを開き、ピクセル寸法とシルエット全体を確認します。幅と高さが正しいだけでは、ストロークが収まっているとは限りません。画像が正確に32 × 32 pxでも、ストロークが切れていることがあります。

スライスでも同じ固定サイズにできますか？

できます。書き出し範囲を意図的に定義する必要があります。Affinityのドキュメントでは、スライスの挙動を2種類に分けています。Export Layersパネルの項目から作成したスライスは、その項目の範囲に合わせて自動的にサイズが決まり、レイヤーの内容を書き出します。手動で描画したスライスは、その範囲内にある表示レイヤーすべての内容を含みます。Slice Studioを使った書き出し。

固定された書き出し範囲には、Slice Studioでスライスツールを選び、準備したアートワークを囲む範囲をドラッグします。補助の変形パネルでスライスの正確なサイズと位置を設定します。スライスの書き出しオプションでPNGを選び、必要なスライスを書き出します。アートボードの場合と同じように、ストローク全体をスライスの四角形内に収めます。スライスの書き出し。

1xが常にドキュメントのピクセル寸法を意味すると考えず、表示された書き出し解像度を確認してください。Affinityのドキュメントでは、スライスの拡大縮小率とドキュメントのDPIの関係が説明されています。64 × 64 pxの例では、72 DPIで1x書き出しすると64 × 64 pxになりますが、144 DPIでは1x書き出しで32 × 32 pxになります。これはストロークの配置とは別のサイズ設定の問題です。スライスの寸法とDPI。

うまくいかない場合は何を変更すればよいですか？

症状に応じて、次の編集内容を選びます。

  • PNGの寸法は正しいのにアウトラインが切れている： アートワークを移動または縮小し、ストローク全体がアートボードかスライス内に収まるようにします。
  • アートワークを変更するとPNGの寸法が変わる： 選択範囲や、自動的にサイズが決まるオブジェクトスライスを書き出していないか確認します。境界を固定するには、名前付きアートボードか、正確なサイズを指定した手動スライスを使います。
  • サイズ変更後にアウトラインの太さが変わる： 「オブジェクトとともに拡大縮小」と変形の「拡大縮小のオーバーライド」を確認し、意図したストローク幅に戻します。
  • アウトラインは収まっているのにアセットが小さく見える： 大きな合成を目標サイズに合わせるために、書き出し幅と高さで縮小していないか確認します。
  • 鋭い角だけが切れている： 合成全体のサイズを変える前に、結合スタイルとマイターの伸びを確認します。

これらの確認項目は、アートボードの切り取り、スライス範囲、ストロークの拡大縮小、書き出し時のサイズ変更について記載された内容に基づいています。それぞれ原因が異なるため、ストロークの配置を変えるだけでは、あらゆる書き出しサイズの問題を解決できません。アートボードの境界、スライスの挙動、ストロークの設定、書き出し寸法。

ゲームアセットを同じ手順で制作するには、まず必要なピクセル範囲を決め、その中でアウトライン分の余裕を見込みます。その見た目が重要なら外側揃えを保ち、余白を作れるよう元のアートワークを調整して、固定範囲を書き出します。これにより、ファイルの寸法を指定どおりに保ちながら、ストローク全体を描画する余地を確保できます。

参考資料