フィールドとバトルのスプライトで一貫したスケールを保つ方法
フィールド画面とバトル画面でキャラクターのサイズ感を揃えるには、元画像の寸法だけでなく、画面上にレンダリングされたアートワークの高さを比較します。キャラクターの共通ピクセル高ターゲットを決定し、一貫したワールドスケールとピクセル密度を設定したうえで、両方のシーンを同じカメラスケールで比較します。キャラクターの足元を共通のベースラインに揃え、ゲームで意図している表示サイズで結果を確認してください。どちらかのシーンであえて異なるカメラや構図を使用する場合は、スプライトのスケールを密かに変更するのではなく、例外として文書化しておきましょう。
ゲームにおける「同じスケール」の定義を決める
まずは測定可能な目標を定義することから始めます。たとえば、基準となるカメラビューにおいて、両方のシーンでキャラクターの足裏から頭頂までが画面上で32ピクセルを占めるようにする、といった決定です。これはあくまで一例であり、推奨される共通サイズではありません。ゲームの解像度やアートの描き込み量に合ったサイズを選択してください。
透明な画像矩形ではなく、目に見えるキャラクター部分を測定します。フィールドのスプライトには影、武器、アンテナ、余白のパディングが含まれている場合があり、バトルのスプライトはポーズが異なる可能性があります。目標とする測定基準を「頭から足までの身体のシルエット」にするのか、「目に見えるアートワーク全体」にするのかを決め、両方のシーンで同じルールを適用してください。目標とする高さ、基準解像度、意図したフロアライン、シーンごとに意図的に設けた差異をまとめた、簡単なリファレンスシートを用意しておきましょう。
この定義が重要なのは、元画像のキャンバスが大きいからといって、画面上のキャラクターが自動的に大きくなるわけではないためです。キャンバスサイズは画像領域を示すにすぎず、その領域が画面上で何ピクセルを占めるかは、エンジンのインポート設定、オブジェクトのスケール、カメラによって決まります。Asepriteではキャンバスの変更とスプライトコンテンツのリサイズが明確に区別されているため、アートワークを変更する前にどちらの操作が必要かを確認してください。Aseprite: Sprite Size
各キャンバス内の実際のアートワークを比較する
フィールド画像とバトル画像を本来のピクセルスケールで開き、選択した測定基準に従ってピクセル数を数えます。キャラクターの目に見える高さと、足元からキャンバス端までの距離を記録してください。バトルキャラクターの見かけの高さが48ピクセル、フィールドキャラクターが32ピクセルの場合、エンジンによるシーンのスケーリングを適用する前の段階で、アートワークの比率には1.5:1の差があります。
その他のプロポーションが同じである場合、基本的な調整の計算式は「希望するレンダリング時の高さ ÷ 現在のレンダリング時の高さ = 調整係数」となります。スプライトが現在24ピクセルの高さでレンダリングされており、これを32ピクセルにしたい場合、係数は 32 ÷ 24 = 1.33 となります。これを診断用の目安として活用し、その後にアートとシーンの設定を精査してください。これはカメラ、トリミング、トランスフォームに違いがないことを前提とした、説明用の計算です。
単に画像ファイルの幅と高さを一致させるためだけにリサイズしないでください。ポーズによって横幅が広くなる場合や、バトルアニメーションで腕を上げている場合もあります。本来の形状を維持し、同じ身体部位の基準点を比較するようにしてください。スプライト間で体型やパースが明らかに異なる場合、ピクセル高を一致させても同じサイズ感に見えないことがあります。その場合はデザインを調整するか、シーン固有の例外として合意を取ってください。
共通のピクセル密度とワールドスケールを設定する
Unityでは、フィールドとバトルのスプライトに同じPixels Per Unit（PPU）を設定し、Pixel Perfect CameraのAsset Pixels Per Unit設定をその値に合わせます。UnityではPPUを「1つのシーンユニットを構成するピクセル数」と定義しており、Pixel Perfect Cameraのガイダンスではシーン内のスプライト全体で値を統一することが求められています。Unity: 2D Pixel Perfect たとえば、プロジェクトで1ユニットあたり16ピクセルを使用している場合、高さ32ピクセルのスプライトは、オブジェクトのスケーリング前で2ワールドユニットを占めることになります。
各キャラクターオブジェクトのTransformのスケールも確認してください。PPUを揃えても、あるシーンオブジェクトのスケールが0.8で、もう一方が1.0になっていては意味がありません。基本的にはインポート設定とTransform設定を一貫させ、アートワークの調整や明確に記録されたシーン固有のスケール変更は、画面構成上どうしても必要な場合にのみ行うようにします。
他のエンジンを使用している場合は、同等のコントロールを探してください。具体的には、元画像の何ピクセルがワールドユニットに対応するか、ノードまたはオブジェクトのスケール、カメラのビューポートやズームなどです。Godotの2Dレンダリングパスにはキャンバスとビューポートのトランスフォーム（画面リサイズ時に使用されるストレッチトランスフォームを含む）が含まれているため、元画像の寸法だけで最終的な画面サイズを決定することはできません。Godot: Viewport and canvas transforms
意図したピボットで足元を揃える
キャラクターの高さが正しくても、シーン間で浮いたり沈んだり位置がずれたりすると、スケールが揃っていないように見えてしまいます。ピボット（原点）は意味のあるアンカー（通常は両足の間の接地ポイント）に設定し、両方のシーンでそのアンカーを同じ床のベースラインに揃えます。アニメーション中に足が動くスプライトの場合は、ルートやピボットの位置を一貫して固定し、接地フレームを確認してください。
各画像の中央が適切なアンカーになるとは限りません。キャンバスごとに透明なパディングの量が異なる場合があり、中央ピボットにするとアートワークの垂直位置がずれてしまうことがあります。Unityのピクセルパーフェクトのワークフローではピクセル単位で測定されるカスタムピボットをサポートしており、複数のスプライトを含むテクスチャ内の個々のスプライトにピボットを設定することを推奨しています。Unity: 2D Pixel Perfect GodotではSprite2Dがデフォルトで中央揃え（centered）になっていますが、ドキュメントではピクセルアートを中央揃えにするとピクセル間に配置された際に歪んで見えることがあると指摘されており、中央揃えの無効化やピクセルスナップの有効化が選択肢として挙げられています。Godot: Sprite2D
フィルタリング、スナップ、カメラスケールを確認する
くっきりとしたピクセルアートにするにはNearest（最近傍法）またはPointフィルタリングを使用し、テクスチャ圧縮によって見た目が変化していないことを確認してください。Unityのガイダンスでは、Pixel Perfect Cameraで使用するスプライトに対して、Pointフィルタリングと「圧縮なし」を明示的に推奨しています。Unity: 2D Pixel Perfect これらの設定はエッジの鮮明さを保つためのものであり、スケールが異なる2つのスプライトを同じサイズにするものではありません。
次に、カメラを同じ基準ビューに設定するか、一時的な共有テストカメラを使用して両シーンを比較します。バトルシーンでは演出のためにズームインすることがよくあります。カメラのズームが2倍になると、スプライトのワールドスケールが変わっていなくても、キャラクターが占める画面ピクセル数は2倍になります。要件が「同じワールドサイズ」なのか「画面上での同じ存在感」なのかを判断してください。これらは異なる目的です。バトル画面の構図上あえてキャラクターを大きく見せている場合は、そのズームを演出上の意図として記録し、そのビューをスプライト自体のスケールを判断する基準にしないでください。
ピクセルアートでは、静止フレームだけでなく動きも確認します。サブピクセル単位の位置ズレやスナップの不一致があると、キャラクターの移動時にエッジがちらついたり不揃いに見えたりすることがあります。UnityのPixel Perfect CameraはアセットのPPUに連動したグリッドスナップを提供しており、Godotは2D頂点とトランスフォーム用のピクセルスナップ設定を備えています。Unity: 2D Pixel Perfect Godot: Sprite2D スナップやスケーリングの挙動はレンダリング設定に左右されるため、プロジェクトの実際のカメラ設定でテストを行ってください。
アセットを変更する前に簡単な比較チェックを行う
可能であれば同じキャラクターポーズを使用して、左右に並べた比較環境を作成します。以下のチェックを順番に実施してください。
- 同じ基準点とピクセル計算ルールを使用して、目に見える身体の高さを比較する。
- 足元のベースラインとスプライトのピボット（またはルート）の位置を比較する。
- PPUまたは同等のインポート密度、オブジェクトのスケール、親オブジェクトのスケールを検証する。
- カメラのズーム、基準解像度、ビューポートのスケーリング、表示サイズを一致させる。
- ネイティブサイズおよび移動時の状態をチェックし、にじみ、ピクセル配置の乱れ、クリッピングがないか確認する。
- アニメーションのフレームをいくつか（特に最も低い姿勢と最も高い姿勢のポーズ）再確認する。
アートワークの寸法は一致しているのにバトル側でキャラクターが大きく見える場合は、スプライトを修正する前にカメラの構図や周囲のオブジェクトを確認してください。カメラとトランスフォームが一致しているのにシルエットの高さが異なる場合は、アートを調整するか、明確に管理されたシーン固有のスケールを調整します。高さは一致しているのに足元がずれる場合は、ピボット、余白パディング、アンカーを修正します。この順序で行うことで、あるエラーを別のエラーで相殺してしまうのを防ぎ、根本的な原因を特定しやすくなります。
今後のスプライト作成のためにスケールリファレンスを残しておく
共通の目標高さ、PPU（または同等の値）、基準解像度、ピボットの規約、意図したカメラ設定をスプライトアセットとともに記録しておきましょう。Asepriteのキャンバスツールは透明な境界線をトリミング（余白の削除）できますが、トリミングによってキャンバスの境界が変わるため、ピボット、スライス、エンジン側のアンカーがその後も正しく揃っているか確認してください。Aseprite: Canvas Size トリミングはシーンの再確認を要する「アセットの変更」として扱います。
確実な基準となるのは、合意した「目に見える高さの目標」に合致し、共通の地面アンカーを持ち、意図したカメラおよびフィルタリング設定のもとで一貫してレンダリングされるキャラクターです。カメラ演出による意図的な強調の差異は、明確な演出上の選択として残しておきます。これらの確認事項を記録しておくことで、今後追加されるフィールドのポーズやバトルアニメーションも、同じ実用的な基準と照らし合わせて比較できるようになります。