UIパック

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

アーケードの速度感のUIコントロール8点。チェックボックス、ラジオ、トグル、スライダー。オンとオフは形で描き分け。SVG+PNG。

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

このパックについて

ポインターよりゲームパッドで操作されることの多いメニューに合わせた32pxのコントロールです。本体がすでに明るいので、オン状態は明るくするのではなく暗くします。

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

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

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

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

ダウンロード

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

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

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

使い方

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

ライセンス

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

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