Arayüz Paketleri

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

18 adet alacakaranlık moru arayüz sprite'ı: başlık bantlı nine-slice paneller, ipucu, başlık şeridi, ayraç, çip ve on iki kare düğme durumu. SVG ve saydam PNG.

  • ui
  • svg
  • saydam png
  • nine-slice
  • panel
  • düğme
  • menü
  • şerit
  • piksel sanatı
  • retro
  • 2d
kehribar başlık şeridi ve gömme liste alanı olan alacakaranlık moru 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×1115 önizlemesaydamlık dama deseniyle gösteriliyor

Bu paket hakkında

Yine de gerçek bir menü isteyen piksel oyunlar için sert kenarlı bir kit; başlık çubuğu panele sonradan takılmak yerine içine kurulu. Hiçbir yerde yuvarlak köşe ve yumuşatma yok: her kenarlık tek ve düz bir piksel sırası ve bir oyuncu oyunu 4K bir monitörde 3x çalıştırdığında panelin biçimini koruyabilmesinin tek yolu bu. Morlar yeterince serin, dolayısıyla kehribar kırmızıya gerek kalmadan uyarı gibi okunuyor.

İki nine-slice panel — 16 px köşeli başlık çubuklu bir pencere ve 12 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 on iki kare düğme sprite’ı duruyor: varsayılan, üzerinde, basılı ve devre dışı; her biri üç kez çizilmiş — standart 96×32 ç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ı: 32 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ı gece moru tonunu ya da tek 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ı yok
ZIP indir39 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 beniokuZIP39 kB Al →
Pencere paneli, düzenlenebilir SVGSVG2.3 kB Al →
Düğme (varsayılan durum), düzenlenebilir SVGSVG1.6 kB 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 16, 16, 16, 16, düğmeler için 8, 8, 8, 8 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 — 80 px panel için 0.2, 96 px düğme için 0.08333.
  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. Her kenar tam piksele oturuyor ve hiçbir yerde yumuşatma yok; 1x PNG'yi filtrelemeyi Point (Unity), Nearest (Godot) ya da Nearest-Neighbour (Unreal) yaparak içe aktar ve yalnızca tam sayılarla ölçekle.

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ı
"Dusk Panel Arayüz Kiti — başlık çubuklu panel ve düğmeler" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-panel-ui-kit