Arayüz Paketleri

Charcoal Arayüz Kontrolleri — onay kutusu, anahtar ve kaydırıcı

19 adet arduvaz üstüne tebeşir arayüz denetimi: onay kutusu, radyo, anahtar, kaydırıcı ve sayaç; açık, kapalı, kısmi ve devre dışı hâller renkle değil biçimle çizili. SVG ve PNG.

  • ui
  • svg
  • saydam png
  • onay kutusu
  • anahtar
  • kaydırıcı
  • ayarlar
  • kontroller
  • elle çizim
  • koyu arayüz
  • korku
  • gizem
Dama zemin üzerinde oyun ayar kontrolleri — boş ve işaretli onay kutusu, seçili olmayan ve seçili radyo düğmesi, kapalı ve açık gösterilen anahtar, bir de topuzuyla kaydırıcı yolu
1600×757 önizlemesaydamlık dama deseniyle gösteriliyor

Bu paket hakkında

28px'te, katalogdaki en büyük kontroller. Titrek bir kontur, titremenin bir render hatası değil el işi gibi okunması için yere ihtiyaç duyuyor; 20px'te ise yalnızca render bozukmuş gibi görünüyor.

Set bir ayarlar ekranının gerçekten ihtiyaç duyduğunu kapsıyor: onay kutusu, radyo düğmesi, anahtar, ayrı tutamaklı kaydırıcı ve ayrık değerler için sayaç çifti. Durumu olan her denetim her hâlini kendi dosyası olarak 28×28 tabanda gönderiyor — anahtar 56×28, kaydırıcı yolu ise 224 px genişliğinde, böylece istenen uzunluğa nine-slice ile geriliyor. Kaydırıcı ayrıca boş, dolu ve dikey hâlleriyle geliyor; çünkü bir ses sütunu döndürülmüş bir satır değil.

Açık ve kapalı farklı renklerle değil farklı biçimlerle çizildi. İşaretsiz kutu boş bir girinti; işaretli olan ise içine tik oyulmuş dolu bir yüzey. Bunun önemi şu: bir oyuncunun renk körü kipini, gri tonlamalı bir gölgelendiriciyi ya da ağır renklendirilmiş bir post-process'i çalıştırma ihtimalinin en yüksek olduğu yer tam olarak ayarlar ekranı — ve yalnızca renk tonundan okunan bir durum üçünün de altında kayboluyor.

Kaydırıcı tek bir sprite yerine yol ve tutamak olarak geliyor. Tek parça bir kaydırıcıyı canlandırmak onu her değerde yeniden çizmek demek; iki parçayla dolguyu geriyor, tutamağı kaydırıyorsun ve zaten her arayüz araç setinin beklediği bu. Tutamağın ortasında bir çentik var, böylece dönüşü ve konumu küçük boyutta da okunuyor; basılı hâli ise sürükleme durumu için aksan halkası ekliyor.

Devre dışı, durumu olan her denetim için ayrı bir sprite; çalışma anında uygulanan bir soluklaştırma değil. Erişilemeyen bir ayar ile kapatılmış bir ayar farklı şeyler — biri "kapalı" diyor, öteki "buna dokunamazsın" — ve ikisini aynı gösteren bir ekran, oyuncuyu var olmayan bir hatayı aramaya gönderiyor. Onay kutusu ayrıca karışık seçim listelerinin üstündeki "hepsini seç" satırı için kısmi hâl gönderiyor; iki durumlu bir onay kutusunun yanlış bildirdiği durum tam olarak bu.

Her şey düzenlenebilir SVG olarak ve 1x, 2x, 4x düz saydam PNG olarak dahil; Charcoal ailesinin geri kalanıyla aynı altı duman grisi tonundan çizildi.

İndirme

Doğrudan bağlantı · kayıt yok · bekleme sayfası yok
ZIP indir155 kB

Tam set — 8 SVG kaynak, 1x/2x/4x PNG çıktılar, lisans ve benioku

Bu pakette bulunan dosyalar
DosyaBiçimBoyutİndirme
Tam set — 8 SVG kaynak, 1x/2x/4x PNG çıktılar, lisans ve beniokuZIP155 kB Al →
Anahtar (açık durum), düzenlenebilir SVGSVG469 B Al →
Kaydırıcı yolu, düzenlenebilir SVGSVG1.3 kB Al →

Nasıl kullanılır

  1. Açık ve kapalı durumlar arasında tek sprite'ı renklendirmek yerine dokunun tamamını değiştir; iki durum biçim olarak farklı, dolayısıyla renk tek başına onları üretmiyor.
  2. Kaydırıcı yolu her iki ucunda 9 px uçla nine-slice edilebiliyor — ortayı esnet, yuvarlak uçlar her genişlikte bozulmadan kalsın.
  3. Unity'de iki dosyayı Toggle bileşeninin Background ve Checkmark grafiklerine bağla ya da tek görsellik bir kurulum için sprite'ı onValueChanged içinde değiştir.
  4. Topuzu dolgu kenarında ortala: genişliği 24 px, dolayısıyla dolgunun sağ kenarından yarısı kadar geri al ki tutamak değerin ardında değil üstünde dursun.

Lisans

Creative Commons Atıf 4.0 — Ticari kullanımda ücretsiz. Atıf zorunlu. Tam koşullar · Pratikte ne demek

Kopyala-yapıştır atıf satırı
"Charcoal Arayüz Kontrolleri — onay kutusu, anahtar ve kaydırıcı" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/charcoal-ui-controls