Mac版Affinityでスプライトシートを書き出すと余分な行や列が入る場合は、書き出し矩形の位置、サイズ、出力倍率を確認してください。すでに配置済みのシートには正確なサイズのスライスを使い、アートワークを変更する前に書き出したPNGを確認します。

このガイドでは、現行のAffinityデスクトップ版インターフェースとスライススタジオを取り上げます。目的は、既存のスプライトグリッドを意図したピクセル寸法で書き出すことです。Affinityの現行ヘルプには、カスタム書き出し矩形と個別のスライス出力が記載されています。以下では、それらの機能を使います。

余分なピクセルでファイルの寸法が変わっているか確認する

まず、2つの症状を区別します。ファイルが1ピクセル大きい場合と、サイズは正しいものの不要な端のピクセルが含まれている場合です。確認すべき点が異なります。意図した幅と高さを記録し、書き出したファイルを別に開いて、寸法を確認するとともに最外周の行と列を調べます。

想定サイズを簡単に計算してみましょう。たとえば、64 × 64フレームが4つ、余白や間隔なしで横一列に並んだシートなら、目標サイズは256 × 64ピクセルです。256 × 65で書き出された場合は、寸法が一致していません。256 × 64で書き出され、不要な色付きの最下行がある場合は、寸法は正しいものの、内容や配置を調べる必要があります。

確認できた状態 最初に確認する項目 次に試す操作
幅または高さが1ピクセル大きい 書き出し境界とその位置 正確なサイズのスライスを設定する
寸法が大幅に異なる 書き出し倍率とドキュメントのDPI スライスの実際の出力解像度を確認する
寸法は正しいが端の見た目がおかしい アートワークの位置と表示内容 シートのサイズを変えずに端を調べる
予期しないアートワークが書き出される スライスの種類または書き出し領域 意図したコンテンツ境界を選ぶ

Affinityでは、描画したスライスとレイヤーから作成したスライスが区別されています。描画したスライスには、その矩形内にある表示中のすべてのレイヤーが含まれます。レイヤーから作成したスライスには、元のレイヤーの内容だけが含まれます。近くのオブジェクトや背景が書き出したシートに表示される場合、この違いが重要です。スライススタジオを使った書き出しを参照してください。

幅と高さだけでなく、ピクセル位置も確認する

幅が整数でも、矩形の開始位置がピクセル境界上にあるとは限りません。幾何学的な例として、幅256ピクセルの矩形がX = 10.5から始まると、X = 266.5で終わります。両端ともピクセル境界の間に位置します。これは、幅だけを確認すると位置合わせの問題を見落とすことがある理由を示す例であり、Affinityの正確なラスタライズ方式を説明するものではありません。

Macで数値を確認するには、ウィンドウ > 一般 > 変形を開きます。このパネルには、アンカーポイントセレクターとともにX、Y、W、Hが表示されます。矩形の書き出し範囲の左上位置を確認するときは、左上のアンカーを選びます。数値は現在のルーラー単位で表示され、ルーラー原点を基準にしています。これらのコントロールについては変形パネルに記載されています。

必要に応じて、表示 > 表示 > ルーラーを選んでルーラーを表示し、交点をControlキーを押しながらクリックしてピクセルを選択します。ルーラー原点を以前に移動している場合は、座標を調べる前に交点をダブルクリックしてリセットします。Affinityでは、両方の操作がルーラーに記載されています。

スプライトのアートワークをすべて選択して値を丸めるのではなく、書き出し境界の位置とサイズを確認します。例に挙げた4フレームのシートでは、意図した矩形はX = 0、Y = 0、W = 256、H = 64となる場合があります。既存のシートは別の位置から始まっていてもかまいません。フレームグリッドを実際に囲む位置を使ってください。

数値表示では小数部が見えない場合、変形パネルのヘルプによると、小数点以下の桁数は設定 > ユーザーインターフェースで調整できます。確認中は表示精度を上げてください。数値をすっきり見せるためだけにアートワークの寸法を変更しないでください。サイズ変更によってフレームの内容が変わる可能性があります。

正しいピクセル位置合わせの設定を使う

表示 > スナップを開き、ピクセル位置を強制を有効にします。Affinityの説明によると、この機能はベクターオブジェクト、ノード、ハンドル、ピクセル選択範囲を、作成、移動、変更する際に整数ピクセルへスナップします。また、ピクセル位置からずれたオブジェクト、ガイド、グリッドへのスナップが、結果の位置ずれにつながることもあるため、修正中は競合するスナップモードを一時的に無効にしてください。ピクセル位置を強制を参照してください。

既存の小数位置を修正する場合は、ピクセル単位で移動をオフにしておきます。このオプションは移動距離を制限するため、オブジェクトの小数オフセットが保たれることがあります。たとえば、X = 10.5に10を加えると、X = 20.5になります。Affinityは、同じピクセル位置合わせの説明で、この動作と「ピクセル位置を強制」を明確に区別しています。

スナップは編集時の補助として使います。関連する境界を移動または調整した後、数値をもう一度確認してください。スナップを有効にしただけでは、既存のすべてのオブジェクトが修正されたことにはなりません。

配置済みのシートを正確な単一スライスで書き出す

既存のシートには、カスタムの描画スライスを使うと、スプライトグループの範囲の変化に左右されずに書き出し矩形を制御できます。Affinityは、スライスの正確な位置と寸法を設定する方法として、スライススタジオ内の変形パネルを推奨しています。スライスの書き出しを参照してください。

  1. スタジオマネージャーを開き、必要に応じてスライスのスタジオ項目を有効にして、切り替えます。スタジオ項目の有効化についてはスタジオのカスタマイズに記載されています。
  2. スライスツールを選択し、配置済みのシートを囲むように矩形をドラッグします。このツールはスライススタジオでデフォルトで使用でき、ショートカットはSです。スライスツールを参照してください。
  3. 描画したスライスを選択した状態で、変形を使って意図した位置、幅、高さを設定します。例のシートでは、4つのフレームに重なるよう配置し、W = 256 px、H = 64 pxにします。
  4. ウィンドウ > 一般 > スライスを開き、スライス項目を展開して、ファイル形式にPNGを選びます。サイズ倍率と表示される出力解像度を確認します。
  5. 必要なサイズの書き出しコントロールを使って書き出すか、意図したスライスだけにチェックを入れてスライスを書き出しを使います。保存先フォルダーを選び、書き出しをクリックします。

スライスパネルのドキュメントには、ファイル形式の選択、サイズ倍率、チェックを入れた項目の書き出しについて記載されています。スライスを書き出す手順では、1つのサイズ、1つの形式、またはチェックしたすべてのスライス出力を書き出す方法が区別されています。最初の診断用書き出しでは、確認するファイルが明確になるよう、PNGを1つだけ選んでください。

書き出す前に、矩形内にある表示中のレイヤーを確認します。描画したスライスには、それらの内容が含まれます。グループやレイヤーからスライスを作成した場合は、最初の境界がその項目の範囲に沿い、出力には元の項目だけが含まれます。スライススタジオを使った書き出しの説明に従い、意図したシートに合う種類のスライスを使ってください。

各フレーム内の意図した空白はそのまま残します。4フレームの例では、中のグラフィックがかなり小さくても、各フレームに64 × 64の領域を保つ必要があります。表示中のアートワークに合わせて書き出し範囲を狭めると、納品するグリッドが変わってしまいます。

1xが想定したピクセル数か、まずDPIを確認する

Affinityの説明では、ドキュメントのDPIとスライススタジオの1x、2x、3xサイズとの関係が示されています。例では、ドキュメントが72または96 DPIの場合、64 × 64 pxのドキュメントは1xで64 × 64として書き出されます。144 DPIでは、説明されている1xの出力は32 × 32で、2xなら64 × 64になります。スライススタジオを使った書き出しの表を参照してください。

スライスに表示される解像度と、生成されたファイルの寸法を確認します。倍率が不一致の原因なら、フレームサイズを変更する前に書き出し設定を調整してください。書き出し倍率の設定を補うためにシートの形状を変えると、元データの保守が難しくなります。

シートがすでに1つのアートボード全体に配置されている場合は、書き出しダイアログを使う

シート全体が1つのアートボードを占めている場合は、ファイル > 書き出し > 書き出しを選び、PNGプリセットを選択して、領域にその名前付きアートボードを指定できます。プレビューと出力寸法を確認し、場所を確認を選んでから書き出して保存します。保存後にFinderに表示を使うと保存先を確認できます。これは現行の書き出しダイアログに記載されているMacでの手順です。

領域は意図的に選んでください。現行の書き出し設定の説明によると、アートボードを含むドキュメントからドキュメント全体を出力すると、アートボードごとに別々の画像ファイルが生成されます。この方法で複数のアートボードを書き出しても、1つのスプライトシート画像にはまとまりません。シートを1つにするには、フレームを意図した1つの矩形内に配置し、その矩形を書き出します。

書き出しダイアログでは、縦横比を固定して出力幅と高さを指定することもできます。これらのフィールドで意図した寸法を確認してください。最初の修正方法として、256 × 65の結果を256 × 64に無理に変更するのは避けます。出力寸法を変更すると、元の境界を修正する代わりに画像が再サンプリングされる場合があります。Affinityは、サイズと再サンプリングのコントロールについて書き出し設定に記載しています。

形式と書き出しの制限に留意する

シートで透明度が必要な場合はPNGが適しています。Affinityは対応ファイル形式で、PNGが透明度をサポートする形式として明記しています。輪郭のはっきりしたピクセルアートを意図的に拡大する場合、Affinityは輪郭のはっきりした画像向けの再サンプリング方式としてニアレストネイバーを挙げています。これは拡大時の選択肢であり、位置が間違った書き出し矩形を修正するものではありません。書き出し設定を参照してください。

使用できる場合は、裁ち落としを含めるも確認します。Affinityによると、このオプションはPNGで使用でき、有効にするとドキュメントに設定された裁ち落とし領域が含まれます。必要な出力がスプライトグリッドと正確に同じ矩形である場合は、オフにします。同じドキュメントには、書き出しが形式の最大寸法を超えると、警告が書き出しダイアログに表示され、収まるように縮小されるとも記載されています。書き出し設定を参照してください。

説明されているスライスのワークフローは、指定した領域を書き出すものです。フレームの自動配置、アニメーションのタイミング、一般的なスプライトアトラスのメタデータには対応していません。特に、バッチビルダーはAppleのアイコンスライスからXcode用JSONバッチを作成する機能として説明されています。この作業では、バッチビルダーをアトラス生成ツールとして使うのではなく、自分でフレームを配置して、それらをまとめて囲む矩形を書き出す方法が対応しています。スライスパネルを参照してください。

他を変更する前に修正したPNGを確認する

新しい書き出しファイルを別に開き、正確なピクセル寸法、最外周の行と列、フレーム境界の3点を確認します。例の256 × 64シートでは、垂直なフレーム境界が左端から64、128、192ピクセルの位置にあるはずです。この数値は、示した4フレームの配置から直接導かれます。

ファイルサイズは正しいのに不要なピクセルが残っている場合は、その位置にある元データの表示内容を確認します。まだ1ピクセル大きい場合は、選択したスライス、X/Y/W/Hの値、出力倍率、裁ち落とし設定を再確認します。この順序で確認すれば、アートワークを何度もリサイズせずに、境界の問題と内容の問題を切り分けられます。

修正した書き出し矩形と設定をドキュメントとともに保存します。目的は、意図したレイアウトと寸法、フレームグリッドが一致するPNGを作ることです。両方の確認が済めば、完成したファイルから推測で行や列を削除する必要はありません。

出典