O'yin Interfeysi: HUD va UI DizaynИгровой Интерфейс: HUD и UIGame Interface: HUD & UI Design

O'yinchi ko'zini charchatmaydigan 4 burchak qoidasidagi HUD interfeysi va AI ikonkalarni loyihalang.Проектируйте эргономичный HUD по правилу 4 углов и иконки интерфейса с ИИ.Architect an ergonomic 4-corner HUD layout and generative UI badges with AI.

Ism, familiyaИмя, фамилияName SinfКлассClass SanaДатаDate

Darsning bitta jumlasiОдна фраза этого урокаThe one sentence of this lesson

Eng zo'r interfeys — bu ko'zga tashlanmaydigan, lekin 0.1 soniyada barcha ma'lumotni yetkazuvchi HUD dir.Идеальный интерфейс незаметен в бою, но сообщает главное за 0.1 секунды.The ultimate UI stays invisible in combat while communicating critical vitals in 0.1 seconds.

HUD Asosiy QonuniЗакон Читаемости HUDThe Law of Clean HUD

Tartibsiz Ekran (Chaos)Захламленный ЭкранCluttered Viewport

Ekranning markazi yozuvlar bilan to'la. Jon chizig'i ko'rinmaydi. O'yinchi dushmanni ko'rolmay yutqazadi.Кнопки закрывают обзор. Шкала жизней сливается с травой. Игрок слеп в бою.Icons block the crosshairs. Low contrast makes HP unreadable against bright biomes.

Professional HUD (Toza)Профессиональный HUDErgonomic Pro HUD

Ekran markazi toza! Jon va o'qlar 4 burchakda, to'q plitalar bilan himoyalangan. 0.1 soniyada tushuniladi!Центр свободен. Элементы разнесены по углам с темной обводкой. Читается мгновенно!Center stays clear. Vitals anchored to peripheral corners with dark contrast backing.

Ekran 4 Burchagi Taqsimoti4 Угла Экрана4 Screen Corners

Yuqori Chap: Status 💖Верх-Лево 💖Top-Left 💖 HP hayot chizig'i, daraja (XP), qalqon.Здоровье (HP), щит, аватарка.Player HP bar, shields, avatar portrait.

Yuqori O'ng: Karta 🗺️Верх-Право 🗺️Top-Right 🗺️ Minixarita radari, kvest yo'nalishi, tangalar.Радар, стрелка квеста, монеты.Radar minimap, objective compass, gold.

Quyi O'ng: Qurol ⚔️Низ-Право ⚔️Bottom-Right ⚔️ Qurol ikonkasi, o'qlar soni va sakrash tugmasi.Оружие, патроны, кнопка удара.Equipped weapon, ammo counter, attack trigger.

UI Ikonkalari AI Prompt FormulasiФормула UI-ПромптаUI Prompt Blueprint

1. MavzuGame UI pack

2. IkonkalarHP, coin, key

3. UslubFlat neon vector

4. FonSolid white

Kontrast va Shaffoflik StandartiСтандарт КонтрастаContrast Standard

80% Shaffoflik: Ekranning 80% maydoni o'yin olamini ko'rish uchun bo'sh turishi shart.80% площади экрана свободно для обзора мира.80% of screen viewport must remain clear for gameplay navigation.

Dinamik HP Rangi: 100% Jon = Yashil; 50% = Sariq; 20% dan past = Qizil yonib-o'chuvchi signal!100% HP = зеленый; 50% = желтый; <20% = мигающий красный.100% HP = Green; 50% = Amber; <20% = Pulsing urgent Red!

Vibecoding · 11-darsурок 11lesson 11 O'qituvchiУчительTeacher: Ismoiljon Usmonov 1

Monitor Ekran Maketi (Wireframe)Скетч Экрана (Wireframe)Screen Wireframe Template

[HP Bar] [■■■■□] 85/100

[MAP] 🧭 Quest: 120m | 🪙 450

[Hotbar: 1 2 3 4] 🎒

⚔️ Plazma Qilich | ⚡ 100%

Mening UI Ikonkalarim (AI Prompt)Промпт ИконокUI Icons AI Prompt

      "Game UI HUD sprite sheet of ___________________________________________________________

      flat vector cyberpunk style, glowing neon edges, isolated on solid plain white background"

Interfeys Ranglar MatritsasiЦветовая МатрицаColor Hierarchy Matrix

Element	Rang Kodi	O'yinchi Holati
Sog'lom (Full HP)	Zumrad Yashil (#00E676)	Xavf yo'q, kuchli
Yaralangan (Low HP)	Miltillovchi Qizil (#FF1744)	Ogohlantirish: qochish kerak!
Maxsus Qobiliyat (Ultimate)	Moviy Neon (#00E5FF)	Hujumga tayyor

3 Soniya Testi: NazoratТест 3 Секунды3-Second Readability Test

Sherigim 3 soniyada qancha jon borligini to'g'ri aytdi. Ekran markazi jang va harakat uchun bo'sh qoldirilgan. UI ikonkalari oq fonda toza qilib generatsiya qilindi.

Uy vazifasi · keyingi darsgaДомашнее задание · к следующему урокуHomework · for next lesson

1. Monitor Maketi: Varaqadagi ekran chizmasiga barcha 4 burchak vidjetlarini aniq chizing.

2. UI Sprayt To'plami: Oq fonda kamida 4 ta o'yin ikonkasini AI da generatsiya qiling va saqlang.

3. Ranglar Mantig'i: Jon va energiya holatlari bo'yicha ranglar jadvalini to'liq yozib keling.

Baholash · 10 ballОценка · 10 балловGrading · 10 points

4 burchak qoidasi bajarilgan, markaz toza3

4 ta toza UI ikonkasi oq fonda yaratilgan4

Ranglar ogohlantirishi to'g'ri belgilangan3

Keyingi dars: Game Jam: Mini-O'yin Prototipi TaqdimotiСледующий урок: Game Jam: Презентация ПрототипаNext lesson: Game Jam: Mini-Game Prototype Pitch Noutbukni har darsga olib kelingНоутбук на каждый урокBring your laptop every lesson 2