UIパック
Paper コントロール — チェックボックス・トグル・スライダー
淡い羊皮紙のUIコントロール8点。チェックボックス、ラジオ、トグル、スライダー。オンとオフは形で描き分け。SVG+PNG。

このパックについて
明るい設定画面のためのフォームコントロールです。チェック状態は暗く反転するのではなく錆色で塗り、中のチェックはいちばん暗い紙の色調で描かれています。この錆のアクセントの上では白いチェックは22ピクセルでコントラスト基準を満たせず、そのサイズこそ設定行が実際に使うサイズだからです。
設定画面に本当に必要な四つのコントロールを収めています。チェックボックス、ラジオボタン、トグル、そしてつまみが別になったスライダー。状態を持つコントロールはどちらの状態も自分のファイルとして22×22の土台で入っています。トグルは44×22、スライダーのレールは幅176 pxで、どんな長さにもnine-sliceできます。
オンとオフは色ではなく形で描き分けてあります。未チェックは空のくぼみ、チェック済みは切り抜いたチェックを持つ塗り面です。これは重要です。設定画面こそ、プレイヤーが色覚モードやグレースケールのシェーダー、強く色を被せたポストプロセスを使っている可能性がいちばん高い場所であり、色相でしか読めない状態はその三つすべてで消えます。
スライダーはひとつながりのスプライトではなくレールとつまみで届きます。一体型のスライダーは値ごとに描き直しになりますが、二つに分かれていれば塗りを伸ばしてつまみを動かすだけで、どのUIツールキットもすでにそれを前提にしています。つまみには中央に切り欠きがあり、小さくしても回転と位置が読めます。
すべて編集可能なSVGと、1x・2x・4xのフラットな透過PNGで収録。Paperファミリーの他と同じ温かい紙色の六色で描かれています。
使い方
- オンとオフはスプライト一枚に色を重ねるのではなく、テクスチャごと差し替えてください。二つの状態は形が違うため、色だけでは再現できません。
- スライダーのレールは両端7 pxを残してnine-sliceできます。中央を伸ばせば、どの幅でも丸い両端はそのまま保たれます。
- UnityではToggleコンポーネントのBackgroundとCheckmarkに二つのファイルを割り当てるか、画像一枚で済ませたい場合はonValueChangedのハンドラでスプライトを差し替えてください。
- つまみは塗りの端に中心を合わせてください。幅が19 pxなので、塗りの右端からその半分だけずらせば、値の後ろではなく値の上に載ります。
- チェックマークは白ではなくパレット中で最も暗い調子で描かれています。このサイズでは錆色のアクセント上の白いマークはコントラスト基準を満たさず、暗いマークなら余裕を持って満たすからです。
ライセンス
コピー用のクレジット表記
"Paper コントロール — チェックボックス・トグル・スライダー" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/paper-ui-controls


