ゲームUIスケールプレビュー · 解像度・アンカー・セーフエリア
パネルやボタンを、実際に描かれる場所で確認。目標の解像度と画面比の仮想画面にアンカープリセットで配置し、非整数スケール版と並べて見ます。
プレビューはパネルやボタンを1280 × 720から3840 × 2160までの仮想画面（4:3・16:9・16:10・21:9）に描き、Godot式のアンカーで配置し、90%のタイトルセーフや93%・95%のアクションセーフを重ね、1×・1.25×・1.5×・1.75×・2×・2.5×・3×で表示します。整数倍はピクセルアートをくっきり保ち、非整数倍はぼかします。同じチェックステージで韓国語・英語・日本語のラベルが枠に収まるかを測り、WCAGのコントラスト比（黒地に白で21:1）を計算します。ブラウザ内の計算で、エンジンのレイアウト処理ではありません。
- Nine-slice測定確認· Pillow
- Bitmap font測定確認· independent .fnt parser
- Button states測定確認· Pillow
- Engine import未検証
スケール・セーフエリア・コントラストを数値で
整数倍では元の1ピクセルが画面ピクセルのかたまり1つになります。2×では16pxのアイコンが32pxになり、各ピクセルは2 × 2です。1.5×では元の2ピクセルで画面の3ピクセルを覆う必要があるため、最近傍フィルターでは列の幅が1pxと2pxで交互になり、線形フィルターでは隣の色が混ざって縁がぼやけます。プレビューは非整数倍をなめらかに描きます。Godot 4.2以降には倍率を切り捨てる（2.5が2になる）ストレッチのスケールモードIntegerがあり、ドキュメントはピクセルアートのゲームにviewportのストレッチモードと組み合わせて勧めています。
セーフエリアはテレビ由来です。EBU R 95（バージョン1.1、2017年）は重要な動きをすべての端から3.5%、グラフィックを5%内側に置くよう定めており、これがプレビューの描く93%のアクションセーフと90%のタイトルセーフの矩形です。95%のプリセットはよりゆるい追加の選択肢で、R 95の値ではありません。スマートフォンやコンソールは実行時に自分のセーフエリアを返すので（UnityのScreen.safeAreaはピクセル単位、GodotのDisplayServer.get_display_safe_area()）、ここではプリセットではなく任意の余白として入力します。
コントラストはWCAG 2.2の式を使います。sRGBの各チャンネルを線形化し、相対輝度L = 0.2126 R + 0.7152 G + 0.0722 Bを求め、明るい色を先にして(L1 + 0.05) ÷ (L2 + 0.05)で比を出します。範囲は1:1から21:1です。達成基準1.4.3はテキストに4.5:1、大きいテキスト（18ポイント、または太字14ポイント。プレビューでは24px・18.66px）に3:1、1.4.6は7:1、1.4.11はUIコンポーネントの視覚的な部分に3:1を求めます。比は2つの単色についての値で、絵の上の文字はピクセルごとに比が変わります。
- 整数倍
- 倍率が整数で、元の1ピクセルが画面ピクセルのかたまりをちょうど覆う状態。
- タイトルセーフ（グラフィックセーフ）
- 画面の内側90%。EBU R 95ではすべての辺に5%の余白。
- アクションセーフ
- 画面の内側93%。EBU R 95ではすべての辺に3.5%の余白。
- 相対輝度
- sRGBを線形化したあと0（黒）〜1（白）で表した色の明るさ。コントラスト比に使う。
- アンカー
- 要素を親のどこに固定するかを0〜1の4つの数値（左・上・右・下）で表したもの。
例：チェックステージが計算する数値
以下の値はすべてプレビューと同じ関数で計算しています。
コントラスト L = 0.2126 R + 0.7152 G + 0.0722 B （先にsRGBを線形化）
白/黒 (1.00 + 0.05) / (0.00 + 0.05) = 21.0 : 1
#767676 / 白 L = 0.1812 → 1.05 / 0.2312 = 4.54 : 1 4.5:1を0.04差で満たす
白 / #3182f6 L = 0.2327 → 1.05 / 0.2827 = 3.71 : 1 UI 3:1・大きいテキスト：可 · 16pxのテキストAA：不可
セーフ 1920×1080 タイトル90% → x 96, y 54, 1728 × 972 アクション93% → x 67, y 38, 1786 × 1004
アンカー 右下、300 × 80のボタン、余白32px → x = 1920 − 300 − 32 = 1588, y = 1080 − 80 − 32 = 968
スケール 基準640 × 360 → 1920 × 1080はちょうど3×；1366 × 768は2.13× → Integerモードは2×（1280 × 720）で描くコントラストタブの既定の色は#3182f6の上の白です。大きいラベルやアイコンには十分ですが、16pxの本文には足りません。1920 × 1080ではEBU R 95自身も幅の3.5%を67pxとしており、プレビューの値と同じです。
できること
- 1280×720〜3840×2160、4:3・16:9・16:10・21:9の画面。Godot 4のアンカー値によるアンカープリセット。
- セーフエリア：90%タイトルセーフ、93%・95%アクションセーフ（放送の慣例と表示）、任意の余白。
- 1×〜3×のスケール比較、整数スケールはくっきりと表示。
- 言語ごとのテキストあふれ（実測幅）とWCAGコントラストの式。
使い方
- UI要素をドロップ。
- 画面・アンカー・セーフエリアを選ぶ。
- スケール・テキストあふれ・コントラストのタブを確認。
- それに合わせて絵や配置を調整。
結果の確認
- スケール比較：2×と3×のピクセルアートは縁が硬いままのはずです。1.5×の結果が許容できなければ、整数刻みか、目標の画面を割り切れる基準解像度を計画してください。
- サイズタブ：出荷するすべての画面比（21:9を含む）で、要素の矩形がセーフエリアの数値の内側にあるはずです。
- ローカライズタブ：すべての言語が"fits"（折り返しを許すUIなら"wraps"）であるべきです。プレビューはブラウザーのフォントで測るので、ゲームのフォントでもう一度確認してください。
- コントラストタブ：本文サイズのラベルは4.5:1以上、大きいラベルとアイコンは3:1以上であるべきです。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| ピクセルアートのUIが一部のモニターでぼやける | UIが非整数倍（例：1366 × 768で2.13×）と線形フィルターで描かれている | スケール比較の1.5×と2×の枠を比べる | Godotではviewportのストレッチモード、Integerのスケールモード、Nearestフィルターを使う。Godotでピクセルアートがぼやけるを参照 |
| プレビューでは収まるのにゲームでラベルがあふれる | プレビューはブラウザーのフォントで測り、ゲームのフォントは幅が違う | 同じ文字列をゲームのフォントで測る（フォントステージで作れる） | 幅に余裕を持たせる、折り返しを許す、または訳を短くする |
| 韓国語・日本語が単語の途中で切れる | 空白のないテキストは、プレビューの貪欲な改行が1文字単位で切る | ローカライズタブで行の終わる位置を確認 | 1文字単位の改行を受け入れるか、明示的に改行を入れる。エンジンには独自の改行規則がある |
| 21:9でだけ要素がセーフエリアからはみ出す | 画面の端にアンカーを付けており、横長の画面でその端が動く | セーフエリアを表示して画面比を21:9に切り替える | セーフエリアの余白以上のマージンを付けるか、セーフエリアのコンテナ内にアンカーを付ける |
| コントラストは合格なのに絵の上のラベルが読みにくい | 比は2つの単色を比べるもので、文字の後ろの絵は変化している | 文字の後ろで最も明るいピクセルと最も暗いピクセルを測る | ラベルの後ろに下地のパネル・アウトライン・影を入れる |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| エンジンで目標解像度ごとにシーンを実行する | 実際のレイアウトが必要なとき：コンテナ、サイズフラグ、テーマの余白、エンジン自身の文字描画。 |
| ピクセルパーフェクトチェッカー | ゲームのスクリーンショットがあり、整数倍で拡大されたかを知りたいとき。 |
出力ファイルと検証方法
「測定確認」は、ダウンロードしたファイルをページ外（Pillow・numpy・独立したパーサー）で開き直して性質を測ったという意味です。ゲームエンジンでの読み込みは試していません。
| 書き出し先 | ファイル | 検証 |
|---|---|---|
| Nine-slice | nine-slice.json · previews · SETUP.md | 測定確認 Pillowリサイズした全プレビューで四隅のブロックは拡大されません。Chromiumではバイト一致、Firefoxでは半透明ピクセルがアルファの丸め1段階ぶん変わることがあります。すき間・重なり0。 |
| Bitmap font | font.png · font.fnt (BMFont text) · font.json | 測定確認 independent .fnt parserテスト内で別に書いたパーサーで.fntを読み戻し、ヘッダーと全グリフ範囲が一致。 |
| Button states | states/*.png · strip · states.json | 測定確認 Pillownormalは元と一致（Chromiumではバイト一致、Firefoxでは半透明ピクセルの色がアルファの丸め1段階以内）。states.jsonの各範囲がストリップから該当状態を正確に切り出します。 |
| Engine import | Godot NinePatchRect · Unity Sprite border · BMFont import | 未検証Godot・Unityでは実行していません。 |
検証の根拠
ナインスライスの四隅が100×40・300×80・800×200・420×120で拡大されず、同一列12本から境界6·6·6·6を提案。ボタン状態：normalは元と一致、disabledはアルファ128のグレー、focusリングも正確。.fntのグリフ記録がJSONと一致。.poの欠落グリフを正確に列挙。白地に黒文字で21:1を測定。画像はブラウザのCanvasを通ります。Chromiumはバイトがそのまま、Firefoxは半透明ピクセルの色を乗算済みの値で1段階に丸めます（Kenneyのボタンで測定：アルファ63で最大4段階）。アルファと不透明ピクセルはそのままです。
制限
- エンジンのレイアウト処理ではありません。コンテナ・サイズフラグ・テーマの余白はモデル化せず、アンカーの計算だけです。
- コンソール・スマートフォンのプリセットはありません。機種ごとのセーフエリアは任意の余白として入れます。
- テキストの幅はゲームのフォントではなくブラウザーのフォントで測った値です。
- カーニングペアなし、フォントは1ページ、MSDFなし。SDF出力はベータです。
- TTFのcmapを解析しないため、欠落グリフのチェックには.fntかラボのフォントが必要です。
- アトラスは1ページで、接している要素は1つとして扱います。
- Godot・Unityでの描画は行っていません。エンジン用の値（patch margin、L・B・R・Tの境界）はドキュメント基準で、エンジンでは未検証です。
バージョンと出典
docs/UI-LAB.mdのためにChromiumで測定しました。3840 × 2160のタイトルセーフは192, 108 · 3456 × 1944、余白64pxの左上アンカーは64, 64に置かれ、120pxの枠で英語のラベルはあふれて韓国語の例は収まり、白地に黒はちょうど21:1、#767676/白は4.54:1でした。例の値は同じ関数で計算し直しています。セーフエリアの割合はEBU R 95、コントラストの式はWCAG 2.2、整数のスケールモードはGodot 4.7の公式ドキュメントに基づきます。
参照した公式ドキュメント
よくある質問
エンジンのレイアウト計算ですか？
いいえ。アンカー計算（Unityのプリセットとも共通のGodotの4つのアンカー値）をブラウザで再現したもので、そう表示します。
コンソールのセーフエリアは？
ありません。コンソールやスマホの切り欠きの値は機種ごとに違うため、プリセットにしていません。任意の余白を使ってください。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。