Claude, Cursor మరియు మరిన్నింటి కోసం వందలాది రెడీమేడ్ నైపుణ్యాలను బ్రౌజ్ చేయండి.
गेम यूआई इंडी डेव्हलपमेंटचा सर्वात कठीण भाग आहे (आणि कोणीही याबद्दल बोलत नाही)
बहुतेक इंडी डेव्हलपर दोन आठवड्यांत गेम प्रोटोटाइप तयार करतात. त्यानंतर ते UI वर पुढील तीन महिने अडकून राहतात. प्रोग्रामर कलाकृतीसारखे दिसणारे बटणे. कॅमेराशी लढणारे HUD ओव्हरले. position: absolute आणि प्रार्थनेने तयार केलेले इन्व्हेंटरी ग्रिड. Vibe Skills वरील गेम UI साठी AI स्किल्स एकाच वेळी ब्राउझर गेम्ससाठी सुसंगत मेनू सिस्टम, HUDs आणि ओव्हरले तयार करतात - जेणेकरून तुम्ही गेम शिप करू शकता, सेटिंग्ज स्क्रीन नाही.
ही मार्गदर्शिका UI गेमर्सना का टिकवून ठेवते, प्रत्येक गेमसाठी आवश्यक असलेल्या सहा UI पृष्ठभाग, Vibe Skills वर उपलब्ध असलेल्या AI गेम UI स्किल्स आणि संपूर्ण UI किट शिप करण्यासाठी वीकेंड वर्कफ्लो याबद्दल माहिती देईल.
Claude, Cursor మరియు మరిన్నింటి కోసం వందలాది రెడీమేడ్ నైపుణ్యాలను బ్రౌజ్ చేయండి.
गेम UI गेमर्सना का टिकवून ठेवते
खेळाडू तुमच्या गेमला पहिल्या 90 सेकंदात जज करतात, आणि त्यातील बहुतेक सेकंद UI मध्ये घालवतात. मुख्य मेनू, सेटिंग्ज, नियंत्रणाचे संकेत, गेम सुरू झाल्यावर दिसणारे पहिले HUD. जर UI विचित्र वाटले, तर गेमप्लेला कधीही संधी मिळत नाही.
लक्षात ठेवण्यासारखे काही आकडे:
- 38% खेळाडू मुख्य मेनू खराब किंवा अनस्टाईल वाटल्यास पहिल्याच सत्रात ब्राउझर गेम सोडतात (itch.io प्लेटेस्ट डेटा, 2025).
- हॉलो नाइटचा मुख्य मेनू 4 बटणे, हाताने काढलेला आहे आणि 60fps वर चालतो - आणि खेळाडू क्रूर पहिल्या 30 मिनिटांपर्यंत टिकून राहण्याचे हे सर्वात जास्त उद्धृत केलेल्या कारणांपैकी एक आहे.
- सेलेस्टचा पॉज स्क्रीन 3 फॉन्ट आकार आणि 2 रंगांचा वापर करते. ती संपूर्ण UI प्रणाली आहे. संयम गुणवत्ता दर्शवतो.
- मोठे बजेट असलेले गेम UI/UX वर त्यांच्या संपूर्ण उत्पादन बजेटचा 15-20% खर्च करतात. इंडी डेव्हलपर सामान्यतः 0% खर्च करतात.
AI स्किल्स याच तफावत दूर करण्यासाठी तयार केल्या आहेत.
Claude, Cursor మరియు మరిన్నింటి కోసం వందలాది రెడీమేడ్ నైపుణ్యాలను బ్రౌజ్ చేయండి.
प्रत्येक गेमसाठी आवश्यक असलेले सहा UI पृष्ठभाग
काहीही तयार करण्यापूर्वी, तुम्ही काय तयार करत आहात हे जाणून घ्या. प्रत्येक ब्राउझर गेम - 2D प्लॅटफॉर्मर, 3D शूटर, आयडल क्लिकर, वॉकिंग सिम - साठी समान सहा UI पृष्ठभाग आवश्यक आहेत. एक चांगली AI स्किल या सर्वांना एका सुसंगत शैली प्रणालीमध्ये तयार करते.
| पृष्ठभाग | उद्देश | सामान्य चुका | "चांगले" काय दिसते |
|---|---|---|---|
| मुख्य मेनू | पहिली छाप. कला दिग्दर्शन सेट करते. | डीफॉल्ट ब्राउझर फॉन्ट, मध्यभागी असलेला मजकूर, होव्हर स्थिती नाही | जास्तीत जास्त 3-5 बटणे, कस्टम टायपोग्राफी, होव्हर मायक्रो-ॲनिमेशन, पार्श्वभूमी लूप |
| HUD ओव्हरले | गेममधील माहिती: आरोग्य, स्कोअर, दारूगोळा, टाइमर | यादृच्छिक कोपऱ्यांमध्ये तरंगणारे आकडे, गटबद्धता नाही, कॅमेराशी संघर्ष | कोपऱ्यांमध्ये स्थिर, अर्ध-पारदर्शक, डेटा प्रकारानुसार गटबद्ध, निष्क्रिय असताना फिकट होणारे |
| इन्व्हेंटरी / लोडआउट | वस्तू व्यवस्थापन स्क्रीन | 16-स्तंभांची ग्रिड, वस्तूंची दुर्मिळता नाही, स्क्रीन ब्लॉक करणारे टूलटिप्स | 4-8 स्तंभांची ग्रिड, रंगाने सूचित केलेली दुर्मिळता, बाजूला टूलटिप, ड्रॅग-अँड-ड्रॉप किंवा क्लिक |
| सेटिंग्ज / पर्याय | ऑडिओ, नियंत्रणे, ग्राफिक्स | टॉगलची एक मोठी स्क्रोल करण्यायोग्य यादी | टॅब (ऑडिओ / व्हिडिओ / नियंत्रणे), टॉगलऐवजी स्लाइडर, "लागू करा" + "डीफॉल्टवर रीसेट करा" |
| पॉज मेनू | गेममधील व्यत्यय | संपूर्ण गेम लपवणारा मोडेल | 60% अपारदर्शकतेसह ओव्हरले, 4-5 पर्याय, कीबोर्डसाठी "पुन्हा सुरू करा" स्वयंचलितपणे केंद्रित |
| अंतिम स्क्रीन | जिंकणे, हरणे, किंवा रन सारांश | लाल एरियलमध्ये "गेम ओव्हर", रीप्ले बटण नाही | आकडेवारी सारांश, मोठे "पुन्हा खेळा" CTA, दुय्यम "मुख्य मेनू" |
6 पॉलिश UI पृष्ठभाग असलेला गेम पूर्ण वाटतो. 6 अनस्टाईल UI पृष्ठभाग असलेला गेम स्कूल प्रोजेक्टसारखा वाटतो, गेमप्ले कितीही चांगला असला तरी.
सर्वात कठीण भाग म्हणजे सर्व 6 सुसंगत ठेवणे - समान फॉन्ट फॅमिली, समान बटण त्रिज्या, समान होव्हर वर्तन, समान रंग पॅलेट. AI स्किल्स इथेच उपयुक्त ठरतात.
Vibe Skills वर 5 AI गेम UI स्किल्स
Vibe Skills वरील 3D Games श्रेणी मध्ये संपूर्ण खेळण्यायोग्य गेम आणि त्यांच्याभोवती शिप होणाऱ्या UI सिस्टम्स समाविष्ट असलेल्या 30+ स्किल्स आहेत. येथे सर्वाधिक स्थापित UI-केंद्रित स्किल्स पाच आहेत.
| स्किल | सर्वोत्तम | इंजिन | आउटपुट |
|---|---|---|---|
| ब्राउझर गेम UI किट जनरेटर | एका सुसंगत शैलीत संपूर्ण 6-पृष्ठभाग UI | Three.js, Phaser, vanilla JS | HTML/CSS ओव्हरले प्रणाली + स्प्राइट शीट्स |
| HUD ओव्हरले सिस्टम | गेममधील HUD (आरोग्य, स्कोअर, मिनिमॅप, टाइमर) | Three.js, Phaser, Unity WebGL, Godot HTML5 | CSS-पोझिशन्ड ओव्हरले किंवा कॅनव्हास स्प्राइट्स |
| पॉज + सेटिंग्ज स्क्रीन पॅक | पॉज, सेटिंग्ज, नियंत्रणे रीमॅप | कोणतेही वेब-आधारित गेम इंजिन | React/HTML मोडेल कंपोनंट्स |
| इन्व्हेंटरी + लूट टूलटिप सिस्टम | वस्तू ग्रिड, ड्रॅग-अँड-ड्रॉप, दुर्मिळता रंग, टूलटिप्स | Three.js, Phaser, Unity WebGL | कंपोनंट लायब्ररी + आयटम कार्ड टेम्पलेट्स |
| मुख्य मेनू + अंतिम स्क्रीन कॉम्बो | पहिली आणि शेवटची छाप | कोणतेही | Lottie सह ॲनिमेटेड मेनू + गेम-एंड आकडेवारी स्क्रीन |
सर्व 5 स्किल्स सामायिक डिझाइन टोकन फाइल (रंग, फॉन्ट, स्पेसिंग, ईझिंग) सह येतात जेणेकरून पृष्ठभाग एकाच डिझायनरने तयार केले आहेत असे वाटेल. बहुतेक इंडी UI किट्स ही चाचणी अयशस्वी ठरतात - मेनू एक फॉन्ट वापरतो, HUD दुसरा वापरतो, आणि खेळाडू लगेच लक्षात घेतात.
Vibe Skills वर 3D Games स्किल्स ब्राउझ करा →
वीकेंडमध्ये संपूर्ण गेम UI किट तयार करा
itch.io आणि Newgrounds वर ब्राउझर गेम शिप करणाऱ्या इंडी डेव्हलपरनी वापरलेली ही वास्तविक वर्कफ्लो आहे. एकूण वेळ: वीकेंडवर ~12 कार्यरत तास.
पायरी 1: Vibe Skills वर UI स्किल निवडा
3D Games श्रेणी उघडा आणि ब्राउझर गेम UI किट जनरेटर स्किल स्थापित करा. ही एकमेव स्किल आहे जी एका सुसंगत टोकन सिस्टममध्ये सर्व 6 पृष्ठभाग शिप करते. जर तुमच्या गेममध्ये आधीपासूनच कार्य करणारे मेनू असतील आणि तुम्हाला फक्त HUD ची गरज असेल, तर त्याऐवजी स्टँडअलोन HUD ओव्हरले स्किल स्थापित करा.
पायरी 2: तुमच्या गेमचा "व्हायब" 3 शब्दांत परिभाषित करा
जनरेट करण्यापूर्वी, तुमच्या गेमचा टोन वर्णन करणारे 3 शब्द लिहा. उदाहरणे: "निऑन, क्रूर, वेगवान" (एक सिंथवेव्ह शूटर), "नरम, पाण्यासारखे, धीमे" (एक फिशिंग गेम), "जाड, रेट्रो, पिक्सेल" (एक मेट्रॉइडव्हानिया). स्किल रंग पॅलेट, टायपोग्राफी निवड आणि ॲनिमेशन ईझिंगसाठी इनपुट म्हणून यांचा वापर करते. हे वगळू नका - सामान्य इनपुटमुळे सामान्य UI तयार होतो.
पायरी 3: प्रथम डिझाइन टोकन जनरेट करा
स्किल तुमच्या पॅलेट, फॉन्ट स्टॅक, बटण त्रिज्या, स्पेसिंग स्केल आणि ॲनिमेशन वेळेसह tokens.css फाइल किंवा टेलविंड कॉन्फिगरेशन आउटपुट करते. कोणतेही वास्तविक UI जनरेट करण्यापूर्वी याचे पुनरावलोकन करा. जर टोकन येथे चुकीचे वाटले, तर प्रत्येक पृष्ठभाग चुकीचा वाटेल. तुम्हाला ते आवडेल तोपर्यंत समायोजित करा.
पायरी 4: सर्व 6 पृष्ठभाग एकाच बॅचमध्ये जनरेट करा
मंजूर टोकनसह, संपूर्ण 6-पृष्ठभाग जनरेशन चालवा. आउटपुट HTML/CSS फाइल्सचे फोल्डर (किंवा तुमच्या इंजिनवर अवलंबून React कंपोनंट्स) आणि आयकॉनसाठी SVG स्प्राइट शीट आहे. Three.js किंवा Phaser साठी, HTML ओव्हरले दृष्टिकोन वापरा (कॅनव्हासच्या वर DOM स्टॅक केलेला pointer-events: none सह). Unity WebGL किंवा Godot HTML5 साठी, स्किलने शिप केलेले कॅनव्हास-आधारित व्हेरिएंट वापरा.
पायरी 5: तुमच्या गेम लूपमध्ये ते वायर करा
HUD ला तुमच्या गेम स्टेटशी (आरोग्य मूल्य, स्कोअर, टाइमर) कनेक्ट करा. बहुतेक स्किल्समध्ये एक छोटा GameUIState अडॅप्टर असतो जो setHealth(0.7) API उघड करतो जेणेकरून तुम्हाला CSS व्हेरिएबल्स मॅन्युअली स्पर्श करण्याची गरज नाही. पॉज, सेटिंग्ज आणि अंतिम-स्क्रीन इव्हेंट्सना तुमच्या विद्यमान इनपुट हँडलरशी जोडा.
पायरी 6: 3 अनोळखी लोकांसह प्लेटेस्ट करा आणि सुधारणा करा
मित्र तुम्हाला सांगतील की UI उत्तम आहे. अनोळखी लोक तुम्हाला सत्य सांगतील. itch.io वर एक बिल्ड पोस्ट करा, 3 यादृच्छिक लोकांना 5 मिनिटे खेळायला सांगा आणि रेकॉर्डिंग पहा. महत्त्वाचे UI बग पहिल्या 60 सेकंदात दिसून येतील. ते फिक्स करा, प्रभावित पृष्ठभाग पुन्हा जनरेट करा, शिप करा.
एकूण वेळ: पायरी 1-3 (~1 तास) + पायरी 4 (~30 मिनिटे) + पायरी 5 (~6-8 तास इंटिग्रेशन) + पायरी 6 (~3 तास प्लेटेस्ट सायकल) = एक वीकेंड.
एक फ्रीलान्स UI डिझायनर $3,000-$8,000 आकारेल आणि 4-6 आठवडे घेईल. Vibe Skills वरील सबस्क्रिप्शन $39/महिन्यापासून सुरू होते आणि तुम्हाला अमर्यादित जनरेशन देते - जेणेकरून तुम्ही UI योग्य वाटेल तोपर्यंत कितीही वेळा पुनरावृत्ती करू शकता.
Vibe Skills वर गेम UI स्किल स्थापित करा →
वारंवार विचारले जाणारे प्रश्न
माझा गेम UI HTML/CSS ओव्हरले म्हणून तयार करावा की थेट कॅनव्हासवर?
बहुतेक ब्राउझर गेम्ससाठी, Three.js किंवा Phaser कॅनव्हासच्या वर HTML/CSS ओव्हरले तयार करणे जलद, प्रवेशयोग्य बनवणे सोपे आणि कोणत्याही रिझोल्यूशनवर स्पष्टपणे टेक्स्ट प्रस्तुत करते. फक्त तेव्हाच कॅनव्हास-आधारित UI वापरा जेव्हा तुम्हाला पिक्सेल-परफेक्ट आर्ट सातत्य (एक कठोर पिक्सेल-आर्ट गेम) आवश्यक असेल किंवा जेव्हा DOM इव्हेंट्स इनपुटमध्ये अडथळा आणतात. Vibe Skills वरील स्किल्स दोन्ही व्हेरिएंट शिप करतात.
UI मोबाइलवर काम करेल, की मला वेगळे मोबाइल बिल्ड हवे आहे?
Vibe Skills वरील ब्राउझर गेम UI किट रिस्पॉन्सिव्ह लेआउट्स जनरेट करते जे टच डिव्हाइसेसवर आपोआप काम करतात - मोठे टॅप टार्गेट, स्वॅप-इन मोबाइल कंट्रोल ओव्हरले (डी-पॅड आणि ॲक्शन बटणे), आणि मोबाइल-फर्स्ट पॉज मेनू. तुम्हाला वेगळे बिल्ड हवे नाही, पण तुम्हाला वास्तविक फोनवर चाचणी करणे आवश्यक आहे. ब्राउझर डेव्हलपर टूल्स टच परफॉर्मन्सबद्दल खोटे बोलतात.
गेम UI किती प्रवेशयोग्य असू शकते?
ब्राउझर गेम्स मेनू, सेटिंग्ज आणि HUDs साठी WCAG AA सहजपणे गाठू शकतात - कीबोर्ड नेव्हिगेशन, फोकस रिंग्ज, 4.5:1 रंग कॉन्ट्रास्ट, आणि स्कोअर आणि आरोग्यावर स्क्रीन-रीडर लेबल्स. HTML ओव्हरले दृष्टिकोन हे सर्व जवळजवळ मोफत बनवते. Vibe Skills वरील स्किल्स डीफॉल्टनुसार प्रवेशयोग्य मार्कअप जनरेट करतात. प्रत्यक्ष गेमप्लेला प्रवेशयोग्य बनवणे कठीण आहे, पण UI अडथळा नसावा.
Unity WebGL आणि Godot HTML5 बिल्डसाठी समान UI किट काम करते का?
बहुतेकदा हो. Unity WebGL आणि Godot HTML5 दोन्ही कॅनव्हासवर प्रस्तुत करतात, आणि तुम्ही त्यावर DOM ओव्हरले स्टॅक करू शकता. स्किल्समध्ये दोन्ही इंजिनसाठी अडॅप्टर्स समाविष्ट आहेत जेणेकरून UI तुमच्या गेमच्या स्टेटशी बोलतो. Unity-विशिष्ट वैशिष्ट्ये (जसे की अंगभूत इव्हेंट सिस्टम) ला एका पातळ ब्रिजची आवश्यकता असते - स्किल त्या ब्रिजसाठी नमुना कोड शिप करते.
मेनू, HUD आणि इन्व्हेंटरी व्हिज्युअलरित्या सुसंगत कसे ठेवायचे?
इंडी गेम UI अव्यवसायिक दिसण्याचे हे #1 कारण आहे - 6 पृष्ठभाग जे वेगळे डिझाइन केलेले आहेत. उपाय म्हणजे सामायिक डिझाइन टोकन: एक फाइल जी रंग, फॉन्ट, स्पेसिंग आणि ईझिंग परिभाषित करते. प्रत्येक पृष्ठभाग त्या फाइलमधून आयात करतो. Vibe Skills वरील स्किल्स हे आपोआप करतात - टोकन एकदा जनरेट करा, त्या टोकनमधून सर्व 6 पृष्ठभाग जनरेट करा, पूर्ण.
स्किल न तोडता जनरेट केलेले UI कस्टमाइझ करू शकतो का?
हो. स्किल्स संपादन करण्यायोग्य HTML, CSS, आणि (पर्यायाने) React कंपोनंट्स आउटपुट करतात. फाइल्स तुमच्या मालकीच्या आहेत. बहुतेक डेव्हलपर रंग बदलतात, लोगो बदलतात, आयकॉन बदलतात आणि एक किंवा दोन बटणांचे आकार बदलतात - एवढेच. जर तुम्हाला मोठ्या शैलीतील बदलाची गरज असेल, तर पृष्ठभाग स्वतः हाताने पुन्हा लिहिण्याऐवजी अद्ययावत टोकनमधून पुन्हा जनरेट करा.
जर माझ्या गेममध्ये आधीपासूनच अर्धवट तयार केलेले UI असेल तर मी ते फेकून द्यावे का?
नाही. HUD ओव्हरले स्किल किंवा पॉज + सेटिंग्ज पॅक स्टँडअलोन स्थापित करा आणि एकावेळी एक पृष्ठभाग बदला. बहुतेक इंडी डेव्हलपर प्रथम मुख्य मेनू (सर्वाधिक दृश्यमानता), नंतर HUD (सर्वाधिक वापरलेले), त्यानंतर सेटिंग्ज आणि पॉज (सर्वात कमी वापरलेले पण सर्वात खराब) अपग्रेड करतात. पहिल्या पृष्ठभागाच्या शिपमेंटनंतर तुम्हाला गुणवत्तेतील वाढ जाणवेल.
UI शिप करा, मग गेम शिप करा
गेम UI इंडी प्रोजेक्ट्सचा गुप्त मारेकरी आहे. गेमप्ले उत्कृष्ट असू शकतो, पण जर मेनू डीफॉल्ट वर्डप्रेस थीमसारखा दिसला, तर खेळाडू 90 सेकंदात निघून जातील. पॉलिश UI - सुसंगत टोकन, अँकर केलेला HUD, स्वच्छ सेटिंग्ज, समाधानकारक अंतिम स्क्रीन - हे 4-तासांचे itch.io डाउनलोड खरे उत्पादन बनवते.
4-आठवड्यांच्या UI रीडिझाइनला वगळा. वीकेंडमध्ये संपूर्ण 6-पृष्ठभाग किट जनरेट करा, ते वायर करा, आणि गेम मजेदार बनवण्यासाठी परत कामाला लागा.
Vibe Skills वर गेम UI स्किल्स ब्राउझ करा →
गेम UI स्क्रॅचमधून बनवणे थांबवा. Vibe Skills वर UI किट स्किल स्थापित करा आणि एकाच वेळी मेनू, HUD, इन्व्हेंटरी, सेटिंग्ज, पॉज आणि अंतिम स्क्रीन शिप करा.