UIパック

Bunker コントロール — チェックボックス・トグル・スライダー

オリーブの野のUIコントロール19点。チェック、ラジオ、トグル、スライダー、ステッパー。オン・オフ・部分・無効を色でなく形で描き分け。

  • ui
  • svg
  • 透過png
  • チェックボックス
  • トグル
  • スライダー
  • 設定
  • コントロール類
  • ミリタリー
  • タクティカル
  • ステンシル
  • hud
チェッカー背景の設定コントロール — 空とチェック済みのチェックボックス、未選択と選択済みのラジオ、オフとオンのトグル、つまみ付きスライダーのレール
プレビュー 1600×752透明部分は市松模様で表示

このパックについて

最初から最後まで正方形の24pxコントロールです。オン状態は赤で塗ります。このパレットで赤が意味することは一つだけで、起動済みのコントロールはまさにそれだからです。

このセットは設定画面が実際に必要とするものを押さえています。チェックボックス、ラジオボタン、トグルスイッチ、つまみが別になったスライダー、そして離散値のためのステッパー2点。状態を持つコントロールはどの状態も24×24を基準に独立したファイルで提供します——トグルは48×24、スライダーのレールは192px幅で、nine-sliceで任意の長さに伸ばせます。スライダーは空・満杯・縦もあります。音量の縦列は、横列を回したものではないからです。

オンとオフは色ではなく形で描き分けてあります。未チェックは空のくぼみ、チェック済みは切り抜いたチェックを持つ塗り面です。これは重要です。設定画面こそ、プレイヤーが色覚モードやグレースケールのシェーダー、強く色を被せたポストプロセスを使っている可能性がいちばん高い場所であり、色相でしか読めない状態はその三つすべてで消えます。

スライダーは1枚のスプライトではなく、レールとつまみで届きます。一体型のスライダーを動かすには値ごとに描き直すことになりますが、2枚なら塗りを伸ばしてつまみを動かすだけで済み、どのUIツールキットもそれを前提にしています。つまみには中央に刻みがあるので、向きと位置が小さくても読めます。押している状態用に、アクセント色のリングを足したバリエーションも入っています。

無効状態は、状態を持つコントロールごとに独立したスプライトであり、実行時にかける減色ではありません。利用できない設定と、切ってある設定は別物です——一方は「オフ」、もう一方は「これには触れない」。両方を同じに見せる画面は、存在しないバグをプレイヤーに探させます。チェックボックスには、混在した一覧の上にある「すべて選択」行のための部分選択状態も入っています。二状態のチェックボックスが誤って報告するのは、まさにこの場合です。

すべて編集可能なSVGと、1x・2x・4xのフラットな透過PNGで収録。Bunkerファミリーの他と同じフィールドオリーブの六色で描かれています。

ダウンロード

直リンク · 登録不要 · 待機ページなし
ZIPをダウンロード69 kB

フルセット — SVGソース8点、1x/2x/4xのPNG書き出し、ライセンス、readme

このパックに含まれるファイル
ファイル形式容量ダウンロード
フルセット — SVGソース8点、1x/2x/4xのPNG書き出し、ライセンス、readmeZIP69 kB 入手 →
トグル(オン状態)、編集可能なSVGSVG427 B 入手 →
スライダーのレール、編集可能なSVGSVG817 B 入手 →

使い方

  1. オンとオフはスプライト一枚に色を重ねるのではなく、テクスチャごと差し替えてください。二つの状態は形が違うため、色だけでは再現できません。
  2. スライダーのレールは両端8 pxを残してnine-sliceできます。中央を伸ばせば、どの幅でも丸い両端はそのまま保たれます。
  3. UnityではToggleコンポーネントのBackgroundとCheckmarkに二つのファイルを割り当てるか、画像一枚で済ませたい場合はonValueChangedのハンドラでスプライトを差し替えてください。
  4. つまみは塗りの端に中心を合わせてください。幅が20 pxなので、塗りの右端からその半分だけずらせば、値の後ろではなく値の上に載ります。

ライセンス

クリエイティブ・コモンズ 表示 4.0 — 商用利用も無料。クレジット表記が必要です。 全文 · 実際どういう意味か

コピー用のクレジット表記
"Bunker コントロール — チェックボックス・トグル・スライダー" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/bunker-ui-controls