இந்த வார இறுதியில் Vercel-இல் 3D விளையாட்டை அனுப்புவது எப்படி (AI திறன்களுடன்)

Vibe Skills

Claude, Cursor மற்றும் பலவற்றிற்கான நூற்றுக்கணக்கான தயார்நிலை திறனறிகளை உலாவவும்.

திறனறிகளை ஆராயுங்கள்

இப்போது இலவசமாகத் தொடங்குங்கள்

வெர்செலில் ஒரு 3D கேமை ஞாயிற்றுக்கிழமை இரவு வரை அனுப்புதல்: 48 மணிநேர வரிசைப்படுத்துதல் கையேடு

வெள்ளிக்கிழமை மாலை வெற்று நிலையில் இருந்து ஞாயிற்றுக்கிழமை இரவு உணவிற்குள் your-game.vercel.app என்ற இணைப்புக்குச் செல்லலாம். பயன்படுத்தப்படும் ஸ்டாக்: Three.js, Cursor, Vibe Skills இலிருந்து ஒரு AI திறன், மற்றும் Vercel இன் இலவச அடுக்கு. வார இறுதி நாட்களுக்கான மொத்த செலவு: $0. நீங்கள் கண்காணிக்க வேண்டிய உள்கட்டமைப்பு: பூஜ்யம்.

இது "உங்கள் லேப்டாப்பில் ஒரு முன்மாதிரியை உருவாக்கி முடிந்தது என்று சொல்வது" அல்ல. இது இணையத்தில் யார் வேண்டுமானாலும் உலாவியில் திறக்கக்கூடிய ஒரு பொது URL, HTTPS, எட்ஜ் கேச்சிங், மற்றும் உங்களுக்கு ஒரு தனிப்பயன் டொமைன் வேண்டுமென்றால் அதையும் கொண்டுள்ளது. AI திறன் Three.js ஸ்கேஃபோல்டிங் மற்றும் செயல்படும் vercel.json ஐ வழங்குகிறது. Cursor மறுசெயல் சுழற்சியைக் கையாள்கிறது. Vercel வரிசைப்படுத்துதலைக் கையாள்கிறது. நீங்கள் வடிவமைப்பைக் கையாளுகிறீர்கள்.

இந்த வழிகாட்டி சுயாதீன டெவலப்பர்கள், வைப் கோடர்கள், ஹேக்கத்தான் பங்கேற்பாளர்கள், மற்றும் localhost:5173 இல் பாதியிலேயே நிறுத்தப்பட்ட டேப்களால் சோர்வடைந்த எவருக்கும். இந்த ஸ்டாக் ஏன் வேலை செய்கிறது, 48 மணிநேர வரிசைப்படுத்துதலின் கட்டமைப்பு, ஐந்து 3D கேம் திறன்கள், மற்றும் வெள்ளிக்கிழமை முதல் ஞாயிற்றுக்கிழமை வரை படிநிலையாக விளக்குகிறோம்.

Vibe Skills

Claude, Cursor மற்றும் பலவற்றிற்கான நூற்றுக்கணக்கான தயார்நிலை திறனறிகளை உலாவவும்.

திறனறிகளை ஆராயுங்கள்

இப்போது இலவசமாகத் தொடங்குங்கள்

ஏன் Vercel + Three.js + AI திறன்கள் தனி டெவலப்பர் ஸ்டாக்?

Vercel என்பது Three.js கேமுக்கான மிக எளிதான வரிசைப்படுத்தும் இலக்காகும். GitHub இல் புஷ் செய்யவும், Vercel அதை கவனித்து, ப்ராஜெக்டை உருவாக்கி, 60 வினாடிகளுக்குள் உங்களுக்கு ஒரு URL ஐ வழங்கும். வழங்க சர்வர் தேவையில்லை, Docker கோப்பு தேவையில்லை, NGINX கட்டமைப்பு தேவையில்லை, SSL அமைப்பு தேவையில்லை. Three.js பண்டில் நிலையான HTML, JS, மற்றும் WebGL சொத்துக்கள் மட்டுமே, இது Vercel இன் எட்ஜ் நெட்வொர்க் சேவை செய்ய கட்டப்பட்டதற்கான சரியான தொகுப்பு.

இலவச அடுக்கு ஒரு வார இறுதி வெளியீட்டிற்கு போதுமானதாக உள்ளது:

• மாதத்திற்கு 100 GB அலைவரிசை. 10,000 பிளேக்களுக்கு 5 MB Three.js பண்டில் 50 GB ஆகும். அலைவரிசை முடிவதற்குள் வார இறுதி முடிந்துவிடும்.
• HTTPS மற்றும் *.vercel.app துணை டொமைனுடன் வரம்பற்ற நிலையான வரிசைப்படுத்துதல்கள்.
• இலவச அடுக்கில் தனிப்பயன் டொமைன் ஆதரவு - உங்களிடம் இருந்தால் உங்கள் சொந்த name-game.com ஐ கொண்டு வரலாம், இல்லையெனில் இலவச vercel.app URL அனைத்து சமூக தளங்களிலும் பகிரக்கூடியது.
• ஒவ்வொரு கமிட்டிற்கும் முன்னோட்ட வரிசைப்படுத்துதல்கள் - ஒவ்வொரு புஷ்க்கும் அதன் சொந்த URL கிடைக்கும், எனவே நீங்கள் ஒரு நண்பருடன் ஒரு பண்டிலை பகிரலாம் மற்றும் அதை உடைக்காமல் மறு செய்கை செய்யலாம்.

Vibe Skills இலிருந்து ஒரு AI திறனைச் சேர்க்கவும், மற்றும் மற்ற கோப்புகள் மறைந்துவிடும். Three.js காட்சி அமைப்பு, பிளேயர் கட்டுப்படுத்தி, உருவாக்க வரிசை, மற்றும் Vercel-தயாரான vercel.json ஆகியவை ஒரு கட்டளையில் உருவாக்கப்படுகின்றன. பின்னர் Cursor வார இறுதி நாட்களின் மீதமுள்ள நேரத்தை நீங்கள் விரும்பும் விளையாட்டுமுறையை விவரிக்கும் ஒரு அரட்டையாக மாற்றுகிறது. இது முழு ஸ்டாக்: அடித்தளத்திற்கான சந்தை திறன், மறு செய்கைக்கான AI எடிட்டர், மற்றும் வரிசைப்படுத்துதலுக்கான Vercel. தனி, இலவச, மற்றும் வேகமாக.

Vibe Skills

Claude, Cursor மற்றும் பலவற்றிற்கான நூற்றுக்கணக்கான தயார்நிலை திறனறிகளை உலாவவும்.

திறனறிகளை ஆராயுங்கள்

இப்போது இலவசமாகத் தொடங்குங்கள்

48 மணிநேர கட்டமைப்பு: வெள்ளிக்கிழமை கருத்து முதல் ஞாயிற்றுக்கிழமை வரிசைப்படுத்துதல் வரை

உண்மையில் வெளியாகும் ஒவ்வொரு வார இறுதி கப்பலும் ஒரே மாதிரியான படிகளைப் பின்பற்றுகிறது. வெள்ளிக்கிழமை மாலை வரிசைப்படுத்துதலை திட்டமிடுவதுதான் தந்திரம், ஞாயிற்றுக்கிழமை மதியம் அல்ல, எனவே கடைசி ஆறு மணிநேரங்கள் பழுதுபார்ப்பதற்கு பதிலாக மெருகூட்டலுக்குச் செல்கிறது.

இது வேலை செய்வதற்கான காரணம் வெள்ளிக்கிழமை Vercel இல் புஷ் செய்வதுதான். URL ஏற்கனவே இருப்பதால், ஒவ்வொரு சனிக்கிழமை மற்றும் ஞாயிற்றுக்கிழமை கமிட்டும் தானாகவே வரிசைப்படுத்தப்படும். "ஞாயிற்றுக்கிழமை இரவு வரிசைப்படுத்தும் பயம்" இல்லை, ஏனெனில் வரிசைப்படுத்துதல் வெள்ளிக்கிழமையே நடந்துவிட்டது மற்றும் வார இறுதி முழுவதும் தானியங்கி முறையில் இயங்குகிறது.

Vercel இல் 3D கேமை "வை ப் கோடிங்" செய்வது எப்படி இருக்கும்

வை கோடிங் என்றால் நீங்கள் ஆங்கிலத்தில் விரும்புவதைச் சொல்லி, ஒரு AI எடிட்டரை குறியீட்டை எழுத அனுமதித்து, பின்னர் அதன் வெளியீட்டை மேம்படுத்துவது. Vercel இல் Three.js கேமுக்கு, சுழற்சி வழக்கத்திற்கு மாறாக சுத்தமாக உள்ளது: Cursor இல் உள்ள ஒவ்வொரு மாற்றமும் உள்ளூர் கருத்துக்காக pnpm dev தூரத்திலும், பின்னர் நேரடி முன்னோட்ட URL க்காக git push தூரத்திலும், பின்னர் main இல் உற்பத்திக்கு தானாக வரிசைப்படுத்தப்படுகிறது.

வை-கோட் செய்யப்பட்ட Vercel கேம் வார இறுதி இவ்வாறு இருக்கும்:

1. Cursor இல் திறனின் தொடக்க கோப்புறையை திறக்கவும்.
2. ஒரு அம்சத்தை அரட்டையில் விவரிக்கவும்: "200ms க்குள் இரண்டு முறை இடைவெளியை அழுத்தினால் இரட்டை ஜம்ப்".
3. Cursor கட்டுப்படுத்தி கோப்பை திருத்துகிறது. சேமிக்கவும். pnpm dev மீண்டும் ஏற்றுகிறது. நீங்கள் உலாவியில் ஜம்பை உணர்கிறீர்கள்.
4. அது சரியாக உணர்ந்தால், git push. Vercel ஒரு முன்னோட்ட URL ஐ உருவாக்கும். அதை ஒரு நண்பருக்கு அனுப்பவும்.
5. உணர்வு பூட்டப்பட்டவுடன் main இல் ஒன்றிணைக்கவும். உற்பத்தி URL 60 வினாடிகளுக்குள் புதுப்பிக்கப்படும்.

AI தட்டச்சு செய்கிறது. Vercel வரிசைப்படுத்துகிறது. நீங்கள் உணர்வையும் வடிவமைப்பையும் கையாளுகிறீர்கள்.

Vibe Skills இல் இதை சாத்தியமாக்கும் 5 AI 3D கேம் திறன்கள்

இந்த திறன்கள் Vercel + Three.js + Cursor வார இறுதி பணிப்பாய்வுக்கு கட்டமைக்கப்பட்டுள்ளன. ஒவ்வொன்றும் Vite-அடிப்படையிலான Three.js ப்ராஜெக்ட், செயல்படும் vercel.json, Vercel எட்ஜிலிருந்து சேவை செய்யக்கூடிய நிலையான பண்டிலை உருவாக்கும் pnpm build, மற்றும் சோதிக்கப்பட்ட வரிசைப்படுத்தும் பாதை ஆகியவற்றுடன் வருகிறது. அனைத்தும் 3D கேம்கள் வகையில் Vibe Skills இல் உள்ளன.

1. Three.js + Vercel கேம் ஸ்டார்டர்

இயல்புநிலை தேர்வு. பிளேயர் கட்டுப்படுத்தி, மூன்றாம் நபர் கேமரா, லைட்டிங் ரிங், ஸ்கைபாக்ஸ், மற்றும் மோதல்களுடன் கூடிய தரைத்தளம் ஆகியவற்றுடன் ஒரு Three.js காட்சியை உருவாக்குகிறது. Three.js சொத்து பண்டில்களுக்கான சரியான கேச்சிங் ஹெடர்களை அமைக்கும் vercel.json உடன் வருகிறது. pnpm dev உள்ளூரில் இயங்குகிறது; Vercel டாஷ்போர்டில் ஒரு கிளிக் GitHub களஞ்சியத்தை இணைக்கிறது மற்றும் உங்களுக்கு நேரடி URL கிடைக்கும்.

சிறந்தது: 2D தவிர எந்த வகையையும். நீங்கள் என்ன கட்டுகிறீர்கள் என்று இன்னும் தெரியாவிட்டால் இதைப் பயன்படுத்தவும்.

2. முதல்-நபர் Vercel வாக்கர்

காலடி ஓசை கொக்கிகள், தலை அசைவு, மற்றும் சுட்டி-பூட்டு CSP ஹெடர்களை சரியாக கையாளும் vercel.json உடன் கூடிய ஒரு மெருகூட்டப்பட்ட முதல்-நபர் கட்டுப்படுத்தி (WASD + சுட்டி பூட்டு + ஈர்ப்பு + ஸ்பிரிண்ட் + ஜம்ப்). இது பல தனி டெவலப்பர்களுக்கு உற்பத்தியில் சிக்கல்களை ஏற்படுத்துகிறது. இந்த திறன் உங்களுக்காக அதை தீர்க்கிறது.

சிறந்தது: நடை சிமுலேட்டர்கள், திகில் முன்மாதிரிகள், கதை விளையாட்டுகள், அருங்காட்சியக கண்காட்சிகள்.

3. பிரவுசர் அரினா ஷூட்டர் கிட்

ஒரு டாப்-டவுன் அரினா (ட்வின்-ஸ்டிக் கட்டுப்படுத்தி, அலை ஸ்பான்னர், அடிப்படை எதிரி AI, எறிபொருள் அமைப்பு, மதிப்பெண் HUD) Vercel-சரிசெய்யப்பட்ட பண்டிலுடன் வந்துள்ளது, இது சொத்துக்களை ஜிப் செய்கிறது, AI ஐ குறியீடாக பிரிக்கிறது, மற்றும் இசையை தாமதமாக ஏற்றுகிறது. மல்டிபிளேயர் கொக்கிகள் சேர்க்கப்பட்டுள்ளன; வார இறுதி ஒற்றை-வீரரை வழங்குகிறது.

சிறந்தது: ஆர்கேட் ஷூட்டர்கள், புல்லட் ஹெல், மொபைலில் வேகமாக ஏற்ற வேண்டிய ஜாம் உள்ளீடுகள்.

4. Vercel புதிர் பிளாட்ஃபார்மர்

மூன்றாம் நபர் பிளாட்ஃபார்மர் (மாறும் ஜம்ப், கோயோட் நேரம், விளிம்பு கண்டறிதல்), செக்பாயிண்ட்கள், Blender அல்லது குறியீட்டில் திருத்தக்கூடிய மூன்று ஸ்டப் நிலைகள், மற்றும் ஒரு மறுபிறப்பு சுழற்சி. vercel.json உடனடி எட்ஜ்-கேச் செய்யப்பட்ட நிலை மறுஏற்றங்களுக்கு கட்டமைக்கப்பட்டுள்ளது, எனவே தொலைபேசியில் விளையாடும் சோதனை வேகமானது.

சிறந்தது: புதிர் பிளாட்ஃபார்மர்கள், பார்கூர் முன்மாதிரிகள், நிலை-வடிவமைப்பு சோதனைகள்.

5. Vercel டிரைவிங் சாண்ட்பாக்ஸ்

குறைந்த-பாலி கார், ஒரு டிராக்கு டெம்ப்ளேட், மற்றும் பெரிய நிலப்பரப்பு மெஷ்களுக்காக சரிசெய்யப்பட்ட வரிசைப்படுத்துதலுடன் கூடிய ஆர்கேட் ஓட்டுநர் உணர்வு (முடுக்க வளைவு, டிரிஃப்ட் இயற்பியல், கேமரா தாமதம், அடிப்படை நிலப்பரப்பு). முன்னமைக்கப்பட்ட HTTP ஹெடர்கள் Safari இல் WebGL சூழலை வேகமாகத் தொடங்கச் செய்கிறது, இது Three.js க்கு வரலாற்று ரீதியாக மெதுவான உலாவி.

சிறந்தது: ஆர்கேட் பந்தயங்கள், ஆஃப்-ரோட் டிரைவிங், போர்ட்ஃபோலியோவிற்கான கார்-உணர்வு டெமோக்கள்.

Vibe Skills இல் அனைத்து 3D கேம் திறன்களையும் உலாவுக →

வெள்ளிக்கிழமை முதல் ஞாயிற்றுக்கிழமை வரை படிநிலையாக

இது சரியான அட்டவணை. தொடக்க நேரத்தை சரிசெய்யவும், ஆனால் வரிசையை பராமரிக்கவும். வெள்ளிக்கிழமை இரவு Vercel வரிசைப்படுத்துதல் முக்கிய மைல்கல். அதற்குப் பிறகு அனைத்தும் மறு செய்கை.

வெள்ளிக்கிழமை மாலை 6 - இரவு 8: திறனைத் தேர்வு செய்யவும், GitHub இல் புஷ் செய்யவும், Vercel உடன் இணைக்கவும்

படி 1: Vibe Skills இல் ஒரு 3D கேம் திறனைத் தேர்வு செய்யவும். 3D கேம்கள் வகையை உலாவவும், உங்கள் வகைக்குப் பொருந்தும் ஒன்றைத் தேர்வு செய்யவும், மற்றும் தொடக்கத்தை ஒரு புதிய கோப்புறையில் நிறுவவும். அதை Cursor இல் திறக்கவும். மாலை 7 மணிக்குள் நகரும் வீரருடன் ஒரு Three.js காட்சியை நீங்கள் காண வேண்டும்.

படி 2: ஒரு GitHub களஞ்சியத்தை உருவாக்கி புஷ் செய்யவும். git init, git remote add, git push. உங்கள் கேமின் ஸ்லக்கை களஞ்சிய பெயராகப் பயன்படுத்தவும் (crystal-runner, lunar-fishing, எதுவாக இருந்தாலும்). களஞ்சிய பெயர் பெரும்பாலும் உங்கள் URL ஆக மாறும்.

படி 3: களஞ்சியத்தை Vercel உடன் இணைக்கவும். GitHub உடன் Vercel இல் உள்நுழையவும் (இலவசம்), "Add New Project" என்பதைக் கிளிக் செய்யவும், களஞ்சியத்தைத் தேர்ந்தெடுக்கவும். Vercel தானாகவே Vite ஐ கண்டறிந்து உருவாக்கத்தை கட்டமைக்கிறது. Deploy ஐ கிளிக் செய்யவும். 60 வினாடிகளுக்குள் உங்களுக்கு crystal-runner.vercel.app URL கிடைக்கும். உங்கள் தொலைபேசியில் அதை திறக்கவும். ஒரு நண்பருடன் பகிரவும். வார இறுதி நாட்களின் மீதமுள்ள நேரத்திற்கு வரிசைப்படுத்தும் பார் பூஜ்ஜியமாகும்.

வெள்ளிக்கிழமை இரவு 8 - இரவு 10: வடிவமைப்பு ஆவணத்தை எழுதவும்

படி 4: ஐந்து கேள்விகளுக்கு ஆங்கிலத்தில் பதிலளிக்கவும். களஞ்சியத்திற்குள் ஒரு Notion பக்கம் அல்லது ஒரு markdown கோப்பை திறந்து பதிலளிக்கவும்:

• ஒவ்வொரு 5 வினாடிகளுக்கும் வீரர் என்ன செய்கிறார்? (மைய சுழற்சி)
• வெற்றி நிலை மற்றும் தோல்வி நிலை என்ன?
• ஒரு ஓட்டம் அல்லது ஒரு நிலை எவ்வளவு நீளம்?
• காட்சி கொக்கி என்ன? (தட்டு, லைட்டிங், பாணி குறிப்பு)
• 30 வினாடிகளில் இதை மறக்க முடியாததாக மாற்றும் ஒரு அம்சம் என்ன?

படி 5: வடிவமைப்பு ஆவணத்தை கமிட் செய்யவும். அதை களஞ்சியத்தில் புஷ் செய்யவும். Vercel மீண்டும் வரிசைப்படுத்தும். ஒவ்வொரு அர்த்தமுள்ள மாற்றத்தையும் புஷ் செய்யும் ஒழுக்கம் நேரடி URL ஐ நேர்மையாக வைத்திருக்கிறது.

சனிக்கிழமை காலை 9 - மதியம் 1: மைய இயக்கவியலை உருவாக்குதல்

படி 6: தற்காலிக மாற்றீட்டை உங்கள் ஒரு அம்சத்துடன் மாற்றவும். இது மட்டுமே முக்கிய அம்சம். அதை விவரிக்க Cursor அரட்டையைப் பயன்படுத்தவும் ("வீரர் ஒரு படிகத்தை எடுத்தவுடன், அருகிலுள்ள எதிரிகளை 2 வினாடிகளுக்கு உறைய வைத்து ஒரு மணிநேரத்தை இசைக்கவும்"). pnpm dev உடன் உள்ளூரில் மறு செய்கை செய்யவும். அது சரியாக உணர்ந்தால், புஷ் செய்யவும்.

படி 7: வெற்றி/தோல்வி நிலையை இணைக்கவும். உண்மையான முடிவுடன் கூடிய 60-வினாடி பண்டில் ஒரு கேம் போல் உணர்கிறது. முடிவு இல்லாத 60-நிமிட பண்டில் ஒரு தொழில்நுட்ப டெமோ போல் உணர்கிறது. எப்போதும் முதலில் வெற்றி திரையை இணைக்கவும், பின்னர் மற்ற அனைத்தும்.

சனிக்கிழமை மதியம் 1 - இரவு 8: ஒரு நிலையைச் சேர்க்கவும்

படி 8: ஒரு மெருகூட்டப்பட்ட நிலையை உருவாக்குங்கள். மூன்று அரை-சுடப்பட்ட நிலைகள் அல்ல. வடிவவியலுக்கு தற்காலிக கனசதுரங்களைப் பயன்படுத்தவும். திறனின் ஸ்டாக் கதாபாத்திரத்தைப் பயன்படுத்தவும். உணர்வை சரிசெய்யவும் - ஜம்ப் உயரம், கேமரா தாமதம், துகள் தீவிரம்.

படி 9: ஒரு பயிற்சி ஓவர்லேவைச் சேர்க்கவும். முதல் முறை தொடங்கும் போது "WASD நகர்த்த, கிளிக் செய்யவும்" இரண்டு வாக்கியங்கள் கொண்ட பாப்-அப் குழப்பமான வீரர்களை 8 வினாடிகளில் கைவிடுவதால் உங்கள் வெளியீட்டைக் காப்பாற்றுகிறது. Cursor 30 வினாடிகளில் React (அல்லது வெற்று DOM) ஓவர்லேவை உருவாக்க முடியும்.

படி 10: ஒவ்வொரு மணி நேரமும் புஷ் செய்யவும். ஒவ்வொரு புஷும் ஒரு Vercel முன்னோட்ட URL ஐ பெறுகிறது. ஒவ்வொன்றையும் ஒரு நண்பருக்கு அனுப்பவும். பின்னூட்ட சுழற்சி இந்த ஸ்டாக்கின் ரகசிய ஆயுதமாகும்.

ஞாயிற்றுக்கிழமை காலை 10 - மாலை 4: மெருகூட்டல்

படி 11: மூன்று ஒலிகளைச் சேர்க்கவும். காலடி ஓசை லூப், சுற்றுப்புற பேட், வெற்றி ஒலி. மூன்று ஒலிகள் கூட ஒரு வார இறுதி முன்மாதிரியை வியக்கத்தக்க வகையில் உயர்த்துகின்றன. இலவச ஆதாரங்கள்: freesound.org, opengameart.org.

படி 12: அழகு சேருங்கள். தாக்கும்போது துகள்கள், பாதிப்பில் திரைப் அதிர்வு, மதிப்பெண்ணில் எண் பாப்-அப்கள். அழகு என்பது 48-மணிநேர பண்டில் GIF இல் 6-மாத பண்டில் போல் தோற்றமளிக்கும். Cursor ஐ "வீரர் சேதமடையும் போது 150ms க்கு 0.3 தீவிரத்துடன் ஒரு திரைப் அதிர்வு" சேர்க்கும்படி கேளுங்கள் - அது ஐந்து வினாடிகளில் கேமரா-அதிர்வு கொக்கியை எழுதும்.

படி 13: ஒரு லைட்ஹவுஸ் பாஸை இயக்கவும். தொலைபேசியில் Vercel URL ஐ திறந்து Chrome DevTools Lighthouse ஐ இயக்கவும். Three.js பண்டில்கள் பொதுவாக 400 KB முதல் 1.5 MB வரை இருக்கும். நீங்கள் 3 MB க்கு மேல் இருந்தால், கனமான தொகுதிகளில் குறியீட்டைப் பிரிப்பதை இயக்க Cursor ஐ கேளுங்கள். Vercel இன் ஜிப் மற்றும் ப்ரோட்லி மீதமுள்ளவற்றைக் கையாளும்.

படி 14: பிழை சோதனை. உங்கள் நேரடி URL ஐ அடுத்தடுத்து ஐந்து முறை விளையாடுங்கள். இருமுறை உடைக்கும் எதையும் சரிசெய்யவும். ஒருமுறை உடைக்கும் எதையும் புறக்கணிக்கவும்.

ஞாயிற்றுக்கிழமை மாலை 4 - இரவு 8: வெளியீடு

படி 15: (விருப்பம்) ஒரு தனிப்பயன் டொமைனை அமைக்கவும். நீங்கள் முன்னதாகவே name-game.com ஐ வாங்கியிருந்தால், அதை Vercel இன் திட்ட அமைப்புகளில் சேர்க்கவும். SSL தானாகவே இருக்கும். இல்லையெனில் *.vercel.app URL போதுமானது - இது HTTPS ஐக் கொண்டுள்ளது, பகிரக்கூடியது, மற்றும் எல்லா இடங்களிலும் ஏற்றுகிறது.

படி 16: சிறந்த தருணத்தின் 15-வினாடி GIF ஐ பதிவு செய்யவும். உள்ளூர் ஹோஸ்டுக்கு பதிலாக நேரடி URL ஐப் பயன்படுத்தவும். GIF தான் Twitter, Bluesky, மற்றும் Reddit இல் கிளிக் செய்யப்படும்.

படி 17: itch.io பக்கத்தை உருவாக்கவும் (விருப்பம் ஆனால் உயர்-செல்வாக்கு). தலைப்பு, ஒரு வரி முழக்கம், மூன்று ஸ்கிரீன் ஷாட்கள், GIF, கட்டுப்பாடுகள், கிரெடிட்கள், மற்றும் உங்கள் *.vercel.app iframe இன் உட்பொதிப்பு (itch.io HTML5 கேம்களுக்கான iframe உட்பொதிப்புகளை ஆதரிக்கிறது). இப்போது உங்களிடம் இரண்டு URL கள் உள்ளன - ஒன்று சாதாரண பகிர்வுக்கும், மற்றொன்று கேமர் பார்வையாளர்களுக்கும்.

படி 18: இணைப்பை இடுகையிடவும். Twitter, Bluesky, உங்கள் டெவலப்பர் சமூகம் Discord, r/IndieDev, r/threejs, r/WebGames. எப்போதும் GIF உடன் தொடங்கவும். எப்போதும் URL ஐ சேர்க்கவும். நீங்கள் Vibe Skills திறனைப் பயன்படுத்தியிருந்தால், டெவலப்பர் பதிவில் அதைக் குறிப்பிடவும் - அதைப் படிக்கும் மற்ற டெவலப்பர்கள் அதே தொடக்கத்தை விரும்புவார்கள்.

Vercel வரிசைப்படுத்தல் தோல்விகளைத் தவிர்க்க மூன்று பொதுவான வழிகள்

மூன்று விஷயங்கள் கிட்டத்தட்ட ஒவ்வொரு தனி Three.js + Vercel வார இறுதியையும் உடைக்கின்றன. இவை அனைத்தும் வெள்ளிக்கிழமை இரவில் கண்டால் 5 நிமிட திருத்தங்கள், மற்றும் ஞாயிற்றுக்கிழமை மாலை 7 மணிக்கு கண்டறிந்தால் 5 மணி நேரப் படுகுழிகள்.

• தவறான உருவாக்க வெளியீட்டு அடைவு. Vite இயல்புநிலையாக dist/ ஆகும். Vercel தானாகவே Vite ஐ கண்டறிந்து dist/ ஐப் பயன்படுத்துகிறது. நீங்கள் வெளியீட்டை தனிப்பயனாக்கியிருந்தால், vercel.json அல்லது திட்ட அமைப்புகளில் outputDirectory ஐ அமைக்கவும் அல்லது உங்கள் வரிசைப்படுத்துதல் 404 ஆக இருக்கும்.
• உள்ளூரில் வேலை செய்யும் சொத்து பாதைகள் ஆனால் உற்பத்தியில் 404. எந்த ரன்டைம்-ஏற்றப்பட்ட GLB, டெக்ஸ்சர், அல்லது ஆடியோ கோப்பிற்கும் உறவினர் பாதைகள் அல்லது Vite import.meta.env.BASE_URL உதவியாளரைப் பயன்படுத்தவும். ஹார்ட்கோடட் /assets/... பாதைகள் பொதுவாக வேலை செய்யும், ஆனால் நகலெடுத்து ஒட்டப்பட்ட தனி Windows பாதைகள் நிச்சயமாக வேலை செய்யாது.
• சுட்டி பூட்டு அல்லது ஆடியோ சூழலைத் தடுக்கும் CSP ஹெடர்கள். முதல்-நபர் கேம்களுக்கு சுட்டி பூட்டு தேவை. ஆடியோக்கு பயனர்-சைகை செயல்படுத்தல் தேவை. 3D கேம்கள் வகையிலிருந்து எந்தத் திறனும் இதைக் கையாள vercel.json இல் சரியான headers தொகுதியுடன் வருகிறது. நீங்கள் சொந்தமாக புதிதாக எழுதினால், திறனின் களஞ்சியத்திலிருந்து உள்ளமைவை நகலெடுக்கவும்.

வரிசைப்படுத்துதல் வெள்ளிக்கிழமை வேலை செய்கிறது, எனவே ஞாயிற்றுக்கிழமை இவை உடைக்கும்போது அது எப்போதும் ஒரு சமீபத்திய மாற்றத்தால் தான். git bisect உங்கள் நண்பன். இதைவிட சிறந்தது: ஒவ்வொரு 30 நிமிடங்களுக்கும் புஷ் செய்யவும், இதனால் உடைந்த கமிட் சிறியதாக இருக்கும்.

அடிக்கடி கேட்கப்படும் கேள்விகள்

எனது கேம் ட்ராஃபிக் பெற்றால் Vercel இலவச அடுக்கு உண்மையில் நீடிக்குமா?

ஆம், ஒரு வார இறுதி வெளியீடு மற்றும் முதல் சில வாரங்களுக்கு. இலவச அடுக்கு உங்களுக்கு மாதத்திற்கு 100 GB அலைவரிசையை வழங்குகிறது, இது 5 MB Three.js பண்டில் 20,000 பிளேக்களுக்கு தோராயமாக சமம். நீங்கள் அந்த வரம்பை அடைந்தால், Pro திட்டம் $20/மாதம் மற்றும் உங்களை 1 TB க்கு உயர்த்தும். ஒரு வார இறுதி கப்பலுக்கு, இலவசம் போதுமானது. Vibe Skills இல் உள்ள திறன்கள் பண்டில் அளவை குறைக்கும் உருவாக்க உள்ளமைவுகளுடன் வருகின்றன, இது இலவச அடுக்கை மேலும் நீட்டிக்கிறது.

Vercel இலவச அடுக்கில் தனிப்பயன் டொமைனைப் பயன்படுத்தலாமா?

ஆம். இலவச அடுக்கு தானியங்கி HTTPS உடன் தனிப்பயன் டொமைன்களை ஆதரிக்கிறது. ஒரு டொமைனை வாங்கவும் (Namecheap, Cloudflare Registrar, Porkbun), அதை Vercel க்கு சுட்டிக்காட்டவும், Vercel SSL சான்றிதழை கையாளும். அமைப்பு சுமார் 10 நிமிடங்கள் ஆகும். உங்களிடம் ஒரு டொமைன் இல்லை என்றால், name-game.vercel.app URL எந்த தளத்திலும் பகிர போதுமான அளவு சிறியது.

கேம் ஜாம் சமர்ப்பிப்புக்கு இந்த ஸ்டாக் சரியா?

ஆம், மற்றும் இது கேம் ஜாம் சமர்ப்பிப்புகளுக்கான சிறந்த ஸ்டாக்குகளில் ஒன்றாகும். பெரும்பாலான ஜாம்கள் (Ludum Dare, GMTK, js13k, GitHub Game Off) எந்தவொரு வெப்-பிளே ஆகும் URL ஐயும் ஏற்றுக்கொள்கின்றன. ஒரு *.vercel.app இணைப்பு நீதிபதிகளுக்கு itch.io URL போல சரியாக வேலை செய்கிறது. பல ஜாம் வெற்றியாளர்கள் இரண்டிற்கும் கப்பல் அனுப்புகிறார்கள் - கேமர் பார்வையாளர்களுக்கு itch.io, வேகமான canonical URL ஆக Vercel.

தொடங்குவதற்கு முன் நான் Three.js ஐ தெரிந்து கொள்ள வேண்டுமா?

Cursor எழுதும் குறியீட்டைப் படிக்கவும் மதிப்புகளை சரிசெய்யவும் போதுமான JavaScript உங்களுக்குத் தேவை. நீங்கள் Three.js ஐ புதிதாக எழுத வேண்டியதில்லை. Vibe Skills இல் உள்ள திறன்கள் இயந்திர அமைப்பு, கேமரா, கட்டுப்படுத்தி, மற்றும் உருவாக்க உள்ளமைவை உருவாக்குகின்றன. Cursor உங்கள் விளக்கங்களிலிருந்து விளையாட்டு குறியீட்டை கையாள்கிறது.

ஞாயிற்றுக்கிழமை மாலை 7 மணிக்கு எனது Vercel உருவாக்கம் தோல்வியுற்றால் என்ன நடக்கும்?

மிகவும் பொதுவான காரணம் டைப்ஸ்கிரிப்ட் பிழை அல்லது காணாமல் போன சூழல் மாறி. Vercel உருவாக்க பதிவைக் காட்டுகிறது, அதில் தோல்வியுற்ற வரி ஹைலைட் செய்யப்பட்டிருக்கும். டாஷ்போர்டில் ஒரு கிளிக்கில் கடைசி வேலை செய்யும் வரிசைப்படுத்துதலுக்கு திரும்பச் சென்று அதை உற்பத்திக்கு மேம்படுத்தலாம். ஒவ்வொரு புஷும் ஒரு முன்னோட்ட வரிசைப்படுத்துதல் என்பதால், நீங்கள் ஒரு வேலை செய்யும் உருவாக்கத்திலிருந்து ஒரு கமிட்டுக்கு மேல் இல்லை. அதனால்தான் சனிக்கிழமை மற்றும் ஞாயிற்றுக்கிழமைகளில் ஒவ்வொரு 30 நிமிடங்களுக்கும் புஷ் செய்வது முக்கியம்.

Vibe Skills 3D கேம் திறனில் இருந்து குறியீட்டை விற்கலாமா அல்லது மாற்றலாமா?

ஆம். Vibe Skills இல் உள்ள திறன்கள் ஒரு வணிக-நட்பு உரிமத்துடன் வருகின்றன, இது Vercel, itch.io, Steam, அல்லது வேறு எந்த இடத்திலும் உங்கள் சொந்த கேமில் குறியீட்டை வெளியிட அனுமதிக்கிறது. படைப்பாளர்கள் திறனின் IP ஐ வைத்திருப்பார்கள், நீங்கள் அதன் மேல் கட்டப்பட்ட கேமின் IP ஐ வைத்திருப்பீர்கள்.

Cursor ஐப் பயன்படுத்த விரும்பவில்லை என்றால் என்ன செய்வது?

திட்ட கோப்புகளை திருத்தக்கூடிய எந்த AI எடிட்டரும் வேலை செய்யும். Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - அவற்றில் எது வேண்டுமானாலும் Vibe Skills திறனில் இருந்து Three.js ஸ்கேஃபோல்டிங்கில் மறு செய்கை செய்ய முடியும். திறனே எடிட்டர்-அஞ்ஞானமானது.

இந்த வார இறுதியில் அதை அனுப்புங்கள்

பெரும்பாலான தனி டெவலப்பர்கள் ஒரு 3D கேமை அனுப்பாமல் இருப்பதற்கான காரணம் இன்ஜின், வகை, அல்லது திறன் உச்சநிலை அல்ல. இது வெள்ளிக்கிழமை இரவு "இன்னும் கொஞ்சம் ஆராய்ச்சி செய்வோம்" என்று சொல்லி ஒருபோதும் தொடங்காதது தான். உங்களிடம் இருக்கும் அடுத்த இலவச வார இறுதியில், நான்கு-கட்ட திட்டத்தைப் பின்பற்றவும்: ஒரு Vibe Skills 3D கேம் திறனை நிறுவவும், GitHub இல் புஷ் செய்யவும், Vercel ஐ இணைக்கவும், வெள்ளிக்கிழமை மாலை 8 மணிக்குள் வரிசைப்படுத்தவும், பின்னர் ஒரு நேரடி URL இல் மறு செய்கை செய்ய சனிக்கிழமை மற்றும் ஞாயிற்றுக்கிழமையை செலவிடவும்.

Vercel இல் பத்து வார இறுதி-கப்பல் விளையாட்டுகளின் உங்கள் போர்ட்ஃபோலியோ உங்கள் கற்பனையான ஆறு மாத கனவு இன்ஜின் திட்டத்தை விட மதிப்புமிக்கது. அனுப்பப்பட்ட ஒன்று எப்போதும் வெல்லும். இலவச Vercel URL தான் ஆதாரம்.

Vibe Skills இல் 3D கேம் திறன்களை உலாவுக →

Three.js boilerplate மாரத்தானைத் தவிர்க்கவும். Vibe Skills இல் ஒரு 3D கேம் திறனை நிறுவவும், Vercel இல் புஷ் செய்யவும், மற்றும் ஞாயிற்றுக்கிழமை இரவு வரை நேரடி URL ஐ வைத்திருக்கவும்.