Arayüz Paketleri

Paper Panel Arayüz Kiti — tek çerçeveli panel ve düğmeler

Tek çerçeveli nine-slice açık parşömen pencere panelleri, gömme liste çerçeveleri ve dört hap düğme durumu; SVG ve 1x, 2x, 4x saydam PNG.

  • ui
  • svg
  • saydam png
  • nine-slice
  • panel
  • düğme
  • menü
  • sade
  • açık arayüz
  • minimal
  • gündelik
pas kırmızısı başlık şeridi ve gömme liste alanı olan açık parşömen oyun menü paneli; yanında aynı hap düğmenin varsayılan, konturlu üzerinde ve içe basılmış basılı durumlarını gösteren sütun
1600×800 önizlemesaydamlık dama deseniyle gösteriliyor

Bu paket hakkında

Geceleri geçmeyen oyunlar için bir açık arayüz: bulmaca oyunları, yönetim simülasyonları, kart oyunları, ekrandan çok kâğıtta okunan her şey. Her şey normal bir oyun kitinin tersi — panel gövdesi en açık ton, kenarlıklar en koyu — ve düğmeler tam hap biçiminde; açık bir dikdörtgenin stilsiz bir div gibi görünmesini engelleyen biçim de bu.

İki nine-slice panel — 20 px köşeli tek çerçeveli bir pencere ve 14 px köşeli gömme bir iç çerçeve — bir menünün ihtiyaç duyduğu neredeyse her kutuyu karşılıyor: pencereler, envanter ızgaraları, liste zeminleri, ipucu balonları ve istatistik panelleri. Tek sürekli bir kenarlık, paneli yoğun metnin arkasında durabilecek kadar sessiz tutuyor. İkisi de her boyuta temiz uzuyor, çünkü köşeler hiç ölçeklenmiyor ve merkez düz bir dolgu.

Panellerin üstünde dört hap düğme durumu duruyor: varsayılan, üzerinde, basılı ve devre dışı. Hepsi aynı 140×44 tabanına 22 px köşelerle çizildi; yani tek bir düğme bileşeninde dokuyu değiştirerek bir dikdörtgeni bile kıpırdatmadan tüm etkileşim döngüsünü elde ediyorsun. Basılı durum yalnızca kararmak yerine yüzeyini iki piksel düşürüyor ve üstteki parlamayı kaldırıyor; bir düğmeye tıklanmış hissi veren, yalnızca yeniden renklendirilmiş hissi vermeyen şey de bu.

Her şey iki kez geliyor. SVG kaynaklar kitin çizildiği dosyalar — aç, altı sıcak kâğıt tonunu ya da tek pas kırmızısı aksanını değiştir, yeniden dışa aktar. PNG çıktılar ise bitmap isteyen motorlar için düz, saydam ve 1x, 2x, 4x olarak önceden ölçeklenmiş; önçarpılmış alfa yok, sprite sınırlarının dışına taşan pişmiş gölge yok.

İndirme

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

Tam kit — SVG kaynaklar, 1x/2x/4x PNG çıktılar, lisans ve benioku

Bu pakette bulunan dosyalar
DosyaBiçimBoyutİndirme
Tam kit — SVG kaynaklar, 1x/2x/4x PNG çıktılar, lisans ve beniokuZIP47 kB Al →
Pencere paneli, düzenlenebilir SVGSVG890 B Al →
Düğme (varsayılan durum), düzenlenebilir SVGSVG233 B Al →

Nasıl kullanılır

  1. Unity'de PNG'leri içe aktar, Texture Type'ı Sprite (2D and UI) yap ve kenarlığı pencere paneli için 20, 20, 20, 20, düğmeler için 22, 22, 22, 22 gir; sonra arayüz bileşeninde Image Type'ı Sliced yap.
  2. Godot 4'de bir NinePatchRect kullan ve yama kenarlarını aynı sayılara ayarla; ya da SVG'yi doğrudan bırak, Godot içe aktarma seçeneklerinde verdiğin ölçekte rasterleştirsin.
  3. Unreal'de Texture2D olarak içe aktar, Draw As değeri Box olan bir Slate Brush oluştur ve kenar boşluğunu doku boyutunun oranı olarak gir — 104 px panel için 0.19231, 140 px düğme için 0.15714.
  4. Tam sayı olmayan arayüz ölçeklerinde keskin sonuç için 1x'i büyütmek yerine 2x ya da 4x PNG'yi kullan; ya da motoru SVG kaynağa yönlendirip son boyutta rasterleştirmesini sağla.
  5. Katalogdaki tek açık kit bu, dolayısıyla üstüne koyu metin istiyor — SVG'deki mürekkep değeri kontrastın karşısında ayarlandığı değer ve onu saf siyahla değiştirmek sıcak kâğıt tonunda okunurluğu aslında düşürüyor.

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ı
"Paper Panel Arayüz Kiti — tek çerçeveli panel ve düğmeler" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/paper-panel-ui-kit