Arayüz Paketleri

Mint Panel Arayüz Kiti — başlık çubuklu panel ve düğmeler

Başlık çubuklu nine-slice serin arduvaz pencere panelleri, gömme liste çerçeveleri ve dört köşeli düğme durumu; SVG ve 1x, 2x, 4x saydam PNG.

  • ui
  • svg
  • saydam png
  • nine-slice
  • panel
  • düğme
  • menü
  • şerit
  • düz
  • koyu arayüz
  • strateji
  • araçlar
nane yeşili başlık şeridi ve gömme liste alanı olan serin arduvaz oyun menü paneli; yanında aynı köşeli 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

Yarıçapı neredeyse tamamen içeri çekilmiş düz tasarım. Açık düz ailesi 20px köşe ve hap düğmeler kullanıyor, çünkü gündelik oyunu hedefliyor; bu aile ise 8px ve kare düğmeler kullanıyor, çünkü bir strateji ekranı çoğunlukla satırlardan oluşuyor ve cömert bir yarıçap tam sayıların gireceği genişliği harcıyor. Hiçbir yerde kontur ve gölgeleme yok — derinlik, üst üste üç gölge geçişi ve başka hiçbir şey.

İki nine-slice panel — 8 px köşeli başlık çubuklu bir pencere ve 6 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. Panelin üstüne bir başlık bandı gömülü, dolayısıyla bir pencere başlığı için ikinci bir sprite ve elle hizalama gerekmiyor. İ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ı 120×36 tabanına 6 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ı mavi-gri tonunu ya da tek nane yeşili 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 indir26 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 beniokuZIP26 kB Al →
Pencere paneli, düzenlenebilir SVGSVG994 B Al →
Düğme (varsayılan durum), düzenlenebilir SVGSVG713 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 8, 8, 8, 8, düğmeler için 6, 6, 6, 6 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 — 88 px panel için 0.09091, 120 px düğme için 0.05.
  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.

Lisans

Creative Commons Sıfır 1.0 — Kamu malı. Atıf gerekmiyor. Tam koşullar · Pratikte ne demek