Bu həftə sonu Vercel-də 3D Oyun Geyimini Necə Yaymaq Olar (AI Bacarıqları ilə)

Vibe Skills

Claude, Cursor və daha çoxu üçün yüzlərlə hazır bacarıqlara baxın.

Bacarıqlara baxın

İndi Pulsuz Başlayın

Verceldə 3D Oyun Nəşr Etməyin 48 Saatlıq Planı: Bazar Gecəsinə Qədər

Boş cümə axşamından sizin-oyununuz.vercel.app linkinə bazar axşamına qədər gedə bilərsiniz. İstifadə olunan texnologiyalar Three.js, Cursor, Vibe Skills saytından bir AI bacarığı və Vercel-in pulsuz paketi. Həftə sonu üçün ümumi xərc: $0. İdarə etməli olduğunuz ümumi infrastruktur: sıfır.

Bu "laptopda prototip hazırlayıb bitmiş saymaq" deyil. Bu, brauzerdə hər kəsin aça biləcəyi, HTTPS, kənar keşləmə və istəsəniz xüsusi domen ilə təmin edilmiş ictimai bir URL-dir. AI bacarığı Three.js strukturunu və işləyən vercel.json faylını təqdim edir. Cursor iterasiya dövrünü idarə edir. Vercel isə nəşri idarə edir. Siz dizaynı idarə edirsiniz.

Bu bələdçi "indie" developerlər, "vibe" kodçuları, hackathon iştirakçıları və yarımçıq qalmış localhost:5173 tablarından bezmiş hər kəs üçündür. Niyə bu texnoloji yığın işləyir, 48 saatlıq nəşrin anatomiyası, iş axını üçün hazırlanmış beş 3D oyun bacarığı və cümədən bazara qədər addım-addım təlimatları izah edirik.

Vibe Skills

Claude, Cursor və daha çoxu üçün yüzlərlə hazır bacarıqlara baxın.

Bacarıqlara baxın

İndi Pulsuz Başlayın

Niyə Vercel + Three.js + AI Bacarıqları Solo Developer Stack-dir

Vercel, Three.js oyunu üçün ən asan nəşr platformasıdır. GitHub-a göndərin, Vercel bunu fərq edəcək, layihəni quracaq və 60 saniyə içində sizə bir URL verəcək. Server təchizatı, Docker faylı, NGINX konfiqurasiyası, SSL quraşdırması yoxdur. Three.js paketi sadəcə statik HTML, JS və WebGL resurslarıdır ki, bu da məhz Vercel-in kənar şəbəkəsinin təqdim etmək üçün qurulduğu şeydir.

Pulsuz paket bir həftə sonu üçün kifayətdir:

• Ayda 100 GB bant genişliyi. 10.000 oyun üçün 5 MB Three.js paketi 50 GB edir. Bant genişliyi qurtarmadan həftə sonunuz qurtaracaq.
• HTTPS və *.vercel.app alt domeni ilə limitsiz statik nəşrlər.
• Pulsuz paketdə xüsusi domen dəstəyi - əgər varsa, öz mənim-oyunum.com ünvanınızı istifadə edin, əks halda pulsuz vercel.app URL-i bütün sosial platformalarda paylaşıla bilər.
• Hər bir commit üçün önizləmə nəşrləri - hər bir göndərilən dəyişiklik öz URL-ini alır, beləliklə bir dostunuzla bir quruluşu paylaşa və pozmadan yeniləməyə davam edə bilərsiniz.

Vibe Skills saytından bir AI bacarığı əlavə etsəniz, təkrarlanan kodlar da yox olur. Three.js səhnəsinin quruluşu, oyunçu idarəetməsi, quruluş boru kəməri və Vercel üçün hazır vercel.json bir komanda ilə yaradılır. Sonra Cursor həftə sonunun qalan hissəsini istədiyiniz oyun mexanikasını təsvir etdiyiniz və nəticəni tənzimlədiyiniz bir söhbətə çevirir. Bu tam stack-dir: təməl üçün bir bazar bacarığı, iterasiya üçün bir AI redaktoru və nəşr üçün Vercel. Solo, pulsuz və sürətli.

Vibe Skills

Claude, Cursor və daha çoxu üçün yüzlərlə hazır bacarıqlara baxın.

Bacarıqlara baxın

İndi Pulsuz Başlayın

48 Saatlıq Struktur: Cümə Konsepsiyasından Bazar Nəşrinə

Həftə sonu həyata keçirilən hər bir nəşr eyni addımları izləyir. Sirlə, cümə günü planlaşdırmaqdır, bazar günü bazar ertəsi deyil, beləliklə son altı saat səhvlərlə mübarizə aparmaq əvəzinə təkmilləşdirməyə gedir.

Bu işin səbəbi cümə axşamı Vercel-ə göndərilməsidir. URL mövcud olduqdan sonra, hər şənbə və bazar ertəsi edilən dəyişikliklər avtomatik olaraq nəşr olunur. "Bazar gecəsi nəşr panikası" yoxdur, çünki nəşr cümə günü baş vermişdir və bütün həftə sonu avtomatik rejimdə işləyib.

Vercel-də 3D Oyun "Vibe Kodlaşdırması" Necə Görünür

"Vibe kodlaşdırması" dedikdə, istədiyinizi sadə ingilis dilində təsvir etmək və AI redaktorunun kodu yazmasına icazə vermək, sonra nəticəni təkmilləşdirmək başa düşülür. Vercel-də Three.js oyunu üçün bu dövrüm olduqca təmizdir: Cursor-dakı hər bir dəyişiklik yerli rəylərə pnpm dev qədər, sonra canlı önizləmə URL-inə git push qədər və nəhayət main-ə avtomatik olaraq istehsalata qədərdir.

Vercel oyununun "vibe kodlaşdırılmış" həftə sonu belə görünür:

1. Cursor-da bacarığın başlanğıc qovluğunu açın.
2. Çatda bir xüsusiyyəti təsvir edin: "200ms ərzində iki dəfə boşluq düyməsinə basılarsa ikiqat sıçrayış."
3. Cursor idarəetmə faylını redaktə edir. Saxlayın. pnpm dev yenidən yüklənir. Brauzerdə sıçrayışı hiss edirsiniz.
4. Hiss düzgündürsə, git push. Vercel bir önizləmə URL-i qurur. Bir dostunuza göndərin.
5. Hiss kilidləndikdə main-ə birləşdirin. İstehsal URL-i 60 saniyə içində yenilənir.

AI yazır. Vercel nəşr edir. Siz hiss və dizaynla məşğul olursunuz.

Vibe Skills-də Bunu Mümkün Edən 5 AI 3D Oyun Bacarığı

Bu bacarıqlar Vercel + Three.js + Cursor həftə sonu iş axını üçün hazırlanmışdır. Hər biri Vite əsaslı Three.js layihəsi, işləyən vercel.json, Vercel-in kənar şəbəkəsindən təqdim edilə bilən statik paket istehsal edən pnpm build və sınaqdan keçirilmiş nəşr yolu ilə təchiz edilmişdir. Hamısı Vibe Skills-dəki 3D Oyunlar kateqoriyasındadır.

1. Three.js + Vercel Oyun Başlanğıcı

Default seçim. Üçüncü şəxs kamerası, işıqlandırma sistemi, səma qutusu və toqquşmaları olan yer səthi ilə Three.js səhnəsi yaradır. Three.js resurs paketləri üçün düzgün keşləmə başlığı təyin edən vercel.json ilə təchiz edilmişdir. pnpm dev yerli olaraq işləyir; Vercel dashboard-da bir kliklə GitHub repozitoriyası birləşdirilir və siz canlı URL əldə edirsiniz.

Ən yaxşısı: sadə 2D istisna olmaqla, istənilən janr üçün. Nə tikdiyinizi hələ bilmirsinizsə, bundan istifadə edin.

2. Birinci Şəxs Vercel Walker

Addım səsləri, baş hərəkəti və pointer-lock CSP başlığını düzgün idarə edən vercel.json ilə təkmilləşdirilmiş birinci şəxs idarəetməsi (WASD + siçan pointer kilidi + yerçekimi + qaçış + sıçrayış) ilə təchiz edilmişdir. Bu, bir çox solo developerı istehsalda çətin vəziyyətə qoyur. Bacarıq bunu sizin üçün həll edir.

Ən yaxşısı: gəzinti simulyatorları, dəhşət prototipləri, nəqliyyat oyunları, muzey sərgiləri üçün.

3. Brauzer Arena Atışma Kiti

Qalibiyyət/məğlubiyyət, dalğa spawner, əsas düşmən AI, güllə sistemi, hesab HUD ilə yuxarıdan aşağı arena (ikili joystick idarəetməsi) Vercel ilə tənzimlənmiş quruluşa malikdir ki, bu da resursları sıxır, AI-ni kodla ayırır və musiqini gec yükləyir. Multiplayer dəstəyi daxildir; həftə sonu təklik rejimi təqdim olunur.

Ən yaxşısı: arcade atışma oyunları, güllə cəhənnəmi, mobilə sürətlə yüklənməli olan "jam" iştirakları üçün.

4. Vercel Puzzle Platformer

Üçüncü şəxs platformer (dəyişən sıçrayış, "coyote" vaxtı, ledgə aşkarlanması), nəzarət nöqtələri, Blender-də və ya kodda düzəldilə bilən üç səviyyə və yenidən başlama dövrü. vercel.json səviyyənin dərhal kənar keşlənməsi üçün konfiqurasiya edilmişdir, buna görə də telefonunuzda oyun təcrübəsi tez olur.

Ən yaxşısı: tapmaca platformerləri, parkour prototipləri, səviyyə dizaynı təcrübələri üçün.

5. Vercel Driving Sandbox

Arkad avtomobil idarəetməsi (sürətlənmə əyriliyi, sürüşmə fizika, kamera gecikməsi, əsas relyef) ilə aşağı poliqon avtomobil, trek şablonu və böyük relyef meshləri üçün tənzimlənmiş nəşr. Əvvəlcədən təyin edilmiş HTTP başlığı WebGL kontekstinin Safari-də daha sürətli başlamasını təmin edir, bu da keçmişdə Three.js üçün ən yavaş brauzer olmuşdur.

Ən yaxşısı: arkad yarışları, off-road avtomobil idarəetməsi, portfel üçün avtomobil hiss demo göstərmək.

Vibe Skills-də bütün 3D oyun bacarıqlarına baxın →

Cümədən Bazara Addım-Addım

Bu dəqiq cədvəldir. Başlanğıc vaxtını tənzimləyin, lakin sıranı saxlayın. Əsas mərhələ cümə axşamı Vercel nəşridir. Ondan sonrakı hər şey iterasiyadır.

Cümə 18:00 - 20:00: Bacarıq Seçin, GitHub-a Göndərin, Vercel-i Qoşun

Addım 1: Vibe Skills-də bir 3D oyun bacarığı seçin. 3D Oyunlar kateqoriyasına baxın, janrınıza uyğun olanı seçin və başlanğıc kodu yeni bir qovluğa quraşdırın. Onu Cursor-da açın. Saat 19:00-a qədər hərəkət edən oyunçu ilə bir Three.js səhnəsi görməlisiniz.

Addım 2: GitHub repozitoriyası yaradın və göndərin. git init, git remote add, git push. Oyununuzun adını repozitoriya adı kimi istifadə edin (crystal-runner, lunar-fishing, nə olursa olsun). Repozitoriya adı tez-tez sizin URL-iniz olur.

Addım 3: Repozitoriyanı Vercel-ə qoşun. GitHub ilə Vercel-ə daxil olun (pulsuz), "Add New Project" düyməsinə basın, repozitoriyanı seçin. Vercel avtomatik olaraq Vite-i aşkarlayır və quruluşu konfiqurasiya edir. Deploy düyməsinə basın. 60 saniyə içində crystal-runner.vercel.app URL-iniz olur. Telefonunuzda açın. Bir dostunuzla paylaşın. Nəşr paneli həftə sonunun qalan hissəsi üçün sıfırlandı.

Cümə 20:00 - 22:00: Dizayn Sənədini Yazın

Addım 4: Beş sualı sadə ingilis dilində cavablandırın. Repozitoriyadakı Notion səhifəsini və ya markdown faylını açın və cavablandırın:

• Oyunçu hər 5 saniyədə nə edir? (əsas dövr)
• Qalibiyyət şərti və məğlubiyyət şərti nədir?
• Bir oyunun və ya bir səviyyənin müddəti nə qədərdir?
• Vizual təsiri nədir? (palitra, işıqlandırma, stil referansı)
• 30 saniyə ərzində bu oyunu unudulmaz edən bir xüsusiyyət nədir?

Addım 5: Dizayn sənədini commit edin. Repozitoriyaya göndərin. Vercel yenidən nəşr edəcək. Hər əhəmiyyətli dəyişikliyi göndərmək intizamı canlı URL-i doğru saxlayır.

Şənbə 09:00 - 13:00: Əsas Mexanikanı Qurun

Addım 6: Yer tutucu mexanikanı öz bir xüsusiyyətinizlə əvəz edin. Bu, əhəmiyyətli olan yeganə xüsusiyyətdir. Onun təsviri üçün Cursor söhbətindən istifadə edin ("oyunçu bir kristal götürdükdə, yaxınlıqdakı düşmənləri 2 saniyə dondur və bir zil səsi çal"). pnpm dev ilə yerli olaraq təkmilləşdirin. Hiss düzgün olduqda, göndərin.

Addım 7: Qalib/məğlub vəziyyətini birləşdirin. Əsl sonu olan 60 saniyəlik bir quruluş oyun kimidir. Sonu olmayan 60 dəqiqəlik quruluş texniki demo kimidir. Həmişə əvvəlcə qalibiyyət ekranını, sonra hər şeyi birləşdirin.

Şənbə 13:00 - 20:00: Bir Səviyyə Əlavə Edin

Addım 8: Bir təkmilləşdirilmiş səviyyə qurun. Üç yarımçıq deyil. Geometriya üçün yer tutucu kublardan istifadə edin. Bacarığın stok personajından istifadə edin. Hissi tənzimləyin - sıçrayış hündürlüyü, kamera gecikməsi, hissəcik intensivliyi.

Addım 9: Tədris örtüyü əlavə edin. İlk dəfə başladığında iki cümləlik "Hərəkət etmək üçün WASD, atəş etmək üçün klikləyin" pop-upı, çaşqın oyunçuların 8 saniyədə imtina etməsini qarşısını alır. Cursor 30 saniyədə React (və ya adi DOM) örtüyünü yarada bilər.

Addım 10: Hər saatda göndərin. Hər göndərilən dəyişiklik Vercel önizləmə URL-i alır. Hər birini bir dostunuza göndərin. Rəy dövrü bu stack-in gizli silahıdır.

Bazar 10:00 - 16:00: Təkmilləşdirmə

Addım 11: Üç səs əlavə edin. Addım səsi, ətraf səs, qalibiyyət melodiyası. Cəmi üç səs belə həftə sonu prototipini əhəmiyyətli dərəcədə yüksəldir. Pulsuz mənbələr: freesound.org, opengameart.org.

Addım 12: Effekt əlavə edin. Zərbə zamanı hissəciklər, zərbə zamanı ekran titrəməsi, hesabda rəqəmli pop-up'lar. Effektlər, 48 saatlıq quruluşu GIF-də 6 aylıq kimi göstərən şeydir. Cursor-dan "oyunçu zərər gördükdə 150ms üçün 0.3 intensivlikdə ekran titrəməsi əlavə et" deyə soruşun - bu, beş saniyədə kamera titrəməsi dəstəyini yazacaq.

Addım 13: Lighthouse keçidini işə salın. Vercel URL-ini telefonunuzda açın və Chrome DevTools Lighthouse-u işə salın. Three.js paketləri adətən 400 KB ilə 1.5 MB arasında olur. Əgər 3 MB-dan çoxdursa, böyük modullarda kod ayırmağı aktivləşdirmək üçün Cursor-dan soruşun. Vercel-in gzip və brotli qalanı həll edəcək.

Addım 14: Səhv yoxlaması. Canlı URL-inizi beş dəfə ardıcıl oynayın. İki dəfə pozulan hər şeyi düzəldin. Bir dəfə pozulan hər şeyi görməməzlikdən gəlin.

Bazar 16:00 - 20:00: Nəşr

Addım 15: (İsteğe bağlı) Xüsusi domen təyin edin. Əgər əvvəlcədən mənim-oyunum.com almışsınızsa, onu Vercel-in layihə parametrlərində əlavə edin. SSL avtomatikdir. Əks halda, *.vercel.app URL-i yaxşıdır - bu HTTPS-ə malikdir, paylaşıla bilər və hər yerdə işləyir.

Addım 16: Ən yaxşı anın 15 saniyəlik GIF-ini çəkin. Yerli deyil, canlı URL istifadə edin. GIF, Twitter, Bluesky və Reddit-də kliklənən şeydir.

Addım 17: itch.io səhifəsi yaradın (isteğe bağlı, lakin yüksək nəticə verir). Başlıq, bir cümləlik şüar, üç ekran görüntüsü, GIF, idarəetmə, kreditlər və *.vercel.app iframe-nin yerləşdirilməsi (itch.io HTML5 oyunları üçün iframe yerləşdirmələrini dəstəkləyir). İndi iki URL-iniz var - biri təsadüfi paylaşım üçün, digəri isə oyunçu auditoriyası üçün.

Addım 18: Linki yerləşdirin. Twitter, Bluesky, developer icma Discord-unuz, r/IndieDev, r/threejs, r/WebGames. Həmişə GIF ilə başlayın. Həmişə URL-i daxil edin. Əgər Vibe Skills bacarığından istifadə etmisinizsə, developer bloqu postunda bunu qeyd edin - ardınca oxuyan digər developerlar da eyni başlanğıcı istəyəcəklər.

Vercel Nəşrində Ən Tez Tez Baş Verən 3 Səhvdən Necə Qaçınmaq Olar

Hər solo Three.js + Vercel həftə sonunu demək olar ki, bu üç şey pozur. Bu üçü də cümə axşamı gecə tutsanız 5 dəqiqəlik düzəlişlərdir və bazar günü 19:00-da kəşf etsəniz 5 saatlıq fəlakətlərdir.

• Yanlış quruluş çıxış qovluğu. Vite dist/ ilə başlayır. Vercel avtomatik olaraq Vite-i aşkarlayır və dist/-dən istifadə edir. Əgər çıxışı özəlləşdirmisinizsə, vercel.json və ya layihə parametrlərində outputDirectory-i təyin edin, əks halda nəşriniz 404 olacaq.
• Yerli olaraq işləyən, lakin istehsalda 404 olan resurs yolları. İşləyən GLB, toxuma və ya səs faylları üçün nisbi yollardan və ya Vite import.meta.env.BASE_URL köməkçisindən istifadə edin. Sabit /assets/... yolları adətən işləyir, lakin kopyalanmış mütləq Windows yolları mütləq işləməyəcək.
• Pointer lock və ya audio context-i bloklayan CSP başlığı. Birinci şəxs oyunlar pointer lock tələb edir. Səs istifadəçi jesti aktivləşdirilməsini tələb edir. 3D Oyunlar kateqoriyasındakı hər hansı bir bacarıq, bunu idarə etmək üçün vercel.json-də düzgün headers bloku ilə təchiz olunmuşdur. Əgər özünüz sıfırdan yazmısınızsa, bacarığın repozitoriyasından konfiqurasiyanı köçürün.

Nəşr cümə günü işləyir, buna görə də bazar günü pozulduqda, bu həmişə son bir dəyişikliyə görə olur. git bisect sizin dostunuzdur. Hətta daha yaxşısı: hər 30 dəqiqədə bir göndərin ki, pozulmuş commit kiçik olsun.

Tez Tez Verilən Suallar

Vercel pulsuz paketi, oyunum trafik əldə etsə, həqiqətən dəstəkləyəcəkmi?

Bəli, bir həftə sonu nəşri və ilk bir neçə həftə üçün. Pulsuz paket sizə ayda 100 GB bant genişliyi verir, bu da təxminən 5 MB Three.js quruluşunun 20.000 oyununa bərabərdir. Bu həddə çatdıqda, Pro planı ayda $20-dur və sizi 1 TB-a qaldırır. Bir həftə sonu nəşri üçün pulsuzdur. Vibe Skills-dəki bacarıqlar paket ölçüsünü minimuma endirən quruluş konfiqurasiyaları ilə təchiz olunmuşdur ki, bu da pulsuz paketi daha da uzadır.

Vercel-in pulsuz paketində xüsusi domen istifadə edə bilərəmmi?

Bəli. Pulsuz paket avtomatik HTTPS ilə xüsusi domenləri dəstəkləyir. Bir domen alın (Namecheap, Cloudflare Registrar, Porkbun), Vercel-ə yönləndirin və Vercel SSL sertifikatını idarə edəcək. Quraşdırma təxminən 10 dəqiqə çəkir. Əgər domeniniz yoxsa, mənim-oyunum.vercel.app URL-i istənilən platformada paylaşmaq üçün kifayət qədər qısadır.

Bu stack oyun "jam" iştirakı üçün uyğundurmu?

Bəli, və oyun "jam" iştirakı üçün ən yaxşı stacklardan biridir. Əksər "jam"lar (Ludum Dare, GMTK, js13k, GitHub Game Off) veb-də oynanılan istənilən URL-i qəbul edir. *.vercel.app linki hakimler üçün itch.io URL-i kimi işləyir. Bir çox "jam" qalibləri həmitch.io, həm də Vercel-ə nəşr edir - itch.io oyunçu auditoriyası üçün, Vercel isə sürətli kanonik URL kimi.

Başlamazdan əvvəl Three.js bilməliyəmmi?

Cursor-un yazdığını oxumaq və dəyərləri tənzimləmək üçün kifayət qədər JavaScript bilməlisiniz. Three.js-i sıfırdan yazmağa ehtiyacınız yoxdur. Vibe Skills-dəki bacarıqlar mühərrik quruluşunu, kameranı, idarəetməni və quruluş konfiqurasiyasını yaradır. Cursor sizin təsvirlərinizdən oyun kodunu idarə edir.

Bazar günü 19:00-da Vercel quruluşum uğursuz olarsa nə baş verər?

Ən ümumi səbəb TypeScript səhvi və ya ətraf mühit dəyişəninin olmamasıdır. Vercel quruluş logunu səhv xətti vurğulayaraq göstərir. Dashboard-da bir kliklə son işləyən quruluşa qayıdır və onu istehsalata təşviq edir. Hər bir göndərilən dəyişiklik önizləmə nəşri olduğundan, siz heç vaxt işləyən quruluşdan bir commit-dən çox uzaqda olmursunuz. Buna görə də, şənbə və bazar günləri hər 30 dəqiqədə bir göndərmək əhəmiyyətlidir.

Vibe Skills 3D oyun bacarığından kod satıb və ya dəyişdirə bilərəmmi?

Bəli. Vibe Skills-dəki bacarıqlar, kodu Vercel, itch.io, Steam və ya başqa yerdə öz oyununuzda buraxmağa imkan verən kommersiya dostu lisenziya ilə təchiz olunmuşdur. Yaradıcılar bacarığın intellektual mülkiyyətini saxlayır, siz isə üzərində qurulan oyunun intellektual mülkiyyətini saxlayırsınız.

Cursor istifadə etmək istəməsəm nə olar?

Layihə fayllarını redaktə edə bilən istənilən AI redaktoru işləyir. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - onlardan istənilən biri Vibe Skills bacarığından Three.js strukturunu təkmilləşdirə bilər. Bacarığın özü redaktorlardan asılı deyil.

Bu Həftə Sonu Nəşr Edin

Əksər solo developerların heç vaxt 3D oyun nəşr etməməsinin səbəbi mühərrik, janr və ya bacarıq səviyyəsi deyil. Bu, cümə axşamıdır, onlar "bir az daha araşdıracam" və heç vaxt başlamırlar. Növbəti boş həftə sonunuzda dörd mərhələli planı izləyin: Vibe Skills 3D oyun bacarığını quraşdırın, GitHub-a göndərin, Vercel-i qoşun, cümə axşamı 20:00-a qədər nəşr edin, sonra şənbə və bazar günlərini canlı URL-də təkmilləşdirin.

Vercel-də on həftə sonu nəşr edilmiş oyunlardan ibarət portfeliniz, hipotetik altı aylıq xəyal mühərrik layihənizdən daha dəyərlidir. Nəşr olunmuş olan həmişə qalib gəlir. Pulsuz Vercel URL-i bunun sübutudur.

Vibe Skills-də 3D oyun bacarıqlarına baxın →

Three.js təkrarlanan işindən yayın. Vibe Skills-də 3D oyun bacarığı quraşdırın, Vercel-ə göndərin və bazar gecəsinə qədər canlı URL əldə edin.