Arayüz Paketleri
Aqua Panel Arayüz Kiti — tek çerçeveli panel ve düğmeler
Tek çerçeveli nine-slice camsı turkuaz pencere panelleri, gömme liste çerçeveleri ve dört köşeli düğme durumu; SVG ve 1x, 2x, 4x saydam PNG.

Bu paket hakkında
Bulanıklık gölgelendiricisi olmadan cam. Her yüzeyin üst yarısı alt yarısından bir kademe açık ve ikisi tek ve sert bir piksel çizgisiyle ayrılıyor; "bu parlak bir levha" demenin mümkün olan en ucuz yolu ve bir 1x çıktıdan sağ çıkan tek yol bu. Turkuazlar yeterince koyu, dolayısıyla buz mavisi aksan boyanmış değil aydınlatılmış görünüyor.
İki nine-slice panel — 24 px köşeli tek çerçeveli bir pencere ve 16 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 köşeli düğme durumu duruyor: varsayılan, üzerinde, basılı ve devre dışı. Hepsi aynı 128×40 tabanına 12 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ı koyu turkuaz tonunu ya da tek buz mavisi 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ı yokTam kit — SVG kaynaklar, 1x/2x/4x PNG çıktılar, lisans ve benioku
Nasıl kullanılır
- Unity'de PNG'leri içe aktar, Texture Type'ı Sprite (2D and UI) yap ve kenarlığı pencere paneli için 24, 24, 24, 24, düğmeler için 12, 12, 12, 12 gir; sonra arayüz bileşeninde Image Type'ı Sliced yap.
- 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.
- 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 — 96 px panel için 0.25, 128 px düğme için 0.09375.
- 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.
- Parlaklık ayrımı iç yüksekliğin 46%'inde duruyor ve gradyan değil, sert tek piksellik bir çizgi — nine-slice'ı dikeyde esnetsen bile ayrım üst satırın bittiği yerde kalıyor; panelin her yükseklikte cam gibi okunmasının sebebi bu.
Lisans
Creative Commons Atıf 4.0 — Ticari kullanımda ücretsiz. Atıf zorunlu. Tam koşullar · Pratikte ne demek
"Aqua 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/aqua-panel-ui-kit
















