Arayüz Paketleri

Aqua HUD Barları — can, mana ve dayanıklılık

Üç parlak dolgusu ve bölmeli varyantı olan camsı turkuaz nine-slice bar çerçevesi; 160×24 boyutunda, 8 px uçlu. SVG ve saydam PNG.

  • ui
  • svg
  • saydam png
  • hud
  • can barı
  • ilerleme barı
  • nine-slice
  • cam
  • su altı
  • koyu arayüz
  • bilim kurgu
Dama zemin üzerinde üst üste dizilmiş üç yatay oyun durum barı; can, mana ve dayanıklılık için farklı seviyelerde dolu, altlarında 10 çentikli bölmeli bar ve üç küçük bar
1600×880 önizlemesaydamlık dama deseniyle gösteriliyor

Bu paket hakkında

Panellerle aynı sert cila ayrımını taşıyan barlar; ortak 160x24 tabanında, böylece bir Slate ekranına yeniden boyutlandırılmadan giriyorlar. Ayrım dolgunun üstünden geçmiyor, üstünde duruyor: renkli bir dolgunun üzerine çizilen bir parlama kırmızı barı pembeye, mavi barı griye çeviriyor ki bir durum barının göze alamayacağı tek şey bu.

Çerçeve 8 px uçlu bir nine-slice, dolayısıyla uçları bozulmadan her genişliğe uzuyor — tam ekran genişliğinde bir boss barı ile 40 px'lik bir düşman isim barı aynı dosyayı kullanıyor.

Dolgular çerçeveye pişirilmek yerine ayrı sprite'lar ve pratikte önemli olan kısım da bu: dolgunun genişliğini sıfırdan tama ölçeklerken çerçeve hiç kıpırdamıyor. Her dolgu, orta çizgide gradyanla değil sert bir kenarla ikiye ayrılıyor; 1x'te tek bir yumuşak piksele mal olmadan cam gibi okunmasının sebebi de bu.

Üç renk var, kaynak başına bir tane: can, mana ve dayanıklılık. Renk tonunda olduğu kadar parlaklıkta da birbirinden ayrılıyorlar; gri tonlamalı bir ekran görüntüsünden ve renk körlüğünün en yaygın biçimlerinden sağ çıkan kısım da bu. Aynı açıklığa ayarlanmış bir set renk şeridinde dengeli görünüp ekranda tek bir gri bloğa çöküyor.

Bölmeli varyant aynı çerçevenin üstüne 9 çentik çizgisi ekliyor; sürekli bir yüzde yerine ayrık birim sayan oyunlar için — canlar, şarjlar, cephane. Kaplama değil ayrı bir dosya, yani bar bileşenini değiştirmeden yerleştirebiliyorsun. Her şey düzenlenebilir SVG olarak ve 1x, 2x, 4x düz saydam PNG olarak dahil.

İndirme

Doğrudan bağlantı · kayıt yok · bekleme sayfası yok
ZIP indir19 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 beniokuZIP19 kB Al →
Bar çerçevesi, düzenlenebilir SVGSVG575 B Al →

Nasıl kullanılır

  1. Önce çerçeveyi, sonra üstüne dolguyu çiz ve dolgunun sol kenarını 8 px uç genişliği kadar içeri al; yalnızca dolgunun genişliğini canlandırmak çerçevenin uçlarını kıpırdatmadan tutar.
  2. Unity'de dolgu görselini Image Type Filled ve Fill Method Horizontal yap ya da Sliced bir görselin RectTransform genişliğini canlandır — dolgunun kendi yuvarlak köşesi olmadığı için ikisi de çalışıyor.
  3. Godot 4'de, çerçeveyi Under Texture ve dolguyu Progress Texture olarak alan bir TextureProgressBar aynı şeyi tek satır kod olmadan üretiyor; Stretch Mode'u Tile yapmak da uçları bozulmadan tutuyor.
  4. Bölmeli kaynaklar için bölmeli çerçeveyi kullan ve dolgu genişliğini iç genişliğin onda biri katlarına oturt ki dolgu kenarı hep bir çentiğe denk gelsin.

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ı
"Aqua HUD Barları — can, mana ve dayanıklılık" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/aqua-hud-bars