Cara Merilis Game 3D di Vercel Akhir Pekan Ini (dengan Keterampilan AI)

Vibe Skills

Jelajahi ratusan keahlian siap pakai untuk Claude, Cursor, dan lainnya.

Jelajahi Keahlian

Mulai Gratis Sekarang

Luncurkan Game 3D di Vercel pada Minggu Malam: Panduan 48 Jam

Anda bisa beralih dari malam Jumat yang kosong ke tautan nama-game.vercel.app pada makan malam hari Minggu. Tumpukannya adalah Three.js, Cursor, kemampuan AI dari Vibe Skills, dan tingkatan gratis Vercel. Total biaya akhir pekan: $0. Total infrastruktur yang harus Anda awasi: juga nol.

Ini bukan "buat prototipe di laptop Anda dan sebut selesai". Ini adalah URL publik yang dapat dibuka oleh siapa saja di dunia di peramban, dengan HTTPS, caching tepi, dan domain khusus jika Anda menginginkannya. Kemampuan AI menyediakan kerangka Three.js dan vercel.json yang berfungsi. Cursor menangani siklus iterasi. Vercel menangani peluncuran. Anda menangani desain.

Panduan ini ditujukan untuk pengembang independen, pengode vibe, peserta peretasan, dan siapa pun yang lelah dengan tab localhost:5173 yang setengah jadi. Kami akan membahas mengapa tumpukan ini berfungsi, anatomi peluncuran 48 jam, lima kemampuan game 3D yang dibuat untuk alur kerja, dan langkah demi langkah dari Jumat hingga Minggu.

Vibe Skills

Jelajahi ratusan keahlian siap pakai untuk Claude, Cursor, dan lainnya.

Jelajahi Keahlian

Mulai Gratis Sekarang

Mengapa Vercel + Three.js + Kemampuan AI Adalah Tumpukan Pengembang Solo

Vercel adalah target peluncuran paling malas untuk game Three.js. Dorong ke GitHub, Vercel akan memperhatikan, membangun proyek, dan mengembalikan URL dalam waktu 60 detik. Tidak ada server yang perlu disiapkan, tidak ada file Docker, tidak ada konfigurasi NGINX, tidak ada pengaturan SSL. Bundel Three.js hanyalah aset HTML, JS, dan WebGL statis, yang persis seperti yang dibangun oleh jaringan tepi Vercel untuk disajikan.

Tingkatan gratis mencakup peluncuran akhir pekan dengan nyaman:

• Batas bandwidth 100 GB per bulan. Buatan Three.js berukuran 5 MB pada 10.000 pemutaran adalah 50 GB. Anda akan kehabisan akhir pekan sebelum kehabisan bandwidth.
• Peluncuran statis tanpa batas dengan HTTPS dan subdomain *.vercel.app.
• Dukungan domain kustom pada tingkatan gratis - bawa nama-game.com Anda sendiri jika Anda memilikinya, jika tidak, URL vercel.app gratis dapat dibagikan di setiap platform sosial.
• Pratinjau peluncuran untuk setiap commit - setiap dorongan mendapatkan URL-nya sendiri, jadi Anda dapat membagikan buatan dengan teman dan terus beriterasi tanpa merusaknya.

Tambahkan kemampuan AI dari Vibe Skills dan kode boilerplate juga akan hilang. Pengaturan adegan Three.js, pengontrol pemain, alur pembangunan, dan vercel.json yang siap Vercel dihasilkan dalam satu perintah. Kemudian Cursor mengubah sisa akhir pekan menjadi obrolan di mana Anda menjelaskan gameplay yang Anda inginkan dan menyetel keluarannya. Itulah tumpukan lengkap: kemampuan pasar untuk fondasi, editor AI untuk iterasi, dan Vercel untuk peluncuran. Solo, gratis, dan cepat.

Vibe Skills

Jelajahi ratusan keahlian siap pakai untuk Claude, Cursor, dan lainnya.

Jelajahi Keahlian

Mulai Gratis Sekarang

Anatomi 48 Jam: Konsep Jumat hingga Peluncuran Minggu

Setiap peluncuran akhir pekan yang benar-benar berhasil mengikuti alur yang sama. Triknya adalah merencanakan peluncuran pada hari Jumat, bukan Minggu sore, sehingga enam jam terakhir digunakan untuk pemolesan alih-alih melawan kesalahan pembangunan.

Alasan ini berhasil adalah dorongan Vercel pada hari Jumat. Setelah URL ada, setiap commit Sabtu dan Minggu diluncurkan secara otomatis. Tidak ada "panik peluncuran Minggu malam" karena peluncuran sudah terjadi pada hari Jumat dan telah berjalan secara otomatis sepanjang akhir pekan.

Seperti Apa "Vibe Coding" Game 3D di Vercel

Vibe coding berarti mendeskripsikan apa yang Anda inginkan dalam bahasa Inggris biasa dan membiarkan editor AI menulis kode, lalu mengulanginya. Untuk game Three.js di Vercel, alurnya sangat bersih: setiap perubahan di Cursor berjarak pnpm dev dari umpan balik lokal, lalu git push dari URL pratinjau langsung, lalu otomatis diluncurkan ke produksi pada main.

Akhir pekan Vercel yang dikodekan dengan vibe terlihat seperti ini:

1. Buka folder starter kemampuan di Cursor.
2. Jelaskan sebuah fitur dalam obrolan: "lompat ganda jika spasi ditekan dua kali dalam 200ms".
3. Cursor mengedit file pengontrol. Simpan. pnpm dev dimuat ulang. Anda merasakan lompatan di peramban.
4. Jika terasa pas, git push. Vercel membangun URL pratinjau. Kirimkan ke teman.
5. Gabungkan ke main saat nuansa terkunci. URL produksi diperbarui dalam waktu 60 detik.

AI melakukan pengetikan. Vercel melakukan peluncuran. Anda melakukan nuansa dan desain.

5 Kemampuan Game 3D AI yang Membuat Ini Mungkin di Vibe Skills

Kemampuan ini dibuat untuk alur kerja akhir pekan Vercel + Three.js + Cursor. Masing-masing dilengkapi dengan proyek Three.js berbasis Vite, vercel.json yang berfungsi, pnpm build yang menghasilkan bundel statis yang dapat disajikan Vercel dari tepi, dan jalur peluncuran yang teruji. Semua ada di kategori Game 3D di Vibe Skills.

1. Starter Game Three.js + Vercel

Pilihan default. Menghasilkan adegan Three.js dengan pengontrol pemain, kamera orang ketiga, rig pencahayaan, skybox, dan bidang tanah dengan tabrakan. Dilengkapi dengan vercel.json yang mengatur header caching yang tepat untuk bundel aset Three.js. pnpm dev berjalan secara lokal; satu klik di dasbor Vercel menghubungkan repositori GitHub dan Anda mendapatkan URL langsung.

Terbaik untuk: genre apa pun kecuali 2D murni. Gunakan ini jika Anda belum tahu apa yang Anda bangun.

2. Penjelajah Vercel Orang Pertama

Pengontrol orang pertama yang dipoles (WASD + penguncian pointer mouse + gravitasi + lari + lompat) dengan kait langkah kaki, goyangan kepala, dan vercel.json yang menangani header CSP penguncian pointer dengan benar. Yang ini sering membuat pengembang solo kesulitan dalam produksi. Kemampuan ini menyelesaikannya untuk Anda.

Terbaik untuk: simulasi berjalan, prototipe horor, game naratif, pameran museum.

3. Kit Penembak Arena Peramban

Arena dari atas ke bawah (pengontrol kembar, generator gelombang, AI musuh dasar, sistem proyektil, HUD skor) dengan build yang disetel Vercel yang mengompres aset, memecah kode AI, dan memuat musik secara tertunda. Kait multipemain disertakan; akhir pekan ini meluncurkan pemain tunggal.

Terbaik untuk: penembak arcade, neraka peluru, entri jam yang perlu dimuat dengan cepat di seluler.

4. Platformer Puzzle Vercel

Platformer orang ketiga (lompatan variabel, waktu coyote, deteksi tepi), checkpoint, tiga level stub yang dapat Anda edit di Blender atau dalam kode, dan loop respawn. vercel.json dikonfigurasi untuk pemuatan ulang level yang di-cache tepi secara instan, sehingga pengujian terasa cepat di ponsel.

Terbaik untuk: platformer puzzle, prototipe parkour, eksperimen desain level.

5. Sandbox Mengemudi Vercel

Nuansa mengemudi arcade (kurva akselerasi, fisika drift, lag kamera, medan dasar) dengan mobil low-poly, template trek, dan peluncuran yang disetel untuk mesh medan besar. Preset header HTTP membuat konteks WebGL mulai lebih cepat di Safari, yang secara historis merupakan peramban paling lambat untuk Three.js.

Terbaik untuk: balap arcade, mengemudi off-road, demo nuansa mobil untuk portofolio.

Jelajahi semua kemampuan game 3D di Vibe Skills →

Langkah demi Langkah Jumat-Minggu

Ini adalah jadwal yang tepat. Sesuaikan waktu mulai, tetapi pertahankan urutannya. Tonggak penting adalah peluncuran Vercel pada Jumat malam. Segala sesuatu setelah itu adalah iterasi.

Jumat 18:00 - 20:00: Pilih Kemampuan, Dorong ke GitHub, Hubungkan Vercel

Langkah 1: Pilih kemampuan game 3D di Vibe Skills. Jelajahi kategori Game 3D, pilih yang sesuai dengan genre Anda, dan instal starter ke dalam folder baru. Buka di Cursor. Anda seharusnya melihat adegan Three.js dengan pemain yang bergerak pada pukul 19:00.

Langkah 2: Buat repositori GitHub dan dorong. git init, git remote add, git push. Gunakan slug game Anda sebagai nama repositori (crystal-runner, lunar-fishing, apa pun). Nama repositori seringkali menjadi URL Anda.

Langkah 3: Hubungkan repositori ke Vercel. Masuk ke Vercel dengan GitHub (gratis), klik "Add New Project", pilih repositori. Vercel mendeteksi Vite secara otomatis dan mengonfigurasi build. Klik Deploy. Dalam waktu 60 detik Anda akan mendapatkan URL crystal-runner.vercel.app. Buka di ponsel Anda. Bagikan dengan satu teman. Bilah peluncuran sekarang nol untuk sisa akhir pekan.

Jumat 20:00 - 22:00: Tulis Dokumen Desain

Langkah 4: Jawab lima pertanyaan dalam bahasa Inggris biasa. Buka halaman Notion atau file markdown di dalam repositori dan jawab:

• Apa yang dilakukan pemain setiap 5 detik? (inti loop)
• Apa kondisi menang dan kondisi kalah?
• Berapa lama satu putaran atau satu level?
• Apa daya tarik visualnya? (palet, pencahayaan, referensi gaya)
• Apa satu fitur yang membuatnya berkesan dalam 30 detik?

Langkah 5: Dorong dokumen desain. Dorong ke repositori. Vercel akan kembali meluncurkan. Disiplin untuk mendorong setiap perubahan yang berarti menjaga agar URL langsung tetap jujur.

Sabtu 09:00 - 13:00: Bangun Mekanik Inti

Langkah 6: Ganti mekanik placeholder dengan satu fitur Anda. Ini adalah satu-satunya fitur yang penting. Gunakan obrolan Cursor untuk menggambarkannya ("ketika pemain mengambil kristal, bekukan musuh di sekitar selama 2 detik dan putar denting"). Ulangi secara lokal dengan pnpm dev. Saat terasa pas, dorong.

Langkah 7: Hubungkan status menang/kalah. Bangunan 60 detik dengan akhir yang nyata terasa seperti game. Bangunan 60 menit tanpa akhir terasa seperti demo teknologi. Selalu hubungkan layar kemenangan terlebih dahulu, lalu yang lainnya.

Sabtu 13:00 - 20:00: Tambahkan Satu Level

Langkah 8: Bangun satu level yang dipoles. Bukan tiga yang setengah matang. Gunakan kubus placeholder untuk geometri. Gunakan karakter stok kemampuan. Setel nuansa - ketinggian lompatan, lag kamera, intensitas partikel.

Langkah 9: Tambahkan overlay tutorial. Popup dua kalimat "WASD untuk bergerak, klik untuk menembak" saat pertama kali diluncurkan menyelamatkan peluncuran Anda dari pemain yang bingung yang menyerah dalam 8 detik. Cursor dapat menghasilkan overlay React (atau DOM biasa) dalam 30 detik.

Langkah 10: Dorong setiap jam. Setiap dorongan mendapatkan URL pratinjau Vercel. Kirimkan masing-masing ke teman. Umpan balik adalah senjata rahasia dari tumpukan ini.

Minggu 10:00 - 16:00: Poles

Langkah 11: Tambahkan tiga suara. Loop langkah kaki, pad ambien, bunyi kemenangan. Bahkan tiga suara meningkatkan prototipe akhir pekan secara dramatis. Sumber gratis: freesound.org, opengameart.org.

Langkah 12: Tambahkan sentuhan akhir. Partikel saat terkena, guncangan layar saat benturan, popup angka saat skor. Sentuhan akhir adalah apa yang membuat bangunan 48 jam terlihat seperti bangunan 6 bulan dalam GIF. Mintalah Cursor untuk menambahkan "guncangan layar dengan intensitas 0,3 selama 150 ms saat pemain menerima kerusakan" - ia akan menulis kait guncangan kamera dalam lima detik.

Langkah 13: Jalankan pemeriksaan Lighthouse. Buka URL Vercel di ponsel dan jalankan Chrome DevTools Lighthouse. Bundel Three.js biasanya sekitar 400 KB hingga 1,5 MB. Jika Anda melebihi 3 MB, minta Cursor untuk mengaktifkan pemisahan kode pada modul berat. Kompresi gzip dan brotli Vercel akan menangani sisanya.

Langkah 14: Pemeriksaan bug. Mainkan URL langsung Anda lima kali berturut-turut. Perbaiki apa pun yang rusak dua kali. Abaikan apa pun yang rusak sekali.

Minggu 16:00 - 20:00: Luncurkan

Langkah 15: (Opsional) Atur domain kustom. Jika Anda membeli nama-game.com sebelumnya, tambahkan di pengaturan proyek Vercel. SSL otomatis. Jika tidak, URL *.vercel.app sudah cukup - ia memiliki HTTPS, dapat dibagikan, dan dimuat di mana saja.

Langkah 16: Rekam GIF 15 detik dari momen terbaik. Gunakan URL langsung, bukan localhost. GIF adalah apa yang akan diklik di Twitter, Bluesky, dan Reddit.

Langkah 17: Buat halaman itch.io (opsional tetapi berdaya ungkit tinggi). Judul, tagline satu baris, tiga tangkapan layar, GIF, kontrol, kredit, dan sematan iframe *.vercel.app Anda (itch.io mendukung sematan iframe untuk game HTML5). Sekarang Anda punya dua URL - satu untuk berbagi santai dan satu untuk audiens gamer.

Langkah 18: Posting tautan. Twitter, Bluesky, Discord komunitas pengembang Anda, r/IndieDev, r/threejs, r/WebGames. Selalu mulai dengan GIF. Selalu sertakan URL. Jika Anda menggunakan kemampuan Vibe Skills, sebutkan dalam postingan log pengembang - pengembang lain yang membaca akan menginginkan starter yang sama.

Cara Menghindari Tiga Kegagalan Peluncuran Vercel Paling Umum

Tiga hal yang hampir selalu merusak akhir pekan Three.js + Vercel solo. Ketiganya adalah perbaikan 5 menit jika Anda menemukannya pada Jumat malam, dan lubang kelinci 5 jam jika Anda menemukannya pada Minggu pukul 19:00.

• Direktori output build salah. Vite default ke dist/. Vercel mendeteksi Vite secara otomatis dan menggunakan dist/. Jika Anda menyesuaikan output, atur outputDirectory di vercel.json atau pengaturan proyek atau peluncuran Anda akan menjadi 404.
• Jalur aset yang berfungsi secara lokal tetapi menghasilkan 404 di produksi. Gunakan jalur relatif atau pembantu Vite import.meta.env.BASE_URL untuk GLB, tekstur, atau file audio apa pun yang dimuat saat runtime. Jalur /assets/... yang dikodekan keras biasanya berfungsi, tetapi jalur Windows absolut yang disalin-tempel pasti tidak akan berfungsi.
• Header CSP yang memblokir penguncian pointer atau konteks audio. Game orang pertama membutuhkan penguncian pointer. Audio memerlukan aktivasi gerakan pengguna. Kemampuan apa pun dari kategori Game 3D dilengkapi dengan blok headers yang tepat di vercel.json untuk menangani ini. Jika Anda menulis sendiri dari awal, salin konfigurasi dari repositori kemampuan.

Peluncuran berfungsi pada hari Jumat, jadi ketika ini rusak pada hari Minggu, itu selalu karena perubahan baru-baru ini. git bisect adalah teman Anda. Lebih baik lagi: terus dorong setiap 30 menit sehingga commit yang rusak kecil.

Pertanyaan yang Sering Diajukan

Apakah tingkatan gratis Vercel benar-benar akan bertahan jika game saya mendapatkan lalu lintas?

Ya, untuk peluncuran akhir pekan dan beberapa minggu pertama. Tingkatan gratis memberi Anda batas bandwidth 100 GB per bulan, yang kira-kira setara dengan 20.000 pemutaran buatan Three.js berukuran 5 MB. Jika Anda mencapai batas itu, paket Pro berharga $20/bulan dan meningkatkan Anda menjadi 1 TB. Untuk peluncuran akhir pekan, gratis sudah lebih dari cukup. Kemampuan di Vibe Skills dilengkapi dengan konfigurasi build yang meminimalkan ukuran bundel, yang membuat tingkatan gratis bertahan lebih lama.

Bisakah saya menggunakan domain kustom pada tingkatan Vercel gratis?

Ya. Tingkatan gratis mendukung domain kustom dengan HTTPS otomatis. Beli domain (Namecheap, Cloudflare Registrar, Porkbun), arahkan ke Vercel, dan Vercel akan menangani sertifikat SSL. Pengaturannya memakan waktu sekitar 10 menit. Jika Anda tidak memiliki domain, URL nama-game.vercel.app cukup pendek untuk dibagikan di platform apa pun.

Apakah tumpukan ini cocok untuk pengiriman jam permainan?

Ya, dan ini adalah salah satu tumpukan terbaik untuk pengiriman jam permainan. Sebagian besar jam permainan (Ludum Dare, GMTK, js13k, GitHub Game Off) menerima URL yang dapat dimainkan di web apa pun. Tautan *.vercel.app berfungsi sama seperti URL itch.io untuk juri. Banyak pemenang jam permainan meluncurkan ke keduanya - itch.io untuk audiens gamer, Vercel sebagai URL kanonik yang cepat.

Apakah saya perlu mengetahui Three.js sebelum memulai?

Anda memerlukan cukup JavaScript untuk membaca apa yang ditulis Cursor dan menyetel nilai. Anda tidak perlu menulis Three.js dari awal. Kemampuan di Vibe Skills menghasilkan pengaturan mesin, kamera, pengontrol, dan konfigurasi build. Cursor menangani kode gameplay dari deskripsi Anda.

Apa yang terjadi jika build Vercel saya gagal pada Minggu pukul 19:00?

Penyebab paling umum adalah kesalahan TypeScript atau variabel lingkungan yang hilang. Vercel menampilkan log build dengan baris yang gagal disorot. Satu klik di dasbor akan mengembalikan ke peluncuran yang terakhir berfungsi dan mempromosikannya ke produksi. Karena setiap dorongan adalah pratinjau peluncuran, Anda tidak pernah lebih dari satu commit dari build yang berfungsi. Inilah sebabnya mengapa mendorong setiap 30 menit pada hari Sabtu dan Minggu itu penting.

Bisakah saya menjual atau memodifikasi kode dari kemampuan game 3D Vibe Skills?

Ya. Kemampuan di Vibe Skills dilengkapi dengan lisensi yang ramah komersial yang memungkinkan Anda merilis kode dalam game Anda sendiri di Vercel, itch.io, Steam, atau di mana pun. Kreator menyimpan IP kemampuan, Anda menyimpan IP game yang dibuat di atasnya.

Bagaimana jika saya tidak ingin menggunakan Cursor?

Editor AI apa pun yang dapat mengedit file proyek berfungsi. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - salah satunya dapat mengulang kerangka Three.js dari kemampuan Vibe Skills. Kemampuan itu sendiri tidak bergantung pada editor.

Luncurkan Akhir Pekan Ini

Alasan mengapa sebagian besar pengembang solo tidak pernah meluncurkan game 3D bukanlah mesinnya, genrenya, atau tingkat kesulitannya. Ini adalah Jumat malam di mana mereka "hanya meneliti sedikit lebih banyak" dan tidak pernah memulai. Akhir pekan gratis berikutnya yang Anda miliki, ikuti rencana empat fase: instal kemampuan game 3D Vibe Skills, dorong ke GitHub, hubungkan Vercel, luncurkan pada Jumat pukul 20:00, lalu habiskan Sabtu dan Minggu untuk beriterasi pada URL langsung.

Portofolio sepuluh game yang diluncurkan akhir pekan di Vercel lebih berharga daripada proyek mesin impian enam bulan hipotetis Anda. Yang diluncurkan selalu menang. URL Vercel gratis adalah buktinya.

Jelajahi kemampuan game 3D di Vibe Skills →

Lewati maraton boilerplate Three.js. Instal kemampuan game 3D di Vibe Skills, dorong ke Vercel, dan dapatkan URL langsung pada Minggu malam.