Claude, Cursor എന്നിവയ്ക്കും അതിലേറെയും വേണ്ടി തയ്യാറാക്കിയ നൂറുകണക്കിന് നൈപുണ്യങ്ങൾ ബ്രൗസ് ചെയ്യുക.
ഗെയിം UI ഇൻഡി ഡെവലപ്മെന്റിലെ ഏറ്റവും കഠിനമായ ഭാഗമാണ് (അതിനെക്കുറിച്ച് ആരും സംസാരിക്കുന്നില്ല)
മിക്ക ഇൻഡി ഡെവലപ്പർമാരും രണ്ടാഴ്ചയ്ക്കുള്ളിൽ പ്രവർത്തിക്കുന്ന ഒരു ഗെയിം പ്രോട്ടോടൈപ്പ് പുറത്തിറക്കുന്നു. തുടർന്ന് അവർ അടുത്ത മൂന്ന് മാസങ്ങൾ UI-ൽ കുടുങ്ങിക്കിടക്കുന്നു. പ്രോഗ്രാമർ ആർട്ട് പോലെ തോന്നുന്ന ബട്ടണുകൾ. ക്യാമറയുമായി പോരാടുന്ന HUD ഓവർലേകൾ. position: absolute ഉപയോഗിച്ച് നിർമ്മിച്ച ഇൻവെൻ്ററി ഗ്രിഡുകളും പ്രാർത്ഥനകളും. Vibe Skills ലെ ഗെയിം UI-க்கான AI കഴിവുകൾ ഒരുമിച്ച് മെനു സിസ്റ്റങ്ങൾ, HUD-കൾ, ബ്രൗസർ ഗെയിമുകൾക്കായുള്ള ഓവർലേകൾ എന്നിവ ഒരൊറ്റ സിറ്റിംഗിൽ സൃഷ്ടിക്കുന്നു - അതിനാൽ നിങ്ങൾക്ക് ഗെയിം പുറത്തിറക്കാൻ കഴിയും, അല്ലാതെ സജ്ജീകരണ സ്ക്രീൻ അല്ല.
റിടെൻഷനെ UI എങ്ങനെ തീരുമാനിക്കുന്നു, ഓരോ ഗെയിമിനും ആവശ്യമുള്ള ആറ് UI പ്രതലങ്ങൾ, Vibe Skills-ൽ ലഭ്യമായ AI ഗെയിം UI കഴിവുകൾ, പൂർണ്ണമായ UI കിറ്റ് പുറത്തിറക്കുന്നതിനുള്ള വാരാന്ത്യ വർക്ക്ഫ്ലോ എന്നിവ ഈ ഗൈഡ് വിശദീകരിക്കുന്നു.
Claude, Cursor എന്നിവയ്ക്കും അതിലേറെയും വേണ്ടി തയ്യാറാക്കിയ നൂറുകണക്കിന് നൈപുണ്യങ്ങൾ ബ്രൗസ് ചെയ്യുക.
ഗെയിം UI റിടെൻഷൻ എങ്ങനെ തീരുമാനിക്കുന്നു
ആദ്യത്തെ 90 സെക്കൻഡിനുള്ളിൽ കളിക്കാർ നിങ്ങളുടെ ഗെയിം വിലയിരുത്തുന്നു, അതിലെ മിക്ക സെക്കൻഡുകളും UI-ൽ ചെലവഴിക്കുന്നു. പ്രധാന മെനു, ക്രമീകരണങ്ങൾ, നിയന്ത്രണ സൂചനകൾ, ഗെയിം ആരംഭിക്കുമ്പോൾ അവർ കാണുന്ന ആദ്യത്തെ HUD. UI വികൃതമായി തോന്നുകയാണെങ്കിൽ, ഗെയിംപ്ലേക്ക് അവസരം ലഭിക്കില്ല.
ഓർമ്മിക്കേണ്ട ചില സംഖ്യകൾ:
- 38% കളിക്കാർ ഒരു ബ്രൗസർ ഗെയിം ആദ്യ സെഷനിൽ ഉപേക്ഷിക്കുന്നു, പ്രധാന മെനു കേടായതോ സ്റ്റൈൽ ഇല്ലാത്തതോ ആണെങ്കിൽ (itch.io playtest data, 2025).
- Hollow Knight-ൻ്റെ പ്രധാന മെനു 4 ബട്ടണുകളാണ്, കൈകൊണ്ട് വരച്ചതാണ്, 60fps-ൽ പ്രവർത്തിക്കുന്നു - ആദ്യത്തെ 30 മിനിറ്റ് കളിക്കാർ തുടരുന്നതിനുള്ള ഏറ്റവും പ്രധാന കാരണങ്ങളിലൊന്നാണിത്.
- Celeste-ൻ്റെ പോസ് സ്ക്രീൻ 3 ടൈപ്പ് വലുപ്പങ്ങളും 2 നിറങ്ങളും ഉപയോഗിക്കുന്നു. അതാണ് seluruh UI സിസ്റ്റം. നിയന്ത്രണം ഗുണമേന്മയായി കാണാം.
- വലിയ ബഡ്ജറ്റ് ഗെയിമുകൾ അവരുടെ ഉത്പാദന ബഡ്ജറ്റിൻ്റെ 15-20% UI/UX-ൽ ചെലവഴിക്കുന്നു. ഇൻഡി ഡെവലപ്പർമാർ സാധാരണയായി 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 ഗെയിംസ് വിഭാഗം പൂർണ്ണമായും പ്രവർത്തിക്കുന്ന ഗെയിമുകളും അവയ്ക്ക് ചുറ്റുമുള്ള 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 ഗെയിംസ് കഴിവുകൾ ബ്രൗസ് ചെയ്യുക →
ഒരു വാരാന്ത്യത്തിൽ ഒരു പൂർണ്ണ ഗെയിം UI കിറ്റ് നിർമ്മിക്കുക
Itch.io, Newgrounds എന്നിവയിൽ ബ്രൗസർ ഗെയിമുകൾ പുറത്തിറക്കുന്ന ഇൻഡി ഡെവലപ്പർമാർ ഉപയോഗിക്കുന്ന യഥാർത്ഥ വർക്ക്ഫ്ലോ ഇതാ. മൊത്തം സമയം: ഒരു വാരാന്ത്യത്തിൽ ഏകദേശം 12 പ്രവർത്തി മണിക്കൂർ.
ഘട്ടം 1: Vibe Skills-ൽ ഒരു UI കഴിവ് തിരഞ്ഞെടുക്കുക
3D ഗെയിംസ് വിഭാഗം തുറന്ന് ബ്രൗസർ ഗെയിം 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 ഓവർലേ നിർമ്മിക്കാൻ വേഗത്തിലുള്ളതാണ്, ആക്സസ് ചെയ്യാൻ എളുപ്പമുള്ളതാണ്, കൂടാതെ ഏത് റെസല്യൂഷനിലും ടെക്സ്റ്റ് വ്യക്തമായി റെൻഡർ ചെയ്യുകയും ചെയ്യുന്നു. പിക്സൽ-പെർഫെക്റ്റ് ആർട്ട് സ്ഥിരത (ഒരു കർശനമായ പിക്സൽ-ആർട്ട് ഗെയിം) ആവശ്യമുണ്ടെങ്കിൽ അല്ലെങ്കിൽ DOM ഇവന്റുകൾ ഇൻപുട്ടിനെ തടസ്സപ്പെടുത്തുകയാണെങ്കിൽ മാത്രം കാനിനെ അടിസ്ഥാനമാക്കിയുള്ള UI ഉപയോഗിക്കുക. Vibe Skills ലെ കഴിവുകൾ രണ്ട് വേരിയൻ്റുകളും നൽകുന്നു.
UI മൊബൈലിൽ പ്രവർത്തിക്കുമോ, അതോ എനിക്ക് ഒരു പ്രത്യേക മൊബൈൽ ബിൽഡ് ആവശ്യമുണ്ടോ?
Vibe Skills-ലെ ബ്രൗസർ ഗെയിം UI കിറ്റ് റെസ്പോൺസീവ് ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നു, അവ ടച്ച് ഉപകരണങ്ങളിൽ ഉടനടി പ്രവർത്തിക്കുന്നു - വലിയ ടാപ്പ് ടാർഗെറ്റുകൾ, സ്വാപ്പ്-ഇൻ മൊബൈൽ കൺട്രോൾ ഓവർലേകൾ (ഡി-പാഡ്, ആക്ഷൻ ബട്ടണുകൾ), കൂടാതെ മൊബൈൽ-ഫസ്റ്റ് പോസ് മെനു. നിങ്ങൾക്ക് ഒരു പ്രത്യേക ബിൽഡ് ആവശ്യമില്ല, എന്നാൽ യഥാർത്ഥ ഫോണിൽ ടെസ്റ്റ് ചെയ്യേണ്ടതുണ്ട്. ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ ടച്ച് പ്രകടനത്തെക്കുറിച്ച് നുണ പറയുന്നു.
ഗെയിം UI എത്രത്തോളം യാഥാർത്ഥ്യബോധത്തോടെ ആക്സസ് ചെയ്യാൻ കഴിയുന്നതാണ്?
ബ്രൗസർ ഗെയിമുകൾക്ക് മെനുകൾ, ക്രമീകരണങ്ങൾ, HUD-കൾക്കായി WCAG AA എളുപ്പത്തിൽ നേടാനാകും - കീബോർഡ് നാവിഗേഷൻ, ഫോക്കസ് റിംഗുകൾ, കളർ കോൺട്രാസ്റ്റ് 4.5:1, സ്കോർ, ഹെൽത്ത് എന്നിവയിൽ സ്ക്രീൻ-റീഡർ ലേബലുകൾ. HTML ഓവർലേ സമീപനം ഇവയെല്ലാം സൗജന്യമായി നൽകുന്നു. Vibe Skills-ലെ കഴിവുകൾ ഡിഫോൾട്ടായി ആക്സസ് ചെയ്യാൻ കഴിയുന്ന മാർക്ക്അപ്പ് സൃഷ്ടിക്കുന്നു. യഥാർത്ഥ ഗെയിംപ്ലേ ആക്സസ് ചെയ്യാൻ കഴിയുന്നത് കൂടുതൽ പ്രയാസമാണ്, എന്നാൽ UI തടസ്സമാകരുത്.
Unity WebGL, Godot HTML5 ബിൽഡുകൾക്ക് ഒരേ UI കിറ്റ് പ്രവർത്തിക്കുമോ?
ഏതാണ്ട് അതേ. Unity WebGL, Godot HTML5 എന്നിവ രണ്ടും ഒരു കാനിസിലേക്ക് റെൻഡർ ചെയ്യുകയും നിങ്ങൾക്ക് മുകളിൽ ഒരു DOM ഓവർലേ അടുക്കാനാകുകയും ചെയ്യും. കഴിവുകളിൽ രണ്ട് എഞ്ചിനുകൾക്കുമുള്ള അഡാപ്റ്ററുകൾ ഉൾപ്പെടുന്നു, അതിനാൽ UI നിങ്ങളുടെ ഗെയിമിൻ്റെ സ്റ്റേറ്റുമായി സംസാരിക്കുന്നു. Unity-നിർദ്ദിഷ്ട സവിശേഷതകൾക്ക് (ബിൽറ്റ്-ഇൻ ഇവൻ്റ് സിസ്റ്റം പോലെ) ഒരു നേർത്ത ബ്രിഡ്ജ് ആവശ്യമാണ് - കഴിവ് അതിന് സാമ്പിൾ കോഡ് നൽകുന്നു.
മെനു, HUD, ഇൻവെൻ്ററി എന്നിവ എങ്ങനെ ദൃശ്യപരമായി സ്ഥിരമായി നിലനിർത്താം?
ഇൻഡി ഗെയിം UI അമേച്വർ ആയി കാണുന്നതിനുള്ള ഒന്നാം നമ്പർ കാരണം ഇതാണ് - ഒറ്റയ്ക്ക് രൂപകൽപ്പന ചെയ്ത 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, ഇൻവെൻ്ററി, ക്രമീകരണങ്ങൾ, പോസ്, അവസാന സ്ക്രീൻ എന്നിവ ഒരൊറ്റ സിറ്റിംഗിൽ പുറത്തിറക്കുക.