Arayüz Paketleri

Oak Panel Arayüz Kiti — çift çerçeveli panel ve düğmeler

Çift çerçeveli nine-slice sıcak meşe pencere panelleri, gömme liste çerçeveleri ve dört sekme düğme durumu; SVG ve 1x, 2x, 4x saydam PNG.

  • ui
  • svg
  • saydam png
  • nine-slice
  • panel
  • düğme
  • menü
  • çift
  • fantastik
  • rpg
  • ahşap
cilalı pirinç başlık şeridi ve gömme liste alanı olan sıcak meşe oyun menü paneli; yanında aynı sekme 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

Envanter ızgarası ve görev günlüğü olan türden oyunlar için sıcak, ahşap bir çerçeve. Aralarında boşluk olan iki iç içe kenarlık ona düz kahverengi bir dikdörtgen yerine oyulmuş bir görünüm veriyor; sekme biçimli düğmeler de pirinç bir taban çizgisine oturuyor, böylece bir sıra düğme ayrı kontroller dizisi gibi değil bir sayfa takımı gibi okunuyor. Buradaki her şey standart bir kitten bir beden büyük, çünkü fantastik bir menüye şöyle bir bakılmaz, bakılır.

İki nine-slice panel — 32 px köşeli çift çerçeveli bir pencere ve 20 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. Aralarında boşluk olan iki iç içe kenarlık, çizilmiş değil oyulmuş gibi okunuyor; el işi bir arayüzü konturlu bir dikdörtgenden ayıran da bu. İkisi de her boyuta temiz uzuyor, çünkü köşeler hiç ölçeklenmiyor ve merkez düz bir dolgu.

Panellerin üstünde dört sekme düğme durumu duruyor: varsayılan, üzerinde, basılı ve devre dışı. Hepsi aynı 160×48 tabanına 16 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ı ahşap kahvesi tonunu ya da tek cilalı pirinç 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 indir37 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 beniokuZIP37 kB Al →
Pencere paneli, düzenlenebilir SVGSVG2.3 kB Al →
Düğme (varsayılan durum), düzenlenebilir SVGSVG513 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 32, 32, 32, 32, düğmeler için 16, 16, 16, 16 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 — 128 px panel için 0.25, 160 px düğme için 0.1.
  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. Pirinç aksan SVG'de tek bir değer — onu gümüş ya da bakır yeşiliyle değiştirmek, ahşap tonlarına hiç dokunmadan tüm kiti başka bir hizip için yeniden giydiriyor.

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