Jonli o'yin HUD'i

HUD tarkibi va talablari, health bar chizish, tanga hisoblagichi, mini-xarita, guruhlash va eksport

9-sinfGame Design6-hafta · 16-dars

Bugun nimalarni o'rganamiz?

HUD tarkibi

Nimani ko'rsatamiz?

Health bar va tangalar

Photoshop'da chizish

Mini-xarita

Guruhlash va eksport

Takrorlash

Menyu va HUD ning asosiy farqi nima?

HUD — o'yin davomida doimiy ko'rinadigan ma'lumot.

HUD tarkibi

Nimani ko'rsatamiz?

HUD yaratish tartibi

HUD maketi (sxema)


+--------------------------------------------------+
| [HP ########--] 80/100               COIN x 12   |
|                                                  |
|                                                  |
|                  O'yin sahnasi                   |
|                                                  |
|                                      +--------+  |
|                                      | mini-  |  |
|                                      | xarita |  |
|                                      +--------+  |
+--------------------------------------------------+

Markaz bo'sh qoladi — o'yinchi sahnani ko'rishi kerak. HUD elementlari burchaklarga yig'iladi.

Mini-test

HUD elementlari odatda qayerda joylashadi?

Burchaklarda — ko'rish maydoniga xalaqit bermaydi.

Health bar va tangalar

Photoshop'da chizish

Health bar qatlamlari

To'ldirish uzunligi


Bar kengligi: 400 px, maksimal HP: 100

HP 100  ->  400 * 100 / 100 = 400 px
HP  80  ->  400 *  80 / 100 = 320 px
HP  50  ->  400 *  50 / 100 = 200 px
HP  25  ->  400 *  25 / 100 = 100 px

Rang: 50% dan ko'p - yashil
      25-50%      - sariq
      25% dan kam - qizil

Rang almashishi — namunaviy tavsiya: o'yinchi sog'lig'i kamayganini rangdan darrov tushunadi.

Mini-test

400 px bar, HP 50/100. To'ldirish uzunligi?

400 × 50 / 100 = 200.

Mini-xarita

Guruhlash va eksport

Mini-xarita va eksport

Qatlamlar tuzilmasi


HUD
  HP
    Ikonka (yurak)
    Matn 80/100
    Bar ramka
    Bar to'ldirish
    Bar fon
  Tangalar
    Matn x 12
    Ikonka (tanga)
  Mini-xarita
    Qahramon belgisi
    Dushman belgilari
    Xarita fon

Yuqori qatlam — ustida ko'rinadi: ramka to'ldirishdan, matn esa fondan tepada turishi kerak.

Mini-test

Shaffof fonli HUD qaysi formatda eksport qilinadi?

PNG shaffoflikni saqlaydi, JPG — yo'q.

Menyu va HUD

Menyu

O'yinchi tanlov qiladi; ochiladi va yopiladi

HUD

O'yin davomida doim ko'rinib turadi

HUD — ma'lumot, menyu — tanlov.

Atamalar. Bosing

HUD

bosing

Ekran usti interfeysi

Health bar

bosing

Sog'liq darajasini ko'rsatuvchi shkala

Mini-xarita

bosing

Atrofning kichik xaritasi

Layer

bosing

Photoshop qatlami

HUD maketi

1. Elementlarni belgilang

HP, tangalar, mini-xarita.

2. Chizing

Qatlam-qatlam.

3. Eksport qiling

Shaffof PNG.

HUD elementlari

Element	Vazifasi	Joyi (tavsiya)
Health bar	Sog'liq darajasi	Chap yuqori
Tanga hisoblagichi	Yig'ilgan resurs	O'ng yuqori
Mini-xarita	Joylashuv, yo'nalish	O'ng pastki
Inventar	Qurol, buyum	Pastki o'rta
Vaqt	Topshiriq vaqti	Yuqori o'rta

Joylashuv — namunaviy tavsiya

HUD yaratish

1920×1080 px, Transparent fonli hujjat oching.
Health bar'ni 3 qatlamda chizing: fon, to'ldirish, ramka.
Tanga hisoblagichi va mini-xaritani qo'shing, guruhlab, PNG qilib eksport qiling.

Health bar qatlamlari


Bitta qatlamda:
bar + to'ldirish + ramka

Health bar qatlamlari


Alohida qatlamlarda:
fon / to'ldirish / ramka

HUD raqamlarda

qatlam — bitta health bar

ta asosiy burchak — HUD joyi

bar 80% da

HP o'zgarsa, faqat to'ldirish qatlami o'zgaradi.

Amaliy topshiriq 20 daqiqa

OsonHUD elementlari: HUD ning kamida 4 ta elementini sanang va har birining vazifasini yozing.

OsonBurchaklar: Health bar, tangalar va mini-xaritani ekranning qaysi burchaklariga qo'yasiz?

O'rtaBar uzunligi: Bar kengligi 400 px. HP 60/100 va 35/100 bo'lsa, to'ldirish uzunligi qancha?

O'rtaHealth bar chizish: Photoshop'da 400×40 px health bar'ni 3 qatlamda chizing.

QiyinTanga hisoblagichi: Tanga ikonkasi va «x 12» matnidan hisoblagich yig'ing, guruhlang va nom bering.

BonusTo'liq HUD: Uchala elementdan iborat HUD'ni chizing, «HUD» guruhiga soling va shaffof PNG qilib eksport qiling.

Dars xulosasi

HUD

Doim ko'rinadigan ma'lumot.

Health bar

Fon, to'ldirish, ramka.

Eksport

Shaffof PNG, guruhlangan layerlar.

Uyga vazifa: HUD maketi: health bar, tangalar, mini-xarita.

Keyingi dars: Prototiplash

Wireframe, Mockup, Prototype

6-hafta · 17-dars