1枚のボタン画像から通常・ホバー・押下・無効・フォーカスを作り、個別PNGとまとめたシートで保存。
ゲームのボタンには、ふつうnormal・hover・pressed・disabled・focusの5枚の画像が必要です。このジェネレーターは1枚のPNGから、読めて変更できるピクセル操作で5枚を作ります。既定値はhoverが明るさ+10%・彩度+8%、pressedが明るさ−10%と1px下へ、disabledが彩度を完全に落としてアルファ50%、focusが2pxの#3182f6のリングです。states/*.png、パック済みストリップ1枚、使ったすべての値を記録したstates.jsonを書き出します。既にあるピクセルを変えるだけで、新しい絵は描きません。
各状態はRGBAピクセルに順に適用する操作の一覧です。アウトラインがあれば先にキャンバスを広げ、明るさは値 × 255をR・G・Bに足し、コントラストは中間のグレー（128）を中心に広げ、彩度は各チャンネルをそのピクセルの輝度（0.2126 R + 0.7152 G + 0.0722 B）から遠ざけたり近づけたりします。続いて任意の色のオーバーレイ、ピクセルの移動、形を正方形に膨らませたアウトラインを描き、最後にアルファを掛けます。完全に透明なピクセルは塗り替えません。
エンジンはこれらの画像を決まった枠で受け取ります。Godot 4のTextureButtonにはtexture_normal、texture_hover、texture_pressed、texture_disabled、texture_focusedがあり、専用のテクスチャがないdisabledのボタンはnormalを表示し、focusedのテクスチャは基本のテクスチャの上に重ねて描かれます。UnityのUI ButtonはTransitionをSprite Swapにすると、Target Graphicの基本スプライトとHighlighted・Pressed・Disabledのスプライトを受け取ります。
ゲームはWebページではありませんが、WCAG 2.2の2つの規定は知っておく価値があります。達成基準1.4.3は無効（disabled）なコンポーネントの一部であるテキストをコントラストの最低基準から除外しているので、薄くしたdisabledは許容されます。2.4.13 Focus Appearance（AAA）は、コンポーネントの外周2 CSS px以上の大きさのフォーカス表示と、フォーカス前後のピクセル間で3:1のコントラストを求めます。既定のリングは2pxで、#3182f6は白に対して3.71:1と測定されます。
色(200, 120, 40)で塗った40 × 16のボタンです。書き出したPNGに実際に入る値です。
状態 ピクセル (R, G, B, A) サイズ 操作
normal (200, 120, 40, 255) 40 × 16 なし
hover (231, 145, 58, 255) 40 × 16 明るさ +0.1 (+25.5)、彩度 +0.08
pressed (174, 94, 14, 255) 40 × 16 明るさ −0.1、オフセット 0,1 → 0行目が透明に
disabled (131, 131, 131, 128) 40 × 16 彩度 −1、アルファ × 0.5
focus (200, 120, 40, 255) 44 × 20 キャンバス各辺 +2px、2pxのリング (49, 130, 246)
disabledのグレー 0.2126 × 200 + 0.7152 × 120 + 0.0722 × 40 = 131.2 → 131；アルファ 255 × 0.5 = 127.5 → 128
hoverの緑 輝度 156.7 + (145.5 − 156.7) × 1.08 = 144.6 → 145focusの画像はほかより縦横4px大きく、アウトラインが正方形の膨張なので角のピクセルまでリングが覆います。states.jsonに状態ごとのサイズと余白が記録されるので、違いに驚くことはありません。
TextureButtonを追加し、normal.png・hover.png・pressed.png・disabled.pngをtexture_normal・texture_hover・texture_pressed・texture_disabledに割り当てます。texture_focusedを基本のテクスチャの上に描き、ドキュメントはアウトラインのような一部が透明な画像を勧めています。focus.pngにはボタン全体が入っているので、この枠に使うなら画像エディターでリングの内側のボタンを消し、44 × 20のキャンバスはそのままにします。normal.pngを、Highlighted Sprite・Pressed Sprite・Disabled Spriteにhover.png・pressed.png・disabled.pngを入れます。states.jsonのすべてのrectがbutton-states.pngから該当の状態を正確に切り出し、states.hover.opsに使った値が並びます。normal.pngは元画像とバイト一致します（Firefoxでは半透明ピクセルがアルファの丸め1段階ぶん違うことがあります）。| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| pressedの画像のいちばん下の行が消える | 1pxのオフセットが同じキャンバス内でピクセルを動かすため、最後の行がはみ出し0行目が透明になる | pressed.pngの下端を元画像と比べる | 絵の下に透明な行を1つ残すか、オフセットを0にしてエンジン側で文字を動かす |
| フォーカス時にボタンが跳ねる・二重に見える | focus.pngが大きく（40 × 16のボタンなら44 × 20）、Godotはfocusのテクスチャを基本の上に描く | states.json → states.focus.size | アウトラインの太さ分マイナスにずらして中央を合わせるか、上の説明どおりリングだけの画像を使う |
| 暗い背景でdisabledのボタンがほとんど見えない | アルファ0.5で背景が透けている | 白地ではなく実際の背景の上で確認する | disabledのアルファを0.7に上げるか、アルファは1のまま彩度だけ落とす |
| 明るいボタンでhoverの差がほとんどない | 明るさは加算なので、255に近いチャンネルは頭打ちになる | 元画像のピクセル値がおよそ230以上 | hoverには明るさの代わりに色のオーバーレイかコントラストを使う |
| 方法 | こんなときに向いています |
|---|---|
| UnityのTransition = Color Tint | 状態が色だけ違うとき。画像は増えませんが、色を掛けるだけなのでピクセルを動かしたり（pressedのオフセット）リングを足したりはできません。 |
| お絵描きソフトで状態ごとに手描きする | 形が変わるとき（反転するベベル、変わるアイコン、光）。ピクセルの計算では元にないものは描けません。 |
docs/UI-LAB.mdのためにChromiumで40 × 16のボタンを使って測定しました。normalは元画像とバイト一致、hoverはより明るく、pressedはオフセットされ空いた行は透明、disabledはアルファ128のグレー、focusは#3182f6のリング付きの44 × 20で絵はそのまま、states.jsonの5つの矩形はストリップから各状態を正確に切り出しました。上の例の値は同じモジュールで計算し直しています。Godot・Unityでの読み込みは実行していません。
1枚のボタン画像から通常・ホバー・押下・無効・フォーカスを作り、個別PNGとまとめたシートで保存。
PNG / JPG / WebP / AVIF / HEIC → PNG + JSON (ZIP) — 入力のデコードはブラウザ対応と追加エンジンに依存します。
1枚のボタン画像から通常・ホバー・押下・無効・フォーカスを作り、個別PNGとまとめたシートで保存。
advanced · brightness, contrast, saturation, overlay, offset and square outline ops / MaxRects strip. 品質検証中です。Pro・Flagship水準はまだ実証されていません。
明度・コントラスト・彩度・色の重ね・オフセット・アウトラインという決まった画素処理です。ない絵を描き足すことはしません。
明度・コントラスト・彩度・色の重ね・オフセット・アウトラインという決まった画素処理です。ない絵を描き足すことはしません。
このツールで開いたファイルはアップロードせず端末で処理します。コミュニティの投稿に明示的に添付する画像は別途アップロードされます。一部のエンジンやモデルは外部から取得するため、IPアドレスなどの接続情報は配信元に伝わります。
いいえ。画像と編集状態はこのタブに保持され、メディア出力は端末の一時保存を利用する場合があります。言語を変えても作業は残りますが、再読み込み、タブを閉じる操作、別のページへの移動で失われることがあります。