UIパック

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

冷えた石のUIコントロール8点。チェックボックス、ラジオ、トグル、スライダー。オンとオフは形で描き分け。SVG+PNG。

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

このパックについて

あえて小さくした22pxのコントロールです。儀式や魔道書の画面は文字で密になり、大きなコントロールはそれと競合します。チェック状態はボタンに合わせて、なめらかではなく切り込んだチェックを持つ塗り面取りです。

設定画面に本当に必要な四つのコントロールを収めています。チェックボックス、ラジオボタン、トグル、そしてつまみが別になったスライダー。状態を持つコントロールはどちらの状態も自分のファイルとして22×22の土台で入っています。トグルは44×22、スライダーのレールは幅176 pxで、どんな長さにもnine-sliceできます。

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

スライダーはひとつながりのスプライトではなくレールとつまみで届きます。一体型のスライダーは値ごとに描き直しになりますが、二つに分かれていれば塗りを伸ばしてつまみを動かすだけで、どのUIツールキットもすでにそれを前提にしています。つまみには中央に切り欠きがあり、小さくしても回転と位置が読めます。

すべて編集可能なSVGと、1x・2x・4xのフラットな透過PNGで収録。Reliquaryファミリーの他と同じ深いインディゴの六色で描かれています。

ダウンロード

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

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

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

使い方

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

ライセンス

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

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