Vibecoding · 11-dars · 5-6 sinflar
Fan: IT / VibecodingПредмет: IT / VibecodingSubject: IT / Vibecoding
Hafta: 2Неделя: 2Week: 2
O'yin Interfeysi: HUD, HP Barlari va O'yin UI Dizayni
O'yinchi o'z joni (HP), tangalari va o'qlarini qanday ko'rib turadi? Heads-Up Display (HUD) qonunlari, minixarita va AI bilan UI ikonkalari yaratishni o'rganamiz.
HUD Tushunchasi
HUD Nima? Ekrandagi Ko'rinmas Asboblar Paneli
HUD (Heads-Up Display) — bu 3D olam ustiga joylashtirilgan, o'yinchiga eng muhim ma'lumotlarni ko'rsatuvchi oynadir:
Tartibsiz UI (Ekran to'la) ❌
Katta tugmalar ekranni to'sib qo'yadi, jon chizig'i ko'rinmaydi. O'yinchi joni tugab qolganini sezmay o'lib ketadi.
Professional HUD (Toza) ✅
Ekran markazi toza! Jon, o'qlar va minixarita 4 burchakka taqsimlangan, xavf tug'ilganda qizil yonib ogohlantiradi.
4 Burchak Qoidasi
O'yin Ekranining Oltin 4 Burchak Qoidasi
O'yinchi nigohi qizg'in jang paytida 4 burchakka qaraydi. Asosiy elementlar joylashuvi:
1. Yuqori Chap: Hayot va Zaxira 💖
HP (Jon) chizig'i, qalqon, o'yinchi avatari va darajasi (Level XP).
2. Yuqori O'ng: Minixarita 🗺️
Doiraviy minixarita, kvestga olib boruvchi kompas, tangalar hisobi.
3. Quyi O'ng: Qurol va Harakat ⚔️
Tanlangan qurol, qolgan o'qlar soni, maxsus qobiliyat va sakrash tugmasi.
4. Quyi Chap: Inventar / Xabarlar 🎒
Tezkor inventar xaltasi (Hotbar), jamoaviy xabarlar yoki harakat tugmasi.
Kontrast Qonunlari
0.1 Soniyada Tushunish: Vizual Kontrast va Qora Soya
Jang paytida o'yinchi harflarni o'qishga vaqt sarflamasligi kerak. Qoidalar:
- 1. To'q orqa fon va qora soya: Qorli xaritada oq raqamlar yo'qolib ketadi — ularning orqasiga qora yarim shaffof plita qo'yiladi.
- 2. Ranglar ogohlantirishi: 100% Jon — yashil, 50% — sariq, 20% dan tushganda — qizil yonib-o'chuvchi signal!
- 3. 80% Shaffoflik Qoidasi: Ekranning kamida 80 foiz maydoni o'yin olami uchun bo'sh turishi shart.
UI Generatsiya Formulasi
AI Bilan O'yin UI Ikonkalari To'plamini Yaratish Prompti
1. MAVZU: O'yin UI HUD ikonkalari to'plami (sprite sheet)
+ 2. ELEMENTLAR: Qizil HP yurak, havorang kristall, oltin tanga, o'qlar belgisi, kalit
+ 3. USLUB: Toza vektor, yassi kiberpank uslubi, neon yaltiroq qirralar
+ 4. FON: Oq tekis fonda (solid white background), orqani oson qirqish uchun tayyor
Oq fon orqali rasmni 1 soniyada orqa fonsiz shaffof PNG formatga aylantirish mumkin!
UI Xatolari
O'yinni Buzadigan 3 Ta Xavfli UI Xatosi
Eng qiziqarli o'yin ham, agar interfeysi noto'g'ri bo'lsa, o'yinchini charchatadi:
1. Markazni To'sish 🚫
Kvest matni to'ppa-to'g'ri ekran o'rtasiga chiqib qoladi. O'yinchi dushmanning o'qini ko'rolmay qoladi!
2. Mitti Shriftlar 🔍
Mobil telefonda o'ynaganda o'qlar soni ko'rinmaydi. Raqamlar qalin va yirik bo'lishi shart!
3. Ko'rinmas Ranglar 🌈
Yashil maysa fonida yashil jon chizig'i. Qora chegaralarsiz jon holati ko'rinmay qoladi.
Amaliy Vazifa
Bugungi Vazifa: O'z O'yiningiz Uchun HUD Maketini Chizing
Bugun har bir o'quvchi UI/UX dizaynerga aylanadi va o'yin ekrani maketini chizadi:
- 1. 4 burchakni belgilash: HP paneli, minixarita, tangalar hisoblagichi va qurol tugmasini joylashtirish.
- 2. AI da spraytlar yaratish: 3 ta asosiy ikonka to'plamini (yurak, tanga, kristall) generatsiya qilish.
- 3. Kontrastni ta'minlash: Raqamlar orqasiga qora hoshiya va yarim shaffof plita chizish.
- 4. 3 soniyalik test: Sherigingiz 3 soniya ichida jon va tangalar sonini topishi kerak!
Jonli Amaliyot · Taymer
UI Ustaxona: 11 Daqiqalik Ekranni Loyihalash
Varaqadagi monitor chizmasiga HUD elementlarini joylang va AI da chiroyli ikonkalarni yarating!
Tahlil va Test
"3 Soniya" Testi: Interfeys Qulayligini Sinash
Varaqadagi chizmani sherigingizga roppa-rosa 3 soniya ko'rsatib, yopib oling. So'rang:
1. Jon Qancha Qolgan?
Jon chizig'ining rangi va to'lalik darajasini darhol ilg'adimi?
2. Qurol Qayerda?
Hozir qo'lda qaysi qurol borligi va uning o'qlari ko'rindimi?
3. Markaz Bo'shmi?
Katta tugmalar qahramonning ko'rish maydonini to'smayaptimi?
Uyga Vazifa
Uyga Vazifa: To'liq O'yin HUD Maketi va Ikonkalar
Bajarilishi shart bo'lgan vazifalar:
- Varaqadagi monitor chizmasiga barcha 4 burchak elementlarini to'liq chizib chiqing.
- AI da oq fonda kamida 4 ta o'yin ikonkasidan iborat UI to'plamini yarating.
- Jon chizig'ining dinamik rang o'zgarish qoidalarini daftaringizga yozing.
Baholash Mezoni (10 ball):
- 3 ball: 4 burchak qoidasiga amal qilingan, markaz toza.
- 4 ball: Oq fonda toza va chiroyli 4 ta UI ikonkasi yaratilgan.
- 3 ball: To'q plitalar va ranglar ogohlantirish mantiqi to'ldirilgan.