Arayüz Paketleri
Carbon Panel Arayüz Kiti — köşe ayraçlı panel ve düğmeler
18 adet karbon fiber arayüz sprite'ı: köşe ayraçlı nine-slice paneller, ipucu, başlık şeridi, ayraç, çip ve on iki pahlı düğme durumu. SVG ve saydam PNG.

Bu paket hakkında
Nötr çelik ailesiyle aynı beş duraklı speküler gradyan ve fırçalanmış çizgi deseni; çok daha koyu bir palet üzerinde ve gövdesi köşe ayraçlarına açılmış hâlde. Bir paneli cihaz çerçevesine çeviren şey de bu son değişiklik: kapalı bir kenarlık pencere gibi, dört ayraç ise gösterge paneline cıvatalanmış bir şey gibi okunuyor. Perçinler duruyor, çünkü hiçbir yere sabitlenmemiş bir kokpit paneli bir render'dan ibarettir.
İki nine-slice panel — 10 px köşeli köşe ayraçlı bir pencere ve 8 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. Hiçbir yerde sürekli bir kenarlık yok — sınırları dört köşe ayracı işaretliyor, gerisi açık kalıyor; böylece panel içeriği kutuya kapatmadan çerçeveliyor. İkisi de her boyuta temiz uzuyor, çünkü köşeler hiç ölçeklenmiyor ve merkez düz bir dolgu.
Panellerin üstünde on iki pahlı düğme sprite’ı duruyor: varsayılan, üzerinde, basılı ve devre dışı; her biri üç kez çizilmiş — standart 152×44 çubuk, kare bir kare ikon düğmesi, ve araç çubukları ile satır içi eylemler için sıkışık bir düğme. Üç boyut tek bir ölçeklenmiş sprite yerine ayrı dosyalar, çünkü çizim ölçüye bağlı: 44 pikselde hesaplanan pah küçüklerde yeniden hesaplanıyor, küçültülmüyor. Basılı hâl yüzünü iki piksel indiriyor ve üstteki parlaklığı kaldırıyor, yalnızca koyulaşmıyor; bir düğmeyi yeniden renklendirilmiş değil tıklanmış hissettiren şey bu.
Dört küçük parça panellerin arasında kalanı karşılıyor: kuyruklu bir ipucu kutusu, panelin üstüne oturan bir başlık şeridi, ortasında işaret olan bir bölüm ayracı, ve sayı ile durum etiketleri için bir etiket çipi. Hiçbiri pencere panelinin başka bir boyuttaki hâli değil — nine-slice zaten her ölçüye esniyor, dolayısıyla farklı genişlikte ikinci bir dosya bileşen değil dolgu olurdu.
Her şey iki kez geliyor. SVG kaynaklar kitin çizildiği dosyalar — aç, altı siyaha yakın tonunu ya da tek uyarı kehribarı 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 10, 10, 10, 10, düğmeler için 4, 4, 4, 4 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 — 128 px panel için 0.07813, 152 px düğme için 0.02632.
- 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.
Lisans
Creative Commons Atıf 4.0 — Ticari kullanımda ücretsiz. Atıf zorunlu. Tam koşullar · Pratikte ne demek
"Carbon Panel Arayüz Kiti — köşe ayraçlı panel ve düğmeler" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/carbon-panel-ui-kit


