Arayüz Paketleri

Dusk HUD Barları — hp, mp ve xp

16 adet alacakaranlık moru HUD bar sprite'ı: standart, ince ve dikey çerçeve, her birinde üç çentikli dolgu, artı segmentli, hayalet ve kalkan varyantı.

  • ui
  • svg
  • saydam png
  • hud
  • can barı
  • ilerleme barı
  • nine-slice
  • piksel sanatı
  • retro
  • 2d
Dama zemin üzerinde üst üste dizilmiş üç yatay oyun durum barı; hp, mp ve xp için farklı seviyelerde dolu, altlarında 6 çentikli bölmeli bar ve üç küçük bar
1600×880 önizlemesaydamlık dama deseniyle gösteriliyor

Bu paket hakkında

128x16 boyutunda altı çentikli barlar; hâlihazırda büyük olan değil, yukarı ölçeklenecek bir ekran için ölçülendi. Her kenar 4px ızgaraya oturuyor ve çentikler dolgunun üstündeki çizgiler değil, dolgudaki boşluklar; böylece tam sayı bir büyütme onları bara bulaştırmak yerine tam bir piksel genişliğinde tutuyor.

Çerçeve 4 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 boyunca düzenli çentik işaretleri taşıyor; bu da bir yüzdeyi, bölmeli bir çerçeveye gerek kalmadan oyuncunun tek bakışta sayabileceği bir şeye çeviriyor.

Üç renk var, kaynak başına bir tane: hp, mp ve xp. 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.

Segmentli varyant aynı çerçevenin üstüne 5 çentik çizgisi ekliyor; sürekli bir yüzde yerine ayrık birimler sayan oyunlar için — canlar, şarjlar, mermi. Kaplama değil ayrı bir dosya, yani bar widget’ını değiştirmeden yerine koyabiliyorsun.

Üç çerçeve kurulumu barların gerçekte durduğu yerleri karşılıyor: standart bar, düşman isim plakaları için ince olanı, ve dikey olanı — çünkü bir mana sütunu döndürülmüş bir can barı değil: nine-slice’ı döndürmek uç parçalarını yanlış eksende geriyor. Her kurulumun kendi üç dolgusu var.

İki kaplama dolgusu, tek bir barın kendi başına gösteremediği hâlleri karşılıyor. Hayalet dolgu içi boş ve kesikli: az önce kaybedilen bölümü işaretliyor, böylece bir vuruş yeni bir sayı olarak değil bir değişim olarak okunuyor. Kalkan dolgusu ise renklendirilmiş değil taralı, çünkü emme katmanı kaynak barının üstüne biniyor ve oradaki ikinci bir renk altındaki renkle çakışıyor. Her şey düzenlenebilir SVG ve 1x, 2x, 4x düz saydam PNG olarak geliyor.

İ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 →
Bar çerçevesi, düzenlenebilir SVGSVG683 B Al →

Nasıl kullanılır

  1. Önce çerçeveyi, sonra üstüne dolguyu çiz ve dolgunun sol kenarını 4 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 altıda 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ı
"Dusk HUD Barları — hp, mp ve xp" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-hud-bars